Martes, 10 Mayo 2016 17:53

The Walking Bear (i)

Valora este artículo
(1 Voto)

Anidando clips de películas: Oso Animado

"The Walking Bear" (i)

Continuación de las entradas Animate: Anidando clips de películas (i) y Animate: Anidando clips de películas (ii), donde vimos como anidar tres clips de película para generar el movimiento de un automóvil que se desplaza sobre el escenario, mientras sus ruedas giran acompañando el movimiento, en este tutorial veremos una forma básica de animar un personaje más orgánico; puntualmente, la sìntesis de un oso, haciendo que, a medida que el personaje avanza, haremos mover los siguentes elementos:

  • Cabeza,
  • Las dos manos y los dos brazos delanteros,
  • Las dos patas y las dos "piernas" traceras, 
  • y la cola del oso.

Para esto, utilizaremos una ilustraciòn realizada en Adobe Illustrator, la que importaremos en Adobe Animate para trabajar de la siguiente manera:

1. Creamos un nuevo documento, en nuestro caso de 980x480px de ancho y alto respectivamente, con una velocidad de animación de 30fps; fondo de lienzo, blanco:

Creamos nuevo documento

2. Importamos al escenario el documento creado en Adobe Illustrator CC 2015, programa en que se conviertieron en símbolos gráficos los elementos mencionados al inicio de este tutorial, a fin de poder realizar las animaciones necesarias:

Importando un documento de Illustrator en Animate

 

3. Seleccionamos el documento a importar:

Archivo a importar

4. Cuando pulsamos en el botón "Abrir", Adobe Animate nos mostrará la siguiente ventana de diálogo (conservaremos las opciones indicadas en la captura de pantalla):

Diálogo de importación de DW

5. El estado de la línea de tiempo, del escenario y de la biblioteca, luego de la importación de los símbolos de Illustrator, es el siguiente:

Estado de los elementos de Illustrator una vez importados en Animate

Como vemos, existen solamente un brazo, una mano, una pierna y una pata (nombrada como "pie" en la captura), ya que crearemos los elementos restantes (pata, brazo, pata y mano izquierdas del oso) a partir de los sìmbolos gráficos que ya tenemos.

6. Seleccionado todos los símbolos gráficos que vemos arriba creamos un nuevo clip de película:

Creando un nuevo clip de película

7. La ventana de diálogo que muestra Animate, al crear un nuevo clip de película es la siguiente:

Opciones de diálogo al convertir en un clip de película

Asignaremos las opciones y nombre que se muestran más arriba.

8. Editando la línea de tiempo del clip creado (haciendo doble click sobre éste), seleccionaremos todos los objetos presentes en el único fotograma clave que tenemos hasta ahora, daremos clic con el botón derecho del mouse sobre cualquiera de los símbolos gráficos seleccionados, y elegiresmo la opción "Distribuir en capas":

Editando la línea de tiempo del nuevo clip de película

Con esto, Animate dejará libre la capa actual, y generará las capas necesarias para colocar cada elemento en una capa nueva, a las que les pondrá por nombre el correspondiente a cada símbolo (en nuestro caso, símbolos gráficos).

9. Una vez terminado el procedimiento anterior, el estado de las capas es el que se muestra en la siguiente captura:

Nuevas capas generadas luego de distribuir en capas

10. Según el movimiento que necesitamos, cambiaremos los centros de giro de cada uno de los símbolos:

Cambiando los centros de giro

En la figura anterior, utilizando la Herramienta de transformación libre (Tecla de atajo: Q), vemos que el centro de giro estará en el centro geométrico de la forma o del símbolo seleccionado; con esta misma herramienta moveremos el centro de giro.

11. Centro de giro cambiado:

Centro de giro cambiado

Debido a que el brazo girará en la inserción de éste con el cuerpo del oso, colocamos el centro de giro en la posición que considereemos más próxima a este punto (ver punto blanco en la figura anterior).

Nota importante: Para obtener un movimiento más natural deberíamos haber previsto una articulación a la altura del "codo" del brazo; en nuestro caso, para simplificar el procedimiento, articularemos únicamente brazo y mano, al igual que, más abajo, pierna y pata.

12. Una vez que hemos cambiado los centros de giro de cada uno de los símbolos que forman parte del oso, habrán quedado según la siguiente captura de pantalla:

Centros de giro cambiados

Ver los cambios de giro de pierna, brazo, cola y cabeza de los símbolos que forman el oso. En el caso de la pata y pie, como limitaremos su movimiento a una simple traslaciòn horizontal, no hemos realizado cambios en el centro de giro ya que no lo habrá; en el caso del cuerpo, sobre el que no generaremos movimiento ninguno, también hemos dejado el centro de giro en su posición originaria.

13. El siguiente paso será preparar la línea de tiempo de Clip_Oso para generar los movimientos de cada símbolo que lo componen:

Preparando la línea de tiempo para animar las partes del oso

Nota importante: La pocisión de cada símbolo debe ser la misma en el primer y último fotograma, de modo de generar la sensación de movimiento contínuo, sin que los saltos cuando la línea de tiempo cambia entre el último y el primer fotograma en la línea de tiempo.

14. Posición de las piernas, patas, cabeza y cola del oso al inicio y final de la línea de tiempo:

Posición de los elementos del oso en primer y último fotograma

Siguiendo los lineamientos de la nota del punto anterior, el oso tendrá exactamente la misma posición en el primer y último fotograma de su línea de tiempo.

15. Posición de las partes del oso en el punto medio de la animación:

Posición de los elementos del oso en el fotograma medio de las futuras interpolaciones

Nota importante: Como vemos, las patas (pata y mano) del oso se desplazan siguiendo la extremidad de pata y brazo, manteniédose horizontal; esto como una forma de simplificar el movimiento, ya que en caso de que hubiésemos elegido flexionar estos elementos deberíamos haber creado más elementos y nuevas animaciones en la línea de tiempo.

16. Seleccionando los fotogramas, tal como muestra la figura, y mediante botón derecho sobre los fotogramas seleccionados, creamos varias interpolaciones clásicas a la vez:

Creamos las interpolaciones clásicas, todas a la vez

17. El estado de la animación obtenida hasta el momento es la siguiente:

En la segunda parte de este tutorial veremos como agregar las dos extremidades faltantes (brazo y pata del lado izquierdo) y como dar más de realismo al movimiento de los distintos gráficos que componen el oso, mientras éste se desplaza en el escenario.

Es posible descargar el archivo editable de este ejercicio haciendo clic en el siguiente enlace: OsoAnimado_01.fla

En caso de dudas, comentarios o sugerencias sobre esta primer parte del tutorial, pueden utilizar el formulario que se encuentra al pie de esta entrada.

Saludos para todos!
Plácido Luna

Visto 470 veces Modificado por última vez en Martes, 10 Mayo 2016 19:08