Sandhya.np14 at 06:54, 20 September 2018

2018-09-20T06:54:10Z

PoojaMoolya: 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..."

2018-09-05T08:51:10Z

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..."

New page

{| border=1
|| 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 '''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.

|}

Synfig/C2/Bouncing-ball-animation/English-timed - Revision history

Sandhya.np14 at 06:54, 20 September 2018

PoojaMoolya: 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..."