A lo largo de este tema iremos introduciendo los fundamentos de la animación, a la vez que conoceremos los términos que se usan de forma más común y nos familiarizaremos con los componentes básicos de Flash relacionados con la animación.
El procedimiento que usa Flash para la creación de las animaciones esta basado en las películas de cine, de echo muchos de los términos y elementos empleados son los mismos: Película, escena, secuencia, claqueta, etc. Y una película de cine no es otra cosa que una sucesión de fotogramas cada uno de los cuales difiere ligeramente del anterior. Así pues, y sin más comentarios vamos a entrar de lleno en materia y abordar plenamente la forma y metodología de trabajo de Flash.
El alumno aprenderá lo que es una película de animación en Flash y cuales son los componentes básicos para la gestión de una animación como son las líneas de tiempo y los fotogramas.
El alumno aprenderá a adaptar la velocidad de la animación en función de los fotogramas
El alumno aprenderá los diferentes tipos de fotogramas existentes.
El alumno aprenderá los tipos de animación en función de los fotogramas utilizados
El alumno aprenderá a trabajar con fotogramas mediante la creación, selección y edición de fotogramas.
La animación está constituida por una colección de imágenes fijas o fotogramas que se suceden a una velocidad tal que en su conjunto parecen conformar un movimiento.
Realmente, estas imágenes fijas, proyectadas una a continuación de la otra en una misma pantalla forman una secuencia animada o en movimiento. Esto es debido a que nuestro cerebro no es capaz de discernir el parpadeo existente entre la proyección de una imagen y su sucesiva. Por ejemplo, cuando vemos una película o la TV, la pantalla esta parpadeando a gran velocidad, pero no somos capaces de apreciarlo.
Así pues, como resumen diremos que la animación no es otra cosa más que un mecanismo para engañar a nuestro cerebro y conseguir la sensación de movimiento con una sucesión de imágenes estáticas y que esto es en gran parte posible gracias a la Persistencia de la visión humana. Una imagen proyectada en la retina, permanece unos instantes, incluso después de que la luz se desvanezca.
La Línea de tiempo, de la cual ya comentamos algo en el capítulo dedicado al entorno de trabajo, es la encargada de organizar y controlar el contenido de una película a través del tiempo, en capas y fotogramas. Los componentes principales de la Línea de tiempo son las capas, los fotogramas y la cabeza lectora.
Las capas de una película aparecen en una columna situada a la izquierda de la Línea de tiempo. Los fotogramas contenidos en capa cada aparecen en una fila a la derecha del nombre de la capa. El encabezado de la Línea de tiempo situado en la parte superior de la Línea de tiempo indica los números de fotogramas. La cabeza lectora indica el fotograma actual que se muestra en el Escenario.
La información de estado de la Línea de tiempo situada en la parte inferior de la Línea de tiempo indica el número de fotograma actual, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual. En la Fig.6.1 podemos apreciar con mayor claridad estos detalles.
 |
En Flash los fotogramas son las pequeñas celdas rectangulares que aparecen en la línea de tiempo (Timeline) numeradas en su parte superior. Aunque en la línea de tiempo se muestran todos los fotogramas que conforman la animación, nosotros sólo podemos ver un fotograma a la vez.
La Cabeza Lectora, de color rojo, apuntará al fotograma cuyo contenido esta presente en la pantalla en un momento dado y sólo podrá estar en un lugar a la vez. Cuando la animación vaya avanzando en su construcción o este terminada, arrastrando la cabeza lectora a lo largo de la línea de tiempo podremos ver una previsualización de la misma.
Simplemente pinchando sobre un fotograma en la línea de tiempo conseguiremos que la cabeza lectora se desplace hasta el lugar seleccionado, donde además de poder visualizar el fotograma, también podremos editarlo y realizar las modificaciones que consideremos pertinente.
Sólo tendremos que fijarnos en que el fotograma a editar puede estar formado por diferentes capas con diversos objetos, y que el conjunto de todos ellos va ha ser el que lo va a constituir.
Debemos tener en cuenta que la velocidad de reproducción de los fotogramas será la misma durante toda la película y quedará bloqueada al valor prefijado cuando el usuario este reproduciendo la animación. [Control > Reproducir] ó Intro.
Fácilmente se confunde la velocidad de fotogramas con la rapidez, cuando esta última es un efecto visual. Por ejemplo, si empleamos dos fotogramas para conseguir el efecto de que un coche cruce la pantalla, este parecerá que lo hace muy rápido y sin embargo podemos conseguir este efecto empleando una velocidad de fotogramas muy baja. Con tan sólo 4 fps, necesitaremos invertir ¼ de segundo para reproducir cada uno de los dos fotogramas. ¿Curioso verdad? Pues piense en ello, esto simplemente es un sencillo truco de animación.
Por poner otro ejemplo al respecto, donde nos encontraremos con dos animaciones igualmente rápidas pero con parámetros diferentes. Suponga una animación formada por 10 fotogramas reproducida a 10 fps y la misma animación con mayor numero de fotogramas intermedios: 20 fotogramas reproducida a 20 fps. Ambas parecerán tener la misma velocidad, pues ambas tardan 1 seg. en reproducirse y la única diferencia será que en la segunda animación el movimiento parecerá estar mejor definido (más suave) ya que dispone del doble de fotogramas respecto a la primera.
Así pues, analizados los ejemplos anteriores, cuando ajustemos la velocidad de reproducción de la película Flash deberemos pensar en la capacidad que tenga el equipo del usuario para reproducirla y emplear trucos de animación si nuestro deseo es disminuirla. En la Fig.6.2 apreciamos la ventana de selección de velocidad.
 |
En el apartado Velocidad de fotograma, lo que realmente estamos especificando es la velocidad de fotograma Máxima a la que se reproducirá la película. El que se alcance o no dependerá del equipo en donde se reproduzca, por tanto debemos tener en cuenta que si el usuario final no puede reproducir la película a la velocidad especificada, quizá esta se vea con demasiados saltos bruscos entre los fotogramas.
Cuando diseñemos una animación especificaremos la velocidad de fotogramas y trataremos de ceñirnos a la misma, puesto que si modificamos la velocidad de los fotogramas, estamos modificando la película completa. Esto significa que si queremos hacer una animación más rápida, puede que la mejor manera no sea incrementar la velocidad (fps) sino buscar algún truco o método de animación alternativo.
Velocidad Efectiva
Representa lo rápido que parece moverse un elemento, en comparación con la velocidad real, la cual es medible, y por tanto, viene a determinar la impresión subjetiva de la animación. Se pueden utilizar ilusiones para incrementar o disminuir la velocidad efectiva de la animación. Por ejemplo, 12 fotogramas a una velocidad de 12 fps tardarán 1 seg. en reproducirse, lo cual determina su velocidad real, pero si hay muchos cambios, es decir acción la velocidad efectiva será alta.
Velocidad Predeterminada
La velocidad predeterminada por Flash en las animaciones es de 12 fps y afecta a la frecuencia con que el gráfico cambia en pantalla, es decir, la duración de las pausas entre un fotograma y otro. Generalmente, con esta velocidad por defecto se pueden conseguir increíbles animaciones y es bastante factible de reproducir en la mayoría de los equipos actuales. Aún así, las herramientas están para utilizarlas y modificarlas, eso sí, con conocimiento de causa, por ello a continuación voy a mencionar unos pequeños detalles a tener en cuenta en nuestras animaciones:
- Cuantos más fotogramas conformen la animación, mayor será el tamaño del archivo final.
- Si subimos mucho la velocidad (fps) puede ralentizarse la reproducción de la animación, en función del equipo en donde se reproduzca.
- Podemos engañar al usuario, mediante técnicas creativas de animación. No sólo hay que explotar la persistencia de la visión y la velocidad de fotograma.
Como ya se ha comentado, Flash simula el movimiento reproduciendo de forma lineal una serie de fotogramas puestos uno a continuación del otro. Pero en el momento de iniciar la aplicación, sólo disponemos de un fotograma: el número 1, ya preparado y en disposición de albergar la información.
También podremos observar, que tras dibujar cualquier cosa en el escenario, este primer fotograma aparece marcado por un punto negro en su centro. Así pues, acabamos de crear nuestro primer fotograma clave, que definiremos a continuación.
Los fotogramas clave, identificados mediante un punto o círculo negro en su interior como ya se ha comentado, son los que establecen claramente y con exactitud aquello que debe aparecer en la pantalla en un momento dado. También son los que irán marcando los cambios que se irán produciendo a lo largo de la animación.
 |
La animación tradicional de fotograma a fotograma, se crea mediante una sucesión de fotogramas clave, puesto que en cada uno se introducirá una variación respecto al anterior. Así pues, podríamos decir que un fotograma clave es aquel que nos va a determinar un cambio o en otras palabras, nos van a marcar las pautas de la animación.
Sería como decir: - No hagas nada con los elementos del escenario hasta que llegues al siguiente fotograma clave.
Son fotogramas clave, pero todavía no contienen nada en su interior y vienen representados por un fotograma en blanco con una línea vertical negra a su izquierda.
Por defecto, cuando iniciamos una nueva película, esta aparece con una sola capa y un primer fotograma clave vacío, dispuesto a incluir objetos. En el momento dibujemos algo la convertimos en un fotograma clave.
 |
Fotograma Vacío
No contiene nada pero es considerado por el programa como un fotograma, vienen representados por fotogramas en blanco sin ninguna línea que los delimite.
Generalmente, cuando añadimos una capa nueva, nos aparecerán en ella tantos fotogramas en blanco, como duración tenga la animación. Podemos ver un detalle de esto en la Fig.6.3.
Son los fotogramas que aparecen entre dos fotogramas clave, por ejemplo, en las interpolaciones que analizaremos mas adelante. Aunque en este caso es el propio programa el que calcula los fotogramas intermedios.
 |
Contienen elementos en su interior, pero no se consideran clave. Otro ejemplo de los mismos, son aquellos fotogramas que aparecen después de un fotograma clave y que mantienen el contenido del mismo hasta el siguiente fotograma clave, por que nos interesa que ese contenido se repita durante una serie de fotogramas o durante toda la película.
 |
Aunque esto sea un poco adelantarnos a lo que se verá en capítulos posteriores con mayor detenimiento, he considerado conveniente incluir una serie de comentarios que nos van a permitir comprender un poco mejor al aspecto de los diferentes fotogramas en función del tipo de animación en que se presenten.
Flash ofrece dos maneras de crear secuencias de animación: fotograma a fotograma y por interpolación. En la animación fotograma a fotograma la imagen se crea en cada fotograma, siendo por tanto cada uno de ellos un fotograma clave de la animación. En la animación por interpolación, se crean los fotogramas clave inicial y final, y Flash crea los fotogramas intermedios, variando el tamaño, la rotación, el color y otros atributos del objeto de forma distribuida entre los fotogramas inicial y final para crear la sensación de movimiento.
La animación interpolada es una forma eficaz de crear movimiento y cambios a lo largo del tiempo y de reducir al mínimo el tamaño del archivo. En esta animación, Flash sólo guarda los valores de los cambios producidos en los fotogramas de en medio. Mientras que en la animación fotograma a fotograma, Flash guarda los valores de los fotogramas completos incrementando considerablemente el tamaño del archivo.
A continuación mostraremos las diferentes representaciones de los fotogramas sobre la línea de tiempo en función de la animación o de otros elementos añadidos como acciones o comentarios.
- Los fotogramas clave de interpolación de
movimiento están indicados por un punto negro; los fotogramas
intermedios tienen una flecha negra sobre fondo azul claro.
- Los fotogramas clave de la interpolación de forma están
indicados por un punto negro; los fotogramas intermedios muestran una
flecha negra sobre fondo verde claro.
- Una línea discontinua indica que falta el fotograma clave final.
- Un fotograma clave sencillo viene indicado por un punto negro.
Los fotogramas en gris claro después de un fotograma clave sencillo
tienen el mismo contenido sin ningún cambio y tienen una línea negra
con un rectángulo vacío en el último fotograma del recorrido.
- Una a pequeña indica que al fotograma se le asignó una acción de fotograma con el panel Acciones.
- Una bandera roja indica que el fotograma contiene un rótulo o comentario.
- Seleccionamos el lugar de la línea de tiempo donde deseemos crearlo y bien con el menú contextual o con el principal elegimos la opción [Insertar > Fotograma Clave]. De igual modo podemos pulsar el acceso rápido F6.
- Al crearlo, este aparece con el contenido del fotograma clave anterior, es decir, con los mismos objetos que lo conformaban. Si estaba vacío estará vacío, si tenía una esfera la tendrá, etc.
- Flash rellenará el contenido entre ambos fotogramas clave, es decir, los fotogramas intermedios, con una repetición de los elementos del escenario correspondientes al primer fotograma clave. A excepción de las interpolaciones.
- Si, por ejemplo, creamos un fotograma clave en la posición 10 y luego dibujamos un cuadrado en el fotograma clave de la posición 1, tendremos como resultado un cuadrado que se repite durante los 9 primeros fotogramas. Podemos apreciarlo en la siguiente figura.
 |
 |
Fig.6.8 El contenido del fotograma clave 1 se repite hasta el fotograma 14. En la posición 15 se insertó fotograma clave vacío. |
|
Fig.6.9 Añadimos un fotograma intermedio entre cada uno de los fotogramas clave. |
|
Fig.6.10 Resultado de insertar un fotograma clave vacío en la posición 6. Entre los fotogramas 6 y 9 inclusive no tenemos nada. Fotogramas Clave
Fig.6.11 Interpolaciones de Forma (Capa 2) y movimiento (Capa 1) en las que se han insertado sendos fotogramas clave dando como resultado dos interpolaciones consecutivas. |
Seleccionar Fotogramas
- Fotogramas Clave (Simple).
- Hacemos “clic” sobre el fotograma a seleccionar.
- Fotogramas Clave (Múltiple).
- Pulsamos Mayús + ALT y vamos haciendo “clic” sobre los fotogramas que queremos seleccionar.
- Fotograma Normal (Simple).
- Pulsamos Ctrl. + “clic” sobre el fotograma.
- Fotograma Normal (Múltiple).
- Seleccionamos varios fotogramas consecutivos, para ello seleccionamos el Primero de la serie Ctrl + “clic” y luego el Último Ctrl + Mayús + “clic”.
- Seleccionamos el Primero Ctrl + “clic” y sin soltar ctrl. arrastramos con el ratón.
- Todos los Fotogramas de una animación.
- Con el cursor en algún fotograma Intermedio, cuando se convierta en Mano hacemos “clic”.
- Mismo Fotograma en varias capas.
- Pulsamos Ctrl + “clic” para seleccionar el primero y sin soltar Ctrl arrastramos o hacia arriba o hacia abajo.
- Todos los Fotogramas de todas las capas.
- Pulsando el botón derecho del ratón sobre la línea de tiempo, seleccionamos la opción Seleccionar todo.
En el menú Edición, o bien, con el menú Contextual (botón derecho ratón) disponemos de las opciones Cortar, Copiar y Pegar. Estas son similares en cuanto a uso al resto de elementos Windows y por tanto podremos utilizarlas con los fotogramas previamente seleccionados o con cualquier objeto que situemos sobre el escenario.
También se puede emplear el Portapapeles, como veremos en el siguiente tema para importar Gráficos vectoriales o Bitmaps de otras aplicaciones al escenario, aunque no es una práctica muy recomendable.
Consideraciones
- Si sobre un fotograma existente pegamos uno clave, este último sustituye el contenido del anterior. Esto significa que a partir de este punto mandará el nuevo fotograma clave en los sucesivos pasos de la animación.
- Si pegamos varios fotogramas consecutivos sobre uno existente, este quedará sustituido por el primer fotograma pegado y el resto quedará intercalado.
Para eliminar uno o varios fotogramas primero deberemos seleccionarlos y después elegir la opción Eliminar que aparece en el menú contextual. Con esta opción eliminamos todo el contenido del fotograma implicado.
No podemos eliminar el Primer Fotograma Clave de una capa sin previamente eliminar los que aparecen a su derecha.
Podemos convertir un fotograma Clave en Normal, seleccionándolo y eligiendo la opción Borrar fotograma clave del menú contextual. La conversión del fotograma clave en intermedio (normal) implica la desaparición del contenido que tuviera, pasando este a ser el correspondiente a su inmediato fotograma clave de la izquierda.
- Seleccionamos los fotogramas a mover.
- Situamos el ratón sobre ellos hasta que se convierta en Mano.
- Arrastramos con el ratón hasta el lugar de destino.
- Podemos alargar una animación o retrasar su comienzo, simplemente, arrastrando los fotogramas clave inicial y final respectivamente a lo largo de la línea de tiempo.
Nos permite en una interpolación, retornar al estado inicial de la misma, desde su estado final, recorriendo los pasos realizados previamente pero a la inversa. Para lograrlo deberemos realizar la siguiente secuencia:
- Seleccionamos todos los fotogramas de la interpolación.
- Los copiamos al portapapeles.
- Seleccionamos el fotograma siguiente a la finalización de la interpolación inicial y pegamos.
- Seleccionamos los fotogramas pegados y utilizamos la opción Invertir Fotogramas del menú contextual.