Animation Tool : | yng 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. Thes 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. types of tool are 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 TeonAuthor. 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. 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 veetor 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 if you are good at free hand drawing instead of object drawing. 20 ‘Computer Studies : 11Koss @ © crensin fh (eS) 2 ie ra eeep 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 too! that falls in the category of open source. Itis available free of cost on the intemet and can be downloaded from http:/iwwwsynfig.org . Synfig Studio (or (General Public License). It is designed to produce film-quali ply Synfig) is 2D vector animation software released in 2005 under the GNU GPL 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 -> Graphies > 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 : Synfig 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. Toolbox Canvas Panels *Panels 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, © Inthe 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. 2 ‘Computer Studies : 11© The lowest palette contains the default settings for new layers like Canvas 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 fill. 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 changes. a PSOE &E NFO) Ve Pla |e Be) a N|O)|A) Olz ? a 1.00pt ByLayer Default 1.00 —a———) clamped UpperPalette Middle Palette Lower Palette Figure 2.3 : Toolbox 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. Oneere « oe ee] caret sts " onli Batt PM Figure 2.4 : Canvas Window Animation Tool : Synfig 23The area with the grey check-board pattem 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 |p), 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. fo 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 ete. Panels contain tools and information about certain elements of your project. Wavigator —1o Some panels will allow you to modify these elements. The two windows on the bottom and Info — Palette ca) Editor oem oom to the right are customizable dock dialogs. Each dock dialog contains Canvas a set of panels which are arranged Browser dialog and we can switch between them by clicking on their tabs. We Layers —5 = Groups can rearrange the contents of dock icon Name __ZOepth 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 Figure 2.5 : Panels arranged vertically panels arranged vertically and horizontally. 24 ‘Computer Studies : 11Timetrack Curves Canvas Metadata Params Children Keyframes Figure 2.6 : Panels arranged horizontally Let us discuss the fimction 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 fumetion. 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. Altematively, 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 : Synfig 28Sone een) Canvas Info Name Description Image | Time | other Image Size Width 00/2 xRes 72.02) Physicalwidth 6.67 |: Height 270); yRes 72.0|=| Physical Height 375): Image Span 9.1788 > Image Area Topleft 40000000000 =) ¥: 2.2500000000 |= Bottom Right x: 4,0000000000 =] ¥: -2.2500000000 |? (ox, Apply..| | Close Figure 2.7 : File properties dialog box You can set the name of the file and give a description to your animation. In the windo' 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. ;, you Properties - Synflg Animation 1 ‘canvas info Name Synfig Animation 1 Description Image | Time | other ‘Time Settings Frames per second 24,0000, P start Time of End Time 5s OK (Apply) | close 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 aaa = projet. Syl. provides various tols to create and (88) 6) 3) manipulate an object. Figure 2.9 shows these tools, each (O)|G |) (B)\s) tool has its own set of options and parameters. Tools are (Bj S)®)|B) 2) visible in the tool options panel. And parameters are visible (alZi@) in the parameter panel. When you select a particular tool, the tool options panel displays the options that are available igure 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 cirele 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, ° (BIB) ontantannt cine tne 3 7 Cuteteponbine Figure 2.10 : Use of Animation Tool : Synfig 27Using the tool options panel you can also change the name of the circle layer, ereate 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? 4621p 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 obj 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 pr figure 2.12. int on the top of the canvas window as shown in 28 ‘Computer Studies : 11(Oalxlo) & (4) 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 comer 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. e@ We can make the changes to the rectangle by selecting the duck and then dragging it, Figure 2.14 shows the ducks for the rectangle tool. Figure 2.14 : Ducks for Rectangle tool Animation Tool : Synfig 29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 fist 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. noe tee fil © eyedrop (@ gradient (10) Which of the following gradient produces simple transition in a straight line? (a) conical (b) radial (©) linear (a) spiral (11) Authorware and IeonAuthor are examples of which of the following types of tools? (a) card or page based tools (b)_ icon and event based tools (©) time based tools (@)_ animation tools (12) Which of the following animation software lets you create traditional hand-drawn animation? (@)_ pencil (b) synfig (©) flash (d) director 36(13) Which of the following are two important parameters of circle tool? (a) centre, diameter (b) diameter, point (©) radius, diameter (@ centre, radius (14) Which of the following terms represent a handle used to control some parameter of the layer? (a) point (b) tool (©) duck (@)_ panel (15) The duck used to change the position of the object has which of the following colour? (@) green (b) blue (©) red. (a) yellow (16) The layers visibility is controlled by which of the following operations? (a) opacity (b) gradient (©) interpolation (@) blend (17) Which of the following tools allow you to enter text by creating a text layer? (@) circle (b) text (©) draw @ fil 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 : Synfig 37