Jueves, 05 Mayo 2016 19:23

Animate: Anidando clips de películas (ii)

Valora este artículo
(1 Voto)

Cabezal anidando clips de película (ii)

Anidando MovieClips en Animate + Animaciones básicas (ii)

Como vimos en la primera parte de este tutorial, llegamos a anidar dos instancias de un símbolo de clip de película junto a otros símbolos gráficos dentro de un nuevo movieclip que creamos con el fin de desplazarlo sobre el escenario, sin usar la línea de tiempo principal.

El hecho de animar dentro de múltiples clips de películas en lugar de utilizar la línea de tiempo facilita los procesos de edición, y posibles modificaciones posteriores, de gran manera; el uso de múltiples elementos en una sola línea de tiempo imposibilita, además, poder establecer animaciones asincrónicas de elementos diferentes, generando animaciones repetitivas y monótonas.

Vamos con el desarrollo de esta segunda parte:

1. Seleccionaremos el símbolo "clip_vehiculo_completo" creado en la primera parte del tutorial, y lo convertiremos en un nuevo clip de película:

Generando un nuevo clip de película

Podemos lograr esto de dos maneras:

  • Manteniendo seleccionado el objeto pulsamos la tecla F8;
  • Hacemos clic derecho sobre el objeto seleccionado y seleccionamos la opciòn "Convertir en símbolo..."

2. Dibujo cada uno de los elementos necesarios para representar nuestro vehículo:

Valores asignados al nuevo clip de película

Hemos asignado el nombre "clip_vehiculo_completo_avance" para este nuevo Clip de película, ya que en su línea de tiempo generaremos una interpolación que permita hacer avanzar el símbolo que lo contiene: "clip_vehiculo_completo".

Para lograr esto tenemos dos opciones:

2.1. Mediante una interpolación tradicional:

Interpolación tradicional en la línea de tiempo de Adobe Animate

Para lo cual debemos acceder a la línea de tiempo de "clip_vehiculo_completo_avance", haciendo doble clic sobre la instancia que tenemos sobre el escenario; luego de lo cual:

  • En el primer fotograma colocamos la instancia de "clip_vehiculo_completo" fuera de la escena, a la izquierda de la misma;
  • Seleccionamos el último fotograma de la animación (130 en nuestro caso), con lo cual estaremos definiendo la velocidad de la misma, y pulsamos F6 (crear fotograma clave en esa posiciòn de la línea de tiempo;
  • Inmediatamente, arrastrando con el mouse, mientras mantenemos pulsada la tecla "Shift", posicionamos la nueva instancia creada de "clip_vehiculo_completo" en el fotograma 130, fuera de la escena, esta vez a la derecha del todo (el uso de la tecla shift permite mover el vehículo con una dirección perfectamente horizontal):

Movemos el vehículo hacia la derecha de la escena

  • Haciendo clic con el botón derecho del mouse sobre cualquiera de los fotogramas situados entre el 1 y el 130, seleccionamos la opción "Interpolación clásica", con esto ya veremos animado nuestro vehículo, tanto en el giro que ya teníamos en sus ruidas, como en su movimiento a través de la escena, lo que hemos logrado en el paso anterior (puede que sea necesario ajustar mínimamente la posición inicial y final del vehículo si es que no quedamos conformes con ellas).
  • En caso de que sea necesario, podemos ajustar la velocidad de giro de las ruedas del vehículo; en nuestro caso hemos realizado los siguientes cambios:

Ajustamos velocidad de rotación de las ruedas

En la figura vemos la acción colocada pasos atrás en el fotograma final de la línea de tiempo encargada en generar el giro de la rueda;
sobre este tema hablaremos en clases; como adelanto, la función de ese código es retornar la posición de la cabeza lectora
hacia el fotograma 7 de la línea de tiempo actual, posición elegida para dar la ilusión de giro permanente,
sin que se noten saltos en el giro de la rueda cada vez que se complete una vuelta.

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

Obtener Adobe Flash Player

Es posible descargar los archivos correspondientes a la animación anterior en los siguientes enlaces:

2.2. La segunda forma de animar el avance del vehículo es a través de una interpolación de movimiento:

Interpolación de movimiento en Adobe Animate CC

Este tipo de animación, aunque ya lleva tiempo en Flash, y fue heredada por Animate, es el tipo de interpolación más reciente incorporada en estos programas, y permite animaciones más intuitivas de manejar, aunque no necesariamente mejor que las interpolaciones clásicas; todos los tipos de interpolaciones tienen propósitos diferentes y hay que saber elegir la más conveniente en cada caso; para eso, como vimos en clases, tenemos:

  • Animaciones fotograma a fotograma.
  • Interpolaciones de forma.
  • Interpolaciones clásicas.
  • Interpolaciones de movimiento.
  • Animaciones generadas a través de ActionScript 3.

2.2.1. Creada la interpolación de movimiento podemos extender su duración (simplemente arrastrando el último fotograma con el mouse):

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

2.2.2. En la captura anterior vemos la instancia del vehículo correspondiente al fotograma 1; manteniendo la cabeza lectora en el fotograma final de la animación de movimiento (en rojo en la imagen anterior), podremos desplazar el símbolo, generándose un nuevo fotograma clave en el fotograma activo, quedando la línea de tiempo y la escena con el siguiente aspecto:

Captura de Animate luego de mover el símbolo en la interpolación de movimiento

La línea turquesa indica la trayectoria que seguirá el símbolo a través de la animación;
cambiando la posición de la cabeza lectura es posible variar la posición del símbolo en distintos momentos del tiempo
permitiendo que el trayecto pueda cambiar de dirección entre uno y otro de los puntos de referencia mostrados arriba.
(No lo hemos hecho en este ejemplo).

 

El aspecto de la animación llegado este punto es el siguiente:

Se pueden descargar los archivos correspondientes a esta última parte del tutorial haciendo clic en los siguientes enlaces:

Ejercicio requerido para clases:

  • Mantener el vehículo estático en el centro de la pantalla, agregando un nuevo símbolo (clip de película) que represente la calle con movimiento de derecha a izquierda, de modo que parezca que mantenemos la cámara fija en el vehículo, con lo que se generaría ese movimiento aparente en el suelo.
  • Lo mismo, pero animado a una velocidad algo más lenta, mostrando una acera y árboles moviéndose en la misma dirección (derecha a izquierda).
  • Idem para edificios que se muevan a velocidad algo más lenta aún, y finalmente,
  • Nubes (mínimo 3) que se desplacen de derecha a izquierda, a velocidades aún menores, y diferentes entre sí (tanto en velocidad como en diseño).

Espero que el tutorial les haya servido de ayuda.

Saludos para todos!
Plácido Luna.

 

Visto 661 veces Modificado por última vez en Jueves, 05 Mayo 2016 20:16