Synfig/C2/Bouncing-ball-animation/English

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