Difference between revisions of "Synfig/C2/Create-a-star-animation/English"
(Created page with "'''Title of script:''' Star animation '''Author:''' Saurabh Gadgil '''Keywords:''' Synfig, Group layers, Gradient animation, Color change animation, Star animation {| sty...") |
Nancyvarkey (Talk | contribs) |
||
Line 14: | Line 14: | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Opening Slide | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Opening Slide | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Welcome to the Spoken Tutorial on “'''Star animation'''” using''' Synfig'''. | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Welcome to the Spoken Tutorial on “'''Star animation'''” using''' Synfig'''. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 22: | Line 19: | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In this tutorial we will learn to create a | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In this tutorial we will learn to create a | ||
− | * Gradient color animation | + | * Create '''Gradient''' color animation |
− | * Group layers | + | * Group '''layers''' |
− | * | + | * Animation stars |
− | + | ||
− | + | ||
|- | |- | ||
Line 34: | Line 29: | ||
* '''Ubuntu Linux''' 14.04 OS | * '''Ubuntu Linux''' 14.04 OS | ||
* '''Synfig version''' 1.0.2 | * '''Synfig version''' 1.0.2 | ||
− | |||
− | |||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Open''' Synfig''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Open''' Synfig''' | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Let us open''' Synfig.''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Let us open''' Synfig.''' | ||
+ | |||
+ | |- | ||
+ | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Show the folder and the file in the folder. | ||
+ | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| I have created a branch image and saved it in my''' Documents folder.''' | ||
+ | |||
+ | |- | ||
+ | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| | ||
+ | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| This image has been provided in the Code Files link along with this tutorial. Pls download and save it in your machine. | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to''' File >> '''Click on''' Import''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to''' File >> '''Click on''' Import''' | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Let us import this image. |
+ | |||
+ | Go to''' File.''' and click on''' Import. ''' Now, go to the saved folder and select the branch image. | ||
+ | |||
− | + | The branch image is now on our '''canvas'''. | |
|- | |- | ||
Line 68: | Line 72: | ||
Go to''' File.''' Click on''' Save.''' I will save the file in the''' Desktop.''' | Go to''' File.''' Click on''' Save.''' I will save the file in the''' Desktop.''' | ||
− | + | <<PAUSE>> | |
|- | |- | ||
Line 74: | Line 78: | ||
Click on''' Save''' | Click on''' Save''' | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Change the default name to''' Star-animation | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Change the default name to''' Star-animation''' and click on the ''' Save''' button. |
− | + | ||
− | + | ||
|- | |- | ||
Line 84: | Line 86: | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Tool box >> Star tool >> Create 10 stars | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Tool box >> Star tool >> Create 10 stars | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Now go to''' Tool box | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Now go to''' Tool box''' and click on''' Star tool.''' |
− | Create 10 stars | + | Create 10 stars on the''' canvas''' in the empty area above the branch. |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Layers panels >> Select all star layers >> Group them | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Layers panels >> Select all star layers >> Group them | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to''' Layers panel | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to''' Layers panel''' and select all the star layers using the ''' Shift key.''' |
Now click on the group layer at the bottom to group them. | Now click on the group layer at the bottom to group them. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 106: | Line 105: | ||
Click outside the''' canvas''' to deselect the''' Stars group layer.''' | Click outside the''' canvas''' to deselect the''' Stars group layer.''' | ||
− | + | <<PAUSE>> | |
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
Line 115: | Line 111: | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Next let us create a gradient background. | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Next let us create a gradient background. | ||
− | Go to''' Tool box | + | Go to''' Tool box''' and click on''' Gradient tool.''' |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| '''Tool options panel''' >> check''' Create a linear gradient''' option | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| '''Tool options panel''' >> check''' Create a linear gradient''' option | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In the''' Tool options panel,''' check if''' Create a linear gradient''' option is selected. | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In the''' Tool options panel,''' check if''' Create a linear gradient''' option is selected. | ||
− | |||
− | |||
− | |||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Drag on the''' canvas''' and create a gradient background | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Drag on the''' canvas''' and create a gradient background | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Click the mouse on the top of the''' canvas''' and drag it till bottom. | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Click the mouse on the top part of the''' canvas''' and drag it till the bottom. |
− | Observe a black and white''' gradient''' appears on the''' canvas.''' | + | Observe that a black and white''' gradient''' appears on the''' canvas.''' |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| '''Parameters panel >> Gradient value''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| '''Parameters panel >> Gradient value''' | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Now go to the''' Parameters panel.''' |
− | Double click on the''' Gradient value.''' A dialog box | + | Double-click on the''' Gradient value.''' A dialog box will appear. |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Point to the 2 '''gradient icons''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Point to the 2 '''gradient icons''' | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Observe there are 2 gradient icons at each end in the box at the bottom. | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Observe there are 2 gradient icons at each end, in the box at the bottom. |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Point to the 2 '''gradient icons''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Point to the 2 '''gradient icons''' | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| These icons | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| These icons indicate the 2 colors of the gradient. |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Select left '''gradient icon.''' >> Change the color to light blue | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Select left '''gradient icon.''' >> Change the color to light blue | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| The left '''gradient icon '''is selected by default. | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| The left '''gradient icon '''is selected by default. |
+ | |||
+ | Let's change this color to light blue. | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Select right '''gradient icon''' >> Change the color to white | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Select right '''gradient icon''' >> Change the color to white | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Next select the right '''gradient icon | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Next select the right '''gradient icon''' and change the color to white. |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | Then close the dialog box. | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Observe the color change | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Observe the color change on the''' canvas.''' |
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Click on''' Turn on Animate edit mode''' icon | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Click on''' Turn on Animate edit mode''' icon | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In the''' Animation panel, '''click on''' Turn on Animate editing mode''' icon | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In the''' Animation panel, '''click on''' Turn on Animate editing mode''' icon. |
|- | |- | ||
Line 189: | Line 178: | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Drag the''' Time cursor''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Drag the''' Time cursor''' | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Drag the''' Time cursor''' between zeroth and 25<sup>th</sup> frame to observe the color change in the''' canvas.''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Drag the''' Time cursor''' between zeroth and 25<sup>th</sup> frame to observe the color change in the''' canvas.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 199: | Line 185: | ||
So, go to''' Layers panel.''' Click on the''' Lower layer''' button twice. | So, go to''' Layers panel.''' Click on the''' Lower layer''' button twice. | ||
− | + | <<PAUSE>> | |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Select''' Star layers >>''' Keep''' Time cursor''' in zeroth frame | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Select''' Star layers >>''' Keep''' Time cursor''' in zeroth frame | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Next let us animate the alpha value of the stars. | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Next, let us animate the alpha value of the stars. |
− | + | TO do so, first select the''' Stars group layer''' and go to the Zeroth frame. | |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Change the''' Amount of Alpha '''value to 0 | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Change the''' Amount of Alpha '''value to 0 | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In the''' Parameters panel,''' double click on the value of''' Amount parameter.''' | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In the''' Parameters panel,''' double-click on the value of''' Amount parameter.''' |
+ | |||
Change the value to zero. Press''' Enter.''' | Change the value to zero. Press''' Enter.''' | ||
+ | |||
Observe the stars are not visible now. | Observe the stars are not visible now. | ||
− | |||
− | |||
− | |||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 25<sup>th</sup> frame >> Change the''' Amount parameter''' value to 0 | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 25<sup>th</sup> frame >> Change the''' Amount parameter''' value to 0 | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 25<sup>th</sup> frame. | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 25<sup>th</sup> frame. |
− | + | ||
− | + | ||
+ | Again change the''' Amount parameter''' value to 0. | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 40<sup>th</sup> frame >> add a new''' keyframe''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 40<sup>th</sup> frame >> add a new''' keyframe''' | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 40<sup>th</sup> frame. | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 40<sup>th</sup> frame. |
− | + | ||
− | + | ||
+ | In the''' Keyframes panel,''' add a new''' keyframe.''' | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Change the''' Amount parameter''' value to 1 | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Change the''' Amount parameter''' value to 1 | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In the''' Parameters panel,''' change the''' Amount parameter''' value to 1. | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| In the''' Parameters panel,''' we will change the''' Amount parameter''' value to 1. |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 55<sup>th</sup> frame >> Duplicate 25<sup>th</sup> frame | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 55<sup>th</sup> frame >> Duplicate 25<sup>th</sup> frame | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Now go to 55<sup>th</sup> frame. | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Now go to 55<sup>th</sup> frame. |
− | + | ||
+ | In the''' Keyframes panel,''' select the 25<sup>th</sup> frame and click on the '''Duplicate''' icon. | ||
|- | |- | ||
Line 248: | Line 231: | ||
− | In the''' Keyframes panel,''' select the 40<sup>th</sup> frame | + | In the''' Keyframes panel,''' select the 40<sup>th</sup> frame and click on '''Duplicate''' icon. |
− | + | <<PAUSE>> | |
|- | |- | ||
Line 263: | Line 246: | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to''' File >>''' Click on''' Render''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to''' File >>''' Click on''' Render''' | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Finally we will | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Finally, we will render our animation. |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | Go to''' File''' and click on''' Render.''' | ||
|- | |- | ||
Line 275: | Line 255: | ||
>> Click on''' Render''' | >> Click on''' Render''' | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Change the extension to''' avi | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Change the extension to''' avi''' and target to '''ffmpeg. ''' |
− | + | Then click on''' Render.''' | |
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Play animation using''' Firefox web browser''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Play animation using''' Firefox web browser''' | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Let us now go to the''' Desktop''' and play the animation using''' Firefox web browser.''' | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Let us now go to the''' Desktop''' and play the animation using''' Firefox web browser.''' | ||
− | |||
− | |||
− | |||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Summary (Slide) | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Summary (Slide) | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| With this, we have come to the end of this tutorial. | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| With this, we have come to the end of this tutorial. | ||
− | |||
Let us summarize. | Let us summarize. | ||
− | + | In this tutorial, we have learnt to- | |
− | + | * Create '''Gradient''' color animation | |
− | + | * Group '''layers''' | |
− | + | * Animation stars | |
− | * Gradient color animation | + | |
− | * Group layers | + | |
− | * | + | |
− | + | ||
− | + | ||
|- | |- | ||
Line 309: | Line 280: | ||
(Slide) | (Slide) | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Here is an assignment for you | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Here is an assignment for you | ||
− | |||
− | |||
* Create a Sunrise animation. | * Create a Sunrise animation. | ||
− | |||
− | |||
|- | |- | ||
Line 325: | Line 292: | ||
Please download and watch it. | Please download and watch it. | ||
− | |||
− | |||
− | |||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Workshop slide | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Workshop slide | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| The Spoken Tutorial Project team: | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| The Spoken Tutorial Project team: | ||
− | + | * conducts workshops using spoken tutorials | |
− | + | * gives certificates on passing online tests. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
For more details, please write to us. | For more details, please write to us. | ||
− | |||
− | |||
− | |||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Spoken Tutorial Forum slide | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Spoken Tutorial Forum slide | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Post your timed queries in this forum. |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
|- | |- | ||
Line 374: | Line 310: | ||
− | More information on this mission is available at | + | More information on this mission is available at this link. |
− | + | ||
− | this link. | + | |
− | + | ||
− | + | ||
− | + | ||
|- | |- |
Revision as of 20:16, 26 January 2017
Title of script: Star animation
Author: Saurabh Gadgil
Keywords: Synfig, Group layers, Gradient animation, Color change animation, Star animation
|
|
Opening Slide | Welcome to the Spoken Tutorial on “Star animation” using Synfig. |
Learning Objectives (Slide) | In this tutorial we will learn to create a
|
System requirement (Slide) | To record this tutorial, I am using
|
Open Synfig | Let us open Synfig. |
Show the folder and the file in the folder. | I have created a branch image and saved it in my Documents folder. |
This image has been provided in the Code Files link along with this tutorial. Pls download and save it in your machine. | |
Go to File >> Click on Import | Let us import this image.
Go to File. and click on Import. Now, go to the saved folder and select the branch image.
|
Select Branch folder layer | Go to Layers panel.
Select the Branch group layer. Now the handle appears. |
Resize the image | Click on the orange dot and resize the image as shown. |
Click on the green dot and move it to the bottom of the canvas. | |
Go to File >> Click on Save | Let us now save our file.
<<PAUSE>> |
Change name to Star-animation >>
Click on Save |
Change the default name to Star-animation and click on the Save button. |
Next let us create some stars. | |
Tool box >> Star tool >> Create 10 stars | Now go to Tool box and click on Star tool.
|
Layers panels >> Select all star layers >> Group them | Go to Layers panel and select all the star layers using the Shift key.
|
Rename the layers to Stars >> Click outside the canvas | Rename the group layer to Stars.
<<PAUSE>> |
Tool box >> Gradient tool | Next let us create a gradient background.
Go to Tool box and click on Gradient tool. |
Tool options panel >> check Create a linear gradient option | In the Tool options panel, check if Create a linear gradient option is selected. |
Drag on the canvas and create a gradient background | Click the mouse on the top part of the canvas and drag it till the bottom.
Observe that a black and white gradient appears on the canvas. |
Parameters panel >> Gradient value | Now go to the Parameters panel.
Double-click on the Gradient value. A dialog box will appear. |
Point to the 2 gradient icons | Observe there are 2 gradient icons at each end, in the box at the bottom. |
Point to the 2 gradient icons | These icons indicate the 2 colors of the gradient. |
Select left gradient icon. >> Change the color to light blue | The left gradient icon is selected by default.
Let's change this color to light blue. |
Select right gradient icon >> Change the color to white | Next select the right gradient icon and change the color to white.
Then close the dialog box. |
Observe the color change on the canvas. | |
Click on Turn on Animate edit mode icon | In the Animation panel, click on Turn on Animate editing mode icon. |
Go to 25h frame >> Add a keyframe | Go to 25h frame. Add a keyframe in the keyframes panel. |
Parameters panel >> Gradient parameter value | Go to Parameters panel.
Click on the Gradient parameter value. |
Change the left color to black and the right color to dark blue. | |
Observe waypoints are created on the Time track panel. | |
Drag the Time cursor | Drag the Time cursor between zeroth and 25th frame to observe the color change in the canvas. |
Go to Layers panel >> Click on the Lower layer button twice | We need to move the gradient background to the bottom.
So, go to Layers panel. Click on the Lower layer button twice. <<PAUSE>> |
Select Star layers >> Keep Time cursor in zeroth frame | Next, let us animate the alpha value of the stars.
TO do so, first select the Stars group layer and go to the Zeroth frame. |
Change the Amount of Alpha value to 0 | In the Parameters panel, double-click on the value of Amount parameter.
|
Go to 25th frame >> Change the Amount parameter value to 0 | Go to 25th frame.
Again change the Amount parameter value to 0. |
Go to 40th frame >> add a new keyframe | Go to 40th frame.
In the Keyframes panel, add a new keyframe. |
Change the Amount parameter value to 1 | In the Parameters panel, we will change the Amount parameter value to 1. |
Go to 55th frame >> Duplicate 25th frame | Now go to 55th frame.
|
go to 70th frame >> Duplicate 40th frame | Next go to 70th frame.
|
Press ctrl + s | Let us now save our file. |
Go to File >> Click on Render | Finally, we will render our animation.
|
Change the extension to avi >> change the target to ffmpeg
>> Click on Render |
Change the extension to avi and target to ffmpeg.
|
Play animation using Firefox web browser | Let us now go to the Desktop and play the animation using Firefox web browser. |
Summary (Slide) | With this, we have come to the end of this tutorial.
Let us summarize. In this tutorial, we have learnt to-
|
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:
For more details, please write to us. |
Spoken Tutorial Forum slide | Post your timed queries in this forum. |
Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
| |
Acknowledgment | This is Saurabh along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.
|