Synfig Studio :: Documentation - User contributions [en]

Doc:Cut-out Animation

2008-04-09T22:59:06Z

Gremble: /* Add the Rotate Layers */ removed references to torso, add clarity to language (hopefully)

[[Category:Tutorials]]

This is brief tutorial to show how create cut-out style animations. Usually cut-out style animations use image art instead of vector art to create the animation. See South Park series. You should obtain some kind of animation like this one:

[[Image:Cutoutsample.gif]]

== Preparing the material ==

For a cut out animation you'll need some images that represent the moving parts of the animation. For this example I've prepared a Simpsons like boy. You can take the images from [[Media:Cutout-sample.zip|this file]]. It also has the final sifz animation result.

[[Image:Boy-split.png|right|thumb|A character split into parts]]

Each part of the body (head, arms, legs, etc.) is a single PNG file. (In the split image, the individual images are composited in a bigger one). I've set all the files to have the same horizontal and vertical dimensions so all the images can fit one over the other to create the character without the need to adjust their sizes or positions. It will help later to import each image into Synfig.

== Importing the cut out images ==

This is as simple as going to the Caret Menu and selecting File->Import and the proper file for each part of the character. After repeating this process for each of the image files of your character you should obtain what is shown below:

When you do the tutorial you'll notice that all the image layers have the same dimensions. The boundary of each image layer is the rectangle with the green ducks shown. The bounding boxes of all the layers coincide since I expressly created each image with those dimensions and properly placed. It will allow us to do the following: Select all the layers (CTRL + click each layer) and go to the Top-Left and Bottom-Right parameters (they get greyed). Make right-click -> Link on each one. It will link all the boundaries of the image layers to maintain them at the same relative position. This will prevent any accidental modification of the image edges and subsequently avoid any improper image deformation.

{|align = "center"
|[[Image:Layers-Images.png]]||[[Image:Images-Composed.png]]
|}

Obviously the layer order is important to place each part of the character to compose it properly (in this case the left leg is behind the right one).

== Encapsulate image layers ==

As you can imagine we are going to use Rotate Layers to perform the cut out animation. But before apply the rotation for each part of the character, we need to encapsulate it so that the rotation only applies to the desired layers. After encapsulation and renaming the paste canvas layers it looks like this:

[[Image:Encapsulate-layers.png|right|thumb|Layers dialog after encapsulation]]

== Add the Rotate Layers ==

Before adding the Rotate Layers you should have analysed your character. You need to have figured out the mechanical framework which the character's movements are bound by, the mechanics of the character's ''skeleton''. For a simple humanoid character one considers the hip as the center of the rotation of the whole skeleton. Each limb rotates relative to the hip's rotation. Also each sub-limb should rotate relative to its parent and the parent relative to the hip (we use the hip as the root ''bone'').

In our current example, the body will rotate relative to the hip and the head relative to the body. When the character's hip is rotated there needs to be an identical rotation of the body. The head needs to rotate with the torso and additionally with the hip. This cummulative effect of rotating limbs and sub-limbs is known as the limb hierarchy. The head also needs its own individual rotation which won't affect any other limb.

Let's start by adding a Rotate Layer to the hip. Go to the hip paste canvas and select the hip image layer. Insert a new Rotate layer (File->Layer->New Layer->Transform->Rotate) just above the hip image layer. Rename the layer to 'Rotate hip'. Now go to the Rotate Layer parameters dialog and select the Amount parameter. This parameter governs the angle of rotation. Export that parameter (right click) and give a proper name (hip).

Now to set up the rotation layer. You should have noticed that there is a Origin parameter in the Rotation Layer, this is the origin of the rotation. It is very important that you set the origin to the proper position, allowing proper rotation of the image layers, so in this case you need to place the origin of rotation at the center of the character's hips. As another portent example, arms will rotate about the shoulder and not about the hand.

{|
|'''Before'''||'''After'''
|-
|[[Image:AddRotateLayer-before.png]] || [[Image:AddRotateLayer-after.png]] ||[[Image:AfterAddRotateHip.png|right|thumb|After copy the Rotate hip layer over all the image layers]]
|}

Now consider our reasoning: ''When the character's hip is rotated there needs to be an identical rotation of the body. The head needs to rotate the with the torso and additionally with the hip''. Another way to put this would be that each limb bares it's own rotation, plus the rotations of those limbs higher up the limb hierachy. To effect this you should add the same rotation layer to all the limbs that depend on the hip rotation. Copy and paste the ''Rotate hip'' layer to all the encapsulated image layers. Remember that the rotation parameter is exported, and so will the value shared between all the pasted rotation layers, giving our desired effect. All the limbs will now rotate in congruently with the hip. Magic! See the image.

For each next level limbs we need an additional individual Rotation Layer. The next level limbs are: the legs and the body. We need to add a Rotation Layer for each next level limb. You should repeat the same process for each one: Add the Rotate Layer, rename it, export the Amount parameter (very important) and place Origin to the proper rotation place.

After doing that for the legs and for the body you should obtain something like this:

{|
|[[Image:AddRotates.png]] || [[Image:AddRotatesLayers.png]]
|}

Notice that fortunately you have exported the Amount parameter for each added rotation layer. So all the copies of the Rotate hip layer share the same rotation. The same applies to the other rotation layers (body and legs).

Since the arms and the head are children limbs of the body they should suffer the same rotation as the body. Repeat the same for the body rotation layer and copy it over the arms and the head image layers.

Now you can imagine how this works. You need now an additional rotation layer for the rest of the limbs to produce its individual rotation. So repeat the steps of Add a Rotate Layer, rename it, export the Amount parameter and center the Origin. You should obtain something like this:

{|
|[[Image:AddRotationFinal.png]] || [[Image:AddRotationLayersFinal.png|thumb]]
|}

== Now animate it! ==

It is time to animate the character!. You can go to the Child Dialog and expand the ValueBase Nodes and select any of the already exported parameters (angles). Alternatively you can select the parameter itself from the proper layer. It will set the angle duck at the proper position showing the altered position and angle due to the nested rotations performed for each sub-limb. You can do use of the [[Groups Panel|Group feaure]] of Synfig to select multiple scattered layers with only one double click.

[[Image:Rotation-Setup2.png|center]]

Don't move the origin of any layer! If you do, you will break the composition.

Notice that I've prepared the individual images with a rounded hidden area (look again at the split character image and see what I mean). This allows us to make rotations without revealing sharp corners.

----

For alternative set-ups and its pros and cons, see the [[Talk:Cut-out_Animation|talk page]].

Doc:Adding Layers

2007-06-22T21:02:59Z

Gremble: /* Using locality */ Took out the comment about the default being changed, confusing, and has now been consistent for a long time

''Usual note to the reader: This is not yet finished; please be patient.''

== Introduction ==

In the [[Animation Basics|previous tutorial]], you made a first simple animation by changing the attributes of primitive objects such as its position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses [[Layers]]. They are similar to layers known from other drawing application such as the GIMP, for instance.

However, Synfig is different to simple layers in at least two respects:
# You can organize layers into hierachical groups.
# You can use upper layers to change the behaviour (or look) of underlying layers.

Doing so is quite easy. Let's look at a simple example.

# Create a new file with 0 duration. There's no need to bother with a timeline at this point.
# Create a simple rectangle.

== Combining Layers ==

Now there are two ways to proceed. In the first way, pick the [[Gradient Tool|gradient tool]] from the Synfig [[Toolbox]], and click into the canvas once. You should note that another layer was added in the [[Layers Dialog]] called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the [[Normal Tool|normal tool]], click into the canvas to activate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.

You now have a gradient but it is not what you wanted: It spreads the whole canvas and the goal was to have a gradient on the rectangle. Let's fix this now.

Select the gradient and the rectangle layer in the [[Layers Dialog]]. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select '[[Encapsulate]]' from the menu. The view of your layer tab should change now, showing a small box called '[[Inline Canvas]]' with an arrow in front.

You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers, the gradient and the rectangle.

If you want to change the name of it to something more descriptive, just select the layer in the layer tab and click on its label. Then you just edit it in place. You can do this for ANY layer, and are strongly encouraged to do so.

== Using locality ==

However, there is still a problem: The gradient still covers the whole canvas althought we wanted it to be restricted on the rectangle. To do so, activate the gradient layer in the Layer tab. Now go to the [[Params Dialog]] (by default a tab in the Params-Children-Keyframes window), and search the attribute called '[[Blend Method]]'. Double-click the entry and select '[[Blend Method#Onto|Onto]]' from the appearing drop-down menu.

The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.

If only for the additional organization, encapsulating layers into inline canvases 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.

However, a layer can only modify the data that it gets from directly below it. In other words, if you were to throw a [[Blur Layer]] at the top of the objects inside the [[Inline Canvas|inline canvas]] we just created, it would just blur them -- anything under it would not be blurred!

Lets try it. Add a few circles under the inline canvas we just created. Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Outline" layer). This is where we want to insert the blur. Right click on the selected layer 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 goto the Blur category and select the "Blur" layer. (so that would be "New Layer->[[Blur Layer Category|Blurs]]->[[Blur Layer|Blur]]")

Well, it blurred... but something is not quite right--the inside edge of the outline is now all soft, but it still kinda looks like there is a hard edge on the outside. It is doing this because the blend method of the blur defaulted to "[[Blend Method#Composite|Composite]]" (you can change the [[New Layer Defaults#Default Blend Method|default blend method]] for new layers from the [[New Layer Defaults]] section of the [[Toolbox]]). What we want is a blend method of "[[Blend Method#Straight|Straight]]". Just select the blur layer, and change the [[Blend Method]] to "[[Blend Method#Straight|Straight]]" in the [[Params Dialog]].

(NOTE: I will probably change the way that default blend methods are handled in the future--as the way it is currently handled seems to only create hassles like this)

Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!

== Digging further... ==

If you care to look into Synfig's main menu 'Layer > New Layer' you will note quite a lot of different possibilities for making layers. Several of them sound rather unusual; '[[Transform Layers Category|Transform]] > [[Rotate Layer|Rotate]]' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the [[Animation Basics|previous animation tutorial]], you can change them to be different on certain [[Keyframes|keyframes]]. Synfig will take care of interpolating the steps in between.

For example, you could create a [[Star Layer|star]] from the [[Layer Menu]], add a [[Rotate Layer]]. Combine this with the lesson learned in the [[Animation Basics|last tutorial]] and you can create a rotating star. Change its color, too, and you'll get a quite impressive effect for 2 minutes of work.