**This is an old revision of the document!**

Synfig

F

    ancy yourself an animator? Well even
    if you didn't before, you will do by the
    end of this article, thanks to Synfig

Studio, a vector-based 2d animation pro- gram for Linux that puts lesser alternatives, both free and proprietary, to shame.

  Install Synfig Studio directly from the

Ubuntu Software Center, which you can aunch from the sidebar of the Ubuntu desk- top or from the Applications screen by click- ng the Ubuntu logo in the top left corner. Do a search in the Ubuntu Software Center for “synfig” and click the top result (labeled simply “synfig”). This will open a screen that provides details about Synfig. At the bottom of this screen are two additional packages that you can install along with Synfig, so ac- tivate those and then click the Install button at the top right of the window.

  Technically, Synfig is a backend applica-

tion that renders animations and vectors, while Synfig Studio is the graphical applica- tion with which you will actually interface. Since using Synfig (the backend) directly is a very advanced practice, this article will use “Synfig” and “Synfig Studio” interchange- ably when speaking about “Synfig Studio”.

  Not strictly necessary, but especially

helpful, are these additional packages: python-wxglade, libstdc++5, ffmpeg, Kcol- orChooser.

 Once all of these are installed, launch

Synfig Studio from the Applications screen.

More Complex than It Looks Normally I relish in telling people that an ap- plication is a lot simpler than it looks, but in the case of Synfig Studio, it's deceptively com- plex. If you're used to vector drawing or even pixel painting, the tools and windows of Syn- fig will appear to be self-explanatory. Don't let it fool you; Synfig is a big, complex, and pow- erful application. If you think you know how to use it based on previous drawing experience, try to forget everything you think you know, because Synfig deals with shapes in motion and as a result works very very differently than the static images you might be used to creating. If you know nothing about vectors, bitmaps, or computer art, then you're a little ahead of the game, in a way.

   In Synfig Studio, there are four (4) win-

dows: the tool window in which your anima- tion and drawing tools are located, the can- vas upon which you draw, a palette window for layers and navigation, and a timetrack where you can visualize the changes being made to your drawing over time. Most of the windows are more connected to one anoth- er than it appears, so be prepared to use each of them often.

A “Hello World” Animation Let's do a quick and easy animation just to get familiar with the basic concepts of Synfig. As our first mas- terpiece, we'll animate a sunrise.

  Click the Rectangle Tool in the

Tools window. First, we'll draw the sky, so pick a colour for your land- scape, probably blue would make sense but you're the artist so pick whatever you want. Synfig expects you to just know RGB or YUV values off the top of your head, but you can also use hex values if you're familiar with web design. Either way, I find that an application like

KColorChooser (installable from the Ubuntu Software Center) is endless- ly helpful; I launch it, find my colour, and copy/paste the hex code.

  Once you're happy with your

colour choices, draw a rectangle to encompass the entire canvas. It should turn blue. If, upon seeing all that blue, you decide you didn't quite nail the shade that you want- ed, you can change it using the Fill Tool from the Tools window.

  You've done well so far, so save

your animation (such as it is) by click- ing anywhere in the gray area around your canvas, or use the arrow located at the conjunction of the canvas rul- ers. You'll find the Save option in the File menu, as usual. From this point on, you can save with [Ctrl] + [s].

  Now let's draw the sun. Choose

your colour, choose the Circle Tool, and draw a yellow circle on your can- vas. Notice that when you drew the sky and the sun, new layers were add- ed to your Layer Palette on the right side of your screen. Of course, as with any graphics program, the order of the layers matter; the topmost layer cov- ers a lower layers. Since everything you draw gets its own layer, it's really smart to name your layers as you go. Single-click on a layer to name it.

  And finally, draw a sloping land-

scape. I chose green for my colour, and used the Bline Tool. The Bline tool, as you might guess, draws bezier curves: mathematically-cal- culated curved lines that are ad- justed with handles located at each node of your shape. When drawing a Bline shape in Synfig, you need to close the shape by bringing your mouse to a node and right-clicking on it to choose “Loop Bline” from the contextual menu. This closes the shape, filling it with your Fill Colour, and adding it to your Layers Palette.

  Once the landscape object ex-

ists, you can use the Transform tool from the Tools window to bend its lines; click and drag the top of your landscape to give it a gentle slope.

  Notice that when you drew the

landscape, two new shapes got add- ed to your Layers: the Bline Fill and the Bline outline. Synfig sees out- lines and fills as separate objects

(although by default they are locked together in pre-defined shapes like circles and rectangles).

   Now let's animate the action of

the sunrising.

   What is animation? Well, it's just

movement of some pixels over some amount of time. So all we have to do in order to get movement in our scene is to tell Synfig where the sun should be in the first frame of our animation, and where it should be at the final frame, and Synfig will do the rest of the work for us.

   To make the sun the active layer,

click on the icon in the sun layer in the Layers window (if you click the name of the sun layer, then Synfig thinks you want to rename the layer, so click the blue icon instead). Then click the Transform tool in the Tools Window.

   Notice that the sun shape is high-

lighted in a peculiar way: it shows you the outline of the shape with a single node along the edge, and it has a sec- ond node in the center of the shape. The center node represents the loca- tion of the shape on the canvas. The node along the outline represents the span of the shape in space; that is, if you wanted to resize the sun, you would use the outside node. If you want, as we do, to move where the sun is located on the canvas, then you click and drag the center node.

   Do that now, so that the sun is

hidden, or nearly hidden, behind the landscape shape. Once the sun is properly positioned, locate the Ani- mation button: it's an icon of a green stick figure, in the lower right of the canvas window. When you click

it, it creates a red border around your canvas so that you know that you are in Animation Mode; in this mode, anything you do is recorded by Synfig, so be careful!

   Now that you are in Animation

Mode, you need to record the posi- tion of the sun. Grab onto the center node of the sun with your transform tool, and “jiggle it” (believe it or not, that's a technical term). To “jiggle”, all you need to do is move the sun a pixel or two; this registers with Synfig that the sun's attributes should be recorded and if you look down at your Timetrack window, you'll see a big red diamond has appeared at frame 0, meaning that everything (color, size, position) has been recorded.

   By default, we have 5 seconds to

work with, and there are 24 frames in a second. If 24 frames are 1 sec- ond, if we had the sun high in the sky at frame 23 or so, then we'd have an animation of an unnaturally fast sunrise. Probably a 3 second dura- tion would be a lot better, so click in the Timetrack along the top so that your blue marker line sits roughly at the 3 second mark.

   We've moved Synfig forward in

time, so now we need to move the sun in space. Drag the sun using the transform tool and the sun's center node, into the sky. Notice that the Timetrack window again adds a big red keyframe diamond at the posi- tion of your blue marker, meaning that every attribute of your sun has been recorded.

   And just like that, you've created

an animation!

Viewing the Animation First thing's first: get out of Anima- tion Mode by clicking the red stick figure in the lower right of the Can- vas window. That dis-arms your workspace and protects you from unintentional animation.

  You can playback a preview-

version of your animation using the playback controls at the bottom of your canvas. Use the leftmost Re- wind button to go back to the start of your animation, and the Play but- ton to play through it once. Don't worry about the quality; this is real- time rendering that is meant only to give you a rough idea of timing and positioning.

  To get a full quality render of your

animation, choose Render from the

File menu. This brings up the Ren- der dialogue window. There are a lot of choices; don't panic.

   By default, Synfig wants to ren-

der your animation out as a series of PNG files, because that's how professional animators work. You probably would rather have a movie file, so change the filename to sun- rise.ogv.

   Change the Target to ffmpeg

and click the Parameters button to choose what kind of movie file you'd like to end up with. For now, use the Theora codec with a bitrate of 8000. Change the Quality setting to 8.

   You can leave everything else

as it is for now; the current settings will render a stand-definition Ogg Theora file. The great thing about

        Synfig is that it uses vec-
        tors, so if you want to render
        a high definition version of
        your animation, all you have
        to do is change the width to
        1920 and height to 1080
        and you'll have a hi-def ver-
        sion of your animation that
        you can play back for all
        your friends on your fancy
        new big screen TV. Admit-
        tedly, our simple sunrise
        animation probably doesn't
        quite warrant that yet.
            When the file is finished
        rendering, you'll see a "File
        rendered successfully" note
        in the lower left corner of
        your Canvas window. That
    means that you can open
        up your files with the Files

application in the sidebar of your Ubuntu desktop, double-click the sunrise.ogv file, and view your 5 second animation again and again.

  Don't quit your day job, but give

yourself a pat on the back. You've just created an animation!

Rigging Now that you know how to draw in Synfig, try creating a character. An ap- propriate choice in this context might be a rooster, which typically crow at dawn. If you are drawing a rooster, try thinking of it in movable parts: of course it would have feet, a body, wings, a neck, head, and beak. Each part should be given its own layer, which we will then encapsulate them together. It helps to think of this pro- cess in terms of paper-cutout anima- tion or puppetry, in which each body part is its own distinct object con- nected to everything else by joints.

  Encapsulation is a method that

Synfig Studio uses to ensure that certain elements move together. More importantly, the order of lay- ers within groups actually influ- ences how each body part moves, because the movement of a lower layer will inherit the movement of a higher layer. For instance, if you are drawing a beak on a rooster's head, then you'd obviously want the beak to move along with the head no mat- ter what. If you drew a farmer, then you'd want his hands to move along with his forearms, which in turn should move with his upper arm.

  This is called "rigging", which is

a fancy term for, essentially, defining the skeleton and muscle structure of an animated character. The fact that Synfig Studio uses this method of movement places it a head above (so to speak) other animation pack- ages, which require the animator to select each individual part of a char- acter to make sure that everything stays together.

  To encapsulate layers together,

control-click on the layers in the Lay- er Palette that you want to encap- sulate. Right-click on any one of the selected layers and choose Encap- sulate from the contextual menu.

  These layers are now bound to-

gether and grouped into an Inline

Canvas, meaning that the movement and transformations that occur with- in the encapsulation will not affect anything outside. Notice that as a group, there is a new transformation node, located in the center of the canvas area rather than at the cen- ter of the character you have drawn.

   Once you have encapsulated

layers, you can move the capsules themselves or layers in and out of the capsules. You can move cap- sules into capsules, or layer into capsules. The dragging and drop- ping can get tricky, just know that when a layer is inside of a capsule, it gets indented a little to show that it's encapsulated. It doesn't get in- dented a whole lot, but if you look for it, you'll see it; there are also placeholder lines that appear as you drag a layer or capsule around, so you'll get a feel for where things are getting dropped.

   My rooster (which may or may

not look like a penguin) has an arm with an anthropomorphic elbow/ wrist, as animated birds often do. If I want to animate this arm to raise up to the sky when my rooster crows, I need to rig the arm.

   Rigging is done in cascading or-

der of influence, using special layers called Transformation Layers.

   As it is right now, I have an en-

capsulated layer group called wing- Upper, which contains the line and the fill of the upper wing. It also contains another encapsulated layer group called wingLower. All of this exists within the encapsulated group called rooster. It makes sense if you think of it in traditional outline form: rooster, body, wingUpper, line & fill, wingLower, line & fill, feet.

   In order to rotate wingUpper (and

all layers under it, until the end of its encapsulation), add a Rotate Layer at the top of the wingUpper capsule.

   Add a rotate layer by right click-

ing on the layer you want to add the rotate above, and select New Layer ­> Transform ­> Rotate.

   Once you've added a Rotate

layer, click on one and look to your canvas. You'll notice that new nodes have appeared; this time, there are two: a blue and a green. The green is the pivot point and the blue is your

handle. Imagine attaching a stick to your elbow or knee; the part touch- ing your joint would be green, and the part that allowed you to adjust its position would be blue.

  Click and drag with your Trans-

form tool the green node and place it at the “joint” of the body part you are animating. Once positioned, you can use the Rotate tool from the tools window to rotate that body part. You will notice that any layer underneath this rotate layer rotates right along with it; if you've rigged it correctly, you'll have the elbow moving along with the shoulder, but the elbow able to move independently as well.

  Animating rigged body parts

is exactly the same as animating something like the sun earlier in this article; position your time marker at some frame number, enter Anima- tion Mode, jiggle the body part to establish its starting position, and then place your time marker further into the future and move the body part to its end position. A Note Regarding Sound Cartoons and sound effects were practically made for each other, so it warrants some discussion here. Synfig Studio is an animation program, not a video editor, so there's no way to bring sound into Synfig. This is actually pret- ty normal, because in animation the soundtrack is generally produced first and the drawings are done to fit the soundtrack. Then the drawings and sound are married together in a video editing application like OpenShot or even ffmpeg on the command line.

 That's all pretty simple; hard

part is drawing to sound. How do you know at what frame to have a character open or close their mouth for dialogue? The answer is to sit down with your soundtrack and a stopwatch (or, more likely, Audacity, installable from the Ubuntu Soft- ware Center), and listen to it. Time it, so that you know exactly how many seconds from the start point your character starts speaking a given line. Translate those seconds into frames, and write it all down on a cue sheet (spreadsheets are usually used for this; good thing you have LibreOffice preinstalled on Ubuntu).

   When you render out your synfig

animation, it really is best to render it to a series of PNG images. Most video editors will let your import a folder of PNGs and will even group them together as if though they were video files. This keeps your animations frame-accurate, and your video and sound will sync per- fectly. Kdenlive and Openshot are great video editors for Ubuntu, so give them a try when you reach this stage of your project.

   Otherwise, you now know every-

thing you need to know about Syn- fig! Check out more of their tutorials and samples online; the sky is the limit with Synfig, whether you're do- ing traditional 2d animation as we've done in this article, or com- plex rotoscoping on video clips, or simple title animations, you've got a full animator's toolkit and some se- riously dangerous know-how, so go bring something to life!