Difference between revisions of "Synfig/C2/Bouncing-ball-animation/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) (Created page with "{| border=1 || Time || Narration |- | 00:01 | Welcome to the Spoken Tutorial on “'''Bouncing Ball animation”''' using '''Synfig.''' |- | 00:06 | In this tutorial, we...") |
Sandhya.np14 (Talk | contribs) |
||
Line 5: | Line 5: | ||
|- | |- | ||
| 00:01 | | 00:01 | ||
− | | Welcome to the Spoken Tutorial on “'''Bouncing Ball animation”''' using '''Synfig.''' | + | | Welcome to the '''Spoken Tutorial''' on “'''Bouncing Ball animation”''' using '''Synfig.''' |
|- | |- | ||
Line 13: | Line 13: | ||
|- | |- | ||
| 00:12 | | 00:12 | ||
− | |We will also learn to | + | |We will also learn to: draw basic shapes and fill color, |
|- | |- | ||
| 00:16 | | 00:16 | ||
− | | | + | | add '''keyframes''' and '''waypoints''', |
|- | |- | ||
| 00:19 | | 00:19 | ||
− | | | + | | do a '''ball animation''' with '''squash effect''', |
|- | |- | ||
| 00:22 | | 00:22 | ||
− | | | + | | render the output in '''gif '''format. |
|- | |- | ||
| 00:26 | | 00:26 | ||
− | | To record this tutorial, I am using | + | | To record this tutorial, I am using: |
− | '''Ubuntu Linux''' 14.04 Operating system | + | '''Ubuntu Linux''' 14.04 Operating system, |
'''Synfig''' version 1.0.2 | '''Synfig''' version 1.0.2 | ||
Line 45: | Line 45: | ||
|- | |- | ||
| 00:44 | | 00:44 | ||
− | | This is the interface of '''Synfig'''. | + | | This is the '''interface''' of '''Synfig'''. |
|- | |- | ||
Line 53: | Line 53: | ||
|- | |- | ||
| 00:50 | | 00:50 | ||
− | | The ''' | + | | The standard '''toolbar '''is located below the '''Menu bar.''' Here, we will find some of the '''shortcut''' and '''handles''' options. |
|- | |- | ||
Line 85: | Line 85: | ||
|- | |- | ||
| 01:30 | | 01:30 | ||
− | | Here, we can see the | + | | Here, we can see the '''button'''s that are related to '''animation'''. |
|- | |- | ||
Line 104: | Line 104: | ||
|- | |- | ||
| 01:54 | | 01:54 | ||
− | |Here we will be able to see the '''waypoints''' and the '''key frame''' indications of the '''animation'''. | + | |Here, we will be able to see the '''waypoints''' and the '''key frame''' indications of the '''animation'''. |
|- | |- | ||
Line 120: | Line 120: | ||
|- | |- | ||
| 02:14 | | 02:14 | ||
− | | And above this panel, you can find '''Canvas browser''' | + | | And above this panel, you can find '''Canvas browser''', |
|- | |- | ||
| 02:19 | | 02:19 | ||
− | | '''Palette editor''' | + | | '''Palette editor''', |
|- | |- | ||
| 02:21 | | 02:21 | ||
− | | '''Navigator''' and '''Info panels''' | + | | '''Navigator''' and '''Info panels'''. |
|- | |- | ||
Line 152: | Line 152: | ||
|- | |- | ||
| 02:41 | | 02:41 | ||
− | | Under the '''Layer Type, '''we can see many | + | | Under the '''Layer Type, '''we can see many '''icon'''s. |
|- | |- | ||
| 02:44 | | 02:44 | ||
− | |Select '''Create a region layer '''icon | + | |Select '''Create a region layer '''icon. For this demo, we will leave the other settings as it is. |
|- | |- | ||
Line 163: | Line 163: | ||
|- | |- | ||
| 02:57 | | 02:57 | ||
− | | Please note that the default fill color is white | + | | 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. |
|- | |- | ||
Line 259: | Line 259: | ||
|- | |- | ||
| 05:01 | | 05:01 | ||
− | | In the '''Layers panel''' rename the layer as '''Ball,''' as shown earlier. | + | | In the '''Layers panel''', rename the layer as '''Ball,''' as shown earlier. |
|- | |- | ||
Line 287: | Line 287: | ||
|- | |- | ||
| 05:36 | | 05:36 | ||
− | |Here, click on the green plus sign icon | + | |Here, click on the green plus sign icon to add a new '''keyframe.''' |
|- | |- | ||
Line 295: | Line 295: | ||
|- | |- | ||
| 05:44 | | 05:44 | ||
− | | Notice | + | | Notice a green dot in the centre of the ball. |
|- | |- | ||
| 05:47 | | 05:47 | ||
− | | Drag this green dot to move the ball to the bottom of '''canvas.''' | + | | Drag this green dot to move the ball to the bottom of the '''canvas.''' |
|- | |- | ||
Line 315: | Line 315: | ||
|- | |- | ||
| 06:04 | | 06:04 | ||
− | | Let’s go to the 11th frame. Once again, add a new '''keyframe | + | | Let’s go to the 11th frame. Once again, add a new '''keyframe '''as shown earlier. |
|- | |- | ||
| 06:12 | | 06:12 | ||
− | | Move the ball a little down | + | | Move the ball a little down such as the ball touches the ground. |
|- | |- | ||
| 06:16 | | 06:16 | ||
− | | Notice | + | | Notice orange and yellow dots around the ball. These are known as '''handles'''. |
|- | |- | ||
| 06:22 | | 06:22 | ||
− | | Resize the ball as demonstrated using the orange dots in the '''handles | + | | '''Resize''' the ball as demonstrated, using the orange dots in the '''handles''', to give a squashed effect. |
|- | |- | ||
Line 351: | Line 351: | ||
|- | |- | ||
| 06:50 | | 06:50 | ||
− | |Again click on the '''Duplicate''' icon at the bottom. | + | |Again, click on the '''Duplicate''' icon at the bottom. |
|- | |- | ||
Line 367: | Line 367: | ||
|- | |- | ||
| 07:07 | | 07:07 | ||
− | | Lastly, let us save the file. | + | | Lastly, let us '''save''' the file. |
|- | |- | ||
Line 375: | Line 375: | ||
|- | |- | ||
| 07:14 | | 07:14 | ||
− | | '''Synfig '''gives the file a default name | + | | '''Synfig '''gives the file a default name as you can see here. |
|- | |- | ||
Line 383: | Line 383: | ||
|- | |- | ||
| 07:22 | | 07:22 | ||
− | | Observe that the available '''Synfig '''file | + | | Observe that the available '''Synfig '''file '''extension'''s are '''dot sifz, dot sif, dot sfg'''. |
|- | |- | ||
Line 391: | Line 391: | ||
|- | |- | ||
| 07:34 | | 07:34 | ||
− | | Click on '''Save.'''Let us now render the animation | + | | Click on '''Save.''' Let us now render the animation. |
|- | |- | ||
Line 403: | Line 403: | ||
|- | |- | ||
| 07:45 | | 07:45 | ||
− | | Give a suitable filename | + | | Give a suitable filename as per your preference with '''.gif''' extension. |
|- | |- | ||
| 07:50 | | 07:50 | ||
− | | Click on '''Choose''' button | + | | Click on '''Choose''' button to select the location to '''save'''. |
|- | |- | ||
Line 443: | Line 443: | ||
|- | |- | ||
| 08:38 | | 08:38 | ||
− | | Now, let me go to the '''Desktop | + | | Now, let me go to the '''Desktop''' which is where I saved my '''.gif''' file. |
|- | |- | ||
| 08:44 | | 08:44 | ||
− | | We can play the '''animation '''using '''Firefox '''or any web browser. | + | | We can play the '''animation '''using '''Firefox '''or any '''web browser'''. |
|- | |- | ||
| 08:48 | | 08:48 | ||
Line 466: | Line 466: | ||
|- | |- | ||
| 09:03 | | 09:03 | ||
− | |We also learnt to | + | |We also learnt to: draw basic shapes and fill color, |
|- | |- | ||
| 09:07 | | 09:07 | ||
− | | | + | |add '''keyframes '''and '''waypoints''', |
|- | |- | ||
| 09:10 | | 09:10 | ||
− | | | + | |do a ball '''animation '''with '''squash effect''', |
|- | |- | ||
| 09:13 | | 09:13 | ||
− | |Render the output in '''gif '''format | + | |Render the output in '''gif '''format. |
|- | |- | ||
| 09:16 | | 09:16 | ||
− | | Here is an assignment for you. Create a | + | | Here is an assignment for you. Create a '''ball animation''' in a slanting path. |
|- | |- | ||
Line 494: | Line 494: | ||
|- | |- | ||
| 09:33 | | 09:33 | ||
− | | The Spoken Tutorial Project team:conducts workshops using spoken tutorials | + | | The Spoken Tutorial Project team: conducts workshops using spoken tutorials, |
|- | |- | ||
| 09:38 | | 09:38 | ||
− | | | + | | gives certificates on passing online tests. For more details, please write to us. |
|- | |- | ||
| 09:44 | | 09:44 | ||
− | | Do you have questions in THIS Spoken Tutorial? Please visit this site | + | | Do you have questions in THIS Spoken Tutorial? Please visit this site. |
|- | |- | ||
| 09:49 | | 09:49 | ||
− | |Choose the minute and second where you have the question | + | |Choose the minute and second where you have the question. |
|- | |- | ||
| 09:52 | | 09:52 | ||
− | | Explain your question briefly. Someone from our team will answer them | + | | Explain your question briefly. Someone from our team will answer them. |
|- | |- | ||
| 09:58 | | 09:58 | ||
− | | The Spoken Tutorial forum is for specific questions on this tutorial | + | | The '''Spoken Tutorial forum''' is for specific questions on this tutorial. |
|- | |- | ||
| 10:02 | | 10:02 | ||
− | |Please do not post unrelated and general questions on them. This will help reduce the clutter | + | |Please do not post unrelated and general questions on them. This will help reduce the clutter. |
|- | |- | ||
| 10:08 | | 10:08 | ||
− | |With less clutter, we can use these discussion as instructional material | + | |With less clutter, we can use these discussion as instructional material. |
|- | |- |
Latest revision as of 12:24, 20 September 2018
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. |