Taller de Flash: Animación II

El buen manejo y entendimiento de los fotogramas y la línea de tiempo es crucial para lograr los resultados esperados en los trabajos de Flash. En esta clase veremos los aspectos básicos de la animación, sus principales componentes, qué tipos de fotogramas hay y cómo alcanzar los resultados deseados con el mínimo esfuerzo.

En sí, Flash nos proporciona todas las herramientas para que podamos realizar una animación buena en poco tiempo. ¡Aprovechémoslas!

Fotogramas

Si este tema no es el más importante del taller, se le acerca mucho. Dado que Flash es un programa de animación y los fotogramas son lo que hacen posible esa animación, diré que al menos son un engranaje fundamental en el funcionamiento de esta máquina.

Se le dice fotograma a cada una de las imágenes impresas en una tira de película. En este caso lo veremos un poco diferente, pero en esencia es lo mismo.

Ahora, centrémonos en nuestra línea de tiempo. Ese es el escenario donde vamos a tratar con los fotogramas.
En Flash hay 2 tipos básicos de fotogramas: claves y comunes. En la línea de tiempo, los fotogramas clave poseen un punto, como se puede ver en el ejemplo de la primer imagen.

Funcionamiento de los fotogramas

En los fotogramas clave vamos a insertar “lo importante”. ¿Cómo es eso? Flash realiza la animación automáticamente. Imagina una pelota que cae del cielo. En Flash no necesitamos crear todos los fotogramas de la escena. Únicamente creamos los fotogramas clave: cuando la pelota está arriba y cuando está abajo. Son sólo dos fotogramas. El resto de los fotogramas los genera Flash.

Si haces clic en el siguiente archivo SWF podrás ver tres círculos animados de forma diferente. Como se puede ver, la animación tiene dos puntos importantes: el inicio y el final. Cada círculo fue insertado en una capa diferente, pero los fotogramas clave están en la misma posición.

En total se utilizaron 10 fotogramas, pero sólo tuvimos que especificar 2 por círculo. De esta manera Flash nos ahorra los pasos intermedios.

En la imagen se pueden ver los fotogramas en la línea de tiempo. Los fotogramas clave (marcados con un punto) están en el fotograma 1 y el 10.

Antes de realizar la animación, los símbolos o elementos con los que trabajamos deberán ser convertidos en “gráficos”. (Este concepto lo veremos en clases posteriores). Esto se hace rápidamente seleccionando el símbolo y, a través del comando F8, seleccionado la opción “Gráfico”.

Los fotogramas se ven de color violeta y con una flecha hacia la derecha porque están animados. Como indica la imagen, la animación comienza en el fotograma 1 y termina en el 10, que no posee animación.

Para animar una serie de fotogramas, sólo debes hacer clic con el botón derecho del mouse sobre la parte que desees animar y seleccionar la opción “Crear interpolación de movimiento“. Recuerda que para animar algo tiene que haber una diferencia entre el primer fotograma clave y el último de esa animación. Puedes variar el color del “gráfico”, su tamaño, transparencia, etc. Todo eso se realiza seleccionando el gráfico cuando estés en el fotograma clave y variando sus características desde el Cuadro de Propiedades.

También pueden haber fotogramas vacíos. Dado que todo funciona en una misma línea temporal, puede pasar que en un capa la animación comience mucho más tarde que en otra. ¿Qué sucede mientras tanto? Nada. La capa en esos fotogramas queda vacía.

En la imagen se ve que la animación de la capa “Círculo 3″ comienza recién en el fotograma 5. Antes de eso, la capa permanece blanca, vacía.

Una regla general es que el fotograma 1 de cualquier capa inicialmente aparece como un fotograma clave. El primer fotograma es el inicio de la animación… Si este fotograma no se utiliza, queda blanco pero permanece como fotograma clave, a menos que se elimine.

La animación

Para insertar un fotograma clave, debes hacer lo siguiente:

1. Posicionarte en el fotograma deseado
2. Presionar F6
   Con el botón izquierdo del mouse verás un menú que también te permite insertar fotogramas.

Los fotogramas comunes se generan solos entre dos fotogramas clave.

¿Qué pasa si quiero que un objeto inanimado (un círculo estático, por ejemplo) permanezca en la película durante varios fotogramas?

1. Inserta el objeto en una capa nueva
   Llamaremos a esta capa “Círculo inanimado”.

Si creamos la nueva capa y dibujamos o pegamos directamente un círculo, este aparecerá en el primer fotograma. Si queremos que el círculo se aparezca recién en el fotograma 5, deberemos:

1. Crear un fotograma clave en el fotograma 5 (como se ve en la imagen)
2. Crear o pegar el símbolo.

Todo elemento nuevo se inserta en un fotograma clave.

Ahora bien, no tengo ningún interés en animar el círculo. Quiero que del fotograma 5 al 8 se vea igual. Por lo tanto, no necesito convertirlo a “Gráfico”, ni animarlo. Sólo quiero que Flash entienda que el fotograma 5 se repite igual hasta el 8. Para esto sólo debo “prolongar” el fotograma 5, agregando fotogramas comunes a partir del fotograma 6. Para hacerlo:

1. Selecciona el fotograma 8
2. Presiona F5.

Verás que se agregarán los fotogramas que deseabas. Otra forma es seleccionar el fotograma clave 5 y presionar F5 desde ahí. Verás que cada vez que presiones F5 se agregará un solo fotograma después del que has seleccionado.

Esto funciona únicamente cuando no se haya ocupado ningún fotograma posterior al 8 en ninguna capa.

Toda película tiene un fotograma inicial y uno final. Cuando nosotros insertamos un fotograma clave y dibujamos o pegamos allí un símbolo, Flash interpreta que ese símbolo va a aparecer hasta el final de nuestra película. Esto es porque al crear la capa, esta se crea desde el fotograma 1 al último fotograma que tengamos ocupado (incluyendo todas las capas de la misma escena).

Por eso, puede pasar que al pegar o crear un símbolo, este aparezca en todos los fotogramas siguientes al fotograma inicial y tengamos que borrar aquellos fotogramas donde no queremos que figure. Exactamente esto fue lo que he tenido que hacer en el caso de la última imagen, pues al crear mi símbolo los fotogramas se habían creado automáticamente hasta el fotograma 10. Para eliminar los fotogramas, sólo debes seleccionar los que deseas borrar y presionar Shift+F5.

En el caso de intermitencia, tal como se ve en la imagen, es necesario crear un fotograma clave cada vez que modifiques la visualización. Las flechas rojas muestran la ubicación de cada fotograma clave. Esto funciona tanto para objetos inanimados como para gráficos animados.

En este caso el círculo se verá recién a partir del fotograma 5, en tres intervalos. Hay varias formas posibles de realizar cada acción, un ejemplo para esta película sería el siguiente:

1. Creo el fotograma clave 5
2. Pego el símbolo
3. Creo el fotograma clave 7
4. Borro el símbolo
5. Creo el fotograma clave 10
6. Pego el símbolo

Los pasos se repiten.

Otra forma de hacerlo es:

1. Creo el fotograma clave 5
2. Pego el símbolo
3. Creo los siguientes fotogramas clave
4. Borro el contenido de los fotogramas clave que quiero dejar vacíos

Haz clic en el archivo para ver un ejemplo de las intermitencias en la animación.

Fotogramas Por Segundo (FPS)

Los Fotogramas Por Segundo o FPS es una medida de tiempo que, como su nombre lo indica, se refiere a la cantidad de fotogramas que la animación tiene por segundo.

Para comprender mejor este concepto puedes comparar las siguientes animaciones:

4 Fotogramas Por Segundo

12 Fotogramas Por Segundo

36 Fotogramas Por Segundo

Ahora puedes crear tus propias animaciones. Comienza desde lo más simple, con símbolos básicos (círculos, cuadrados) haciendo pequeñas variaciones (color, tamaño). Luego puedes experimentar con otros elementos. Realiza animaciones con varias capas y varios objetos sincronizados. No importa si te equivocas, siempre puedes volver a empezar. Y cualquier duda que tengas, puedes preguntarme a través de los comentarios. Ya verás que Flash no es tan difícil como parece…