Jueves, 02 Junio 2016 22:22

Animaciones compuestas en Adobe Animate (i)

Valora este artículo
(1 Voto)

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

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

Este tutorial tiene por finalidad orientar al estudiante que se inicia en el uso de Adobe Animate para crear animaciones compuestas básicas usando las líneas de tiempo de clips de película anidadas, donde se crearán, a modo de ejemplo, dos animaciones fotograma a fotograma, una interpolación clásica y una animación de movimiento para mostrar dos ejemplos de uso de cada una de éstas formas de animar; debido al caracter introductorio de este tutorial, no nos centraremos en aspectos estéticos, más allá de los mínimos necesarios, ni se utilizarán acciones (sentencias) de AcionScript, para no distraernos de los objetivos finales planteados.

Comencemos entonces:

1. Creamos un nuevo documento en Adobe Animator, con dimensiones de 980x440px y 20fps.

2. Dibujamos, tres formas que representen las posiciones del aleteo de un ave; en nuestro caso, un calco de imagen realizado en Illustrator:

Dibujo de tres posiciones para el movimiento del ave

3. Seleccionando las tres formas crearemos un clip de película (F8 teniendo los trazados seleccionados), de nombre ClipAve1. Dentro de la línea de tiempo del ClipAve1 distribuiremos cada una de las tres formas en tres fotogramas de la misma capa de este clip.

En las siguientes capturas vemos el símbolo creado en la bilioteca del documento, así como posición en el escenario de cada una de las posturas, según cada fotograma clave:

  • Primer fotograma clave:

Creamos el primer clip de película

  • Segundo fotograma clave:

Posición de la segunda forma en el segundo fotograma clave

  • Tercer fotograma clave:

Posición en el tercer fotograma clave del ClipAve1

Nota: No hemos convertido las formas en símbolo gráfico ya que se ha previsto el uso de cada una de ellas únicamente en animaciones fotograma a fotograma en los cuales se pueden colocar tanto símbolos de cualquier tipo, como fotografías o formas.

La animación lograda hasta este punto es la siguiente:

4. Copiando y pegando la instancia que tenemos sobre el escenario del símbolo ClipAve1 y, haciendo clic con el botón secundario del mouse, duplicaremos este símbolo:

Duplicando un símbolo en Animate

5. Animate nos solicitará que asignemos nombre al nuevo símbolo que se creará mediante duplicación; asignaremos el nombre "ClipAve2":

Asignamos nombre al símbolo creado

6. En la bilioteca vemos el nuevo clip de película que hemos creado:

Vista de los símbolos creados en la biblioteca del documento en Animate

Nota importante: Si únicamente hubiésemos copiado y pegado la instancia del clip ClipAve1 lo que hubiésemos logrado serían dos instancias del mismo símbolo sobre el escenario, con lo que, en caso de editar el contenido de cualquiera de ellos, hubiésemos afectado a ambas instancias por ser ambas instancias del mismo símbolo; desde el momento que indicamos "Duplicar símbolo" y crear el nuevo clip podremos editar la línea de tiempo de las instancias que tenemos sobre el escenario de forma independiente por tratarse ahora de instancias de símbolos diferentes, que podemos diferenciar claramente en la ventana de la biblioteca, y en la paleta de "Propiedades" seleccionado una y otra instancia de ambos símbolos:

  • Seleccionando la primer instancia vemos el nombre del sìmbolo correspondiente (ClipAve1):

Los símbolos en la biblioteca de Animate

  • Nombre del símbolo (ClipAve2) al que corresponde la segunda instancia que tenemos en el escenario:

Nombre del símbolo de la segunda instancia sobre el escenario de Animate

 

7. Editaremos la línea de tiempo de ClipAve2 para cambiar la velocidad de la animación (aleteo) en este símbolo, lo que haremos agregando un fotograma más entre los tres primeros fotogramas claves, y dos más al final de su línea de tiempo:

Editando la velocidad de animación de ClipAve2

La animación lograda hasta el momento es la siguiente:

8. Crearemos una nueva capa, llamada "Fondo", donde colocaremos una foto de fondo creada a partir de la foto descargada desde este enlace; usando la opción Archivo -> Importar -> Importar a escenario...

Importando una imagen en Animate

Nota: Otras contribuciones del autor: https://commons.wikimedia.org/wiki/User:Mattinbgn

9. Bloqueando la capa Fondo (ver candado), el aspecto parcial de nuestro trabajo es el siguiente:

Aspecto del proyecto una vez importada la imagen en Animate

10. A partir de ClipAve1 y ClipAve2 crearemos dos nuevos clips de película, llamados ClipAveAvance1 y ClipAveAvance2 respectivamente, en los cuales, con distinta duración en sus líneas de tiempo, crearemos una interpolación clásica en uno, y una interpolación de movimiento en otro a fin de mostrar el modo de trabajo con una y otra, logrando crear con ambas la sensación de vuelo de "las aves" a través del escenario.

a. Creamos ClipAveAvance1 seleccionando la instancia de ClipAve1, y seleccionando Modificar -> Convertir en símbolo en el menú principal de Animate (F8 como atajo del teclado):

Creando un clip de película a partir de otro símbolo

b. Animate nos solicitará que asignemos un nombre al nuevo símbolo creado (lo llamaremos "ClipAveAvance1"):

Asignando nombre al símbolo creado

c. Repetiremos el procedimiento para crear el símbolo ClipAveAvance2 a partir de ClipAve2, con lo que, en la bilioteca tendremos los siguientes símbolos y objetos (incluyendo la imagen importada):

Objetos y símbolos en la biblioteca del documento en Animate CC

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

Visualmente coincide con lo que veríamos sin haber hecho las creaciones de los clips anteriores, esto es porque aún no hemos creado nuevas interpolaciones en sus líneas de tiempo, lo que haremos en la segunda parte de este tutorial.

Ante dudas o comentarios sobre esta primera parte puedes utilizar el formulario dispuesto al pie de esta entrada.

Saludos para todos!
Plácido Luna.

 

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