Morphing is a technique that takes two images

Overview and creates a smooth transition between them.

In the process of morphing, one shape is
deformed into another and this transformation
As you probably know, animation is the rapid is usually defined by control points. In Synfig
display of a sequence of images in order to create Studio images are constructed from vector
an illusion of movement. Traditionally 2D shapes and the morphing is done
animation is created by drawing each displayed automatically. That allows us to create
image individually. Those images are called animation by drawing only key positions at
"frames" and thus such method called "frame-by- relatively wide time intervals. You need only
frame animation". To create good illusion of draw a few frames as needed to create a basic
movement you need to draw many frames, that's sense of motion for the scene, and Synfig
why his method requires a lot of time and Studio will create the in-between frames.
resources. Synfig Studio is open-source 2D
vector animation software. It is designed to
produce film-quality animation with fewer people Cutout animation
and resources. Cutout animation is created by splitting
Synfig Studio is built to eliminate the need to objects into parts and applying some simple
draw each frame individually. transformations to them (like translation,
There are two techniques for that: rotation or scale) at different moments of time.
Morphing animation and Cutout animation. Synfig Studio uses those values to interpolate
the motion for in-between frames. Cutout
animation can be produced from bitmap
Morphing images or vector graphics.

In both cases the role of Synfig Studio is to fill

the gaps between the drawn frames (also
called "keyframes") and produce smooth and
fluid animation. This process is called
"tweening".
Although Synfig Studio is not directly intended to
draw animation frame-by-frame, it can be used to
bring your hand-drawn frame-by-frame animation
to the film-quality level by converting bitmap
data of each frame into vector format. This
process is called "tracing" and usually done by
hand by constructing vector shapes on top of
bitmap image. In the process of construction you
can apply a lot of fascinating effects built into
Synfig Studio to achieve a professional look for
your animations.
Whether you do frame-by frame animation or not,
Synfig Studio gives you flexible control over the
repeated data, such as colors, outline
characteristics, textures, images and many more -
even animation trajectories and their sets
(actions). Reusing repeated data is achieved via
linking. This is a power of Synfig Studio, which
is especially important for big animation projects.
Among the plain linking pieces of artwork data
you can also define relations between them using
a set of functions. That allows to create automatic
animation based on the defined laws and bring
whole animation process to the new level.

All those features of Synfig Studio are covered in

detail in the chapters of this manual.
Getting Started
User interface
The screenshot below displays Synfig Studio's
complete window layout:

Illustration 1: Standard Synfig Studio's window layout

Synfig Studio main interface components are: The center window is the Canvas Window. A
new Canvas Window appears each time Synfig
• Toolbox — is the main Synfig Studio Studio starts. The window represents the Root
window. It contains system menu and Canvas, not that it means much to you at the
buttons, tools and more to create and edit moment, but that's OK — we're just trying to
your artwork. Closing it exits the show you around. In the upper left corner of
application. the Canvas Window, you'll see a button with a
• Canvas — displays your artwork and
caret. If you click on this caret button, the
animation.
canvas window menu will pop up. If you right-
• Panels — contain tools and information click in the canvas area and there is no Layer
about certain elements of your project. under the mouse position, this menu will also
Some panels will allow you to modify appear. So now you know where the most
those elements. important canvas menu is. Good.
Note The other two windows (one on the bottom,
To reset Synfig to its default window and one to the right) are customizable dock
arrangement. In the "File" menu from the dialogs. Each dock dialog contains a set of
Toolbox select "Panels/Reset Windows panels, arranged horizontally or vertically.
to Original Layout” Some panels share the same space inside the
dock dialog and you can switch between them
by clicking on their tabs. You can rearrange the
contents of dock dialogs as you wish by
dragging the panel tab to where you want it. You
can even create a new dock dialog by dragging a
tab out of its dock dialog.
If you accidentally close a panel (by dragging it
out of the dock dialog, and closing the new dock
dialog that gets created), no worries. Simply go to
the Toolbox, select "File/Panels" in menu
right there and then click on the name of the
panel you need.
The most important panels are:
• Layers Panel — shows you the hierarchy
of the layer of your working canvas. It
also allows you to manipulate these layers.
• Parameters Panel — shows you the
parameters of the layer currently selected.
When multiple layers are selected, only
the parameters that the selected layers
have in common are displayed.
• Tool Options Panel — shows you any
options specific to the currently selected
tool.
• Navigator — shows a thumbnail image of
what the currently selected canvas looks
like. You can also zoom in and move the
focus around with this panel.
• History Panel — shows you the history
stack for the current composition. You can
also edit the actions in history.
There are also many other panels in Synfig
Studio. If you have no idea what a panel does,
simply hold your mouse over its icon and a
tooltip will pop up describing its function.
Under the hood When you click on the Circle Tool, you should
notice that the Tool Options Panel changed.
Synfig Studio, like most every other competent But we'll get to that later.
graphics program, breaks down individual
elements of a canvas into layers. However, it With the Circle Tool selected, you can now
differs from other programs in two major ways: create circles in the Canvas Window. This
works as you might expect — click on the
1. An individual layer in Synfig usually canvas, drag to change length of the radius,
represents a single "Primitive". I.e. a and release the mouse button when you are
single region, an outline of a region, an done. Go ahead and create two circles (or
imported image, etc... This allows you to more, if you fancy). If you accidentally release
have a great deal of flexibility and control. the mouse button before dragging, you end up
It is not uncommon for a composition to creating a circle with 0 radius and it is
have hundreds of layers (organized into a effectively invisible! No need to worry, you
hierarchy for the artist's sanity of course). can easily fix this. In the Parameters Panel,
2. A layer can not only add information on you can change the parameters of the selected
top of the image below it, it can also object. If you just made a 0 radius circle, it
distort and/or modify it in some other way. should be the current selected object. You can
In this sense, Synfig's Layers act much change its radius to some value other than 0,
like filters do in Adobe Photoshop or say 10, and manipulate it to your liking with
GIMP. For example, we have a Blur the handles later.
Layer, Radial Blur Layer, Spherize Layer,
Color Correct Layer, Bevel Layer, etc... Note
Each layer has a set of parameters which Some users might experience the following
determine how it behaves. When you click on a problem: when you click and drag on the
layer (either in the Canvas Window, or in the canvas using the Circle Tool, either nothing
illustrated Layers Panel), you will see its seems to happen or you end up making
parameters in the Parameters Panel. insanely huge circles. To fix this go to
"File/Input Devices" and disable all the
devices you can find there.
First steps
Let's create something to work with. If you have an extended input device that you
First, go over to the toolbox and click on the want to use, such as a pressure-sensitive pen,
Circle Tool (if you don't know which one it is, then enable it in this screen. After this change
just mouse over them until you find the one with Synfig will work as expected.
the tooltip that says "Circle Tool").
Now go back to the toolbox and click on the
Transform Tool (the button with the arrow on
it). After you do this, click on one of your
circles. You will see a "bounding box" (which
is kind of useless at this point in time, but we
digress), a green dot at the center, and a cyan
dot on the radius. Those dots are called
"handles". If you want to modify the circle,
grab a handle and drag it around. Easy!
You can select a Layer by clicking on it. If you
want to select more than one layer, hold down
Ctrl key while you are clicking — this works
Illustration 2: The circle tool in both the Canvas Window and the Layers
Panel. Try it!
You can also select multiple handles. You can
do this in several ways. First, you can hold
down Ctrl and individually click the handles that just one of the circles and changing its radius
you want selected, but this can be tedious. — the other one will change as well. Neat
stuff, eh? This is how outlines are attached to
However, there is a much faster method — just their regions — but we're getting ahead of to
create a selection box by clicking the mouse and the chapter.
dragging it over the handles that you want.
Go ahead, select two circles and select all of their Linking is a fundamental concept in Synfig.
handles. With several handles selected, moving You can create links not only for handles, but
one handle will move all of them. also between parameters as well by selecting
Note multiple layers, right clicking on the parameter
in the Parameters panel, and selecting
Synfig Studio has an autorecovery feature. If it
"Link".
crashes, even if the current file has not been
saved, you will not lose more than 5 minutes of
work. At restart it will automatically prompt to Color selection
recover the unsaved changes. Unfortunately
Let's say you want one of the circles to be a
history isn't recovered yet.
different color. If you look in the toolbox
below the tools, you'll see the outline/fill color
The rotate and scale tools work much like the selector, the outline width selector, and some
Transform Tool, except in the case where you other stuff like the default blend method and
have multiple handles selected. It is much easier gradient. The outline/fill color widget works
just to try, than read about it. Select a few circles, exactly as you might expect — you can click
select all of their handles, and try using the rotate on the fill color, and a modest color chooser
and scale tools. will appear. Now you can change the color
pretty easily.
Note that tools manipulating with handles have
options associated with them. If a particular tool But sometimes you just want to click on a
isn't doing what you want, take a look at the Tool color and go. This is where the palette editor
Options Panel to see available options. tab comes in.
Click on the Palette Editor panel tab and have
a look — it's the one with the palette-ish
looking icon. Clicking on colors with the left
mouse button will immediately change the
default outline color and clicking with the
middle mouse button will change fill color.
Illustration 3: Rotate Tool Options Panel That's all great, but we still haven't changed
the color of the circle. There are three ways to
do this. The first is to click on the "Fill
Tool" from the toolbox, and then click on the
Linking
circle in the Canvas Window. Boom. Circle
Now let's try linking. Suppose we always want changes color. This works with more than just
these two circles to be the same size. Select two circles. Also, you can select the circle layer
circles, and then select both of their radius you want to modify, go to the Parameters
handles (the cyan dots). panel, right-click on the Color parameter and
To select multiple handles, either drag a rectangle select "Apply Fill Color" or "Apply
around them, or select the first one, then hold the Outline Color" at you preference. Or
Ctrl key while selecting the rest. Once you have simply double-click on the "Color"
the two radius handles selected, right click on parameter - a color selector dialog will show
either of them and a menu will pop up. Select up, and you can just tweak away.
"Link". Boom. The parameters are linked
together. You can prove it to yourself by selecting
Try playing around with the circles for a bit.
Muck around with the parameters, and see what
happens. To start, try out to set the Feather
Parameter to 5.

Digging deeper
Of course, so far you just found out how to use
the basic features of Synfig Studio but not how
you animate a drawing. This is covered in the
next section.
Animation Basics
Introduction
Creating an animation in Synfig Studio is really
easy. It basically means to change a drawing —
you just need to create the first stage and last
stage of a change, and Synfig takes care of the
steps in between.
Illustration 5: Square on the canvas
Let's look at a simple example. Consider a
moving light like the one at the front of the
Now we need a circle. Change the fill color to
Knight Rider car. Drop the realism, you get a
red, select the Circle Tool and create a circle. It
circle moving from left to right and back. In other
doesn't matter if it's not perfect: You can edit
words, you need to create three 'steps' or 'stages':
it. Select the Transform Tool and click the
1. The circle is on the left. circle. It will go into an editing mode which is
2. The circle is on the right. easy to detect by the small green dot in the
3. The circle is back on the left. middle and the whiterectangle around it. You
can move the circle by grabbing it on its green
dot (the Origin) in the middle.
Setting up the workspace
Let's do it. Start Synfig Studio. A new file is
created at the start automatically . Click the caret
menu (between the horizontal and vertical rules,
in the top left hand corner of the canvas), then
select "Canvas/Properties" or select
"Canvas/Properties" from the menu. The
Canvas Properties Dialog will appear.

Illustration 6: Circle in editing mode

These are the first steps to draw an object and

to move it, but not an animation yet, you may
say. Indeed. Let's have a look how this works.

Adding movement
In the beginning, you entered a value of 2
Illustration 4: Canvas Properties Dialog seconds in the Properties dialog. Because the
length of your animation is non-zero, your
Give a name and description for your canvas, canvas window (the one where you draw) has
then click "Apply" (don't click "OK" yet — a grey time slider at the bottom, the Timebar.
we're not quite done with the Properties dialog). You can click on it, and a small orange
Go to the "Time" tab and make sure to edit indicator will appear indicating your position
"End Time". Change "5s" to "2s" — that will in time. Try clicking in several places on the
make our animation 2 seconds long. time slider and notice that the entry field on
the left of the time slider is changing its values
Now click "OK", select the Rectangle Tool and to something like "12f", "1s 15f", etc. You can
create a simple black rectangle that will serve as set your position on the time slider by
our background. changing values in that field. For example, if
you enter "1s" and press ↵ Enter, the orange to edit keyframes. Now press the small button
indicator will move in the middle of the time with the "plus" sign and you should get a new
slider, and entering "2s" will move it to the end of entry in the list displaying "0f, 0f,
the time slider. (JMP)".

Note
Now, go to the "1s" mark in the time slider.
At 2s the orange indicator won't be visible. That's The small orange indicator should move there.
because "2s" is at the far right boundary of the
time slider, putting the indicator out of view.
You may notice that nothing changes on the
canvas at this point. Return to "0s" and switch to
Animate Editing Mode by clicking the green man
button to the right of the gray time slider. The Then add another keyframe by clicking the
canvas will display a red outline; it reminds you small plus sign. Repeat the process with the
that changes to your objects now affect your time slider indicator set to "2s" (it's at the end
animation at the time shown in the time slider. of your animation). You should now have three
keyframes in the list.

In animate editing mode, every change to your Understanding the Timeline

objects parameters creates a waypoint that
associates the changes with the current time. As By now, you may have figured out what those
you will see, Synfig can create smooth mysterious "1s 10f"-type marks represent.
intermediate changes between waypoints, and They indicate a specific point on the timeline,
you can even choose the way in which the expressing a location in terms of seconds (s)
intermediate changes take place. You will and frames (f).
probably find it helpful to associate some or all of By default each second is divided into 24
your waypoints with keyframes. frames, much like a meter on a measuring tape
Previously, three "steps" or "stages" were is divided into 100 centimeters. The frame
mentioned. These are represented by keyframes. markings begin at zero (0) and go up to 24,
(Just in case you're familiar with video encoding: whereupon a new second is entered and the
No, it's not the same!) A keyframe is an image in framecount returns to zero.
time where something important happens with For example, when five whole seconds and
your objects. three frames have passed, using this timeline
notation would be "5s 3f".
Default keyframe at 0f
When creating a new project, a default
"keyframe" is already set at 0f. If for any
reason you do not have this default keyframe, go
to the Keyframes Panel — click on the little tab
with the small key icon in the bottom window —
The Keyframes Panel

The Keyframes Panel is rather easy to

understand. It displays "Time" which is object's parameters, like location or color, are
basically the start time, "Length" which is self- instructed to take on specified new values.
explanatory, "Jump" which we'll cover next, and
"Description" which is, again, self-
explanatory.
Rendering your animation
You might be wondering about the entries called
"(JMP)". In fact, these are links just like web Before you can see your animation, you need
links: click them, and the indicator in your time to render your work. There are two ways to do
slider will jump to the correct time. so: using the Synfig Studio (what you have
been using so far) or the command-line
You can use this to edit your image for a given program called "synfig".
moment in time. For instance, you can now jump
to the first second, and move the red circle to the Let's try the first way. Leave the Animate
right. There! You made your first movement, your Editing Mode by clicking on the red man icon
first animation with Synfig! in the timeline editing widget, and save your
file; for instance under the name
To see your animation click to an arbitrary "BasicKnightRider.sifz". Then go to menu in
position on the time slider: You will note that the the Canvas Window (Canvas Menu Caret
red circle is in a new position, one that you didn't button in the upper left corner) and select
specify! So what happened? Synfig figured out "File/Render" or click on the render icon.
what you would like to do, namely move the
circle, and drew all the images between these
states. Each image will later make a frame in your
animation and the circle will appear to be
moving.
Note that you don't need to go to the last
keyframe at "2s" and move your circle back to the
left. Keyframes make Synfig remember the image
states at particular times. That's why when we
modified the circle's position at "1s", it stayed on
the left at "2s" (as well as at "0s"). If you switch
back to the Parameters Panel, and look at the
Time Track Panel you will see that three orange
diamonds (or green dots depending on the default
interpolation) appeared on the right of the Change the filename to "BasicKnightRider.gif"
"Origin" parameter. Those are called in the same location where you saved
Waypoints, and they represent times at which "BasicKnightRider.sifz" and choose "gif"
target format instead of "Auto", then click
"Render". Depending on your processor
speed it should take a few moments, but finally
the image window status bar (located on the
bottom of the window) should say "File rendered
successfully".
Note
The "magick++" target (if it is available)
produces much better gif files than the "gif"
target because it can optimize the palette for the
image.
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 your short 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!
Note
You can also preview your animation. Press the
"caret" menu button in the upper left corner of
the Canvas Window and choose
"File/Preview".
If you would rather use the command line instead
of the menu to render your animation, then open
a terminal (on Windows, go to "Start/Run",
type "cmd" and press ↵ Enter), change to the
directory you saved the file in, and type
something like this:
synfig -t gif BasicKnightRider.sifz

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
this will appear:

BasicKnightRider.sifz ==>
BasicKnightRider.gif: DONE

You can view your animated gif using Firefox or

another program as mentioned above.

Conclusion
Of course, the position of an object is not the
only thing you can change with Synfig Studio.
Other possibilities include its size, its outline, its
color, etc. Synfig comes with several example
files that should let you dig deeper into the
possibilities.
Now, let's continue with the next manual chapter:
Adding Layers
Adding Layers Pick the Gradient Tool from the Toolbox, press
the left mouse button on the canvas, drag to
change the gradient direction and release the
Introduction button when you are done. You should note
that another layer was added in the Layers
In the previous tutorial, you made your first
Panel called Gradient. This is nothing special.
simple animation by changing the attributes of
primitive objects, such as: position, color, and
size. These simple types, however, are seldom
sufficient to create advanced characters and
objects. To do so, Synfig uses layers. They are
similar to layers used in other drawing
applications in that they are used to separate
different elements of an image.
However, Synfig's layers have following
important specific:
1. Every object or element gets its own layer.
2. You can organize layers into hierarchical
Note
groups.
3. You can use upper layers to change the If you see no gradient but just a plain color,
behavior (or look) of underlying layers. that means that you probably just clicked on
Those are called filter layers or effect the canvas without dragging your mouse. To
layers. fix that pick the Transform Tool, click into the
canvas to activate the gradient's handles. You
As you will see, layers are an extremely need to grab the one you see and move it a bit
important aspect of Synfig, much more so than until a gradient appears.
most graphics programs. Understanding the You now have a gradient, but it is not what
concept of layers is an important part in you wanted: it spreads across the whole
understanding how Synfig works. canvas. The goal was to have a gradient in the
rectangle. So, let's fix this now.
Combining layers In the Layers Panel, select both the gradient
So let's look at a simple example of how we can and the rectangle layer. Then, right-click and
combine two layers to create a gradient effect on select "Group Layer" from the menu. The
a rectangle. view of your Layers Panel should change now,
showing a small box called Group with a "+"
Create a new file with 0 duration. There's no need in front. By clicking on the "+" you can
to bother with a timeline at this point. Next,
expand the group layer to see its contents, your
create a simple rectangle with the Rectangle Tool.
previous two layers: the gradient and the
rectangle.
 If only for the additional organization,
grouping layers dramatically improves the
ease of use of Synfig Studio. But lots of
programs can do this. The concept of scope as
just demonstrated sets Synfig apart from other
programs with layer hierarchies. The key point
You can treat this layer like any other layer — is that a layer, inside it's own group, will only
move it around, duplicate it, copy and paste it. If modify the data contained by all the layers and
you want to change the name of it to something groups below it. In other words, if you were to
more descriptive, just select the layer in the layer throw a Blur Layer on top of the layers inside
tab and click on its label. Then you just edit it in the group layer we created, it would just blur
place. You can do this for ANY layer, and are them — anything under the group layer would
strongly encouraged to do so. not be blurred! Let's try it.

Modify layers with other layers

Using locality
Make sure you have the group layer selected
However, there is still a problem: the gradient and create two red circles. They will appear on
still covers the whole canvas although we wanted top of the group layer. Select the group layer
it to be restricted on the rectangle. To do so, and use the "Raise Layer" button in the
activate the gradient layer in the Layers Panel. Layers Panel to place it on top of the circles.
Now go to the Parameters Panel (by default it
resides in the bottom window), and search for the
attribute called "Blend Method". Double-
click the entry and select "Onto" from the drop-
down menu.

The gradient should now be restricted to the

rectangle. Congratulations! You just made your
first effect by interacting layers with Synfig. Now our group layer (with rectangle and
gradient) is in front of those two circles.
 Ok, now we have all of the contents of the
group layer blurred, but everything under it is
sharp! This is because the effect of the Blur
Layer over the underlying layers is limited to
the scope of the group layer because the blur
layer is inside it.

Digging further...
Expand the group layer to show its contents, and If you care to look into Synfig's main menu
select the top layer inside of it (should be the under "Layer/New Layer" you will note
gradient layer). This is where we want to insert quite a lot of different possibilities for making
the new layer. Create another circle filled with a layers. Several of them sound rather unusual,
black color. The black circle layer will be created like "Transform/Rotate" for example.
over the gradient layer inside the group layer. You can use this to add new attributes to your
objects. And just like other, basic attributes in
the previous animation tutorial, you can
change them to be different on certain
keyframes.
Synfig will take care of interpolating the steps
in between. For example, you could create a
shape and add a Rotate Layer over it. Combine
this with the lesson learned in the last tutorial
and you will obtain a rotating effect. This
technique is used for the creation of Cut-out
Now, right click on the black circle layer in the Animation.
layers panel and a popup menu will appear. The
first item in that popup is "New Layer". Inside
of the "New Layer" menu, you'll see several
categories of layers you could create, but what we
want is a blur, so go to the blurs category and
select the "Blur" layer (so that would be "New
Layer/Blurs/Blur").

The blend method for newly created blur is

"Straight" (if the default blend method in the
Toolbox is set to "By Layer Default") It
blurred all around the outside edge of the contents
of the group layer. You can change the default
blend method for new layers from the New Layer
Defaults section of the Toolbox.
Creating Shapes want to insert a shape somewhere, you should
select where you want to insert it before you
go into the Spline Tool — changing the
Introduction selection afterward will automatically swap
you back to the Transform Tool.
Basic primitives such as circles or rectangles, that
we have learn to work with previously, are all Now, go ahead and click on the "Reset
great but they are pretty much geometrically Colors" button in the lower left corner of
inflexible. What about creating more complex the FG/BG color widget in the toolbox. This
shapes? To do this, we use the Spline Tool. will reset us back to the default black and
white. Also, set the default line width to
Spline Tool something nice and thick — 10pt should do
the trick.
In Synfig, the construct for describing shapes is
After you switched to Spline Tool, take a look
called a Spline. This is roughly analogous to a
at the Tool Options Panel. Make sure that only
"path" in other programs, except that it is strictly
"Create Region", "Create
a cubic hermite spline.
Outline" and "Link Origins" are
Reset Colors button in the Toolbox checked.
Before we start with the Spline tutorial, let's look
at some additional notes on how Synfig works. Clicking with your mouse in the canvas will
place vertices. While you are placing a vertex,
you can drag out its tangent by dragging the
mouse. Do this over and over, and you
construct a Spline.
Keep in mind, however, that during this
construction, there is nothing stopping you
from just moving it if you don't like where you
placed a vertex or a tangent. Honest! If you
want to remove a vertex, right click on it and
select "Delete Vertex". Want to split the
tangents? Right click on the tangent and hit
"Split Tangents". Want to loop the
Spline? Right click on the first vertex and
select "Loop Spline".

When you click on the Spline Tool, you will see

that the handles from your currently selected
object (if there was one) will disappear, but the
layer(s) will still remain selected in the Layers
Panel. This is normal. Anything you create with
the Spline Tool will be inserted above the
currently selected layer. Keep in mind that if you
When you are finished placing vertices, you must One quick thing to mention before I finish up.
exit construction mode in order to actually create You can change the width of an outline at each
the Spline layer(s); there are 2 ways to do this: vertex. You do this by selecting the outline
layer (NOTE: you must select the Outline
1. Switch to another tool.
Layer, the Region Layer has no width data)
2. Press the "Create" button at the bottom
and tweaking with the width handles. By
of the Tool Options Panel (it's the icon
default, these are masked. To show them, press
that looks like a gear).
Alt5 or click "Toggle width handles"
For now, just go ahead and switch to the button at the top of the canvas window (the
Transform Tool, because we are done with the fifth one from the left). Repeat to hide them
Spline Tool. again. You can also see other things to mask
via the Canvas Menu Caret:
"View/Show/Hide Handles".

Using tablet to draw shapes

If you have a graphic tablet you can use Draw
Tool to create Splines.
Synfig Studio supports pressure sensitivity, but
you need to configure it first. Go to
"File/Input Devices..." from
toolbox menu. In the "Input" dialog find
your tablet's stylus device and set its "Mode"
Editing Splines to "Screen". Click "Save" and then
"Close".
Ok, we now have a nice pretty white region with
a thick black outline. Since we checked Now grab your stylus, create a new file and
"Create Region" and "Create click on the Draw Tool button in the toolbox.
Outline" in previous steps, you'll notice that Set the default line width value to be big
there are two layers that we have created — the enough — say, 15pt — otherwise you will not
Outline and the Region in the Layers Panel. notice any pressure sensitivity effect. Choose
Despite brown as the default fill color.
the fact that they are two separate layers, their
vertices parameter has already been linked — so Note
you can select either one and move its handles Steps above should be done with the stylus of
around and the other one will also change. your tablet, not the mouse. Synfig Studio
remembers settings for each input device
If you want to manipulate the vertices after you
independently. That's why if you set those
have created the layers, it is very easy to do so.
options with your mouse device they will not
Just click on one of the layers and have at it. If
have any effect when you switch to stylus.
you want to remove a vertex, right click on it and
hit "Remove Item (smart)". Want to insert
a point somewhere? Right click on the segment In the Tool Options Panel, make sure that you
where you want to insert something and hit have the same options as shown on the
"Insert item (smart)". screenshot below.
Now let's draw some thing like a curvy
This may appear to be leading to a mess of layers. mountain background. Start drawing a line
And yes, if you aren't using the software properly, from the left border to the middle of the
that is exactly what you will get. But there is a canvas. Try to vary your stylus pressure while
way to make this more sane. As mentioned in the you are drawing. Stop near the center of the
previous tutorial, you can group layers into canvas. This is your first line. Notice the new
hierarchy. outline layer created in the Layers Panel.
 Go ahead and add a few more lines on top of
the filled area to give it a mountain-like look.
If brown handles are in your way, you can hide
them by clicking the "Toggle vertex
handles" button at the top of the canvas
window (the second one from the left).

The Draw tool is great for drawing complex

shapes, but you end up with a bunch of
handles, which are hard to manipulate with the
Transform Tool in the way we described
above. There are two solutions here.
First, you can increase the "Smooth" value
in the Tool Options Dialog while using Draw
Tool. That will reduce the count of vertices
produced at drawing time, but will make your
shape less detailed.

Point your stylus at the last handle of your new Second, you can use Smooth Move Tool to
Spline and continue drawing to the right border of deform an existing shape. Go for it and click
the canvas. When you finish, look at the Layers the Smooth Move Tool button in the toolbox.
Panel again. There's still only one outline layer. The trick about this tool is that it affects
Synfig Studio is smart enough to figure out that selected handles only. Press and hold your left
you don't need a new outline layer and properly mouse button in an empty place of the canvas.
extends the last one. You can extend the Spline Drag to create a selection box. Release the
from both ends, but if you start drawing from any mouse button when you are done. Or just hit
other place of the canvas a new outline layer will Ctrl-A to select all handles. Now you can
be created. Though your first line will remain deform the selected segments of Spline. You
selected and nothing stops you from extending it can change the size of the influence area by
later. tweaking "Radius" in the Tool Options
Panel.
Back to our artwork. In the Tool Panel hit the What about outline width? There is a Width
button with the bucket icon to fill the outline we Tool for that purpose. It is designed for
just created. A region layer will appear at the top increasing or decreasing the width of a line
of the layer we are working with. Select the much like you would with a pencil on paper.
outline layer and press the "Raise Layer" Click the Width Tool button in the toolbox,
button in the layers panel to put the outline layer move your stylus over the line you want to
on top of the region. change, press and move the cursor back and
Extend a line from both sides down to the corners forth along the line, like you are scratching
of the canvas to make the fill appear at the something. The width of the outline will be
bottom. Great. increased at the places where you moved the
cursor. If you want to decrease the width, just
hold "Ctrl" while scratching. Easy!
If you don't want width handles to be displayed,
during usage of the Width Tool, just turn them off
by pressing the "Toggle width handles"
button at the top of the canvas window.

Other ways to create Splines

Is that all? Not yet. You can use Circle,
Rectangle, Star and Polygon tools to create
Splines too. Just check the "Create
Outline" and "Create Region" options in
the Tool Options Panel when using those tools.
Creating geometric primitive as Spline gives you
a better control over it's shape and look. For
example, if you want a deformed star, then you
can use the Star Tool to create it as outline and
region Splines and then use the Transform Tool to
deform it.
Now you are ready for the last tutorial in this
section. Hang on!
Animating Shapes
Basic settings
In the previous tutorial, you have learned to
create shapes with the Spline Tool, in this tutorial
we will learn how to create a simple animation of
a growing flower using Splines.
Now that the trace of the form is closed, select
Start Synfig Studio — a new animation will be the transform tool (or any another tool) to
created. If you already have Synfig Studio started, generate the proper form.
select "File/New" in the toolbox.
This will be the base of the stem. You can
First, we need to create a gradient for a tweak the tangent handles (red dots) a bit to
background. Click on the outline and fill colors in make a rounder triangle. With the Transform
the Toolbox to select the colors of our gradient. Tool, right-click on each vertex and select
You can also directly edit the gradient by clicking "Split Tangents", so the tangent
the gradient line in the toolbox. handles of each vertex can be moved
separately.

Animate the stem

In the Canvas Menu, select the caret menu
icon in the upper left hand corner, where the
rulers intersect, and then select
"Canvas/Properties". Go to the
"Time" tab, set the "End time" to "6s"
and click OK button.
Select the Gradient Tool and drag your cursor
vertically across the canvas to fill it with the Click at the beginning of the timetrack
gradient. ("0f"), then, in the Keyframes Panel (the one
with a key icon) click the button with a "+"
Next, select the Spline Tool and in the Tool
icon (add a new keyframe). Keyframes allow
Options Panel, make sure that only "Create
us to settle down the scene; i.e. on a keyframe,
Region Spline" is checked. In the toolbox,
every element of the scene will have all its
set the fill color to green. Draw a kind of triangle properties remembered. Click again on the
with the Spline tool. To close the shape after timetrack, at "4s 12f" (ie 4.5s at 24 fps).
drawing the 3 vertices, right click on the first
Press the green circle at the bottom right of the
vertex and choose "Loop Spline".
canvas (or whatever icon you have there,
depending on your icon theme) to switch to the
Animate Editing Mode (the circle is now red).
 0s and 4s waypoints. Right-click on them in
the parameters list, and select "Mark
Activepoint as Off".

With the Transform Tool, select the green sprout,

and move the upper vertex up to make a stem. The panel should now look like this, the
You can play with the vertex handles to bend the grayed part being the part where the bud
shape a bit if you want. vertices have no effect on the stem.

While you are still at "4s 12f", right-click on

the stem border, close to the top, and choose
"Insert Item". Do the same on the other
side of the stem. Right click on those new points
and choose "Split Tangents". Then try to
make a shape that looks like the one on the
image, to create the flower bud.

For example if you click on "2s" or even

"3s" now, the bud shape is not visible. It
starts to appear only a little after 3s 12f.
However, the shape of the stem may not look
very nice during its growth between 0 and 4s.
Make sure you're still in Animate Edit Mode,
Now if you click on "2s" (for example), you'll and tweak the shape at various moments in
time, to get something you like.
see that the shape of the bud is slightly visible,
even if the sprout is rather small, and even if the The animation of the stem is now finished, but
bud handles are invisible. it still lacks the petals. You can watch a
preview of your animation: Go to
Let's say we want the bud to appear only at 3s
"File/Preview", validate, wait for the
12f, and be full size at 4s 12f.
preview to be generated, and watch.
Click on "3s 12f" on the timetrack. Now take
a look at the "Parameters" and Note
"Timetrack" panels at the bottom. You'll see Previews are often pixelated and blurry, but
that each parameter in the Parameters Panel the final render will be clean-cut. Higher
matches a row in the Time Track Panel. The last quality previews are obtainable by using
parameter is the vertices list. Click on the small higher values for 'Quality' and 'Frames per
arrow on the left to unfold the list. second' in the preview dialog window.
Each brown diamond (or waypoint) stands for a
recorded value (here the vertices positions were
recorded at 0f with the keyframe, and at 4s when
we moved some vertices or vertices handles). The
two vertices we added to make the bud are
marked with green and red vertical line on their
Adding the petals On the Layers Panel, select the newly created
Petal layer and duplicate it (with the third
Now leave the "Animate Editing Mode" button, on the bottom of the Layers Panel). On
by clicking on the red circle at the right bottom of the canvas, press CtrlA to select all the vertices
the canvas. of the duplicated petal, and move them a little,
Change the fill color to pink, and create a petal so the petals are no longer overlaid. (Don't
with the Spline Tool. You'll notice that the green move the green handle, just the orange ones).
handle that allows easy movement of a shape is at Repeat the process several time, to get
the center of the canvas. Select all the vertices of something looking like this image.
the petal with CtrlA and move them close to the
green handle (with the Transform Tool), as
shown.

Note that the duplicated petals are also linked

to the stem. If you go back to the first
keyframe, you'll see that the petals are visible.
Then drag the green handle very close to the top We don't want that. We want the petals to
of the bud. Hit CtrlA again to select all vertices of appear and bloom almost at the end of the
the petal and tweak it a bit with Rotate Tool. Also, growth.
in the Layers Panel select the petal layer and put
it under the stem layer. Click on the petal to
Hiding the petals
select it, then ctrl-click on the stem. Both objects
should be selected. Let's say we want the petals to appear a little
Now click on the vertex at the top of the stem and after 4 seconds in the animation, and be full
ctrl-click on the green handle of the petal (both size at 5 seconds, instead of being visible and
should appear in a lighter color, as they are full size all the time.
selected). Then right-click on the stem top vertex, Switch to "Animate Editing Mode"
and select "Link". The petal will move a bit as again by clicking on the green circle at the
the green handle is snapped on the stem vertex. bottom right of the canvas. But if we will go to
"4s" and modify them, then they also change
at "5s". Because the shape/position of the
petals is not fixated at this moment of time by
any waypoints or keyframes. That means that
we need a keyframe at "5s". On the
timetrack, click to place the cursor at 5
seconds. On the Keyframes Panel, click on "+"
to add a new keyframe.
Now click on "4s", and on the Layers Panel,
select all the petals layers (with ctrl+click),
then press CtrlA to select all the petals
vertices.
Now that there's a link between the petal and the
top of the stem, when the top of the stem moves,
the petal will follow the move. (And if the green
handle of the petal moves, the top of the stem will
move, but we don't want to do that here.)
 Select the Petals Group Layer and jump to the
first keyframe. In the Parameters Panel, set the
"Amount" value to "0". The petals are now
invisible on that keyframe. Note that two
waypoints were added in front of the
"Amount" parameter, one at 0s and the other
at 5s. Drag the 5s waypoint to 4s, so that the
opacity of the petals will be 1 at 4s.

Scale them down with the Scale Tool, and move

them, so they are hidden by the stem, as shown.

There is still one problem left: from 0s to 4s,

the opacity of the petals slowly increases,
making the petals visible when they shouldn't.
To solve this, we will change the Amount
interpolation method. Right click on the
Amount waypoint at 0f, and select "Edit". A
new dialog will appear, in which you can
choose the In and Out interpolation. Set the
From 4s to 5s, the petals will now appear and Out Interpolation to "Constant".
bloom. But notice that we have a keyframe at 0s
which also remembers petals shape. That makes
the problem — the petals are still visible from the
first keyframe to the 4s keyframe. We could
either make the petals tiny and hidden tweaking
their size on every frame from 0s to 4s, or we
could make them invisible on this interval.
Let's choose the second solution. To make things
easier, we are going to group the petal layers into
an Group Layer. With all the petal layers selected,
right-click on them on the Layers Panel and select
"Group". You can rename the layers to make
things more understandable.

Tip
You can also change waypoint Out
interpolation by right-clicking on it and
selecting "Out/Constant".
This means that after that waypoint, the Amount
value will remain constant, until another
waypoint is encountered. So from 0f to 4s the
Amount value will be equal to 0, and at 4s it will
suddenly changed to 1, and make the petals
visible, as expected. Alternatively, we could have
achieved the same effect by setting the In
Interpolation of the waypoint at 4s to
"Constant".
Notice how (half of) the waypoint changes from a
green circle (meaning smooth animation of the
amount parameter) to a red step (meaning that the
amount parameter is suddenly stepped).
Now you're done. The stem grows for 4.5 seconds
and then stays still the last 1.5 seconds. The petals
are hidden until 4 seconds, and then grow quickly
between 4 and 5 seconds, and stay still the last 1
second too.
Click on "File/Render" to render your
animation. Select any format you want, and
ensure that "Use current frame" option is
unchecked (otherwise, one frame only will be
rendered). In the next and last part we will be
covering basic usage of the bone system in
Synfig.
Basic bone Tutorial In picture 4 and picture 5 we can see how the
horizontal crosshair line matches the straight
line of the bottom of the upper arm and at the
Introduction same time the outline of the
circle of the crosshair
In this tutorial we are going
matches the top curved
to rig an arm with fixed joints
outline of the lower arm.
using the Skeleton Layer and
three bones. The arm consists The same principle is
of three parts: the applied to the hand and the
upperArm, the lowerArm bottom part of the lower
and the hand. (pic.1) Each arm. The crosshairs also
part is grouped in its own mark the centre of the
layer and the three groups are rotation point that will later
again grouped in a layer that be used when placing the
is called arm (pic.2). bones. Before placing the
bones we can align the
Group Transformation
Widget (press control and
move the left corner handle
of the Group Transformation
Widget to move it.) of the
lowerArm group and the
hand group with the crosshairs of the elbow
and the wrist to check if the joints rotate
correctly.
Don’t forget to bring the arm into its original
position by pressing undo. (Don’t worry if the
hand does not rotate with the elbow when you
check the elbow joint by using the Group
Transformation Widget.)
Prepare The Joints
Before we start rigging the
arm we have to prepare it to
make sure that the joints
properly rotate. In picture 1
we can see that the lower
side of the upper arm is
straight and does not have
an outline, while the upper
part of the lower arm has an
outline that is curved. The
bottom part of the lower arm
does not have an outline and
is also straight. The joint of
the hand is also curved with
an outline. To make sure that
the joint parts of the arm rotate correctly, we
made them with the help of a couple of crosshairs
(picture 3).
Adding The Bones Attaching The Bones
Now it’s time to add a Skeleton Layer that will Now that the Skeleton
provide the bones we need to rig the arm. Layer is in place we
have to attach the bones
Right-click on any layer in the
to the parts of the arm.
Layers Panel and choose "New
Layer/Other/Skeleton" In the Layers Panel click
on the upperArm
. A new Skeleton Layer (pic. 7)
group, right-click and
will appear in the Layers Panel
"Select All Child
alongside with a small bone in
Layers". Then press
the canvas (pic.6). Put the
CtrlA in the canvas
Skeleton Layer above the arm
window. With
group if it is not already there.
everything in the
The green handle of the bone is
upperArm group
the origin of the bone and is
highlighted, Ctrl-click
used to move the bone in place
on any bone in the
and is also its centre of
canvas window and right-click on any of the
rotation. The blue handle is
handles of the parent bone and click "Link to
used to rotate the bone. The orange handle
Bone". The upperArm group is now linked to
determines the lenght of the bone is used to
the parent bone. Go the Layers Panel again
stretch the bone and its contents. The first bone is
and select the lowerArm group. Right-click
the parent bone and should be moved toward the
and "Select All Child Layers". Press CtrlA in
shoulder and stretched so that it almost reaches
the canvas window and Ctrl-click on one of
the outlines of the first crosshair of the elbow.
the bones. Then right-click on any of the
Right-click on any of the handles of the parent
handles of the first child bone and select
bone and select "Create Child Bone".
"Link to bone". The lowerArm group is
Move the green origin point of the child bone so
now linked to the second child bone. In the
that it matches the crosshair of the elbow and
Layers Panel select all the child layers of
stretch it until it almost reaches the crosshair of
the hand group and press Ctrl-A in the
the wrist. Right click on any of the handles of the
canvas window. Ctrl-click on any bone and
child bone and create another child bone. Move
then right-click on any of the handles of
the green origin point of the second child bone so
the second child bone and select "Link
that it matches the crosshair of the wrist (pic.8).
Stretch the bone until it reaches the end of the to bone" (pic.8) The hand is now linked
fingers. to the second child bone and the entire
skeleton is now linked to the arm.
Tip
Making a crosshair in Synfig is easy. Draw a
circle. Draw the outlines of a square and align
them with the circle. Draw an X using the corners
of the square as a reference. Delete the square.
Group the circle and the X. Rotate 45 degrees
using the Group Transformation Widget.