Dominando Animaciones y Elementos Interactivos en Flash

Este documento detalla diversas técnicas de animación y elementos interactivos fundamentales para la creación de contenido dinámico en entornos como Adobe Flash o Adobe Animate.

Motion Tween

Para crear una interpolación de movimiento (Motion Tween), sigue estos pasos:

1. Inserta tu figura o imagen en el escenario.
2. Crea los fotogramas clave necesarios en la línea de tiempo.
3. En cada fotograma clave, haz clic derecho y selecciona 'Motion Tween'.

Dirígete al fotograma donde deseas que termine la animación. Mueve la figura o imagen que estés utilizando al lugar deseado. Aparecerá una línea punteada que indica la trayectoria de la animación. Esta línea punteada se puede modificar, por ejemplo, para que sea curva o en zigzag, ajustando así el recorrido del objeto.

Classic Tween

La interpolación clásica (Classic Tween) se configura de la siguiente manera:

1. Coloca la imagen o figura en el escenario y conviértela en un símbolo de tipo 'Clip de película'.
2. Ve a la línea de tiempo y dirígete al fotograma donde deseas que dure la animación.
3. En los fotogramas donde estés trabajando, haz clic derecho y selecciona 'Crear interpolación clásica'.

Finalmente, ve al último fotograma y mueve la figura al destino deseado para definir el final de la animación.

Línea de Tiempo

La línea de tiempo es una herramienta esencial que muestra dónde hay animación en un documento, incluyendo las animaciones fotograma por fotograma, las animaciones interpoladas y los traslados de movimiento. Permite diversas funcionalidades:

• Mostrar u ocultar capas.
• Bloquear o desbloquear capas.
• Visualizar el contenido de capas como contornos.
• Arrastrar fotogramas a una nueva posición en la misma capa o a otra capa.

Shape Tween

Para transformar una forma en otra (Shape Tween), sigue estos pasos:

1. Inserta la figura o imagen en el fotograma uno.
2. Ve al número de fotograma deseado y presiona F6 para crear un fotograma clave.
3. En el mismo fotograma clave, inserta una figura, imagen o texto diferente.
4. Entre los fotogramas que estés utilizando, haz clic derecho y selecciona 'Crear interpolación de forma' (Shape Tween).

Nota: Si es un texto, debes convertirlo a píxeles (desagruparlo) con Ctrl+B (o Cmd+B en Mac) antes de aplicar el Shape Tween.

Classic Tween con Guía de Movimiento

Esta técnica permite que un objeto siga una trayectoria personalizada:

1. Importa la imagen al escenario y selecciónala.
2. Conviértela en un símbolo de tipo 'Gráfico' con F8.
3. Dirígete al fotograma en la línea de tiempo donde deseas que termine la animación.
4. Ve a la Capa 1, haz clic derecho y selecciona 'Añadir guía de movimiento clásica'.
5. Se creará una nueva capa. Selecciona la herramienta 'Lápiz' y dibuja el trazo a partir del punto medio de la imagen, definiendo la trayectoria deseada.
6. Dirígete a la Capa 1, en el fotograma donde termina la animación, y mueve el objeto al lugar donde finaliza la trayectoria dibujada.
7. Crea un 'Classic Tween' entre los fotogramas para que el objeto siga la guía.

Capa Máscara

Las capas máscara permiten ocultar o revelar partes de una capa subyacente:

1. Inserta texto o imagen en una capa.
2. En la línea de tiempo, crea los fotogramas de inicio y final para la animación de la máscara.
3. Inserta una nueva capa (por encima de la capa del contenido) y dibuja en ella una figura, ajustándola según el tamaño que necesites para la máscara.
4. En la Capa 2 (donde está la figura dibujada), inserta un 'Motion Tween' entre los fotogramas.
5. En el último fotograma, ajusta la figura para cubrir completamente la imagen o texto que deseas enmascarar.
6. Finalmente, en la Capa 2, haz clic derecho y selecciona 'Máscara'.

Botones Interactivos

Los botones son clips de película interactivos de cuatro fotogramas, que sirven para activar eventos deseados. Cada fotograma representa un estado del botón:

• Reposo (Up): Cuando el puntero del ratón no está sobre el botón.
• Sobre (Over): Cuando el puntero del ratón se encuentra sobre el botón.
• Presionado (Down): Cuando se hace clic sobre el botón.
• Zona activa (Hit): Define el área que responderá al clic del ratón; esta área es invisible en la película final.

Acciones y Scripting

En Adobe Flash (o similar), presiona F9 para abrir el panel de 'Acciones', donde puedes utilizar las opciones de acciones disponibles para añadir interactividad.

En Fotogramas

Dependiendo de la función deseada, las acciones en los fotogramas variarán. Por ejemplo, puedes colocar una acción stop(); en un fotograma para que la animación se detenga hasta que se active un evento de botón. En otros fotogramas, puedes usar gotoAndPlay("nombre_de_etiqueta"); para dirigir la reproducción a una animación específica o a una etiqueta de fotograma.

En Botones

Para crear un botón interactivo, haz clic en la figura y presiona F8 para convertirla en un símbolo de tipo 'Botón'. Al seleccionar el botón, en el panel de 'Acciones' (F9), aparecerán las opciones para asignar acciones. Por ejemplo, puedes usar on(release) { gotoAndPlay("nombre_de_animacion"); } para vincular el botón a las animaciones necesarias cuando el usuario lo suelte después de hacer clic.