Doc:Cut-out Animation/es - Revision history

Naturalin: /* Preparando el material */

2011-12-27T02:39:09Z

‎Preparando el material

Rafael at 07:13, 24 May 2010

2010-05-24T07:13:30Z

Zelgadis: moved Cut-out Animation.es to Doc:Cut-out Animation/es

2010-02-20T05:16:00Z

moved Cut-out Animation.es to Doc:Cut-out Animation/es

Zelgadis: Text replace - ']]' to '}}'

2009-09-08T06:50:33Z

Text replace - ']]' to '}}'

Zelgadis: Text replace - '[[' to '{{l|'

2009-09-07T18:28:42Z

Text replace - '[[' to '{{l|'

Wadago: /* Ahora a animarlo! */

2009-08-16T00:52:47Z

‎Ahora a animarlo!

Wadago: /* Agregar las Capas de Rotación */

2009-08-16T00:50:23Z

‎Agregar las Capas de Rotación

Wadago at 00:46, 16 August 2009

2009-08-16T00:46:46Z

Ayam: New page: Esta página debería estar escrita en Español. Por favor ayúdanos a traducirla! This is brief tutorial to show how create cut-out style animations. Usually cut-out style animations us...

2008-05-01T17:28:12Z

New page: Esta página debería estar escrita en Español. Por favor ayúdanos a traducirla! This is brief tutorial to show how create cut-out style animations. Usually cut-out style animations us...

New page

Esta página debería estar escrita en Español. Por favor ayúdanos a traducirla!

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]].

@@ Line 14: / Line 14: @@
 == Preparando el material ==
-Para una animación de estilo cut-out, necesitará algunas imágenes que representan las partes móviles de la animación del personaje u objeto. Para este ejemplo he preparado un muchacho al estilo Simpsons. Puede tomar las imágenes de este {{l|Media:Cutout-sample.zip|archivo}}. También contiene uno con el final .sifz que es el resultado de la animación.
+Para una animación de estilo cut-out, necesitará algunas imágenes que representan las partes móviles de la animación del personaje u objeto. Para este ejemplo se ha preparado un muchacho al estilo Simpsons. Puede tomar las imágenes de este {{l|Media:Cutout-sample.zip|archivo}}. También contiene uno con el final .sifz que es el resultado de la animación.
 {{l|Image:Boy-split.png|right|thumb|A character split into parts}}
 Cada parte del cuerpo (cabeza, brazos, piernas, etc.) es un archivo PNG único. (En la imagen de partes, las imágenes individuales están compuestas en una más grande).
-He puesto a todos los archivos las mismas dimensiones horizontales y verticales para que entonces todas las imágenes pueden caber una sobre otra para componer al personaje sin la necesidad de ajustar sus tamaños o posiciones. Esto ayudará más tarde al importar cada imagen en Synfig.
+Se han puesto a todos los archivos las mismas dimensiones horizontales y verticales para que entonces todas las imágenes pueden caber una sobre otra para componer al personaje sin la necesidad de ajustar sus tamaños o posiciones. Esto ayudará más tarde al importar cada imagen en Synfig.
 == Importando las imagenes cut-out ==

← Older revision		Revision as of 07:13, 24 May 2010
Line 1:		Line 1:
		+	<!-- Page info -->
		+	{{Title\|Animación por cortes}}
		+	{{Category\|Manual}}
		+	{{Category\|Tutorials}}
		+	{{Category\|Tutorials Intermediate}}
		+	<!-- Page info end -->
		+
	(Traducido por {{l\|User:Wadago\|Wadago}})		(Traducido por {{l\|User:Wadago\|Wadago}})

@@ Line 1: / Line 1: @@
-(Traducido por {{l|User:Wadago|Wadago]])
+(Traducido por {{l|User:Wadago|Wadago}})
 Este es un breve tutorial para mostrar como crear animaciones de estilo de recorte por partes (cut-out). Por lo general, las animaciones de estilo cut-out usan el arte de imagen estática en vez del arte de vector para crear la animación. Véa la serie South Park. Usted debería obtener como resultado, una especie de animación como ésta:
-{{l|Image:Cutoutsample.gif]]
+{{l|Image:Cutoutsample.gif}}
 == Preparando el material ==
-Para una animación de estilo cut-out, necesitará algunas imágenes que representan las partes móviles de la animación del personaje u objeto. Para este ejemplo he preparado un muchacho al estilo Simpsons. Puede tomar las imágenes de este {{l|Media:Cutout-sample.zip|archivo]]. También contiene uno con el final .sifz que es el resultado de la animación.
+Para una animación de estilo cut-out, necesitará algunas imágenes que representan las partes móviles de la animación del personaje u objeto. Para este ejemplo he preparado un muchacho al estilo Simpsons. Puede tomar las imágenes de este {{l|Media:Cutout-sample.zip|archivo}}. También contiene uno con el final .sifz que es el resultado de la animación.
-{{l|Image:Boy-split.png|right|thumb|A character split into parts]]
+{{l|Image:Boy-split.png|right|thumb|A character split into parts}}
 Cada parte del cuerpo (cabeza, brazos, piernas, etc.) es un archivo PNG único. (En la imagen de partes, las imágenes individuales están compuestas en una más grande).
@@ Line 22: / Line 22: @@
 {|align = "center"
-|{{l|Image:Layers-Images.png]]||{{l|Image:Images-Composed.png]]
+|{{l|Image:Layers-Images.png}}||{{l|Image:Images-Composed.png}}
 |}
@@ Line 31: / Line 31: @@
 Como usted puede imaginar, vamos a hacer girar las Capas para realizar la animación cut-out. Pero antes de aplicar la rotación de cada parte del cuerpo personaje, tenemos que encapsularlo de modo que la rotación sólo se aplique a las capas/partes deseadas. Después de la encapsulación y de renombrar las capas del lienzo, el resultado se parecerá a esto:
-{{l|Image:Encapsulate-layers.png|right|thumb|Layers dialog after encapsulation]]
+{{l|Image:Encapsulate-layers.png|right|thumb|Layers dialog after encapsulation}}
 == Agregar las Capas de Rotación ==
@@ Line 46: / Line 46: @@
 |'''Antes'''||'''Después'''
 |-
-|{{l|Image:AddRotateLayer-before.png]] || {{l|Image:AddRotateLayer-after.png]] ||{{l|Image:AfterAddRotateHip.png|right|thumb|Después y luego de copiar la capa de rotación de la cadera sobre las demás capas de imagen]]
+|{{l|Image:AddRotateLayer-before.png}} || {{l|Image:AddRotateLayer-after.png}} ||{{l|Image:AfterAddRotateHip.png|right|thumb|Después y luego de copiar la capa de rotación de la cadera sobre las demás capas de imagen}}
 |}
@@ Line 58: / Line 58: @@
 {|
-|{{l|Image:AddRotates.png]] || {{l|Image:AddRotatesLayers.png]]
+|{{l|Image:AddRotates.png}} || {{l|Image:AddRotatesLayers.png}}
 |}
@@ Line 68: / Line 68: @@
 {|
-|{{l|Image:AddRotationFinal.png]] || {{l|Image:AddRotationLayersFinal.png|thumb]]
+|{{l|Image:AddRotationFinal.png}} || {{l|Image:AddRotationLayersFinal.png|thumb}}
 |}
@@ Line 76: / Line 76: @@
 O bien usted puede seleccionar el parámetro mismo de la capa apropiada. Esto pondrá al duck (pequeño circulo de color verde en los extremos) de ángulo en la posición apropiada mostrando las posiciónes y ángulos alternados debido a las rotaciones anidadas realizadas para cada submiembro. Puede hacer uso de la característica Group (Grupo) de Synfig para seleccionar múltiples capas dispersadas con sólo hacer un doble clic.
-{{l|Image:Rotation-Setup2.png|center]]
+{{l|Image:Rotation-Setup2.png|center}}
 ¡No mueva el punto de origen de rotación de ninguna capa! Si hace esto, romperá la composición.
@@ Line 82: / Line 82: @@
 ----
-Para ver las características con más detalle de utilizar la técnica de animación cut-out, vea la {{l|Talk:Cut-out_Animation|esta página]].
+Para ver las características con más detalle de utilizar la técnica de animación cut-out, vea la {{l|Talk:Cut-out_Animation|esta página}}.

@@ Line 1: / Line 1: @@
-(Traducido por [[User:Wadago|Wadago]])
+(Traducido por {{l|User:Wadago|Wadago]])
 Este es un breve tutorial para mostrar como crear animaciones de estilo de recorte por partes (cut-out). Por lo general, las animaciones de estilo cut-out usan el arte de imagen estática en vez del arte de vector para crear la animación. Véa la serie South Park. Usted debería obtener como resultado, una especie de animación como ésta:
-[[Image:Cutoutsample.gif]]
+{{l|Image:Cutoutsample.gif]]
 == Preparando el material ==
-Para una animación de estilo cut-out, necesitará algunas imágenes que representan las partes móviles de la animación del personaje u objeto. Para este ejemplo he preparado un muchacho al estilo Simpsons. Puede tomar las imágenes de este [[Media:Cutout-sample.zip|archivo]]. También contiene uno con el final .sifz que es el resultado de la animación.
+Para una animación de estilo cut-out, necesitará algunas imágenes que representan las partes móviles de la animación del personaje u objeto. Para este ejemplo he preparado un muchacho al estilo Simpsons. Puede tomar las imágenes de este {{l|Media:Cutout-sample.zip|archivo]]. También contiene uno con el final .sifz que es el resultado de la animación.
-[[Image:Boy-split.png|right|thumb|A character split into parts]]
+{{l|Image:Boy-split.png|right|thumb|A character split into parts]]
 Cada parte del cuerpo (cabeza, brazos, piernas, etc.) es un archivo PNG único. (En la imagen de partes, las imágenes individuales están compuestas en una más grande).
@@ Line 22: / Line 22: @@
 {|align = "center"
-|[[Image:Layers-Images.png]]||[[Image:Images-Composed.png]]
+|{{l|Image:Layers-Images.png]]||{{l|Image:Images-Composed.png]]
 |}
@@ Line 31: / Line 31: @@
 Como usted puede imaginar, vamos a hacer girar las Capas para realizar la animación cut-out. Pero antes de aplicar la rotación de cada parte del cuerpo personaje, tenemos que encapsularlo de modo que la rotación sólo se aplique a las capas/partes deseadas. Después de la encapsulación y de renombrar las capas del lienzo, el resultado se parecerá a esto:
-[[Image:Encapsulate-layers.png|right|thumb|Layers dialog after encapsulation]]
+{{l|Image:Encapsulate-layers.png|right|thumb|Layers dialog after encapsulation]]
 == Agregar las Capas de Rotación ==
@@ Line 46: / Line 46: @@
 |'''Antes'''||'''Después'''
 |-
-|[[Image:AddRotateLayer-before.png]] || [[Image:AddRotateLayer-after.png]] ||[[Image:AfterAddRotateHip.png|right|thumb|Después y luego de copiar la capa de rotación de la cadera sobre las demás capas de imagen]]
+|{{l|Image:AddRotateLayer-before.png]] || {{l|Image:AddRotateLayer-after.png]] ||{{l|Image:AfterAddRotateHip.png|right|thumb|Después y luego de copiar la capa de rotación de la cadera sobre las demás capas de imagen]]
 |}
@@ Line 58: / Line 58: @@
 {|
-|[[Image:AddRotates.png]] || [[Image:AddRotatesLayers.png]]
+|{{l|Image:AddRotates.png]] || {{l|Image:AddRotatesLayers.png]]
 |}
@@ Line 68: / Line 68: @@
 {|
-|[[Image:AddRotationFinal.png]] || [[Image:AddRotationLayersFinal.png|thumb]]
+|{{l|Image:AddRotationFinal.png]] || {{l|Image:AddRotationLayersFinal.png|thumb]]
 |}
@@ Line 76: / Line 76: @@
 O bien usted puede seleccionar el parámetro mismo de la capa apropiada. Esto pondrá al duck (pequeño circulo de color verde en los extremos) de ángulo en la posición apropiada mostrando las posiciónes y ángulos alternados debido a las rotaciones anidadas realizadas para cada submiembro. Puede hacer uso de la característica Group (Grupo) de Synfig para seleccionar múltiples capas dispersadas con sólo hacer un doble clic.
-[[Image:Rotation-Setup2.png|center]]
+{{l|Image:Rotation-Setup2.png|center]]
 ¡No mueva el punto de origen de rotación de ninguna capa! Si hace esto, romperá la composición.
@@ Line 82: / Line 82: @@
 ----
-Para ver las características con más detalle de utilizar la técnica de animación cut-out, vea la [[Talk:Cut-out_Animation|esta página]].
+Para ver las características con más detalle de utilizar la técnica de animación cut-out, vea la {{l|Talk:Cut-out_Animation|esta página]].

@@ Line 35: / Line 35: @@
 == Agregar las Capas de Rotación ==
-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'').
+Antes de añadir las Capas de Rotación (para hacerlas girar), debería de analizar su personaje detenidamente. Tiene que comprender el marco mecánico al que los movimientos del personaje están ligados, esto es, mediante el mecanismo del esqueleto del personaje. Para un  simple personaje humanoide, uno considera la cadera como el centro de rotación del esqueleto entero. Cada miembro gira con relación a la rotación de la cadera. También cada submiembro debería girar con relación a su elemento padre y el padre a su vez con relación a la cadera (usamos la cadera como el hueso raíz o padre).
-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.
+En nuestro ejemplo, el cuerpo girará con relación a la cadera y la cabeza con relación al cuerpo. Cuando hacemos girar la cadera del personaje estará la  necesidad de darle una rotación idéntica al cuerpo. La cabeza tiene que girar con el torso y además con la cadera. Este efecto acumulativo de miembros rotativos y submiembros es conocido como la jerarquía de miembros. La cabeza también necesita su propia rotación individual que no afectará a ningún otro miembro.
-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).
+Vayamos al principio añadiendo una Capa de Rotación (Rotate Layer) a la cadera. Iremos al lienzo de la cadera pegada y seleccionaremos la capa de imagen de la cadera. Inserte una nueva Capa de Rotación (File-> Layer-> New Layer-> Transform-> Rotate) encima de la capa de imagen de la cadera. Renombre la capa como 'Rotar cadera' (o como quiera). Ahora vaya al cuadro de diálogo de parámetros de Capa de Rotación (Rotate Layer) y seleccione Amount parameter. Este parámetro establece el ángulo de rotación. Exporte este parámetro (clic derecho) y dele un nombre propio (por ejemplo,  cadera).
-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.
+Ahora al setup de la capa de rotación. Debería haber notado que hay un parámetro de origen en la Capa de Rotación (Origin parameter), este es el punto de origen de la rotación. Es muy importante que usted ponga el origen en la posición apropiada, permitiendo a la rotación apropiada de las capas de imagen, en este caso usted debería de colocar el origen de rotación en el centro de las caderas del personaje. Como otro ejemplo de obviedad, los brazos girarán sobre el hombro y no sobre la mano.
 {|
-|'''Before'''||'''After'''
+|'''Antes'''||'''Después'''
 |-
-|[[Image:AddRotateLayer-before.png]] || [[Image:AddRotateLayer-after.png]] ||[[Image:AfterAddRotateHip.png|right|thumb|After copy the Rotate hip layer over all the image layers]]
+|[[Image:AddRotateLayer-before.png]] || [[Image:AddRotateLayer-after.png]] ||[[Image:AfterAddRotateHip.png|right|thumb|Después y luego de copiar la capa de rotación de la cadera sobre las demás capas de imagen]]
 |}
-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.
+Ahora, un razonamiento: Cuando hacemos girar la cadera del personaje también necesitaríamos hacer una rotación idéntica al cuerpo. La cabeza tiene que girar el con el torso y además con la cadera. Otro opción de hacer esto consistiría en que cada miembro del cuerpo tenga su propia rotación, más las rotaciones de aquellos miembros superiores al que está ligado en su jerarquía. Para lograr esto, debería añadir la misma capa de rotación a todos los miembros que dependen de la rotación de cadera. Copie y pegue la Capa de Rotación de la cadera para hacer girar a todas las capas de imagen encapsuladas.
-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.
+Recuerde que el parámetro de rotación es exportado, y el valor es compartido entre todas las capas de rotación pegadas, dando el efecto deseado. Todos los miembros girarán ahora congruentemente con la cadera. ¡Magia! Vea la imagen.
-After doing that for the legs and for the body you should obtain something like this:
+Para cada uno de los miembros siguientes en el nivel, necesitaríamos una Capa de Rotación individual adicional. Los siguientes miembros del nivel de jerarquía son: las piernas y el cuerpo. Tenemos que añadir una Capa de Rotación para cada miembro del siguiente nivel. Deberá repetir el mismo proceso para cada uno: Añadir la Capa de Rotación, renombrarlo, exporte el Amount parameter (muy importante) y coloque el Origen al lugar de rotación apropiado.
 {|
@@ Line 59: / Line 61: @@
 |}
-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).
+Observe que por suerte usted ha exportado el parámetro Amount para cada capa de rotación agregada. Entonces todas las copias de la capa de Rotación de la cadera comparten la misma rotación. El mismo se aplica a las otras capas de rotación (cuerpo y piernas).
-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.
+Ya que los brazos y la cabeza son miembros del cuerpo del niño, ellos también deberían de tener la misma rotación que el cuerpo. Repita los mismo pasos para la capa de rotación de cuerpo y cópielo sobre los brazos y las capas de imagen principales.
-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:
+Ahora ver como trabaja este estilo de animación. Necesita ahora una capa de rotación adicional para el resto de los miembros para producir su rotación individual. Repita los pasos de Añadir una Capa de Rotación (Rotate Layer), lo renombra, exportan el parámetro Amount y centran el punto de Origen. Tendría algo como esto:
 {|

← Older revision	Revision as of 05:16, 20 February 2010
(No difference)

@@ Line 71: / Line 71: @@
 |}
-== Now animate it! ==
+== Ahora a animarlo! ==
-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.
+¡Ahora es el momento de animar al personaje!. Puede ir al cuadrado de diálogo hijo (Child Dialog) y ampliar los Nodos ValueBase y seleccionar cualquiera de los parámetros ya exportados (ángulos).
 [[Image:Rotation-Setup2.png|center]]
-Don't move the origin of any layer!  If you do, you will break the composition.
+¡No mueva el punto de origen de rotación de ninguna capa! Si hace esto, romperá la composición.
+He preparado las imágenes individuales con un área redondeada escondida (vea la imagen del personaje detenidamente y verá lo que quiero decir). Esto permite que hagamos rotaciones sin revelar esquinas agudas.
-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]].
+Para ver las características con más detalle de utilizar la técnica de animación cut-out, vea la [[Talk:Cut-out_Animation|esta página]].

@@ Line 1: / Line 1: @@
- Esta página debería estar escrita en Español. Por favor ayúdanos a traducirla!
+(Traducido por [[User:Wadago|Wadago]])
-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:
+Este es un breve tutorial para mostrar como crear animaciones de estilo de recorte por partes (cut-out). Por lo general, las animaciones de estilo cut-out usan el arte de imagen estática en vez del arte de vector para crear la animación. Véa la serie South Park. Usted debería obtener como resultado, una especie de animación como ésta:
 [[Image:Cutoutsample.gif]]
-== Preparing the material ==
+== Preparando el 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.
+Para una animación de estilo cut-out, necesitará algunas imágenes que representan las partes móviles de la animación del personaje u objeto. Para este ejemplo he preparado un muchacho al estilo Simpsons. Puede tomar las imágenes de este [[Media:Cutout-sample.zip|archivo]]. También contiene uno con el final .sifz que es el resultado de la animación.
 [[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.
+Cada parte del cuerpo (cabeza, brazos, piernas, etc.) es un archivo PNG único. (En la imagen de partes, las imágenes individuales están compuestas en una más grande).
-== Importing the cut out images ==
+== Importando las imagenes cut-out ==
-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:
+Esto es tan simple como ir al Caret Menu y seleccionar el File-> Import y escoger el archivo apropiado para cada parte del personaje o actor. Después de repetir este proceso para cada uno de los archivos de imagen de su personaje, debería obtener algo parecido a lo que aparece debajo.
-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.
+Cuando usted va siguiendo los pasos del tutorial, notará que todas las capas de imagen tienen las mismas dimensiones. El límite de cada capa de imagen es el rectángulo con los ducks (pequeños circulos) verdes mostrados. Las cajas resaltadoras de todas las capas (layers) coinciden ya que expresamente creé cada imagen con esas dimensiones y las coloqué correctamente. Esto nos permitirá que hagamos lo siguiente: Seleccione todas las capas (CTRL + clic en cada capa) y vaya hacia la esquina Superior izquierda hasta la Inferior Derecha (puestos todos en color gris). Haga el clic derecho-> Link on each one. Esto enlazará todos los límites de las capas de imagen para mantenerlos en una misma posición relativa.
 {|align = "center"
@@ Line 23: / Line 25: @@
 |}
-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).
+Obviamente el orden de cada capa es importante para reubicar las partes del personaje a fin de formarlo correctamente (en el caso, por ejemplo, que la pierna izquierda esté detrás de la derecha).
-== Encapsulate image layers ==
+== Encapsulando las capas de imagen ==
-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:
+Como usted puede imaginar, vamos a hacer girar las Capas para realizar la animación cut-out. Pero antes de aplicar la rotación de cada parte del cuerpo personaje, tenemos que encapsularlo de modo que la rotación sólo se aplique a las capas/partes deseadas. Después de la encapsulación y de renombrar las capas del lienzo, el resultado se parecerá a esto:
 [[Image:Encapsulate-layers.png|right|thumb|Layers dialog after encapsulation]]
-== Add the Rotate Layers ==
+== Agregar las Capas de Rotación ==
 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'').