Difference between revisions of "Synfig/C2/Create-a-star-animation/English"
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'''. | ||
| + | |||
| + | |||
| + | |||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Learning Objectives (Slide) | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Learning Objectives (Slide) | ||
| − | | 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 | + | | 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 |
| + | |||
| + | * Gradient color animation | ||
| + | * Group layers | ||
| + | * Star animation | ||
| + | |||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| Line 29: | Line 34: | ||
* '''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;"| 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;"| I have created a branch image in my''' Documents folder.''' Let us import it. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | Go to''' File.''' Click on''' Import. '''Select Branch image. | |
|- | |- | ||
| Line 72: | Line 68: | ||
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>> | + | '''<nowiki><<PAUSE>></nowiki>''' |
|- | |- | ||
| Line 78: | Line 74: | ||
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.''' |
| + | |||
| + | Click on''' Save.''' | ||
|- | |- | ||
| Line 86: | Line 84: | ||
|- | |- | ||
| 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.''' Click on''' Star tool.''' |
| − | Create 10 stars | + | Create 10 stars in 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.''' Select all the star layers using''' shift''' '''key.''' |
| + | |||
| + | |||
| + | Now click on the '''group icon''' at the bottom to group them. | ||
| + | |||
| − | |||
|- | |- | ||
| Line 105: | Line 106: | ||
Click outside the''' canvas''' to deselect the''' Stars group layer.''' | Click outside the''' canvas''' to deselect the''' Stars group layer.''' | ||
| − | <<PAUSE>> | + | '''<nowiki><<PAUSE>></nowiki>''' |
| + | |||
| + | |||
| + | |||
|- | |- | ||
| Line 111: | Line 115: | ||
| 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.''' 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 | + | | 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. |
| − | Observe | + | Observe 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;"| Go to''' Parameters panel.''' |
| − | Double | + | Double click on the''' Gradient value.''' A dialog box appears. |
|- | |- | ||
| − | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Point to the 2 ''' | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Point to the 2 '''Color stop icons''' |
| − | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Observe there are 2 | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Observe there are 2 '''Color stop 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 ''' | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Point to the 2 '''Color stop 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 indicates 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 ''' | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Select left '''Color stop 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 ''' | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| The left '''Color stop icon '''is selected by default. 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 right ''' | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Select right '''Color stop 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 ''' | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Next select the right '''Color stop icon.''' Change the color to white. |
| + | |||
| + | 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 in 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 178: | Line 189: | ||
| 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.''' | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |- | ||
| + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Press '''Ctrl''' and '''S''' | ||
| + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Press '''Ctrl''' and '''S''' keys to save our file | ||
|- | |- | ||
| Line 185: | Line 203: | ||
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>> | + | '''<nowiki><<PAUSE>></nowiki>''' |
|- | |- | ||
| 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 | + | | 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. So, select the''' Stars group layer.''' |
| − | + | Go to 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 | + | | 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,''' | + | | 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;"| 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;"| | + | | 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. In the''' Keyframes panel,''' select the 25<sup>th</sup> frame. Click on '''Duplicate icon.''' |
| + | |||
| − | |||
|- | |- | ||
| Line 231: | Line 252: | ||
| − | In the''' Keyframes panel,''' select the 40<sup>th</sup> frame | + | In the''' Keyframes panel,''' select the 40<sup>th</sup> frame. Click on '''Duplicate icon.''' |
| − | <<PAUSE>> | + | <nowiki><<PAUSE>></nowiki> |
|- | |- | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| 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;"| Press '''Ctrl''' and '''S''' keys to save our file | ||
|- | |- | ||
| 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 | + | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Finally we will now render our animation. |
| + | |||
| + | |||
| + | Go to''' File.''' Click on''' Render.''' | ||
| + | |||
| − | |||
|- | |- | ||
| Line 255: | Line 275: | ||
>> 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.''' Change target to '''ffmpeg. ''' |
| − | + | 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.''' | ||
| + | |||
| + | |||
| + | |||
|- | |- | ||
| Line 268: | Line 291: | ||
| 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. | ||
| − | |||
| − | In this tutorial, we | + | Let us summarize. |
| − | * | + | |
| − | * Group | + | |
| − | * | + | In this tutorial, we learnt to do |
| + | |||
| + | |||
| + | * Gradient color animation | ||
| + | * Group layers | ||
| + | * Star animation | ||
| + | |||
| + | |||
|- | |- | ||
| Line 280: | Line 309: | ||
(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 288: | Line 321: | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| About project slide | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| About project slide | ||
| − | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0. | + | | style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| The video at the following link summarizes the Spoken Tutorial project. |
| − | + | ||
Please download and watch it. | Please download and watch it. | ||
| Line 295: | Line 327: | ||
|- | |- | ||
| 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. | + | | style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| We conduct workshops using '''Spoken Tutorials.''' |
| − | + | ||
| − | + | ||
| − | + | And give certificates. | |
| + | |||
| + | |||
| + | Please contact 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. | + | | style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Please post your timed queries in this forum. |
|- | |- | ||
| 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. | + | | style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India. |
| − | + | ||
| − | + | ||
| − | + | ||
|- | |- | ||
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Acknowledgment | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Acknowledgment | ||
| − | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0. | + | | style="background-color:#ffffff;border-top:1pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| This is Saurabh Gadgil along with the Spoken Tutorial Animation Team from IIT Bombay, signing off. |
| − | + | ||
Thanks for joining. | Thanks for joining. | ||
|} | |} | ||
Revision as of 17:43, 24 March 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
|
| System requirement (Slide) | To record this tutorial, I am using
|
| Open Synfig | Let us open Synfig. |
| Go to File >> Click on Import | I have created a branch image in my Documents folder. Let us import it.
Go to File. Click on Import. Select 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.
Click on Save. |
| Next let us create some stars. | |
| Tool box >> Star tool >> Create 10 stars | Now go to Tool box. Click on Star tool.
|
| Layers panels >> Select all star layers >> Group them | Go to Layers panel. Select all the star layers using 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. 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 of the canvas and drag it till bottom.
Observe a black and white gradient appears on the canvas. |
| Parameters panel >> Gradient value | Go to Parameters panel.
Double click on the Gradient value. A dialog box appears. |
| Point to the 2 Color stop icons | Observe there are 2 Color stop icons at each end in the box at the bottom. |
| Point to the 2 Color stop icons | These icons indicates the 2 colors of the gradient. |
| Select left Color stop icon. >> Change the color to light blue | The left Color stop icon is selected by default. Change the color to light blue. |
| Select right Color stop icon >> Change the color to white | Next select the right Color stop icon. Change the color to white.
Close the dialog box.
|
| Observe the color change in 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.
|
| Press Ctrl and S | Press Ctrl and S keys to save our file |
| 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. So, select the Stars group layer.
Go to Zeroth frame. |
| Change the Amount of Alpha value to 0 | In the Parameters panel, double click on the value of Amount parameter.
Change the value to zero. Press Enter. Observe the stars are not visible now.
|
| 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, change the Amount parameter value to 1. |
| Go to 55th frame >> Duplicate 25th frame | Go to 55th frame. In the Keyframes panel, select the 25th frame. Click on Duplicate icon.
|
| go to 70th frame >> Duplicate 40th frame | Next go to 70th frame.
|
| Press Ctrl and S keys to save our file | |
| Go to File >> Click on Render | Finally we will now render our animation.
|
| Change the extension to avi >> change the target to ffmpeg
>> Click on Render |
Change the extension to avi. Change 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.
|
| Assignment
(Slide) |
Here is an assignment for you
|
| Completed assignment | Your completed assignment should look like this. |
| About project slide | The video at the following link summarizes the Spoken Tutorial project.
Please download and watch it. |
| Workshop slide | We conduct workshops using Spoken Tutorials.
And give certificates.
|
| Spoken Tutorial Forum slide | Please post your timed queries in this forum. |
| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India. | |
| Acknowledgment | This is Saurabh Gadgil along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.
Thanks for joining. |