Martes, 10 Mayo 2016 19:04

The Walking Bear (ii)

Valora este artículo
(2 votos)

Animando un oso en Animate CC (ii)

"The Walking Bear" (ii)

Segunda y última parte del tutorial "The Walking Bear" cuya primera parte podemos consultar haciendo clic en este enlace, en la que logramos animar la cabeza, cola, pierna y pata derechas, y brazo y mano derechas del oso, en un movimiento aún bastante rudimentario, sin que el oso avanzara aún sobre el escenario.

Es posible descargar la animación lograda en la primera parte del tutorial haciendo clic en el siguiente enlace: OsoAnimado_01.fla y continuar trabajando sobre este archivo.

Vayamos ahora con el paso a paso de esta última parte del tutorial:

1. Duplicaremos las capas "pie", "mano", "brazo" y "pierna":

Duplicamos capas con sus respectivos símbolos y fotogramas

Para lo cual seleccionamos éstas capas, usando Cmd, ó Ctrl según estemos en Mac ó PC, y con botón derecho elegimos la opción "Duplicar capas".

2. El estado de las capas y la línea de tiempo de "Clip_Oso" es ahora el que se muestra en la siguiente captura de pantalla:

Vista de las nuevas capas generadas

Como vemos, al duplicar las capas, se duplican tanto fotogramas, como elementos contenidos en estas capas, y hasta las acciones de ActionScript que hubiesen en las mismas (en nuestro caso no hay acciones en las capas de nuestra animación).

3. Cambiaremos el orden de estas capas para situarlas debamo de la capa "cuerpo" para que se vean por detrás del símbolo correspondiente:

Cambiamos orden de capas según conveniencia

Esto lo logramos simplemente arrastrando con el mouse todas las capas que queramos reordenar.

4. Renombramos las capas según la posición que ocupe cada una respecto al cuerpo del oso:

Renombramos las capas

5. Si probásemos la película en el estado que hemos logrado hasta el momento, veremos que visualmente no se diferencia en nada del movimiento logrado en la parte 1 de este tutorial; esto es porque las extremidades derechas e izquierdas están asbolutamente sincronizados, quedando unos debajo de los otros.

Analizando el la forma de caminar de un oso, vemos que podemos sintetizar el movimiento haciendo que, mientras las extremidades de un lado se juntan, las del otro se separan, por lo que debemos invertir el la dirección de movimiento entre la pierna y el brazo derecho; y pierna y brazo izquierdo.

Para lograr esto invertiremos las pocisiones del brazo y mano derecha, y la pierna y pata del lado izquierdo (sólo de esos elementos), siguiendo el siguiente procedimiento:

  1. Capa a capa, copiamos los elementos dispuestos en los fotogramas centrales del movimiento,
  2. los pegamos en lugar de los componentes que están en el primer fotograma;
  3. Copiamos luego los símbolos del fotograma final de cada capa, 
  4. para pegarlos en el fotograma central de la animación de cada capa.
  5. Finalmente, copiamos los componentes presentes en el primer fotograma, y los pegamos en el fotograma final.

Usando el panel de propiedades, y seleccionando uno a uno los símbolos que forman las extremidades del lado izquierdo (pierna izquierda, pata izquierda, brazo izquierdo, mano izquierda), en cada uno de los fotogramas claves que están comprometidos en el movimiento (primer fotograma, fotograma clave central y último fotograma), asigno el siguiente efecto de color:

Aplicando efectos de color con el panel de propiedades de Animate

El resultado es el que se muestra en las siguientes capturas de pantalla:

Resultado visual de aplicar el efecto de color anterior

6. El resultado de la animación que tenemos hasta el momento es el siguiente:

 
Es posible descargar el archivo editable de la animación anterior haciendo clic en este enlace: OsoAnimado_02.fla

Como vemos, el movimiento del oso aún resulta bastante artificial debido a que las cuatro patas parecen "patinar" sobre el suelo, ya que existe un desplazamiento de éstas sin trasladarse en un movimiento del oso. La solución a este problema consiste en hacer avanzar el oso a través del escenario a la velocidad adecuada como para que, las patas que retroceden respecto al cuerpo del oso parezcan quedar apoyadas en el suelo, sin movimiento respecto a éste, ya que en un movimiento real son las que impulsan el movimiento del animal.

Para esto, volveremos a trabajar en la línea de tiempo principal, seleccionaremos la instancia de "Clip_Oso" y crearemos un nuevo clip de película llamado "Clip_Oso_Avance":

Creando un nuevo símbolo para hacer avanzar el oso en el escenario

7. Ahora debemos editar la línea de tiempo de nuevo símbolo que hemos creado y generarer el avance para que el oso parezca entrar desde el lado izquierdo de la escena, y desaparezca por el lado derecho, a través de la creación de una interpolación clásica entre ambas posiciones:

Creamos una interpolación de movimiento para hacer avanzar al oso a través del escenario

Este paso no se explica demasiado ya que es exactamente igual al que realizamos en el tutorial Animate: Anidando clips de películas (ii) para generar el movimiento del auto sobre el escenario.

8. Para lograr el efecto que se menciona en el paso 6, en nuestro caso, trasladamos la posición del oso entre los fotogramas 1 y 242, aunque estos valores dependerán de varios factores, fundamentalmente, de la cantidad de FPS de la animación, de la cantidad de pixeles que necesitemos desplazar al oso, y de la velocidad del movimiento de cada una de sus extremidades. La forma más precisa de sincronizar estos movimientos viene siempre de la mano de las animaciones mediante códigos de ActionScript, las que veremos en otro tutorial, que prepararemos para los cursos de Flash ActionScript.

La animación tiene ahora el siguiente aspecto:

 Descargar la versión editable de la animación anterior haciendo clic aquí.

9. Finalmente, la interpolación final se logra realizando pequeños cambios en las posiciones de los brazos y piernas que componen el uso durante su movimiento:

  1. El brazo, pierna, pata y mano del lado derecho del oso se suben levemente para crear la sensación de perspectiva.
  2. Se deplazan 10px hacia arriba ambos brazos y piernas (no patas ni manos, los que deben quedar "apoyados" en el piso) cada vez que éstas pasan por la posición vertical de su movimiento, para simular el movimiento de hombros y caderas del animal mientras camina

El resultado final de la animación, realizados éstos ajustes, es el siguiente:

Descargar la versión editable de la animación anterior haciendo clic aquí.

Ejercicios propuestos para clases:

  1. Duplicando el clip de película que permite todos los movimientos del oso, crear un nuevo movieclip que se mueva en sentido contrario a éste, en una nueva capa, y de manera asíncrona.
    Procedimiento:
    - Duplico la capa que actualmente ocupa el oso actual,
    - Giro la instancia de la nueva instancia creada con al cuplicar la capa.
    - Cambio el tamaño de la misma, dando menor tamaño al oso que pasará detrás del otro (capa inferior).
    - Genero con ésta instancia un nuevo símbolo, vía "Botón derecho -> Duplicar símbolo".
    - Edito su posición inicial y final para permitir que el oso entre y salga por ambos extremos de la escena, y sincronizo la duración del clip para que las patas de apoyo no "patinen" sobre el suelo (ver punto 6 de este tutorial).
  2. Generar las capas que sen necesarias para crear un "entorno de bosque" a ambos osos, haciendo que éstos pasen por detrás de unos árboles, y por delante de otros.
    Procedimiento:
    - Realizar una síntesis del suelo del bosque y colocarla debajo de ambos osos, en capas diferentes.
    - Sintetizar árboles y distribuirlos en distintas capas para que cumplan con el objetivo de este ejercicio (que los osos pasen por delante de unos y por detrás de otros).
    Nota: Es posible descargar árboles previamente sintetizados (algunos de ellos vectoriales y editables) en los siguientes enlaces:
    -- Variety of sketchy trees Free Vector, in Nature By freepik
    -- Tree and bird cartoon Free Vector, in NatureCartoon By freepik
    -- Painted Green Tree PNG Clipart Picture, en gallery.yopriceville.com

Espero los avances en clases, y las consultas por email.

En caso de dudas, comentarios o consultas, los invito a utilizar el formulario de contacto dispuesto al pie de este tutorial.

Saludos para todos!
Plácido Luna.

Visto 514 veces Modificado por última vez en Martes, 10 Mayo 2016 20:22