Synfig/C2/Bouncing-ball-animation/English-timed
From Script | Spoken-Tutorial
| Time | Narration |
| 00:01 | Welcome to the Spoken Tutorial on “Bouncing Ball animation” using Synfig. |
| 00:06 | In this tutorial, we will learn about the interface of Synfig. |
| 00:12 | We will also learn to: draw basic shapes and fill color, |
| 00:16 | add keyframes and waypoints, |
| 00:19 | do a ball animation with squash effect, |
| 00:22 | render the output in gif format. |
| 00:26 | To record this tutorial, I am using:
Ubuntu Linux 14.04 Operating system, Synfig version 1.0.2 |
| 00:37 | Go to Dash home and type Synfig. |
| 00:40 | You can open Synfig by clicking on the logo. |
| 00:44 | This is the interface of Synfig. |
| 00:46 | The Menu bar is located at the top. |
| 00:50 | The standard toolbar is located below the Menu bar. Here, we will find some of the shortcut and handles options. |
| 00:58 | This is followed by horizontal and vertical rulers. |
| 01:02 | The Tool box is located on the left side of the interface. |
| 01:06 | Just below the Tool box, notice there are two boxes. |
| 01:10 | The upper box is in black color. And the tool-tip says it is the Outline color. |
| 01:16 | The lower box is in white color. And the tool-tip says it is the Fill color. |
| 01:21 | In the center, is the canvas. This is where we will do our animation. |
| 01:27 | Below the canvas, is the Animation panel. |
| 01:30 | Here, we can see the buttons that are related to animation. |
| 01:35 | At the bottom left of the interface, is the Parameters panel. |
| 01:39 | Parameters will be visible once we create an object on the canvas. |
| 01:43 | Next to this, is the Keyframes panel. Here we will add the keyframes. |
| 01:49 | On the right of this panel, we can find the Time track panel. |
| 01:54 | Here, we will be able to see the waypoints and the key frame indications of the animation. |
| 02:01 | Waypoints will be visible once we create an animation on the canvas. |
| 02:05 | At the right bottom of the interface, is the Layers panel. |
| 02:10 | Above the Layers panel, we can see the Tool options panel. |
| 02:14 | And above this panel, you can find Canvas browser, |
| 02:19 | Palette editor, |
| 02:21 | Navigator and Info panels. |
| 02:24 | We can get accustomed to using all these, as we go along. |
| 02:28 | Now, let us start with our first animation. |
| 02:31 | First, we will create a background. |
| 02:34 | Go to Tool box. Click on the Rectangle tool. |
| 02:37 | Notice the change in the Tool options panel. |
| 02:41 | Under the Layer Type, we can see many icons. |
| 02:44 | Select Create a region layer icon. For this demo, we will leave the other settings as it is. |
| 02:51 | Now draw a rectangle covering 3/4th of the canvas, as demonstrated. |
| 02:57 | 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. |
| 03:07 | Notice that a layer is created in the Layers Panel. |
| 03:11 | Synfig gives it a name, by default. Here it says “Rectangle060Region”. |
| 03:18 | Giving meaningful names to layers is always a good practice. |
| 03:21 | It helps us to locate a particular object from among the long list of layers. |
| 03:28 | You will appreciate this more when we create complicated animations. |
| 03:32 | Come back to the Synfig interface. |
| 03:35 | I will change this default layer name to Sky. |
| 03:39 | So, click on the name, type Sky and press Enter. |
| 03:43 | The name of the layer is now sky. |
| 03:46 | Please note that the cursor is very sensitive. Hence, avoid clicking randomly to prevent duplication of the previous action. |
| 03:55 | The parameters for the rectangle are created in the Parameters panel. |
| 04:00 | Locate the Color parameter and double-click on the Value column. Immediately, a dialog box appears. |
| 04:08 | Change the color to blue by dragging the RGB scrollers. |
| 04:13 | Now, close this dialog box. |
| 04:15 | Next, click on the Transform tool. |
| 04:19 | Then click outside the canvas to deselect the Sky layer. |
| 04:24 | Now again select the Rectangle tool. |
| 04:26 | Create another rectangle in the lower part of the canvas. |
| 04:31 | Change the layer name to Ground and the color to green, as shown earlier. |
| 04:40 | Select the Transform tool and click outside the canvas to deselect the layer. |
| 04:46 | Next, let us draw a ball. In the Toolbox, click on the Circle tool. |
| 04:52 | Under the Layer Type, Create a region layer should be selected. |
| 04:57 | Click on the top part of the canvas and draw a circle. |
| 05:01 | In the Layers panel, rename the layer as Ball, as shown earlier. |
| 05:07 | Change the color to red. |
| 05:11 | Let us now start animating the ball. Select the Transform tool. |
| 05:16 | In the Animation panel, click on Turn on animate editing mode icon. |
| 05:22 | The red rectangle border that appears on the screen, indicates that we are in Animation mode. |
| 05:29 | Enter 9 on the current frame box. Press Enter. |
| 05:34 | Next, click on the Keyframes panel. |
| 05:36 | Here, click on the green plus sign icon to add a new keyframe. |
| 05:41 | Select the ball on the canvas. |
| 05:44 | Notice a green dot in the centre of the ball. |
| 05:47 | Drag this green dot to move the ball to the bottom of the canvas. |
| 05:52 | Move the ball a little above the ground as demonstrated. |
| 05:55 | Use shift key to move in a straight path while dragging. |
| 05:59 | Observe waypoints are created on the Time track panel. |
| 06:04 | Let’s go to the 11th frame. Once again, add a new keyframe as shown earlier. |
| 06:12 | Move the ball a little down such as the ball touches the ground. |
| 06:16 | Notice orange and yellow dots around the ball. These are known as handles. |
| 06:22 | Resize the ball as demonstrated, using the orange dots in the handles, to give a squashed effect. |
| 06:31 | Move the Time cursor to the 13th frame. |
| 06:36 | Select the 9th frame on the Keyframes panel. |
| 06:39 | Click on Duplicate icon at the bottom. |
| 06:43 | Move the Time cursor to the 24th frame. |
| 06:46 | Select the zeroth frame on the Keyframes panel. |
| 06:50 | Again, click on the Duplicate icon at the bottom. |
| 06:53 | Go to the zeroth frame. Click outside the canvas to deselect the ball. |
| 06:59 | Click on the Play button to see the animation that we created. |
| 07:04 | Now click on the Pause buton |
| 07:07 | Lastly, let us save the file. |
| 07:09 | Go to File and click on Save. I will save in Desktop. |
| 07:14 | Synfig gives the file a default name as you can see here. |
| 07:18 | I will change this name to Bouncing-ball. |
| 07:22 | Observe that the available Synfig file extensions are dot sifz, dot sif, dot sfg. |
| 07:31 | I will select dot sifz format. |
| 07:34 | Click on Save. Let us now render the animation. |
| 07:39 | Go to File and click on Render. |
| 07:42 | Render settings dialog box opens up. |
| 07:45 | Give a suitable filename as per your preference with .gif extension. |
| 07:50 | Click on Choose button to select the location to save. |
| 07:54 | I will choose Desktop and then click on OK. |
| 07:57 | Click on Target drop down menu and select Magick++. |
| 08:03 | Increase the Quality to maximum, i.e. 9, by clicking on the plus sign. This value should never be below 3. |
| 08:11 | Leave the Image settings as it is. |
| 08:14 | Click on the Time tab. Here, the frame rate should be 24 fps. |
| 08:20 | This will give a smooth animation without jerks. |
| 08:24 | Change the End Time to 24, since our animation ends at the 24th second. Press Enter. |
| 08:31 | Lastly, click on the Render button at the bottom. It may take a few seconds to render the output. |
| 08:38 | Now, let me go to the Desktop which is where I saved my .gif file. |
| 08:44 | We can play the animation using Firefox or any web browser. |
| 08:48 | Please note you don’t need internet connection to play this animation. |
| 08:54 | With this, we have come to the end of this tutorial. |
| 08:57 | Let us summarize. |
| 08:59 | In this tutorial, we have learnt about the interface of Synfig. |
| 09:03 | We also learnt to: draw basic shapes and fill color, |
| 09:07 | add keyframes and waypoints, |
| 09:10 | do a ball animation with squash effect, |
| 09:13 | Render the output in gif format. |
| 09:16 | Here is an assignment for you. Create a ball animation in a slanting path. |
| 09:23 | Your completed assignment should look like this. |
| 09:27 | This video summarizes the Spoken Tutorial project. Please download and watch it. |
| 09:33 | The Spoken Tutorial Project team: conducts workshops using spoken tutorials, |
| 09:38 | gives certificates on passing online tests. For more details, please write to us. |
| 09:44 | Do you have questions in THIS Spoken Tutorial? Please visit this site. |
| 09:49 | Choose the minute and second where you have the question. |
| 09:52 | Explain your question briefly. Someone from our team will answer them. |
| 09:58 | The Spoken Tutorial forum is for specific questions on this tutorial. |
| 10:02 | Please do not post unrelated and general questions on them. This will help reduce the clutter. |
| 10:08 | With less clutter, we can use these discussion as instructional material. |
| 10:13 | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
More information on this mission is available at this link. |
| 10:23 | This is Arthi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.
Thanks for joining. |
