Doc:Animation Basics

Animation Basics (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, 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 the 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 'stages': The cirle on the left, the cirle on the right, and the cirle back on the left. Let's do it.

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

Figure 1 about here

Now create a simple black rectangle that will serve as our background.

Figure 2 about here

We now need a circle. Change the painting color to red, and draw a cirle. It doesn't matter if it's not perfect: You can edit it. Activate the 'Normal' tool, and clicking the circle 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 when you click on the green dot in the middle.

This were the first steps to draw an object and to move it. That's 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 cirle 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 Paramters dialog.

Of course, now it's time to bring the cirle 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 sewc position , then context-click on the first green dot of the Parameters 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 a short while, 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. 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.