Welcome to the Spoken Tutorial on “Bouncing Ball animation” using Synfig.
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.
To record this tutorial, I am using: Ubuntu Linux 14.04 Operating system, Synfig version 1.0.2
Go to Dash home and type Synfig.
You can open Synfig by clicking on the logo.
This is the interface of Synfig.
The Menu bar is located at the top.
The standard toolbar is located below the Menu bar. Here, we will find some of the shortcut and handles options.
This is followed by horizontal and vertical rulers.
The Tool box is located on the left side of the interface.
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.
In the center, is the canvas. This is where we will do our animation.
Below the canvas, is the Animation panel.
Here, we can see the buttons that are related to animation.
At the bottom left of the interface, is the Parameters panel.
Parameters will be visible once we create an object on the canvas.
Next to this, is the Keyframes panel. Here we will add the keyframes.
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.
At the right bottom of the interface, is the Layers panel.
Above the Layers panel, we can see the Tool options panel.
And above this panel, you can find Canvas browser,
Palette editor,
Navigator and Info panels.
We can get accustomed to using all these, as we go along.
Now, let us start with our first animation.
First, we will create a background.
Go to Tool box. Click on the Rectangle tool.
Notice the change in the Tool options panel.
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.
Now draw a rectangle covering 3/4th of the canvas, as demonstrated.
Please 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.
Notice that a layer is created in the Layers Panel.
Synfig gives it a name, by default. Here it says “Rectangle060Region”.
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.
Come back to the Synfig interface.
I will change this default layer name to Sky.
So, click on the name, type Sky and press Enter.
The name of the layer is now sky.
Please note that the cursor is very sensitive. Hence, avoid clicking randomly to prevent duplication of the previous action.
The parameters for the rectangle are created in the Parameters panel.
Locate the Color parameter and double-click on the Value column. Immediately, a dialog box appears.
Change the color to blue by dragging the RGB scrollers.
Now, close this dialog box.
Next, click on the Transform tool.
Then click outside the canvas to deselect the Sky layer.
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.
Select the Transform tool and click outside the canvas to deselect the layer.
Next, let us draw a ball. In the Toolbox, click on the Circle tool.
Under the Layer Type, Create a region layer should be selected.
Click on the top part of the canvas and draw a circle.
In the Layers panel, rename the layer as Ball, as shown earlier.
Change the color to red.
Let us now start animating the ball. Select the Transform tool.
In the Animation panel, click on Turn on animate editing mode icon.
The red rectangle border that appears on the screen, indicates that we are in Animation mode.
Enter 9 on the current frame box. Press Enter.
Next, click on the Keyframes panel.
Here, click on the green plus sign icon to add a new keyframe.
Select the ball on the canvas.
Notice a green dot in the centre of the ball.
Drag this green dot to move the ball to the bottom of the canvas.
Move the ball a little above the ground as demonstrated.
Use shift key to move in a straight path while dragging.
Observe waypoints are created on the Time track panel.
Let’s go to the 11th frame. Once again, add a new keyframe as shown earlier.
Move the ball a little down such as the ball touches the ground.
Notice orange and yellow dots around the ball. These are known as handles.
Resize the ball as demonstrated, using the orange dots in the handles, to give a squashed effect.
Move the Time cursor to the 13th frame.
Select the 9th frame on the Keyframes panel.
Click on Duplicate icon at the bottom.
Move the Time cursor to the 24th frame.
Select the zeroth frame on the Keyframes panel.
Again, click on the Duplicate icon at the bottom.
Go to the zeroth frame. Click outside the canvas to deselect the ball.
Click on the Play button to see the animation that we created.
Now click on the Pause buton
Lastly, let us save the file.
Go to File and click on Save. I will save in Desktop.
Synfig gives the file a default name as you can see here.
I will change this name to Bouncing-ball.
Observe that the available Synfig file extensions are dot sifz, dot sif, dot sfg.
I will select dot sifz format.
Click on Save. Let us now render the animation.
Go to File and click on Render.
Render settings dialog box opens up.
Give a suitable filename as per your preference with .gif extension.
Click on Choose button to select the location to save.
I will choose Desktop and then click on OK.
Click on Target drop down menu and select Magick++.
Increase the Quality to maximum, i.e. 9, by clicking on the plus sign. This value should never be below 3.
Leave the Image settings as it is.
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.
Lastly, click on the Render button at the bottom. It may take a few seconds to render the output.
Now, let me go to the Desktop which is where I saved my .gif file.
We can play the animation using Firefox or any web browser.
Please note you don’t need internet connection to play this animation.
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.
Here is an assignment for you. Create a ball animation in a slanting path.
Your completed assignment should look like this.
This video summarizes the Spoken Tutorial project. Please download and watch it.
The Spoken Tutorial Project team: conducts workshops using spoken tutorials,
gives certificates on passing online tests. For more details, please write to us.
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.
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.
This is Arthi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off. Thanks for joining.