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

Latest revision as of 19:27, 20 September 2018

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 Gradient color animation Group layers Star animation
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.
Documents folder	I have created a branch image in my Documents folder.
Code files link (Slide)	The image is provided to you in the Code Files link. Let us import it.
Go to File >> Click on Import	Go to File. Click on Import. Select Branch image.
Select Branch folder layer	Go to Layers panel. Select the Branch 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 hyphen 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. Create 10 stars in the canvas in the empty area above the branch.
Layers panels >> Select all star layers >> Group them	Go to Layers panel. Select all the star layers using Shift key. Now click on the group icon 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. 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 25^th frame >> Add a keyframe	Go to 25^th 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 25^th 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 25^th frame >> Change the Amount parameter value to 0	Go to 25^th frame. Again change the Amount parameter value to 0.
Go to 40^th frame >> add a new keyframe	Go to 40^th 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 55^th frame >> Duplicate 25^th frame	Go to 55^th frame. In the Keyframes panel, select the 25^th frame. Click on Duplicate icon.
go to 70^th frame >> Duplicate 40^th frame	Next go to 70^th frame. In the Keyframes panel, select the 40^th frame. Click on Duplicate icon. <<PAUSE>>
	Press Ctrl and S keys to save our file
Go to File >> Click on Render	Finally we will now render our animation. Go to File. Click on Render.
Change the extension to avi >> change the target to ffmpeg >> Click on Render	Change the extension to avi. Change target to ffmpeg. 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 learnt to do Gradient color animation Group layers Star animation
Assignment (Slide)	Here is an assignment for you Create a Sunrise animation. The image is provided to you in the Code Files link.
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. Please contact us.
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 Arthi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off. Thanks for joining.

Contributors and Content Editors

Arthi, Nancyvarkey

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

Latest revision as of 19:27, 20 September 2018

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ 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;"| 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
-* Gradient color animation
+* '''Gradient''' color animation
-* Group layers
+* Group '''layers'''
 * Star animation
 |-
@@ Line 35: / Line 30: @@
 * '''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;"| Let us open''' Synfig.'''
+|-
+| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Documents 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 in my''' Documents folder.'''
 |-
-| 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;"| Code files link (Slide)
-| 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;"| The image is provided to you in the '''Code Files''' link.  Let us import it.
 |-
-| 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.
-Go to''' File.''' Click on''' Import. '''Select Branch image.
+| 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. '''Select Branch image.
 |-
@@ Line 51: / Line 52: @@
 | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to''' Layers panel.'''
-Select the''' Branch group layer'''. Now the''' handle''' appears.
+Select the''' Branch layer'''. Now the''' handle''' appears.
 |-
@@ Line 66: / Line 67: @@
-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>'''
@@ Line 74: / Line 77: @@
 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 hyphen animation.'''
 Click on''' Save.'''
@@ Line 91: / Line 94: @@
 |-
 | 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.''' Select all the star '''layers''' using''' Shift''' key.
 Now click on the '''group icon''' at the bottom to group them.
 |-
 | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Rename the layers to''' Stars >>''' Click outside the''' canvas'''
-| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Rename the group layer to''' Stars.'''
+| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Rename the '''group layer''' to''' Stars.'''
@@ Line 107: / Line 107: @@
 '''<nowiki><<PAUSE>></nowiki>'''
 |-
@@ Line 120: / Line 117: @@
 | 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.
 |-
@@ Line 153: / Line 147: @@
 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;"| 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;"| 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.
 |-
-| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 25<sup>h</sup> frame >> Add a keyframe
+| 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 >> Add a keyframe
-| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Go to 25<sup>h</sup> frame. Add a''' keyframe''' in the''' keyframes panel'''.
+| 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. Add a''' keyframe''' in the''' keyframes panel'''.
 |-
@@ Line 189: / Line 177: @@
 | 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.'''
 |-
@@ Line 218: / Line 203: @@
 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. 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. In the''' Keyframes panel,''' add a new''' keyframe.'''
 |-
@@ Line 243: / Line 219: @@
 | 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. In the''' Keyframes panel,''' select the 25<sup>th</sup> frame. Click on '''Duplicate icon.'''
 |-
@@ Line 253: / Line 226: @@
 In the''' Keyframes panel,''' select the 40<sup>th</sup> frame. Click on '''Duplicate icon.'''
 <nowiki><<PAUSE>></nowiki>
@@ Line 267: / Line 239: @@
 Go to''' File.''' Click on''' Render.'''
 |-
@@ Line 283: / Line 252: @@
 | 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;"| 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.
 Let us summarize.
 In this tutorial, we learnt to do
+* '''Gradient''' color animation
+* '''Group layers'''
-* Gradient color animation
-* Group layers
 * Star animation
 |-
@@ Line 309: / Line 269: @@
 (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
 * Create a Sunrise animation.
+* The image is provided to you in the '''Code Files''' link.
 |-
 | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0389in;padding-right:0.0389in;"| Completed assignment