Viernes, 03 Junio 2016 00:15

Animaciones compuestas en Adobe Animate (ii)

Valora este artículo
(1 Voto)

Animaciones Compuestas en Animate (tutorai básico, parte 2)

Animate: 3 modos de animación anidando clips de película (ii)

Segunda parte del tutorial básico (ver primera parte haciendo click aquí) donde se muestran los modos de animar anidando clips de película usando animaciones fotograma a fotograma, una interpolación clásica y una animación de movimiento:

12. Editaremos ahora la línea de tiempo de ClipAveAvance2 (ver nuevamente, debajo de la pestaña con el título del documento, donde Animate nos indica que estamos editando la línea de tiempo "ClipAveAvance2" que está sobre la "Escena 1"):

Editando la línea de tiempo de ClipAveAvance2

13. Del mismo modo que hicimos en el paso 11.a, desplazaremos la instancia de ClipAve2 fuera del extremo izquierdo de nuestro escenario:

Creando una interpolación de movimiento en Animate CC

14. Haciendo clic con el botón secundario del mouse sobre el fotograma 1 de la línea de tiempo de ClipAveAvance2 elegiremos la opción "Crear interpolación de movimiento":

Botón derecho sobre el fotograma clave para definir una interpolación de movimiento

15. El estado de la línea de tiempo, mostrando la creación de la interpolación de movimiento es el siguiente:

La línea de tiempo mostrando una interpolación de movimiento

16. Arrastraremos el extremo derecho de los fotogramas marcados en celeste, para extender en 45 fotogramas la duración de la interpolación de movimiento (2.25 segundos de duración, con lo que evitaremos la sensación de animaciones sincronizadas de ambos símbolos):

Extendiendo la duración de la interpolación de movimiento

17. En el fotograma 45 desplazaremos el símbolo fuera del extremo derecho de nuestro escenario, con lo que el aspecto de nuestro trabajo es ahora el siguiente:

Cambiamos la posición del símbolo a animar en el último fotograma de la interpolación

La animación hasta el momento es el siguiente:

18. La línea celeste que vemos en la captura anterior corresponden a la trayectoria que seguirá el símbolo durante la animación, donde cada uno de los puntos corresponde a la posición que tomará el símbolo en de cada uno de sus fotogramas. Podemos editar esta trayectoria simplemente clicando y arrastrando la línea de la trayectoria; agregando dos fotogramas clave donde busquemos cambiar la dirección del movimiento, hemos creado la siguiente trayectoria:

Modificando la trayectoria de la interpolación de movimiento

19. Para crear un tiempo de espera para que las "aves" no reaparezcan a la izquierda del escenario un vez que desaparecen sobre el lado derecho, agregaremos fotogramas al final de sus líneas de tiempo donde dejaremos el símbolo en su posición final sobre el tiempo que determinemos:

a. Para ClipAveAvance2 crearemos una espera de 2 segundos antes de que la animación se repita (hemos agregado 40 fotogramas al final de la animación presionando F5 sobre el fotograma 85:

Creando una espera al final de la animación

b. Para ClipAveAvance1 crearemos una espera de 2.5 segundos, agregando 50 fotogramas al final del último fotograma clave, presionando F5 sobre el fotograma 95 de su línea de tiempo:

Agregando una espera a la interpolación clásica

El estado de la animación creada hasta ahora es el siguiente:

20. Para asignar una trayectoria no lineal en una interpolación clásica, debemos agregar una nueva capa, en la cual dibujaremos esta trayectoria, usando en este caso la herramienta Pluma (P):

Creando una trayectoria para una interpolación clásica en A. Animate

Nota: No importa el color de este trazo, ya que al convertir la capa "Guía" en una capa de guía el mismo no será visible.

21. Para convertir la capa en guía, haremos clic con el botón secundario del mouse sobre su nombre, y elegiremos la opción "Guía" del menú emergente:

Convirtiendo una capa en capa guía

22. El ícono de la capa "Guía" muestra ahora su condición de capa guía:

Capa convertida en Capa guía

23. Ajustamos ahora la "Capa 1" a la capa "Guía", para lo cual la arrastraremos levemente hacia la derecha y arriba, hasta que tome el siguiente aspecto:

Subordinando la interpolación de la capa 1 a la capa Guía

24. Al soltar el botón del mouse el aspecto de ambas capas es el siguiente:

Capa 1 vinculada a la capa Guía

a. En el fotograma 1, el símbolo se ha ajustado al trazado que hemos dibujado en la capa Guía:

Símbolo ajustado a la guía en el fotograma 1

b. Desde el último fotograma clave de la interpolación, moveremos la instancia del símbolo ahí presente, para que también se ajuste a la guía:

Ajustando la posición del símbolo a la guía en el siguiente fotograma clave

El resultado final de ambas interpolaciones, es el siguiente:

Ejercicio de clase:

  1. Siguiendo las mismas dinámicas aquí vistas, sustituir las siluetas usadas por fotografías del vuelo de un pájaro real.
  2. Agregar elementos que permitan dar una ambientación más realista a la animación propuesta, incluyendo nuevas animaciones.
  3. Crear una nueva ave cuyo "aleteo" sea creado a través de interpolaciones clásicas o de movimiento (se deberán crear un símbolo para cada ala, y eventualmente, otro para el cuerpo).

Como siempre, ante dudas o comentarios sobre esta entrada, pueden utilizar el formulario dispuesto al pie de esta entrada.

Saludos para todos!
Plácido Luna.

 

Visto 370 veces Modificado por última vez en Viernes, 03 Junio 2016 00:27