Doc:Cut-out Animation - Revision history

Darkspace65: /* Tips & Tricks */

2016-11-19T05:45:44Z

‎Tips & Tricks

VeganaiZe: spelling

2016-07-01T05:15:09Z

spelling

VeganaiZe: spelling

2016-07-01T03:33:35Z

spelling

D.j.a.y: intra Doc:Cut-out_Animation_using_Group_Transformation_Widget link

2015-07-02T08:21:01Z

intra Doc:Cut-out_Animation_using_Group_Transformation_Widget link

D.j.a.y: TOCright

2015-05-02T12:52:50Z

TOCright

D.j.a.y: /* Preparing the material */ note about cutout tool

2015-05-02T12:52:15Z

‎Preparing the material: note about cutout tool

Zelgadis: Text replace - "{{Category|NewTerminology}}" to "{{NewTerminology}}"

2013-05-20T08:11:53Z

Text replace - "{{Category|NewTerminology}}" to "{{NewTerminology}}"

D.j.a.y: screenshot

2013-03-26T09:39:55Z

screenshot

Genete: Terminology Updated

2013-02-06T12:43:31Z

Terminology Updated

D.j.a.y at 08:12, 4 January 2013

2013-01-04T08:12:40Z

@@ Line 88: / Line 88: @@
 == Tips & Tricks ==
-Herb, in the [http://www.synfig.org/forums/viewtopic.php?f=8&t=852 forum], give a "Ball joint style construction". It's a simple solution to mask the lines of two intersecting shapes.
+Herb, in the [http://www.synfig.org/forums/viewtopic.php?f=8&t=852 forum], uses a "Ball joint style construction". It's a simple solution to mask the lines of two intersecting shapes.
-You can use a circle of same color, not a {{l|Region Layer|region}} or {{l|Outline Layer|outline layer}}. The circle must cover intersecting lines and be above ({{l|Z_Depth_Parameter|z}}) both shapes in layers. Rotation {{l|Handle|handles}} origins are close to origins of the circles. {{l|Linking}} them are optional and needs some tweaking of position when done. Here is a leg Herb had construct using this method.
+You can use a circle of same color, not a {{l|Region Layer|region}} or {{l|Outline Layer|outline layer}}. The circle must cover the intersecting lines and must be above ({{l|Z_Depth_Parameter|z}}) both shapes in the Layers Panel. Rotation {{l|Handle|handles}} origins are close to origins of the circles. {{l|Linking}} them are optional and needs some tweaking of position when done. Here is a leg Herb constructed using this method.
 [[File:CutOut Animation 9 0.63.06.png|frame|center]]

@@ Line 32: / Line 32: @@
-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).
+Obviously the layer order is important so place each part of the character to compose it properly (in this case the left leg is behind the right one).
 == Group the image layers ==
@@ Line 43: / Line 43: @@
 == 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'').
+Before adding the Rotate Layers you should have analyzed 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.
+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 cumulative 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 group layer 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 important example, arms will rotate about the shoulder and not about the hand.
+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 important example, arms will rotate about the shoulder and not about the hand.
 {|align = "center"
@@ Line 58: / Line 58: @@
 {|align = "center"
-| 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 bears 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 grouped 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. || [[File:CutOut Animation 5 0.63.06.png|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 bears it's own rotation, plus the rotations of those limbs higher up the limb hierarchy. 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 grouped 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 congruence with the hip. Magic! See the image. || [[File:CutOut Animation 5 0.63.06.png|thumb|After copy the Rotate hip layer over all the image layers]]
 |}
-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.
+For each of the 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:

← Older revision		Revision as of 03:33, 1 July 2016
Line 36:		Line 36:
	== Group the image layers ==		== Group the 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 group it so that the rotation only applies to the desired layers. After grouping and renaming the group layers, it looks like this:	+	As you can imagine we are going to use Rotate Layers to perform the cut out animation. But before applying the rotation for each part of the character, we need to group it so that the rotation only applies to the desired layers. After grouping and renaming the group layers, it looks like this:

@@ Line 7: / Line 7: @@
 {{NewTerminology}}
 <!-- Page info end -->
 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:

@@ Line 1: / Line 1: @@
 <!-- Page info -->
 {{Title|Cut-out Animation}}
 {{Category|Manual}}
 {{Category|Tutorials}}

@@ Line 12: / Line 12: @@
 == 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 {{l|Media:Cutout-sample.zip|this file}}. It also has the final sifz animation result.
@@ Line 18: / Line 17: @@
 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 ==

@@ Line 23: / Line 23: @@
 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 handles 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 in the layer list) and go to the Top-Left and Bottom-Right parameters (they get greyed) in the parameter list. Make right-click -> Link on each one of the Top-Left, Bottom-Right parameter. 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.
+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 handles 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 ({{Shortcut|CTRL|}} + click each layer in the layer list) and go to the Top-Left and Bottom-Right parameters (they get greyed) in the parameter list. Make right-click -> Link on each one of the Top-Left, Bottom-Right parameter. 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.
 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).
@@ Line 35: / Line 35: @@
 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 group it so that the rotation only applies to the desired layers. After grouping and renaming the group layers, it looks like this:
-{{l|Image:Encapsulate-layers.png|right|thumb|Layers dialog after grouping}}
 == Add the Rotate Layers ==
@@ Line 47: / Line 48: @@
 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 important example, arms will rotate about the shoulder and not about the hand.
-{|
+{|align = "center"
 |'''Before'''||'''After'''
 |-
-|{{l|Image:AddRotateLayer-before.png}} || {{l|Image:AddRotateLayer-after.png}} ||{{l|Image:AfterAddRotateHip.png|right|thumb|After copy the Rotate hip layer over all the image layers}}
+|[[File:CutOut Animation 3 0.63.06.png|400px|thumb|Original hip origin placement]] || [[File:CutOut Animation 4 0.63.06.png|400px|thumb|After, hip origin in proper position ]]
 |}
-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 bears 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 grouped 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.
+{|align = "center"
 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.
@@ Line 59: / Line 62: @@
 After doing that for the legs and for the body you should obtain something like this:
-{|
+[[File:CutOut Animation 6 0.63.06.png|frame|center]]
-|{{l|Image:AddRotates.png}} || {{l|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).
@@ Line 69: / Line 70: @@
 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:
-{|
-|{{l|Image:AddRotationFinal.png}} || [[File:{{l|Image:AddRotationLayersFinal.png|thumb}}]]
+[[File:CutOut Animation 7 0.63.06.png|frame|center]]
-|}
 == Now animate it! ==
@@ Line 77: / Line 77: @@
 It is time to animate the character!. You can go to the Library Panel 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 handle 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 {{l|Sets Panel|Set feature}} of Synfig to select multiple scattered layers with only one double click.
-{{l|Image:Rotation-Setup2.png|center}}
+[[File:CutOut Animation 8 0.63.06.png|frame|center]]
 Don't move the origin of any layer!  If you do, you will break the composition.
@@ Line 88: / Line 88: @@
 You can use a circle of same color, not a {{l|Region Layer|region}} or {{l|Outline Layer|outline layer}}. The circle must cover intersecting lines and be above ({{l|Z_Depth_Parameter|z}}) both shapes in layers. Rotation {{l|Handle|handles}} origins are close to origins of the circles. {{l|Linking}} them are optional and needs some tweaking of position when done. Here is a leg Herb had construct using this method.
+[[File:CutOut Animation 9 0.63.06.png|frame|center]]
-[[File:Balljointstyle-herb.png|center]]
 ----
 For alternative set-ups and its pros and cons, see the {{l|Talk:Cut-out_Animation|talk page}}.

@@ Line 69: / Line 69: @@
 {|
-|{{l|Image:AddRotationFinal.png}} || {{l|Image:AddRotationLayersFinal.png|thumb}}
+|{{l|Image:AddRotationFinal.png}} || [[File:{{l|Image:AddRotationLayersFinal.png|thumb}}]]
 |}
@@ Line 81: / Line 81: @@
 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 {{l|Talk:Cut-out_Animation|talk page}}.