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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script:''' Rocket animation '''Author:''' Arthi. A '''Keywords:''' Synfig, Fire effect, Cut out animation, Noise Gradient, Feather effect {| style="border-spa...")
 
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-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-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-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-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-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-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-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 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-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-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. '''
 
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-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.'''
  
  

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 120th frame.


In the Parameters panel, select RandomNoiseSeed parameter.



Go to 120th 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 3rd frame >> Add a keyframe >> Adjust nodes Go to 3rd frame and add a Keyframe in the Keyframes panel.


Then adjust the nodes of the fire, as shown.



Go to 6th frame >> Duplicate zeroth frame >> Right click on Fire cut group layer Now go to the 6th 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 30th frame >> Move the rocket inside the canvas

Click on Turn on Animate Editing mode icon.


Now go to 30th frame and move the rocket inside the canvas, as shown.



Go to 60th frame >> Move the rocket a little above Then go to 60th frame and move the rocket a little above as shown.



Go to 120th frame


Click on Turn off Animate Editing mode icon

Finally go to 120th 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