Domingo, 29 Mayo 2016 17:16

Animaciones cuadro a cuadro usando Animate CC2015

Valora este artículo
(1 Voto)

Animaciones cuadro a cuadro en Animate - Cabezal

Creando una animación cuadro a cuadro usando Animate CC2015

En este tutorial veremos una forma de generar una animación fotograma a fotograma (y una máscara de capa) utilizando la aplicación Animate CC2015 de Adobe, para el cual usaremos la misma imagen que utilizamos para el tutorial GIF Animado desde la línea de tiempo de PhotoShop CC2015 (descargarla para poder trabajar con el tutorial):

Imagen de partida

Vamos adelante con el proceso (casi...) paso a paso:

1. Abrimos Animate CC2015 y creamos un documento de 240x175px a 15 fps, dimensiones que coinciden con el tamaño de los cuadros (fotogramas) de nuestra imagen que usaremos como ejemplo, y una velocidad de 15 fotogramas por segundo para dar a la animación final el efecto de "película vintage", adecuada para la temática y cantidad total de fotogramas disponibles en la imagen:

Nuevo documento en Animate CC2015

2. Si no están visibles, mostramos las reglas de Animate a través de la opción Ver -> Reglas (Cmd+Alt+R desde Mac, ó Ctrl+Alt+R desde PC):

Mostrando las reglas en Animate

3. Desde las reglas sacaremos dos guías verticales y dos guías horizontales, las que usaremos luego para posicionar los fotogramas de la imagen que importaremos en el próximo paso. El espacio de trabajo toma un aspecto similar al de la siguiente captura:

Animate mostrando las guías

4. Desde Archivo -> Importar -> Importar a escenario (Cmd+R ó Ctrl+R según estemos en Mac ó PC) importaremos la imagen que usaremos de ejemplo:

Importando la imagen de ejemplo

5. El resultado hasta el momento es el siguiente:

La imagen ha sido importada en Animate

6. Renombramos la única capa de nuestra línea de tiempo, con el nombre Foto (es sano acostumbrarse a mantener las capas correctamente identificadas) e iremos creando, uno a uno, los 16 fotogramas clave necesarios para posicionar cada uno de los fotogramas de la foto de ejemplo, haciendo los ajustes necesarios en el escenario:

Creando y moviendo la imagen adecuadamente

Creando y moviendo la imagen adecuadamente (2)

Creando y moviendo la imagen adecuadamente (3)

7. Guardando la animación como cuadroACuadro01.fla, al generar el documento cuadroACuadro01.swf tenemos como resultado la siguiente animación:

Las imperfecciones logradas y la cantidad de cuadros por segundos dan al trabajo el acabado adecuado teniendo en cuenta la imagen de partida.

Observaciones importantes:

a. Por tratarse de un ejemplo básico de animación hemos trabajado sobre la línea de tiempo principal, pero como siempre recomendamos en clases, esto no es lo más aconsejable, sino que es más adecuado trabajar sobre la línea de tiempo propia de un clip de película que podríamos haber creado al momento de importar la foto a través de la opción Modificar -> Convertir en Símbolo (F8) del menú principal de Animate.

b. Si, por ejemplo, agrandásemos el tamaño del lienzo (para el ejemplo 20px más por lado), tendríamos el siguiente resultado:

Obtener Adobe Flash Player

c. Para eliminar este problema debemos crear una nueva capa que convertiremos en Máscara, y en la cual crearemos una forma con dimensiones de 240x175px (tamaño original de nuestro lienzo).

El procedimiento sería el siguiente:

c1. Creamos la nueva capa, la renombramos con el nombre "Máscara" y dibujamos en ella un rectángulo (de cualquier color) de 240x175px en las coordenadas (0,0).

Agregamos capa y forma para máscara

c2. Haciendo click con el botón secundario del mouse convertimos la nueva capa en una capa de máscara:

Convierto la capa en máscara

c3. Visualmente la interfaz de Animate queda de la siguiente forma:

Resultado de aplicar la máscara

b4. El resultado final de la animación, mostrando ya el fondo del lienzo y no los excedentes de los demás fotogramas de la foto original, es el siguiente:

Obtener Adobe Flash Player

Es posible descargar los documentos editables de los tres estados principales visto en este ejemplo haciendo click en los siguientes enlaces:

  1. cuadroACuadro01.fla
  2. cuadroACuadro02.fla
  3. cuadroACuadro03.fla

Como siempre, puden plantear sus dudas y comentarios en el formulario que encontrarán más abajo.

Saludos para todos!
Plácido Luna.

 

Visto 442 veces Modificado por última vez en Domingo, 29 Mayo 2016 18:10