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

Revision as of 19:03, 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 and 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

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

Revision as of 19:03, 31 March 2017

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ Line 14: / Line 14: @@
 | 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;"| Opening Slide
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Welcome to the Spoken Tutorial on '''“Rocket animation” '''using '''Synfig.'''
 |-
@@ Line 23: / Line 20: @@
 * Fire effect
-* Noise gradient
+* Noise gradient and
 * Feather effect
 We will also learn to do a rocket animation.
 |-
@@ Line 39: / Line 33: @@
 * '''Ubuntu Linux''' 14.04 OS
 * '''Synfig''' version 1.0.2
 |-
 | 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;"| Open Synfig
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Let us open '''Synfig.'''
 |-
@@ Line 54: / Line 43: @@
 I have created this image in '''Inkscape.'''
 |-
 | 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.<br/>
+| 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/>
 |-
@@ Line 79: / Line 62: @@
 Reduce the image size as shown, by moving the orange dot in the inward direction.
 |-
@@ Line 102: / Line 82: @@
 Select''' New layer, '''choose '''Gradient '''and then click on '''Noise Gradient.'''
 |-
 | 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,''' click on the '''Gradient parameter.'''
 |-
@@ Line 118: / Line 92: @@
-Change the '''RGB''' values to '''100, 4 and 7.'''
+Change the '''RGB''' values to '''100, 4''' and '''7.'''
 |-
 | 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 and 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.
 After that, close the dialog box.
 |-
@@ Line 139: / Line 107: @@
 Change the width to 20. Let the height remain the same.
 |-
@@ Line 154: / Line 119: @@
 In the '''Parameters panel,''' select '''RandomNoiseSeed parameter.'''
 |-
@@ Line 164: / Line 126: @@
 I will delete 7 and add 5. Go to '''Zeroth frame.'''
 |-
@@ Line 177: / Line 136: @@
 Then click on '''Turn off Animate Editing mode icon.'''
 |-
@@ Line 193: / Line 149: @@
 Then select the '''Transform tool.'''
 |-
@@ Line 203: / Line 156: @@
 Change this name to '''Orange-fire.'''
 |-
@@ Line 218: / Line 168: @@
 Then in the '''Parameters panel,''' change the '''Feather value''' to''' 20.'''
 |-
 | 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;"| Press '''Ctrl + S '''
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Press '''Ctrl '''and '''S '''keys to save the file.
 |-
 | 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;"| Click on '''Turn on Animate Editing mode icon.'''
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Click on '''Turn on Animate Editing mode icon. '''
 |-
@@ Line 242: / Line 183: @@
 Then adjust the nodes of the fire, as shown.
 |-
@@ Line 252: / Line 190: @@
 Next we will loop this fire animation.
 |-
@@ Line 271: / Line 206: @@
 In the '''Parameters panel, '''change the '''Duration parameter''' to '''12.'''
 |-
@@ Line 294: / Line 226: @@
 Duplicate the '''Orange-fire 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;"| Click on '''Turn off Animate Editing mode icon.'''
 Duplicate the '''Orange-fire group layer.'''
 |-
@@ Line 312: / Line 238: @@
 | 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 '''Noise gradient'''
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Click on the dropdown list and select the '''Noise gradient. '''
 |-
 | 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, '''click on '''Gradient parameter.'''
 |-
@@ Line 328: / Line 248: @@
 Right '''Gradient''' to''' 100, 100, 40'''
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Change the RGB values of
 * the left '''Gradient''' to''' 100, 55, 0''' and
 * the right '''Gradient''' to''' 100, 100 '''and''' 40'''
 |-
 | 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;"| Point to the '''Noise gradient'''
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Now we get a yellowish orange '''Noise gradient.'''
 |-
@@ Line 351: / Line 263: @@
 Then move it a little up.
 |-
 | 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;"| Group both 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;"| Now group both the yellow and orange fire group layers.
 |-
@@ Line 368: / Line 274: @@
 Now move this '''group layer''' below the '''Rocket group layer.'''
 |-
@@ Line 385: / Line 288: @@
 So group both the '''Rocket''' and '''Fire group layers.''' Then change the name to '''Rocket-animation.'''
 |-
 | 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 '''zeroth frame >> '''Place the rocket 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;"| Go to '''zeroth frame.''' Place the rocket outside the '''canvas''' as shown.
 |-
@@ Line 405: / Line 302: @@
 Now go to '''30<sup>th</sup> frame '''and move the rocket inside the '''canvas,''' as shown.
 |-
 | 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 '''60<sup>th</sup> frame >> '''Move the rocket a little above
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Then go to '''60<sup>th</sup> frame '''and move the rocket a little above as shown.
 |-
@@ Line 425: / Line 316: @@
 Click on '''Turn off Animate Editing mode icon.'''
 |-
@@ Line 441: / Line 329: @@
 The animation is as expected.
 |-
@@ Line 451: / Line 336: @@
 Now draw a rectangle covering the whole '''canvas.'''
 |-
@@ Line 471: / Line 353: @@
 | 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 below the '''Rocket-animation group layer.'''
 |-
@@ Line 496: / Line 375: @@
-Now click''' '''on''' Render.'''
+Now click on''' Render.'''
 |-
@@ Line 522: / Line 401: @@
 Let us summarize.
-In this tutorial we learnt to create
+In this tutorial we learnt to create-
 * Fire effect
@@ Line 538: / Line 417: @@
 * Create a wood fire animation
 * The wood image is provided to you in the Code files link
 |-
@@ Line 561: / Line 438: @@
 | 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;"| Spoken Tutorial Forum slide
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.034in;padding-right:0.0382in;"| Please post your timed queries in this forum.
 |-
@@ Line 570: / Line 444: @@
-More information on this mission is available at
+More information on this mission is available at this link.
-this link.
 |-