Synfig/C2/Create-a-star-animation/English
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.
|