Doc:Cut-out Animation

From Synfig Studio :: Documentation
Revision as of 14:26, 30 March 2008 by Dooglus (Talk | contribs)

Jump to: navigation, search
Languages Language: 

English • español



Preparing the material


A character split into parts


Importing the cut out images


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.

Layers-Images.png Images-Composed.png


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:

Layers dialog after encapsulation

Add the Rotate Layers

Before adding the Rotate Layers you should have analysed your character. You should know by now the mechanism that allows the movement of the character. You should know how is the character's skeleton. For a simple humanoid character you should consider the hip as the center of the rotation of the whole skeleton. Then each limb would rotate relative to the hip's rotation. Also each sub-limb should rotate relative to its parent and it (the parent) relative to the hip (what should be the root bone). For example the torso (body in the example) should rotate relative to the hip and the head should rotate relative to the torso. So when the character rotates the hip it should rotate the torso too the same amount. Subsequently the head should rotate the same amount as the torso rotation plus the hip rotation (following the limb hierarchy). Finally the head should have its own individual rotation (that in this case would not affect any other limb).

So 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) it will insert a Rotate Layer 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. That is the rotation angle parameter. Export that parameter (right click) and give a proper name (hip).

Once done you should set up the rotation layer. You should have noticed that there is a Origin parameter in the Rotation Layer. It is the origin of the rotation. It is very important that you set the origin to the proper position. It will allow the proper rotation of the image layers (an arm should rotate about the shoulder and not about the hand), so in this case you need to place the rotation origin at the center of the hip of the character.

Before After
AddRotateLayer-before.png AddRotateLayer-after.png
After copy the Rotate hip layer over all the image layers

Now consider the previous reasoning: So when the character rotates the hip it should rotate the torso too the same amount. Subsequently the head should rotate the same amount as the torso rotation plus the hip rotation (following the limb hierarchy). This means that you should add the same layer rotation to all the limbs that depend on the hip rotation. To do that you should copy and paste the Rotate hip layer above all the encapsulated image layers. This will produce the same rotation as the hip for all the limbs. See the image.

For each next level limb we need an additional individual Rotation Layer. The next level limbs are: the legs and the torso (called body in the example). So we should 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 (torso) you should obtain something like that:

AddRotates.png AddRotatesLayers.png


Since the arms and the head are children limbs of the body (torso) 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 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 Group feaure of Synfig to select multiple scattered layers with only one double click.





Languages Language: 

English • español