Doc:Animation Basics

Animation Basics (Draft)

Note to the reader: Please be patient. It may take a few days to finish the initial draft.

Creating an animation in Synfig is really easy: It basically means to change a drawing - you just need to create the first state and the last state of a change, and Synfig will take care of the steps in between.

Let's have a look at a simple example. Consider a moving light similar to the one in front of the KnightRider car. Drop the realism and you get a circle that is moving from the left to the right, and back. In other words, you need to create three 'steps' or 'stages': 1. The circle is on the left. 2. The circle is on the right. 3. The circle is back on the left.

Let's do it.

Start Synfig Studio, and create a new file. A dialog called 'Properties' will appear. Make sure to edit 'End Time'. The strange looking '0f' will change to a more familiar presentation as soon as you click it. Set this to 2 seconds.

Figure 1 about here

Now create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas.

Figure 2 about here

We now need a circle. Change the painting color to red, and draw a circle. It doesn't matter if it's not perfect: You can edit it. Activate the 'Normal' tool, and click the circle. It will go into a sort of editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the red circle by grapping it on its green dot in the middle.

This are the first steps to draw an object and to move it, but not yet an animation, you may say. Indeed. Let's have a look how this works.

// Short explanation of the timeline widget about here

Switch to Animate Editing Mode, grab the circle and move it to the right location. You should note a green dot appear in the Parameters dialog.

Figure 4 about here.

Now move the time edit to 1 sec, and move your red circle to the right. You should note another green dot appears on the Parameter dialog.

Of course, now it's time to bring the circle back to the original position. You may start to fiddle around and try to move it manually, but there's a better way: Move the time slider to the 2 sec position, then context-click on the first green dot of the Parameter dialog, and select 'Duplicate'. You should get another green dot in the Parameter dialog, and your red circle should be back on its original position in your canvas.

Close the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name BasicKnightRider.sif

Open a terminal, change to the directory you saved the file, and type something like

synfig -t gif BasicKnightRider.sif

A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

should appear. Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes youshort animation a rather long one. If you're now seeing a red circle moving from the left to the right and back: Congratulations! You just made your first animation!

Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities incude its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.