Difference between revisions of "Synfig/C3/Rocket-animation/English"
Nancyvarkey (Talk | contribs) |
|||
Line 33: | Line 33: | ||
* '''Ubuntu Linux''' 14.04 OS | * '''Ubuntu Linux''' 14.04 OS | ||
* '''Synfig''' version 1.0.2 | * '''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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Open Synfig | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Open Synfig | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Let us open '''Synfig.''' | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Let us open '''Synfig.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Point to the rocket image | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Point to the rocket image | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| I have a rocket image in my''' Documents folder. ''' | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| I have a rocket image in my''' Documents folder. ''' |
− | + | ||
− | + | ||
+ | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Go to '''File >> 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Go to '''File >> Import''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Let us import the image. | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Let us import the image. |
− | + | ||
− | + | ||
+ | Go to '''File.''' Click on '''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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Select rocket image >> Import | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| |
− | + | Select the '''Rocket''' image. Click on '''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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Resize the image | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Resize the image | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Group the rocket image. Name the group layer as '''Rocket. ''' | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Group the '''rocket''' image. Name the '''group layer''' as '''Rocket. ''' |
Using the orange dot in the handle, reduce the size of the image as shown. | Using the orange dot in the handle, reduce the size of the image as shown. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 81: | Line 69: | ||
I will save the file in the '''Desktop.''' Change the filename to '''Rocket-animation.''' | I will save the file in the '''Desktop.''' Change the filename to '''Rocket-animation.''' | ||
− | + | Click on '''Save'''. | |
<<PAUSE>> | <<PAUSE>> | ||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Change '''Fill color''' to white >> '''Outline color''' to black | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Change '''Fill color''' to white >> '''Outline color''' to black | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Now, let us create the fire. | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Now, let us create the fire. |
− | + | ||
− | + | ||
+ | Change the '''Fill color''' to black and the '''Outline color''' to white. | ||
|- | |- | ||
Line 96: | Line 83: | ||
− | Select '''New layer,''' | + | Select '''New layer,''' click on '''Gradient''' and then on '''Noise Gradient.''' |
A black and white noise gradient is created on the''' canvas.''' | A black and white noise gradient is created on the''' canvas.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 120: | Line 104: | ||
Observe a black and white linear gradient is created on the '''canvas. ''' | Observe a black and white linear gradient is created on the '''canvas. ''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 130: | Line 111: | ||
Change the layer name to '''BW-Gradient.''' | Change the layer name to '''BW-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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| '''Parameters panel >> Blend method '''to''' Subtract''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| '''Parameters panel >> Blend method '''to''' Subtract''' | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| In the '''Parameters panel''', change the '''Blend method''' to '''Subtract.''' | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| In the '''Parameters panel''', change the '''Blend method''' to '''Subtract.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Select''' 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Select''' Rectangle tool '''>> Draw a rectangle | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Select the '''Rectangle tool.''' Draw a rectangle covering the whole '''canvas.''' | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Select the '''Rectangle tool.''' Draw a rectangle covering the whole '''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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| '''Transform tool''' >> Change the layer name to '''Orange''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| '''Transform tool''' >> Change the layer name to '''Orange''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Click on the '''Transform tool''' and change the layer name to '''Orange.''' | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Click on the '''Transform tool''' and change the '''layer''' name to '''Orange.''' |
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Point to the 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Point to the rectangle | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Now, let us change the color of the rectangle to warm orange. | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Now, let us change the color of the rectangle to warm orange. | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Click on the''' Color parameter >> '''Change '''RGB '''values to 100, 55 and 10 respectively | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Click on the''' Color parameter >> '''Change '''RGB '''values to 100, 55 and 10 respectively | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| In the '''Parameters panel, '''click on the '''Color parameter. '''Change the '''RGB''' values to 100, 55 and 10 respectively. | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| In the '''Parameters panel, '''click on the '''Color parameter. ''' |
+ | |||
+ | Change the '''RGB''' values to 100, 55 and 10 respectively. | ||
Close the dialog box. | Close the dialog box. | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Change the '''Blend method''' to '''Color''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Change the '''Blend method''' to '''Color''' | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Again in the '''Parameters panel,''' change the '''Blend method''' to '''Color.''' | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Again in the '''Parameters panel,''' change the '''Blend method''' to '''Color.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Group''' Noise gradient '''>> Change name to''' Moving-base''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Group''' Noise gradient '''>> Change name to''' Moving-base''' | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Group the''' Noise gradient''' layer. Change the name to '''Moving-base.''' | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Group the''' Noise gradient''' layer. Change the name to '''Moving-base.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| '''Parameters panel >> Origin >>Convert >> Linear''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| '''Parameters panel >> Origin >>Convert >> Linear''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| In the '''Parameters panel,''' right click on '''Origin.''' | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| In the '''Parameters panel,''' right click on '''Origin.''' |
− | + | ||
− | + | ||
+ | Click on''' Convert''' and then on '''Linear.''' | ||
|- | |- | ||
Line 198: | Line 156: | ||
− | Change the '''Slope '''values | + | Change the '''Slope '''values to''' 0,-100 '''and '''Offset '''values to''' 0, 100 '''respectively. |
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
Line 209: | Line 164: | ||
Click on the '''Play''' button to check the effect. | Click on the '''Play''' button to check the effect. | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Point to the fire | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Point to the fire | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Next let us cut the effect according the size of the rocket. | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Next let us cut the effect according the size of the rocket. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 226: | Line 175: | ||
Change the name to '''Fire.''' | Change the name to '''Fire.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Press '''Ctrl + S ''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Press '''Ctrl + S ''' | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Press '''Ctrl '''and '''S '''keys to save the file. | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Press '''Ctrl '''and '''S '''keys to save the file. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 243: | Line 186: | ||
Cut the fire effect as shown. Observe the group layer name has changed to''' Fire cut. ''' | Cut the fire effect as shown. Observe the group layer name has changed to''' Fire cut. ''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 256: | Line 196: | ||
Move this layer below the '''Rocket layer. ''' | Move this layer below the '''Rocket 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Select '''Mask layer>> Parameters panel >>''' Change''' Feather parameter '''to''' 25.''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Select '''Mask layer>> Parameters panel >>''' Change''' Feather parameter '''to''' 25.''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Click on the drop down list. | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Click on the drop down list. Select the '''Mask layer'''. |
+ | |||
+ | Now we can adjust the''' nodes.''' | ||
In the '''Parameters panel, '''Change the''' Feather parameter '''to''' 25.''' | In the '''Parameters panel, '''Change the''' Feather parameter '''to''' 25.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Point to the fire | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Point to the fire | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Observe the feather effect is applied to the fire. | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Observe the feather effect is applied to the fire. | ||
− | |||
− | |||
− | |||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Click on '''Turn on animate editing mode''' icon | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Click on '''Turn on animate editing mode''' icon | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| We will now animate the fire. Click on '''Turn on animate editing mode''' icon. | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| We will now animate the fire. Click on '''Turn on animate editing mode''' icon. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 290: | Line 220: | ||
Adjust the nodes of the fire as shown. | Adjust the nodes of the fire 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Now go the 6<sup>th</sup> frame. In the '''Keyframes panel, '''Duplicate the ''' | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Now go the 6<sup>th</sup> frame. In the '''Keyframes panel, '''Duplicate the '''zeroeth frame.''' |
Next we will loop this fire animation. So, right click on the '''Fire cut group layer.''' | Next we will loop this fire animation. So, right click on the '''Fire cut group layer.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 313: | Line 237: | ||
In the '''Parameters panel, '''change the '''Duration parameter''' to '''12.''' | In the '''Parameters panel, '''change the '''Duration parameter''' to '''12.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 323: | Line 244: | ||
Click on '''Play''' button to check the animation. | Click on '''Play''' button to check the 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Group all layers >> Change the name to '''Rocket''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Group all layers >> Change the name to '''Rocket''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Next, let us animate the rocket. So, group all the layers. | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Next, let us animate the rocket. So, group all the '''layers'''. |
Change the '''Group layer '''name to '''Rocket. ''' | Change the '''Group layer '''name to '''Rocket. ''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 342: | Line 257: | ||
Go to 100<sup>th</sup> frame >> Move the rocket to the top | Go to 100<sup>th</sup> frame >> Move the rocket to the top | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Go to ''' | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Go to '''zeroeth frame.''' Move the rocket to the bottom of the '''canvas '''as shown. |
Now go to 100<sup>th</sup> frame. Move the rocket to the top of the '''canvas.''' | Now go to 100<sup>th</sup> frame. Move the rocket to the top of the '''canvas.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 355: | Line 267: | ||
− | Let us add a background image now, which I created in | + | Let us add a background image now, which I created in '''Inkscape'''. |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | I have saved this image in '''Documents''' folder. | ||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Change the layer name to '''BG ''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Change the layer name to '''BG ''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Go to File. Click on | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Go to '''File'''. Click on '''Import'''. |
Move the layer below the '''Rocket group layer.''' | Move the layer below the '''Rocket 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Press '''Ctrl + S''' | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Press '''Ctrl + S''' | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Press '''Ctrl '''and '''S '''keys to save the file. | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Press '''Ctrl '''and '''S '''keys to save the file. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 394: | Line 297: | ||
− | Change the extension to '''avi | + | Change the extension to '''avi. Target''' to '''ffmpeg. ''' |
Now click''' '''on''' Render.''' | Now click''' '''on''' Render.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 407: | Line 307: | ||
− | Go to '''Desktop. '''Right click on the output file and play | + | Go to '''Desktop. '''Right click on the output file and play our animation. |
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
Line 426: | Line 323: | ||
Let us summarize. | Let us summarize. | ||
− | In this tutorial we learnt to | + | In this tutorial we learnt to create |
* Fire effect | * Fire effect | ||
Line 433: | Line 330: | ||
* Feather effect | * Feather effect | ||
− | We also learnt to do a rocket animation | + | We also learnt to do a rocket animation. |
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
Line 445: | Line 339: | ||
* Create a wood fire animation | * Create a wood fire animation | ||
− | * The wood image is provided to you in the Code files link | + | * The wood image is provided to you in the '''Code files''' link |
− | + | ||
− | + | ||
|- | |- | ||
| 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Completed assignment | | 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:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.191cm;"| Completed assignment | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Your completed assignment should look like this. | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.086cm;padding-right:0.097cm;"| Your completed assignment should look like this. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 462: | Line 351: | ||
Please download and watch it. | Please download and watch it. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 476: | Line 362: | ||
| style="background-color:#ffffff;border:0.75pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.106cm;"| Spoken Tutorial Forum slide | | style="background-color:#ffffff;border:0.75pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.106cm;"| Spoken Tutorial Forum slide | ||
| style="background-color:#ffffff;border:0.75pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.106cm;"| Please post your timed queries in this forum. | | style="background-color:#ffffff;border:0.75pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.106cm;"| Please post your timed queries in this forum. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 485: | Line 368: | ||
− | More information on this mission is available at | + | More information on this mission is available at this link. |
− | + | ||
− | this link. | + | |
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
Line 498: | Line 376: | ||
Thanks for joining. | Thanks for joining. | ||
− | |||
− | |||
− | |||
− | |||
|} | |} |
Latest revision as of 10:45, 7 September 2018
Title of script: Rocket animation
Author: Arthi. A
Keywords: Fire effect, Cut out effect, Convert option in Parameters panel, Slope and offset Parameters, Feather effect
|
|
Opening Slide | Welcome to the Spoken Tutorial on “Rocket animation” using Synfig. |
Learning Objectives (Slide) | In this tutorial, we will learn to create
We will also learn to do a rocket animation using all of the above. |
System requirements
(Slide) |
To record this tutorial, I am using
|
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. |
Go to File >> Import | Let us import the image.
Go to File. Click on Import. |
Select rocket image >> Import |
Select the Rocket image. Click on Import. |
Resize the image | Group the rocket image. Name the group layer as Rocket.
|
Press Ctrl + S >> Change the file name to Rocket-animation | Let us now save our file. Press Ctrl and S keys.
Click on Save. <<PAUSE>> |
Change Fill color to white >> Outline color to black | Now, let us create the fire.
Change the Fill color to black and the Outline color to white. |
Go to Layers panel. New layer >> Gradient >> Noise Gradient | Go to Layers panel. Right click on the Rocket group layer.
|
Go to Tool box >> Gradient tool
|
Go to Tool box. Click on Gradient tool.
|
Create a black and white gradient | Now, click and drag the on the canvas from top to bottom.
|
Transform tool >> Change the layer name to BW-Gradient | Select the Transform tool.
|
Parameters panel >> Blend method to Subtract | In the Parameters panel, change the Blend method to Subtract. |
Select Rectangle tool >> Draw a rectangle | Select the Rectangle tool. Draw a rectangle covering the whole canvas. |
Transform tool >> Change the layer name to Orange | Click on the Transform tool and change the layer name to Orange. |
Point to the rectangle | Now, let us change the color of the rectangle to warm orange. |
Click on the Color parameter >> Change RGB values to 100, 55 and 10 respectively | In the Parameters panel, click on the Color parameter.
Change the RGB values to 100, 55 and 10 respectively.
|
Change the Blend method to Color | Again in the Parameters panel, change the Blend method to Color. |
Group Noise gradient >> Change name to Moving-base | Group the Noise gradient layer. Change the name to Moving-base. |
Parameters panel >> Origin >>Convert >> Linear | In the Parameters panel, right click on Origin.
Click on Convert and then on Linear. |
Origin >> Slope value to 0,-100 >> Offset value to 0,100 | Click on the drop down list of Origin.
|
Click on the Play | Now the fire effect is created.
|
Point to the fire | Next let us cut the effect according the size of the rocket. |
Group all the layers except the Rocket layer >> Change name to Fire | Now group all the layers except the Rocket layer.
|
Press Ctrl + S | Press Ctrl and S keys to save the file. |
Tool box >> Cutout tool | Go to Tool box, select the Cutout tool.
|
Resize the fire effect | Select Transform tool.
|
Select Mask layer>> Parameters panel >> Change Feather parameter to 25. | Click on the drop down list. Select the Mask layer.
Now we can adjust the nodes.
|
Point to the fire | Observe the feather effect is applied to the fire. |
Click on Turn on animate editing mode icon | We will now animate the fire. Click on Turn on animate editing mode icon. |
Go to 3rd frame >> Add a keyframe >> Adjust nodes | Go to 3rd frame. Add a keyframe in the Keyframes panel.
|
Go to 6th frame >> Duplicate zeroth frame >> Right click on Fire cut group layer | Now go the 6th frame. In the Keyframes panel, Duplicate the zeroeth frame.
|
New layer >> Other >> Time loop
|
Click on New layer, then on Other and on Time loop.
|
Click on Only for Positive Duration >> Play | Tick on the checkbox of Only for Positive Duration.
|
Group all layers >> Change the name to Rocket | Next, let us animate the rocket. So, group all the layers.
|
Go to zeroth frame >> Move the rocket to bottom
|
Go to zeroeth frame. Move the rocket to the bottom of the canvas as shown.
|
Draw a rectangle | Now the rocket animation is done.
|
Change the layer name to BG | Go to File. Click on Import.
|
Press Ctrl + S | Press Ctrl and S keys to save the file. |
Go to File >> Render | Lastly we will render the animation.
|
Point to Desktop
Change the extension to avi, Target to ffmpeg >> Render |
I will save the output in the Desktop.
|
Desktop >> Play the animation using Firefox web browser | We will now check our animation.
|
Rocket animation on Firefox web browser | Our rocket animation looks like this.
|
Summary (Slide) | With this we have come to the end of this tutorial.
In this tutorial we learnt to create
We also learnt to do a rocket animation. |
Assignment
(Slide) |
Here is an assignment for you-
|
Completed assignment | Your completed assignment should look like this. |
About project slide | This video summarizes the Spoken Tutorial project.
|
Workshop slide | The Spoken Tutorial Project team conducts workshops and gives certificates on passing online tests.
|
Spoken Tutorial Forum slide | Please post your timed queries in this forum. |
Acknowledgment | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
|
Acknowledgment | This is Arthi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.
|