Línea de tiempo y animación: Organización de la línea de tiempo

Flash ha sido uno de los programas más utilizados para animar de todos los tiempos. Quizás hoy en día no sea el mejor para realizar películas largas o el más cómodo para animar personajes, pero si necesitas que tus animaciones sean interactivas o estén integradas en una aplicación sigue siendo el estandar y la opción más versatil.

En esta entrada vamos analizar los métodos básicos para animar de flash.

La siguiente ilustración resume el panel de la línea de tiempo y sus diferentes elementos:

El panel de la línea de tiempo de Flash CC
Figura 1: El panel de la línea de tiempo de Flash CC

Volver al Índice

Capas, carpetas y controles de capa

Organización y visualización:

  • El contenido de cada fotograma de la línea de tiempo se puede organizar en capas
  • El orden de las capas determina que elementos visuales aparecen por encima de otros.
  • Controla, según convenga, la visibilidad de tus capas para evitar distracciones visuales mientras editas contenido
  • Bloquea las capas en las que no estes trabajando. Así evitaras accidentes desagradables.
  • El modo de linea de contorno permite posicionar y escalar contenido que queda por debajo de otras capas
  • En las propiedades de la capa puedes cambiar el color de estos contornos. Cambialo si necesitas que destaque o para diferenciarlo de otras capas

Recuerda:

  • Ponle siempre un nombre descriptivo a cada capa
  • Si empiezas a liarte y no encontrar contenido entre tus capas porque son muchas, organizalas en carpetas

Tipos de contenido en la línea de tiempo

Contenidos Estáticos

En la Figura 1 ha una capa con el nombre capa con contenido estático. Su línea de tiempo comienza con un fotograma de color gris con un punto gordo de color negro. Este punto representa un fotograma clave en que se ha insertado contenido gráfico.
Le siguen una serie de fotogramas de color gris, pero sin punto esta vez. Son fotogramas normales, que cuando el cabezal pase por ellos mostrarán el contenido del fotograma clave anterior.

El último fotograma de esa zona gris tiene un recuadro hueco, que indica que ahí acaba la sección de contenido iniciada por el fotograma clave anterior. Cuando el cabezal de lectura sobrepase este fotograma dejaran de visualizarse los contenido de esa sección de la capa.
Detrás tenemos un fotograma que contiene un círculo hueco. Esto indica que ese fotograma es un fotograma clave vacío, marcando el inicio de una nueva sección, en esta caso sin contenido.

Animaciones fotograma a fotograma

La capa fotograma a fotograma de la Figura 1 contiene varias secciones de contenido consecutivas. Si en cada fotograma clave vamos colocando el mismo contenido pero con pequeñas variaciones, podremos construir una animación fotograma a fotograma.


En este otro video se muestra como hacer una animación de andar más elaborada. En la información del video tenéis los archivos de flash que se utilizan en el tutorial.

Animaciones con interpolaciones

La animación fotograma a fotograma es efectiva. Pero a veces tenemos que dedicar mucho tiempo a realizar transformaciones muy simples y repetitivas. Por eso se inventaron las interpolaciones.

Una interpolación consiste en el cálculo de los puntos intermedios entre dos estados de un objeto. Traduciéndolo a flash, las interpolaciones permiten que, habiendo fijado las propiedades de un objeto en dos fotogramas clave, el programa calcule automáticamente como han de cambiar esas propiedades en los fotogramas normales intermedios para producir una animación suave.

Interpolación entre fotogramas clave
Interpolación entre fotogramas clave

Hay tres tipos de interpolación en flash: Interpolaciones de movimiento (Motion Tweens), interpolaciones clásicas (Classic Tweens) e interpolaciones de forma (Shape Tweens).

Antes de realizar cualquiera de ellas es muy importante tener el elemento a animar completamente terminado (dibujado o diseñado), porque en muchas ocasiones si realizamos cambios sobre él después de haber aplicado una interpolación, la animación hará cosas raras.

También es necesario organizar nuestras instancias a animar en capas diferentes (una en cada una) antes de empezar a insertar interpolaciones. Así evitaremos un sinfín de problemas.

En la figura 1 se muestra como se representan los diferentes tipos de interpolación (los nombres de las capas indican el tipo de interpolación que se ha utilizado en cada una). En los siguientes tutoriales trataremos cada uno de ellas en detalle.

Volver al Índice

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *