Difference between revisions of "Synfig/C2/Bouncing-ball-animation/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script:''' Bouncing Ball animation '''Author:''' Arthi '''Keywords:''' Synfig Interface, Draw basic shapes, Fill color, Animate a ball, Add key frames and way po...")
 
Line 22: Line 22:
  
  
−
Draw basic shapes and fill color
+
* Draw basic shapes and fill color
 +
* Add '''keyframes''' and '''waypoints'''
 +
* Do a ball '''animation''' with '''squash effect'''
 +
* Render the output in '''gif '''format
  
−
Add '''keyframes''' and '''waypoints'''
 
  
−
Do a ball '''animation''' with '''squash effect'''
 
−
 
−
Render the output in '''gif '''format
 
  
 
|-
 
|-
Line 36: Line 35:
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| To record this tutorial, I am using
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| To record this tutorial, I am using
  
−
'''Ubuntu Linux''' 14.04 OS
+
* '''Ubuntu Linux''' 14.04 OS
 +
* '''Synfig''' version 1.0.2
 +
 
  
−
'''Synfig''' version 1.0.2
 
  
 
|-
 
|-
Line 140: Line 140:
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| And above this panel, you can find  
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| And above this panel, you can find  
  
−
Canvas browser
+
* '''Canvas browser'''
−
 
+
* '''Palette editor'''
−
Palette editor
+
* '''Navigator'''
−
 
+
* '''Info panels'''
−
Navigator
+
−
 
+
−
Info panels
+
−
 
+
  
 
<nowiki><<PAUSE>></nowiki>
 
<nowiki><<PAUSE>></nowiki>
Line 421: Line 417:
 
|-
 
|-
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0194in;"| Click on dropdown to show the file extensions
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0194in;"| Click on dropdown to show the file extensions
−
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| Observe that the available '''Synfig '''file extensions are '''.sifz, &nbsp;.sif, .sfg'''
+
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| Observe that the available '''Synfig '''file extensions are '''.sifz, .sif, .sfg'''
  
 
|-
 
|-
Line 499: Line 495:
 
|-
 
|-
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0194in;"| Play the animation
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0194in;"| Play the animation
−
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| We can play the '''animation '''using '''Firefox '''or any web browser. &nbsp;
+
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| We can play the '''animation '''using '''Firefox '''or any web browser.
  
  
Line 511: Line 507:
  
  
−
Let us summarize. In this tutorial, we have learnt about the interface of '''Synfig'''.
+
Let us summarize.  
 +
 
 +
 
 +
In this tutorial, we have learnt about the interface of '''Synfig'''.
  
  
 
We also learnt to  
 
We also learnt to  
  
−
Draw basic shapes and fill color
 
  
−
Add '''keyframes '''and '''waypoints'''
+
* Draw basic shapes and fill color
 +
* Add '''keyframes '''and '''waypoints'''
 +
* Do a ball '''animation '''with '''squash effect'''
 +
* Render the output in '''gif '''format
  
−
Do a ball '''animation '''with '''squash effect'''
 
  
−
Render the output in '''gif '''format
 
  
 
|-
 
|-
Line 530: Line 529:
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| Here is an assignment for you.
 
| style="border:0.05pt solid #000000;padding-top:0.0194in;padding-bottom:0.0354in;padding-left:0.0354in;padding-right:0.0354in;"| Here is an assignment for you.
  
−
Create a ball '''animation''' in a slanting path.
+
* Create a ball '''animation''' in a slanting path.
 +
 
 +
 
  
 
|-
 
|-

Revision as of 16:11, 1 August 2016

Title of script: Bouncing Ball animation

Author: Arthi

Keywords: Synfig Interface, Draw basic shapes, Fill color, Animate a ball, Add key frames and way points, Render output in gif


Visual cue Narration
Opening Slide Welcome to the Spoken Tutorial on “Bouncing Ball animation” using Synfig.
Learning Objectives (Slide) In this tutorial, we will learn about the interface of Synfig.

We will also learn to


  • Draw basic shapes and fill color
  • Add keyframes and waypoints
  • Do a ball animation with squash effect
  • Render the output in gif format


System requirements

(Slide)

To record this tutorial, I am using
  • Ubuntu Linux 14.04 OS
  • Synfig version 1.0.2


Go to Dash home >> Synfig Go to Dash home and type Synfig.
Click on Synfig logo You can open Synfig by clicking on the logo.
Point to the interface This is the interface of Synfig.
Highlight the Menu bar The Menu bar is located at the top.
Highlight the Standard toolbar The Standard toolbar is located below the Menu bar.


Here, we will find some of the shortcut and handles options.

Highlight the ruler This is followed by horizontal and vertical rulers.
Highlight the Tool box The Tool box is located on the left side of the interface.
Point to the black color box


Point to the white color box

Just below the Tool box, notice there are two boxes -
  • The upper box is in black color.
  • And the tool-tip says it is the Outline color.
  • The lower box is in white color.
  • And the tool-tip says it is the Fill color.


Highlight the canvas In the center, is the canvas. This is where we will do our animation.
Highlight the Animation panel Below the canvas, is the Animation panel.


Here, we can see the buttons that are related to animation.

Highlight the Parameters panel


Point to the Parameters panel

At the bottom left of the interface, is the Parameters panel.


Parameters will be visible once we create an object on the canvas.

Point to Keyframes panel Next to this, is the Keyframes panel.


Here we will add the keyframes.

Highlight the Time track panel

Point inside the Time track panel


On the right of this panel, we can find the Time track panel.


Here we will be able to see the waypoints and the key frame indications of the animation.


Waypoints will be visible once we create an animation on the canvas.

Highlight the Layers panel At the right bottom of the interface, is the Layers panel.
Highlight the Tool options panel Above the Layers panel, we can see the Tool options panel.
Panels above Tool options panel And above this panel, you can find
  • Canvas browser
  • Palette editor
  • Navigator
  • Info panels

<<PAUSE>>

Point to interface We can get accustomed to using all these, as we go along.
Point to the canvas Now, let us start with our first animation.
Rectangle tool >> Tool options First, we will create a background.


Go to Tool box. Click on the Rectangle tool.

Point to Tool options panel. Notice the change in the Tool options panel.
Layer Type >> Select Create a rectangle region Under the Layer Type, we can see many icons.


Select Create a region layer icon.


For this demo, we will leave the other settings as it is.

Draw rectangle on the canvas Now draw a rectangle covering 3/4th of the canvas, as demonstrated.
Point to the Fill color


Highlight the area outside the canvas.

Pls note that the default fill color is white.


Which implies that if we draw outside the canvas, it will be difficult to spot the object.

Point to the Parameters panel Notice that a layer is created in the Layers Panel.


Synfig gives it a name, by default.  


Here it says “Rectangle060Region”.

SLIDE Giving meaningful names to layers is always a good practice.


It helps us to locate a particular object from among the long list of layers.


You will appreciate this more when we create complicated animations.

Point to the canvas Come back to the Synfig interface.
Change the layer name to Sky I will change this default layer name to Sky.


So, click on the name, type Sky and press Enter.

Highlight the layer sky The name of the layer is now sky.
Pls note that the cursor is very sensitive.


Hence, avoid clicking randomly  to prevent duplication of the previous action.

Point to Parameters panel The parameters for the rectangle are created in the Parameters panel.
Colors parameter >> double-click on Value Locate the Color parameter and double-click on the Value column.


Immediately, a dialog box appears.

Change the color to blue Change the color to blue by dragging the RGB scrollers.
Close this dialog box. Now, close this dialog box.
Transform tool >> click outside the canvas Next, click on the Transform tool.


Then click outside the canvas to deselect the Sky layer.

Create another rectangle >> Rename layer as Ground >> Change color to green Now again select the Rectangle tool.


Create another rectangle in the lower part of the canvas.


Change the layer name to Ground and the color to green, as shown earlier.

Transform tool >> click outside the canvas Select the Transform tool and click outside the canvas to deselect layer.

<<PAUSE>>

Tool box >> Circle tool Next, let us draw a ball.


In the Toolbox, click on the Circle tool.

Click on Create a region layer Under the Layer Type, Create a region layer should be selected.
Draw a circle Click on the top part of the canvas and draw a circle.
Rename layer as Ball In the Layers panel rename the layer as Ball, as shown earlier.

<<PAUSE>>

Change the color to red. Change the color to red.
Point to the ball Let us now start animating the ball. Select the Transform tool.
Click on Turn on animate editing mode icon In the Animation panel, click on Turn on animate editing mode icon.
Highlight with arrows The red rectangle border that appears on the screen, indicates that we are in Animation mode.
Enter 9 on the current frame box. Enter 9 on the current frame box. Press Enter.
Keyframes panel >> Click on the plus sign Next, click on the Keyframes panel.


Here, click on the green plus sign icon, to add a new keyframe.

Select the ball Select the ball on the canvas.
Point to the green dot in the centre Notice, a green dot in the centre of the ball.
Move the ball to the bottom Drag this green dot to move the ball to the bottom of canvas, a little above the ground as demonstrated.
Press shift key Use shift key to move in a straight path while dragging.
Point to the key frames Observe waypoints are created on the Time track panel.
Go to 11th frame >> Keyframes panel >> Click on the plus sign Let’s go to the 11th frame.


Once again, add a new keyframe, as shown earlier.

Move it down Move the ball a little down, such as the ball touches the ground.
Point to the orange and yellow dots Notice, orange and yellow dots around the ball.  


These are known as handles.

Resize the ball Resize the ball as demonstrated using the orange dots in the handles, to give a squashed effect.
Go to 13th frame Move the Time cursor to the 13th frame.
Select 9th frame on Keyframe panel >> Duplicate Select the 9th frame on the Keyframes panel.


Click on Duplicate icon at the bottom.



Go to 24th frame Move the Time cursor to the 24th frame.
Select zeroth frame on Keyframe panel >> Duplicate Select the zeroth frame on the Keyframes panel.


Again click on the Duplicate icon at the bottom.

Move the Time cursor to the zeroth frame Go to the zeroth frame. Click outside the canvas to deselect the ball.
Click on the Play button Click on the Play button to see the animation that we created.


<<PAUSE>>

Go to File >> Save Lastly, let us save the file.


Go to File and click on Save. I will save in Desktop.

Point to the default name Synfig gives the file a default name, as you can see here.
Change the name to Bouncing-ball I will change this name to Bouncing-ball.
Click on dropdown to show the file extensions Observe that the available Synfig file extensions are .sifz, .sif, .sfg
Select .sifz I will select .sifz format.
>> >> Save Click on Save.

<<PAUSE>>

Go to File >> Render Let us now render the animation.


Go to File and click on Render.

Render settings dialog box opens up.
Type Bouncing-ball.gif Give a suitable filename, as per your preference, with .gif extension.
Click on Choose >> choose Desktop >> click on Ok. Click on Choose button, to select the location to save.


I will choose Desktop and then click on OK.

Target >> Select gif Click on Target drop down menu and select Magickk++.
Quality >> Maximum Increase the Quality to maximum, i.e. 9, by clicking on the plus sign.


This value should never be below 3.

Highlight the Image settings Leave the Image settings as it is.
Click on Time >> End Time to 24 >>  Press Enter


Click on the Time tab.


Here, the frame rate should be 24 fps.  


This will give a smooth animation without jerks.


Change the End Time to 24, since our animation ends at the 24th second. Press Enter.

Click on Render Lastly, click on the Render button at the bottom.


It may take a few seconds to render the output.

Go to Desktop Now, let me go to the Desktop, which is where I saved my .gif file.
Play the animation We can play the animation using Firefox or any web browser.


Pls note you don’t need internet connection to play this animation.

<<PAUSE>>

Summary (Slide) With this, we have come to the end of this tutorial.


Let us summarize.


In this tutorial, we have learnt about the interface of Synfig.


We also learnt to


  • Draw basic shapes and fill color
  • Add keyframes and waypoints
  • Do a ball animation with squash effect
  • Render the output in gif format


Assignment

(Slide)

Here is an assignment for you.
  • Create a ball animation in a slanting path.


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 Do you have questions in THIS Spoken


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

Slide for no cluttering • The Spoken Tutorial forum is for specific

questions on this tutorial


• Please do not post unrelated and general

questions on them


• This will help reduce the clutter


• With less clutter, we can use these discussion

as instructional material

Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.


More information on this mission is available at

this link.

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, PoojaMoolya

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Synfig/C2/Bouncing-ball-animation/English&oldid=27537"