Difference between revisions of "Synfig/C3/Rocket-animation/English"

Revision as of 16:33, 31 March 2017

Title of script: Rocket animation

Author: Arthi. A

Keywords: Synfig, Fire effect, Cut out animation, Noise Gradient, Feather effect

Visual cue	Narration
Opening Slide	Welcome to the Spoken Tutorial on “Rocket animation” using Synfig.
Learning Objectives (Slide)	In this tutorial, we will learn to create Fire effect Noise gradient Feather effect We will also learn to do a rocket animation.
System requirements (Slide)	To record this tutorial, I am using Ubuntu Linux 14.04 OS Synfig version 1.0.2
Open Synfig	Let us open Synfig.
Point to the rocket image	I have a rocket image in my Documents folder. I have created this image in Inkscape.
Slide	* This image has been provided to you in the Code files link.
Go to File >> Import	Let us import the image. Go to File and click on Import.
Select rocket image >> Import	Select the Rocket image and click on Import.
Resize the image	Group the Rocket.png layer. Name the group layer as Rocket. Reduce the image size as shown, by moving the orange dot in the inward direction.
Press Ctrl + S >> Change the filename to Rocket-animation	Let us now save our file by pressing Ctrl and S keys. I will save the file on the Desktop. And give the filename as Rocket-animation. <<PAUSE>>
Layers panel>> New layer >> Gradient >> Noise Gradient	Now, go to the Layers panel and right-click on the Rocket group layer. Select New layer, choose Gradient and then click on Noise Gradient.
Parameters panel >> Gradient parameter	In the Parameters panel, click on the Gradient parameter.
Select the right Gradient icon >> Change the RGB values to 100, 4, 7	In Gradient Editor dialog box, select the right Color stop icon. Change the RGB values to 100, 4 and 7.
Select the left Gradient icon >> Change the RGB values to 100, 70, 40	Now select the left Color stop icon and change the RGB values to 100, 70 and 40 respectively. After that, close the dialog box.
Select the Size parameter >> Change the width to 20	Now come to the Parameters panel, and select the Size parameter. Change the width to 20. Let the height remain the same.
Click on Turn on Animate Editing mode icon Parameters panel >> RandomNoiseSeed parameter	Then click on Turn on Animate Editing mode icon. Go to 120^th frame. In the Parameters panel, select RandomNoiseSeed parameter.
Go to 120^th frame >> Delete 7 and add 5	Here change the value randomly. I will delete 7 and add 5. Go to Zeroth frame.
Click on Play Click on Turn off Animate Editing mode icon	Now click on the Play button to check the animation. Then click on Turn off Animate Editing mode icon.
Select the Cutout tool >> Cut the fire effect Transform tool	Let us now cut the fire effect in the shape of fire that blows from a rocket. Select the Cutout tool and cut the fire effect as shown. Then select the Transform tool.
Layers panel >> Change the name to Orange-fire	Observe in the Layers panel, a group layer is created named as Cut. Change this name to Orange-fire.
Click on the drop down list Mask layer >> Parameters panel >> Change the Feather value to 20	Click on the drop down list of Orange-fire group layer. Select the Mask layer. Then in the Parameters panel, change the Feather value to 20.
Press Ctrl + S	Press Ctrl and S keys to save the file.
Click on Turn on Animate Editing mode icon.	Click on Turn on Animate Editing mode icon.
Go to 3^rd frame >> Add a keyframe >> Adjust nodes	Go to 3^rd frame and add a Keyframe in the Keyframes panel. Then adjust the nodes of the fire, as shown.
Go to 6^th frame >> Duplicate zeroth frame >> Right click on Fire cut group layer	Now go to the 6^th frame and duplicate the zeroth frame. Next we will loop this fire animation.
Right click on Mask layer New layer >> Other >> Time loop Parameters panel >> Duration parameter to 12	Right-click on the Mask layer. Select New layer, then on Other and lastly on Time loop. In the Parameters panel, change the Duration parameter to 12.
Click on Only for Positive Duration	Select the check-box that says Only for Positive Duration.
Click on Play	Now, click on Play button to check the animation. <<PAUSE>> What we see is ok for now. Let’s proceed.
Click on Turn off Animate Editing mode icon Duplicate the Orange-fire group layer	Click on Turn off Animate Editing mode icon. Duplicate the Orange-fire group layer.
Change the name to Yellow-fire	Change the name to Yellow-fire.
Select the Noise gradient	Click on the dropdown list and select the Noise gradient.
Parameters panel >> Gradient parameter	In the Parameters panel, click on Gradient parameter.
Left Gradient to 100, 55, 0 Right Gradient to 100, 100, 40	Change the RGB values of the left Gradient to 100, 55, 0 and the right Gradient to 100, 100 and 40
Point to the Noise gradient	Now we get a yellowish orange Noise gradient.
Reduce the fire size	Using the orange dot in the handle, reduce the size of the yellow fire, as shown. Then move it a little up.
Group both the layers	Now group both the yellow and orange fire group layers.
Change the name to Fire >> Move the layer below Rocket group layer	Change the group name to Fire. Now move this group layer below the Rocket group layer.
Move the fire below the canvas	In the canvas, move the fire objects to the bottom of the rocket.
Group both the Rocket and Fire group layers Change the name to Rocket-animation	Let us now animate the rocket along with the fire. So group both the Rocket and Fire group layers. Then change the name to Rocket-animation.
Go to zeroth frame >> Place the rocket below the canvas	Go to zeroth frame. Place the rocket outside the canvas as shown.
Click on Turn on Animate Editing mode icon Go to 30^th frame >> Move the rocket inside the canvas	Click on Turn on Animate Editing mode icon. Now go to 30^th frame and move the rocket inside the canvas, as shown.
Go to 60^th frame >> Move the rocket a little above	Then go to 60^th frame and move the rocket a little above as shown.
Go to 120^th frame Click on Turn off Animate Editing mode icon	Finally go to 120^th frame and move the rocket above the canvas. Click on Turn off Animate Editing mode icon.
Click on the Play button	Now the rocket animation is complete. Go to Zeroth frame. Click on the Play button to check the animation. The animation is as expected.
Rectangle tool >> Draw a rectangle	Select the Rectangle tool. Now draw a rectangle covering the whole canvas.
Transform tool Change the layer name to BG	If the color of the rectangle is not black, then change it to black. Select the Transform tool. Change the layer name to BG.
Move the layer to bottom	Move this layer below the Rocket-animation group layer.
Press Ctrl + S	Lastly press Ctrl and S keys to save the file. Now we will render the animation.
Go to File >> Render	Go to File and click on Render.
Point to Desktop Change the extension to avi, Target to ffmpeg >> Render	I will save the output on the Desktop. Change the extension to avi and Target to ffmpeg. Now click on Render.
Desktop >> Play the animation using Firefox web browser	We will now check our animation. Go to Desktop. Right-click on the output file and play using Firefox web browser.
Rocket animation on Firefox web browser	Our rocket animation looks like this. <<PAUSE>>
Summary (Slide)	With this we have come to the end of this tutorial. Let us summarize. In this tutorial we learnt to create Fire effect Noise gradient Feather effect We also learnt to do a rocket animation.
Assignment (Slide)	Here is an assignment for you- Create a wood fire animation The wood image is provided to you in the Code files link
Completed assignment	Your completed assignment should look like this.
About project slide	This video summarizes the Spoken Tutorial project. Please download and watch it.
Workshop slide	The Spoken Tutorial Project team conducts workshops and gives certificates on passing online tests. For more details, please write to us.
Spoken Tutorial Forum slide	Please post your timed queries in this forum.
Acknowledgment	Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India. More information on this mission is available at this link.
Acknowledgment	This is Arthi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off. Thanks for joining.

Contributors and Content Editors

Arthi, Nancyvarkey

@@ Line 60: / Line 60: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| Slide
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| * This image has been provided to you in the '''Code files''' link.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| * This image has been provided to you in the '''Code files''' link.<br/>
-* Please download and use it.
@@ Line 71: / Line 71: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| Select rocket image >> Import
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Select the '''Rocket''' image and click on import.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Select the '''Rocket''' image and click on '''Import. '''
 |-
@@ Line 108: / Line 108: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| '''Parameters panel >> Gradient parameter'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| In the '''Parameters panel,''' double click on the '''Gradient parameter.'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| In the '''Parameters panel,''' click on the '''Gradient parameter.'''
@@ Line 118: / Line 118: @@
-Change the '''RGB''' values to '''100, 4, 7.'''
+Change the '''RGB''' values to '''100, 4 and 7.'''
@@ Line 125: / Line 125: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| Select the left '''Gradient icon >> '''Change the '''RGB''' values to''' '''100, 70, 40
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Now select the left '''Color stop''' '''icon''' and change the '''RGB''' values to '''100, 70, 40''' respectively.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Now select the left '''Color stop''' '''icon''' and change the '''RGB''' values to '''100, 70 and 40''' respectively.
@@ Line 160: / Line 160: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| Go to '''120<sup>th</sup> frame >> '''Delete 7 and add 5
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Here change the value randomly
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Here change the value randomly.
@@ Line 248: / Line 248: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| Go to '''6<sup>th</sup> frame''' >> Duplicate '''zeroth frame >>''' Right click on''' Fire cut group layer '''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Now go the''' 6<sup>th</sup> frame''' and duplicate the '''zeroth frame.'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Now go to the''' 6<sup>th</sup> frame''' and duplicate the '''zeroth frame.'''
@@ Line 270: / Line 270: @@
-In the '''Parameters panel, '''we will change the '''Duration parameter''' to '''12.'''
+In the '''Parameters panel, '''change the '''Duration parameter''' to '''12.'''
@@ Line 318: / Line 318: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| '''Parameters panel >> Gradient parameter'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| In the '''Parameters panel, '''double click on '''Gradient parameter.'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| In the '''Parameters panel, '''click on '''Gradient parameter.'''
@@ Line 334: / Line 334: @@
 * the left '''Gradient''' to''' 100, 55, 0''' and
-* the right '''Gradient''' to''' 100, 100, 40'''
+* the right '''Gradient''' to''' 100, 100 '''and''' 40'''
@@ Line 367: / Line 367: @@
-Now move this group layer below the '''Rocket group layer.'''
+Now move this '''group layer''' below the '''Rocket group layer.'''
@@ Line 374: / Line 374: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| Move the fire below the '''canvas'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| In the '''canvas,''' move the fire objects to the bottom of the rocket and reduce the size.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| In the '''canvas,''' move the fire objects to the bottom of the rocket.
 |-
@@ Line 450: / Line 447: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| '''Rectangle tool >> '''Draw a rectangle
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Come back and select the '''Rectangle tool.'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Select the '''Rectangle tool.'''
@@ Line 466: / Line 463: @@
-Select the '''Transform tool'''
+Select the '''Transform tool.'''
 Change the layer name to '''BG. '''
@@ Line 472: / Line 470: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.075in;"| Move the layer to bottom
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Move this layer to the bottom most in the list of all the layers.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Move this layer below the '''Rocket-animation group layer.'''

Difference between revisions of "Synfig/C3/Rocket-animation/English"

Revision as of 16:33, 31 March 2017

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools