La animación en Flash es algo que llama la atención de muchos y no es para menos. Podemos crear juegos, aplicaciones, interactivos y más que se podrán visualizar en cualquier explorador y en cualquier sistema operativo, mientras se tenga instalado en plugin de Flash Player. Pero no solo es eso lo que gusta de la animación en Flash, sino también la posibilidad de dar vida a nuestras ideas de una forma rápida y con salida para múltiples dispositivos.

El core de Flash es como tal una maquina de animación, por lo cual podemos usarlo para crear animación de dos formas: 1.- a través de Tweens, y 2.- a través de código ActionScript. Nosotros podemos apoyarnos fácilmente en cualquiera de estos dos para el desarrollo de animaciones en nuestro trabajo, la diferencia es que si lo hacemos por medio de ActionScript tendremos el control sobre todo evento que se esté realizando en el escenario.

Definimos Animación como: “Diseñar y Producir objetos que se ejecutan a cierta velocidad para crear la ilusión de movimiento”. El movimiento es básicamente cambiar algo de posición, “un momento está aquí, y al siguiente esta allá”. Pero un objeto no necesariamente debe cambiar su posición para ser considerado animación; el objeto puede cambiar su tamaño, su orientación, o puede simplemente cambiar su color.

Movimiento a través de Frames.

Un frame es un fotograma o cuadro, el cual puede ser considerado como el elemento más pequeño e importante dentro de nuestra animación. Los frames son ejecutados a una velocidad de 24 fps (frames por segundo), lo cual significa que 24 frames componen un segundo en nuestra animación. Virtualmente todos los medios de animación usan frames, los cuales son imágenes fijas que se ejecutan rápidamente para simular el movimiento o cambio en el objeto.

Si deseas una animación más lenta puedes hacer que tu animación se ejecute a menos frames por segundo, e incluso si deseas que tu animación se ejecute a una velocidad mayor también puedes cambiar esta velocidad, solo ten en cuenta que llegara un punto en que no se distinga apropiadamente puesto que a mayor velocidad, mayor será la dificultad para que sea apreciada por el ojo humano.

Animación Dinámica vs Animación Estática.

ActionScript hará tus animaciones dinámicas temporalmente, y te permitirá implementar las interpolaciones que tú desees (aunque también tiene sus límites). Aquí no hay mucho que destacar más que un punto muy importante, y es cuando una animación dinámica se convierte en estática.

Cuando un usuario ha visualizado tu animación más de una ocasión y esta ha dejado de ofrecerle una nueva experiencia, es entonces cuando tu animación se convierte en estática. Sin importar cuánto código de ActionScript este ejecutándose, puesto que finalmente serán los mismos frames los que se ejecuten una y otra vez. Solo hay una forma de salvar tu animación por más tiempo y conseguir que siga siendo dinámica; añadiéndole interactividad.

Puedes permitirle al usuario interactuar con tu animación ya sea por medio del teclado o el mouse, esto incrementara la experiencia de usuario que brinda al usuario (aunque también requerirá más lógica dentro de tu código). Ahora tendrás que preocuparte solo por las fuerzas físicas que afecten a los objetos dentro de tu animación.

Event Listeners

Para añadir interactividad a tu animación necesitaras de EventListener’s, los cuales se encargaran de captar las acciones de los objetos en el escenario. O lo que es lo mismo, añadirán a tus objetos la posibilidad de comunicarse con tu código. Sin embargo necesitamos saber qué tipo de evento estamos esperando de nuestro objeto, ya sean de mouse, teclado, etc. Dependiendo del tipo de datos que estemos manejando serán también los tipos de eventos que podremos usar.

Cuando se está trabajando con animación es muy común utilizar ENTER_FRAME y Timer. El primero se lleva a cabo en cuanto ejecutamos nuestra animación, es decir, solo cuando se ha ejecutado la animación y no durante todo el tiempo que dure nuestro trabajo (aunque esto depende de tus necesidades). Y el segundo consta de una lógica más profunda que nos permitirá ejecutar una función en base al tiempo.

ENTER_FRAME.

Este EventListener nos permitirá tener el control de nuestra animación desde el momento en que esta ha sido ejecutada por el usuario, iniciando así la interacción que nosotros deseamos tenga el usuario. Basta con agregar este EventListener a nuestro escenario.

Ejemplo: Tenemos un proyecto que carga dentro de un UILoader otro swf. Mediante el uso de este EventListener conseguiremos que al cargar nuestra aplicación principal, nuestro componente UILoader cargue a su vez nuestro segundo swf (el cual permite la interacción de las flechas del teclado).

[kml_flashembed movie=”http://activ.com.mx/wp-content/uploads/2011/03/ENTER_FRAME.swf” height=”150″ width=”350″ /]

Timer

Consta de una lógica más avanzada puesto que se ejecutara ya sea cada cierto tiempo (especificado en segundos), lo cual hace a este EventListener la mejor opción cuando buscamos una interacción guiada por el tiempo transcurrido; por ejemplo una animación que requiere captar las acciones que realiza el usuario solo cierta cantidad de tiempo.

Ejemplo: Tenemos un MovieClip que avanzara 5 pixeles por segundo, cada vez que el usuario de clic al botón. Si queremos que una función se lleve a cabo cada cierto tiempo, podemos hacer uso de la clase Timer para ello.

[kml_flashembed movie=”http://activ.com.mx/wp-content/uploads/2011/03/Timer.swf” height=”150″ width=”350″ /]

Motores de Animación.

Si bien pueden llegar a ser pocas las interpolaciones y en cierto momento podemos llegar a sentir una falta de recursos en cuanto a lo que podemos o no podemos hacer en Flash y ActionScript, tenemos la opción de incluir en nuestro proyecto un motor de animación. Estos “motores” no son más que clases contenidas en un swc, que nos permitirán agregar mayor alcance a nuestro proyecto (en cuanto a animación); algunos son gratuitos y algunos tienen versiones de pago.

Tenemos muchas opciones de terceros que nos permitirán trabajar de una forma más ligera y/o más rápida de lo que nos da el propio Flash. Entre estos motores tenemos unos muy famosos ya sea por el renombre que el desarrollador en cuestión ha llegado a tener, o por la misma fama que el motor se ha creado en cuanto a función.

Los más recomendables e interesantes son: TweenLite, gTween (de Grant Skinner), Tweener y TweenCube; los cuales abarcaremos en post siguientes de forma individual.