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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 37: Line 37:
 
| 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;"| 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;"|The image is provided in the Codes files link.
 +
  
 
Go to''' File.''' Click on''' Import. '''Select Branch image.  
 
Go to''' File.''' Click on''' Import. '''Select Branch image.  

Revision as of 12: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.
Go to File >> Click on Import I have created a branch image in my Documents folder. Let us import it.


The image is provided in the Codes files link.


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.


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.

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


In the Keyframes panel, select the 40th 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.
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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Synfig/C2/Create-a-star-animation/English&oldid=44406"