Animation Tool :

Syn!g
In previous chapter, we discussed about multimedia and the basic building blocks of
multimedia. To create a multimedia presentation using these building blocks we need application
programs known as multimedia authoring tools. These authoring tools provide the important
framework to organize and edit the multimedia elements like graphics, sound, video and
animation.

Generally, the authoring tools are classified

into: Card or Page based tools
Icon and Event based tools
Time based tools

In Card or Page based authoring tools the elements are organized as pages of a book or pile
of cards. The authoring tool links these pages into an organized sequence. These types of
tool are useful when the different elements can be viewed individually like the pages of a book. Some
examples of card based authoring tools are Hypercard and Multimedia Toolbook.

In Icon and Event based authoring tools the elements are organized as objects in a structural framework
or process. Here you need to build the flowchart of the events or tasks and then add the
elements as per the structure. Some examples of icon and event based authoring tools are
Authorware and IconAuthor.

In Time based authoring tools the elements are organized along a timeline. They are useful
when you want to give a message that has a beginning and an end. The elements are
displayed as per the time or location of the events. Time based authoring tools are the most
popular amongst all. Some examples of time based authoring tools are Synfig, Pencil, Flash
and Director.

There are many multimedia tools available in the market. Some of these tools are proprietary
while others are open source. Some of the open source animation tools easily available on
internet are Pencil and Synfig.

Pencil

Pencil is a 2D animation software that lets you create traditional hand-drawn animation using
both bitmap and vector graphics. It can be freely downloaded from http://www.pencil-
animation.org. It is available on various operating systems like Linux, Windows and MacOS
X.

Figure 2.1 shows the user interface of pencil software. The interface looks quite similar to
other animation or drawing softwares. In pencil animation software, you can create good
Animation Tool : Syn fig 21
animation if you are good at free hand drawing instead of object drawing.

2 Computer Studies : 1I
0
 Figure 2.1 : User interface of Pencil animation software

For object drawing and animation, let us learn about an open source animation tool called
Synfig Studio.

Synfig Studio
Synfig Studio is a time based multimedia authoring tool that falls in the category of open
source. It is available free of cost on the internet and can be downloaded from http://www.synfig.org .
Synfig Studio (or simply Synfig) is 2D vector animation software released in 2005 under the
GNU GPL (General Public License). It is designed to produce film-quality animation with
fewer people and resources. It is available on various operating systems like Linux, Windows
and MacOS X. The first version of Synfig was 0.61.05 and new versions have been regularly
launched with additional features till date. The latest version of Synfig is 0.63.05. Since it is
not available as a standard package in Ubuntu Linux, we need to install it first. Once installed,
it will be available under the Graphics option of Applications menu.

Synfig stores animations in XML (extensible markup language) file format, often compressed
using compression software gzip which stands for GNU zip. These files use the filename
extension .sif in uncompressed form or .sifz in compressed form.

Getting Started
To start Synfig, in the menu bar click Applications —› Graphics —› Synfig. When you start
Synfig Studio you must have observed that it does not start in one window, but opens a number of
individual
Animation Tool : Syn fig 21
windows on the desktop. We can drag the window to change the size. If you want to reset the
Synfig studio window to default window arrangement as shown in the figure 2.2 then go to
Toolbox —› File menu —› Panels —› Reset Windows to Original layout.

Let us first get familiar with the user interface of Synfig. In figure 2.2 you can see the Synfig
studio window layout.

Figure 2.2 : Synfig user interface

As seen in the figure 2.2 the components in the user interface are: toolbox, canvas and
panels. Let us discuss the role of each of them.

Toolbox

Toolbox is the main window which contains system menu and tools to create and edit your
artwork as shown in figure 2.3. Closing the toolbox exits the application. Even if you have
several projects open there will only be one Toolbox for all.

Using the toolbox we can create a new file, open an existing file, save the file and setup
properties. The toolbox also contains the general tools like circle, rectangle, transform and others,
for creating and editing an object. The toolbox window is separated into three areas or
palette:

The upper palette contains buttons for standard file operations like create a new file,
open a file, save, save all files, undo and redo as well as access to the settings dialog
and the help system.

In the middle palette we have the tools like circle, rectangle, transform and others for creating
and manipulating an object. We will learn more about each tool later in this chapter.

22 Computer Studies : 11
 The lowest palette contains the default settings for new layers like
Foreground and background color
it creates the fill and the outline
colors for the object. When we
create a layer without outline then it
has only fill color. We can change the
color by clicking on fill or outline
color.
Brush size : sets the size of the line
for new outline layers.
Blend method : sets the blend
method which will be discussed in
the later chapters. It is set to “By
layer default”.
Opacity : it controls the layers visibility.
0 means the layer is invisible and 1
means the layer is visible.
Gradient : used by Gradient layers
as their fi11. It sets to a default
gradient between the foreground
color and background color.
Interpolation : each waypoint has an
interpolation setting which
determines
the manner in which the parameter
Figure 2.3 Toolbox
changes.
Canvas
When you open a new file or create a new project you will see the canvas window. It can be
seen at the center of the user interface as shown in figure 2.4. This is the place where you
display your artwork and create animation. Whenever we start Synfig studio a new canvas
window appears.

Animation Tool : Syn fig 2S

 Figure 2.4 : Canvas Window

24 Computer Studies : 11
The area with the grey check-board pattern is the working area in which you can create
elements/ layers and manipulate them.

In the upper left comer of the canvas window you can see caret , a little black triangle.
Clicking on this button, the canvas window menu will pop up which allows access to most of
the Synfig features. Generally, in most of the applications you find the set of menus at the
top of the screen or at the top of the drawing window.

You can also see the timeline which appears only when you have non-zero duration in the
settings dialog of your project. To the left you can see the number of the current frame and
on the right side two buttons to switch the animation status and to lock/unlock the
keyframes.

Panels
Synfig has different type of
panels like layers, parameter,
history etc. Panels contain tools and
information about certain elements of
your project. Some panels will allow
you to modify these elements.

The two windows on the bottom horizontally.

and to the right are customizable
dock dialogs. Each dock dialog
contains a set of panels which are
arranged horizontally or vertically.
Some panels share the same space
inside the dock dialog and we can
switch between them by clicking
on their tabs. We can rearrange
the contents of dock dialogs by
dragging the panel tab to where
we want it. If accidentally we
close a panel go to the Toolbox,
select File Panels and click on
the name of the panel you need.
Then drag the panel into the dock
dialog where you want to place
it. Figure 2.5 and 2.6 shows the
panels arranged vertically and
Animation Tool : Syn fig 2S
 Figure 2.5 : Panels arranged
vertically

26 Computer Studies : 11
 Figure 2.6 : Panels arranged horizontally

Let us discuss the function of some of the important panels:

Layers Panel
It displays the layers of your working canvas. It also allows you to manipulate these layers.

Params Panel
It shows the currently selected layer parameters. When multiple layers are selected, only the
parameters that are common in the selected layers are displayed.

Tool Options Panel

It shows options that are specific to the currently selected tool.

Navigator
It shows a thumbnail image of what the currently selected canvas looks like. We can also
zoom in and move the focus around.

History Panel
It keeps track of all the actions that are done while editing the file. The check box column is
used to disable specific actions without going through the entire action list. So if we want to
redo or undo an action or group of actions just click on the check box.

There are many other panels and to know about each simply hold mouse over its icon and a
tooltip will pop up describing its function.

Creating new file

Now let us see how to create a new file and set its properties. To create a new file, perform
the following steps:

Select Toolbox New file. Alternatively, when you start Synfig a new file is
automatically created.

Click on the Caret —› Edit —› Properties. This will open a dialog box as shown in
figure 2.7.

Animation Tool : Syn fig 25

 Figure 2.7 : File properties dialog box

You can set the name of the file and give a description to your animation. In the window,
you can see three tabs namely Image, Time and Other. The Image tab is used to set the
image size and image area as shown in figure 2.7. The Time tab is used for setting the start
time, end time and frames per second. The default settings are as shown in figure 2.8. We will
learn more about these properties later.

Figure 2.8 : File property dialog box with time tab selected

26 Computer Studies : 11
 Now click OK button and the changes will be applied.
After creating the file and setting properties we can now start creating our artwork
and animation.

Let us now see different tools used to create and manipulate an object.

Tools

Tools help you to create the artwork for your

multimedia project. Synfig provides various tools to
create and manipulate an object. Figure 2.9 shows these
tools, each tool has its own set of options and
parameters. Tools are visible in the tool options panel.
And parameters are visible
in the parameter panel. When you select a particular tool,
the tool options panel displays the options that are available Figure 2.9 : Tools to create
for that tool. and manipulate objects

Let us first discuss the tools used to draw an object.

Circle Tool
The Circle tool is used to create new circle layer. Circle layers are used to represent circles.
A circle has two important parameters: centre and radius. You can see the parameters in the
parameter panel. We can change any of the parameter after drawing the object.

To draw a circle select the circle tool, Click in the working area where you want the center of
the circle to be and then drag to set the radius as shown in figure 2.10.

Figure 2.10 : Use of Circle tool

Animation Tool : Syn fig 27

Using the tool options panel you can also change the name of the circle layer, create
additional layers using the checkboxes like create outline layer which is used to create an
outline around the circle. In the figure 2.10, only the Create Circle Layer is selected. If we
select the Create Outline Bline option then the circle object will be created with an outline.

If you want to edit the circle, say for example you want to increase the radius of the circle or
move the circle then click on the duck as shown in the figure 2.11. In case the ducks are
not visible then click on the transform tool to see the ducks. You may be wondering what a
duck is?

Figure 2.11 : Ducks for circle

A duck is a handle that is used to control some parameter of a layer. For example, a circle
will have two ducks: one to control the position of its centre, and second to control its radius.
In figure 2.11, you can see the green and blue colored ducks. Ducks come in different color
and they have specific meaning. The color of the duck signifies a change in the following
aspects of the object:
Green— position of the object
Blue— radius of the circle
Orange — vertices
Yellow —
curves
Dark blue — to change the angle in star

In figure 2.11 the green duck is used to change the position of the circle and the blue color
duck is to change the radius of the circle. Ducks are displayed in the work area for all the
currently selected layers. You have to drag the ducks to change the parameters. You can even
use the cursor keys for more precise control. If you want to constrain the movement to be
either horizontal or vertical then hold down the shift key while dragging.

Sometimes, one type of duck interferes or gets into the way of another duck. You can turn
the ducks on/off by selecting the option present on the top of the canvas window as shown in

28 Computer Studies : 11
figure 2.12.

Animation Tool : Syn fig 29

 Figure 2.12 : Turn on/off various ducks

Rectangle Tool
We can use the rectangle tool in the same way we used the circle tool. It is used to create a
rectangle layer. To draw a rectangle, select the rectangle tool, click where you want any
corner of the rectangle to be, and then drag to the opposite corner as shown in figure 2.13.

Figure 2.13 : Use of Rectangle tool

You can also see the tool options available in the tool options panel. Also the parameters are
displayed in the parameter panel. As we have two objects on the working area, the parameter
panel displays the parameters that are common to circle and rectangle. This way we can
change a single parameter to make changes in all the
objects. If we want to see the parameters
of only the rectangle object; then in the
layers panel we can select rectangle layer
which will now display the parameters of
rectangle only.

We can make the changes to the rectangle

by selecting the duck and then dragging
it. Figure 2.14 shows the ducks for the
Figure 2.14 Ducks for Rectangle tool
rectangle tool.

30 Computer Studies : 11
Star and Polygon Tool

Likewise, we can use the star and polygon tool to

create the star layer and polygon layer. The only
change that you can see is while editing them.
The ducks for each shape is different and change
accordingly. Figure 2.15 (a) shows use of star
tool and ducks to edit the star. Make the changes
to see the difference. Figure 2.15 (b) shows how
to draw polygon with polygon tool. A polygon can
be created
using any number of points and then click on the first Figure 2.15(a) Use of Star tool
point to close it.

Figure 2.15(b) : Use of Polygon tool

BLine Tool
Bline tool is used to make objects with any number of points and curves. Click on the Bline
tool and start inserting the points. In figure 2.16 (a) you can see a shape drawn using Bline
tool. To stop drawing the object, right click on the last point. After drawing, the object can be
edited using the ducks. Figure 2.16 (b) shows the ducks of the shape drawn using Bline tool.

Figure 2.16(a) : BLine tool

Animation Tool : Syn fig 31
 Figure 2.16(b) : Drawn shape with the ducks

After discussing about the object drawing tools, now let us discuss some other tools.

Draw Tool

You must be familiar with the draw tool as it is

the most common tool used for drawing. You
can draw with the help of mouse. Figure 2.17
shows the use of draw tool.

Figure 2.17: Draw tool

Fill Tool

The Fill tool changes the color of objects. To fill a color in the object, select the color from
the color palette. Select the Fill tool button and then click on the object. This tool has an
effect on the following layers:

Circle Layer
Rectangle
Layer
Polygon Layer
Star Layer
Region Layer
Outline
Layer
Checkboard Layer

The other layers are not affected by this tool because they use gradient to fill the visual area.

Eyedrop Tool
The Eyedrop tool allows you to select colors from the Eyedrop tool. Select the Eyedrop tool,
and then click in the work area to set the default foreground color in the Eyedrop tool to be
32 Computer Studies : 11
the color you are currently pointing at.

Animation Tool : Syn fig 33

Gradient Tool

The Gradient tool is used to create smooth

transitions between two or more colors in
an object. When you select the Gradient tool,
the tool options panel will show the
options for
the Gradient tool as in figure 2.18. Figure 2.18 : Gradient tool options panel
It allows you to set a name for the layer and choose the type of gradient.

There are 4 types of gradients namely linear, radial, conical and spiral.

Linear - This produces a simple transition in a straight line. Set the foreground and
background colors. Click where you want the gradient to begin, and drag to where you want
the transition to end. The gradient will be created perpendicular to the line you drag out. You can
edit the gradient by moving the endpoint in any direction using the normal tool. Figure 2.19 shows
the effect of linear gradient.

Figure 2.19 : Linear gradient

Radial - This produces circular colors with the transition being at the center of those circles.
Click where you want the center of the circles to be, and drag to set the radius of the
transition. Figure
2.20 shows the effect of radial gradient.

Figure 2.20 : Radial gradient

Conical - This has the appearance of looking down on a tip of a cone. The gradient is along
the circular arc of the center and goes in all directions. Click to set the center, and drag to
indicate the direction in which the foreground and background colors should go. The center
endpoint adjusts the center of the gradient and the other endpoint adjusts the direction of the
B2 Computer Studies : 11
gradient. Figure 2.21 shows the effect of conical gradient.

Animation Tool : Syn fig 33

 Figure 2.21 : Conical gradient
Spiral - This produces a spiral gradient. Click to set the center of the spiral and drag to set the
‘tightness’. Figure 2.22 shows the effect of spiral gradient.

Figure 2.22 : Spiral gradient

Text tool
Text tool allows you to enter text by creating a text layer. Select the text tool icon from the
toolbox, and then click in the canvas window where you want the text layer to be created. A
dialog box will appear, allowing you to enter the text you want in the created layer as shown
in figure
2.23 (a).

B2 Computer Studies : 11
 Figure 2.23(a) : Text layer dialog box

Animation Tool : Syn fig 35

Figure 2.23 (b) shows a new text layer created along with its ducks. Using the parameter
panel we can change the entered text later on according to our need.

Figure 2.23(b) : Text with ducks

The tool options panel will allow us to:

Select the name for the new layer; this number will increment as we add new layer.
Select single or multi line editor for entering the text. If single line is selected then
click the enter key to submit the value while in multi-line editor, click the OK button
to submit the value.
Select the horizontal and vertical size of the text.
Select the ‘orientation’ of the text. By default (0.5, 0.5) is selected which means that
the text will be centered around the point you clicked on.
Select the font family.

ZOOIR JOOl

The Zoom tool is used to get a closer or far away view of the objects in the working area.
The zooming does not affect the output results. It is used to just view the objects from close
or far range.

Width Tool
The Width tool helps to increase or decrease the width of a line. It acts like the way you use
pencil to make a line thicker or eraser to make it thinner. Select the outline layer to change
the width on particular segment of a line, and then move mouse over that line, press the left
mouse button and move cursor back and forth along the line. The width of outline will be
increased at the places where you moved the cursor. To decrease the width hold “CTRL” key
while moving the cursor. This tool is used to fine tune the line width.

Transform Tool
Transform tool allows you to select objects and to move, rotate or scale the ducks. Select
the object on the canvas window and click the transform tool. If the object cannot get

34 Computer Studies : 11
selected as it is obscured by another layer then you can select its layer in the layer panel.
This will display the ducks of the object. Select the duck and make the change according to
your need.

Smooth Move Tool

Smooth move tool works just like transform tool, except when multiple ducks are selected.
Select multiple ducks by pressing CTRL+a or dragging a rectangle around the ducks.
Now when you drag one of the selected duck, the other selected ducks will also move along
with it.

Scale Tool
Just as we discussed smooth move tool, here also when we select multiple ducks, and drag
one of the selected ducks the other selected ducks will scale relative to the centre of the
selected group.

Rotate Tool
As in smooth move and scale tool, when we select multiple ducks, and drag one of the
selected ducks the other selected ducks will move rotating about the centre of the selected
group.

Summary
In this chapter we learned about the authoring tools and its types. We have become
familiar with the Synfig user interface and also learned to create a new file and set its
properties. We discussed the purpose of each panel. The use of each tools along with
the tool options were discussed. We can use these tools to create and manipulate the
objects and then animate later on. So let us now learn to animate these objects. Having
learnt functionalities of various tools available in Synfig, we can now proceed to create a
multimedia animation using these tools.

EXERCISE
What are authoring tools? List different types of authoring tools.
2. What is the purpose of gradient tool? State the use of four types of gradient learned in
this chapter.
3. Briefly explain the three palettes of toolbox window.
4. List the important panels and their function.
8. Choose the most appropriate option from those given below :
(1) The elements are organized as pages of a book or pile of cards in which of the
following forms?
(a) card or page based tools (b) icon and event based tools
(c) time based tools (d) animation tools

Animation Tool : Syn fig 35

 (2) Which of the following tool helps in changing the color of objects?
(a) draw (b) 81
(c) circle (d) rectangle
Synfig Studio represents which of the following type of authoring tools?
(a) time based authoring tool (b) event based authoring tool
(c) page based authoring tool (d) icon based authoring tool
(4) Which of the following terms represents the number of palettes a toolbox window
separated into?
(a) two (b) three
(c) four (d) five
(S) Which of the following is the file extension of a file created in Synfig Studio?
(a) .fiz (b) .sifz
(c) zif (d) .fis
(6) Which of the following panel shows the currently selected layer parameter?
(a) layer (b) params
(c) timetrack (d) history
(7) Which of the following represents the colour of the duck used to change the radius of
the circle?
(a) green (b) yellow
(c) orange (d) blue
(8) Which of the following tools is used to make objects with any number of points and
curves?
(a) bline (b) circle
(c) rectangle (d) star
(9) Which of the following tools is used to create smooth transitions between two or more
colours in an object?
(a) width (b) 81
(c) eyedrop (d) gradient
(10) Which of the following gradient produces simple transition in a straight line?
(a) conical (b) radial
(c) linear (d) spiral
(11) Authorware and IconAuthor are examples of which of the following types of tools?
(a) card or page based tools (b) icon and event based tools
(c) time based tools (d) animation tools
(12) Which of the following animation software lets you create traditional hand-drawn
animadon?
(a) pencil (b) synhg
(c) flash (d) director

36 Computer Studies : 11
 (13) Which of the following are two important parameters of circle tool?
(a) centre, diameter (b) diameter, point
(c) radius, diameter (d) centre, radius
(14) Which of the following terms represent a handle used to control some parameter
of the layer?
(a) point (b) tool
(c) duck (d) panel
(15) The duck used to change the position of the object has which of the following
colour?
(a) green (b) blue
(c) red (d) yellow
(16) The layers visibility is controlled by which of the following operations?
(a) opacity (b) gradient
(c) interpolation (d) blend
(17) Which of the following tools allow you to enter text by creating a text layer?
(a) circle (b) text
(c) draw (d) fill

LABORATORY EXERCISES

1. Draw a circle, rectangle and star on the canvas. Select different color for each object.
Also insert text as per the object.
2. Using Bline tool draw a candle.
3. Using appropriate tools draw a flower and a candle.

Animation Tool : Syn fig 37