Difference between revisions of "Synfig/C2/Create-a-star-animation/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script:''' Star animation '''Author:''' Saurabh Gadgil '''Keywords:''' Synfig, Group layers, Gradient animation, Color change animation, Star animation {| sty...")
 
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'''
* Star animation
+
* 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;"| I have created a branch image in my''' Documents folder.''' Let us import it.
+
| 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.  
 +
 
  
Go to''' File.''' Click on''' Import. '''Select 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.'''
  
'''<nowiki><<PAUSE>></nowiki>'''
+
<<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.
 
+
Click on''' Save.'''
+
  
 
|-
 
|-
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.''' Click on''' Star tool.'''
+
| 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 in the''' canvas''' in the empty area above the branch.
+
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.''' Select all the star layers using''' shift''' '''key.'''
+
| 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.'''
  
'''<nowiki><<PAUSE>></nowiki>'''
+
<<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.''' Click on''' Gradient tool.'''
+
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;"| Go to''' Parameters panel.'''
+
| 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 appears.
+
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 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;"| 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. 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.  
 +
 
 +
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.''' 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''' and change the color to white.
 
+
Close the dialog box.
+
 
+
 
+
  
 +
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 in the''' canvas.'''
+
| 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.
  
'''<nowiki><<PAUSE>></nowiki>'''
+
<<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. So, select the''' Stars group layer.'''
+
| 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.  
  
Go to Zeroth frame.
+
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. 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 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. 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;"| 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. In the''' Keyframes panel,''' select the 25<sup>th</sup> frame. Click on Duplicate icon.
+
| 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. Click on Duplicate icon.
+
In the''' Keyframes panel,''' select the 40<sup>th</sup> frame and click on '''Duplicate''' icon.
  
  
<nowiki><<PAUSE>></nowiki>
+
<<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 now render our animation.
+
| 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.''' Click on''' Render.'''
+
 
+
  
  
 +
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.''' Change target to '''ffmpeg. '''
+
| 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. '''
  
  
Click on''' Render.'''
+
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-
We learnt to
+
* Create '''Gradient''' color animation
 
+
* Group '''layers'''
 
+
* Animation stars
* Gradient color animation
+
* Group layers
+
* Star animation
+
 
+
 
+
  
 
|-
 
|-
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.
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;"| Do you have questions in THIS Spoken
+
| 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.
 
+
 
+
Tutorial?
+
 
+
 
+
• Please visit this site
+
 
+
 
+
• Choose the minute and second where you
+
 
+
have the question
+
 
+
 
+
• Explain your question briefly
+
 
+
 
+
• Someone from our team will answer them
+
 
+
 
+
 
+
  
 
|-
 
|-
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


Visual cue
Narration
Opening Slide Welcome to the Spoken Tutorial on “Star animation” using Synfig.
Learning Objectives (Slide) In this tutorial we will learn to create a
  • Create Gradient color animation
  • Group layers
  • Animation stars
System requirement (Slide) To record this tutorial, I am using
  • Ubuntu Linux 14.04 OS
  • Synfig version 1.0.2
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.


The branch image is now on our canvas.

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.


Go to File. Click on Save. I will save the file in the Desktop.

<<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.


Create 10 stars on the canvas in the empty area above the branch.

Layers panels >> Select all star layers >> Group them 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.

Rename the layers to Stars >> Click outside the canvas Rename the group layer to Stars.


Click outside the canvas to deselect the Stars group layer.

<<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.


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, we will change the Amount parameter value to 1.
Go to 55th frame >> Duplicate 25th frame Now go to 55th frame.


In the Keyframes panel, select the 25th frame and click on the Duplicate icon.

go to 70th frame >> Duplicate 40th frame Next go to 70th frame.


In the Keyframes panel, select the 40th frame and click on Duplicate icon.


<<PAUSE>>

Press ctrl + s Let us now save our file.
Go to File >> Click on Render Finally, we will render our animation.


Go to File and click on Render.

Change the extension to avi >> change the target to ffmpeg

>> Click on Render

Change the extension to avi and target to ffmpeg.


Then click on Render.

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-

  • Create Gradient color animation
  • Group layers
  • Animation stars
Assignment

(Slide)

Here is an assignment for you
  • Create a Sunrise animation.
Completed assignment Your completed assignment should look like this.
About project slide This video summarizes the Spoken Tutorial project.


Please download and watch it.

Workshop slide The Spoken Tutorial Project team:
  • conducts workshops using spoken tutorials
  • gives certificates on passing online tests.

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.


More information on this mission is available at this link.

Acknowledgment This is Saurabh along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.


Thanks for joining.

Contributors and Content Editors

Arthi, Nancyvarkey