Cristalab

Animación con easing y sin código en Flash 8

Por: Freddie
13 de Marzo del 2006
46140 de clabLevel
Otros artículos de Freddie
96,419 visitas

Una de las características menos mencionadas de Flash 8 es que ahora, para los diseñadores, ya no es necesario recurrir a largas líneas de tiempo, llenas de keyframes con números de desaceleración o incluso usar ecuaciones de tween matemático como las de Robert Penner y similares si quieren hacer animaciones con aceleraciones y desaceleraciones complejas.

Para este minitutorial debes tener instalado el Flash Player 8, puedes descargarlo de esta dirección e instalarlo en tu navegador:
http://www.macromedia.com/go/getflashplayer

El proceso es muy sencillo, creamos una animación normal de un objeto que recorra un punto a otro con Motion Tween (Interpolación de movimiento) tal como haríamos en cualquier versión de Flash, de modo que la línea de tiempo quede así:

Linea de tiempo

Como ven, solo un objeto (En mi caso, un dibujo dentro de un MovieClip) que inicia en un punto y se mueve a otro, nada raro.

Ahora, si damos click al primer keyframe de la animación, veremos que en el panel de propiedades, en la sección de las propiedades del Motion Tween, sale "Edit", tal como se ve acá

Editar movimiento

Si lo abrimos veremos un panel similar al de la edición de volumen al editar efectos de sonido, que viene desde Flash 4; pero este panel, nos permite editar nuestra animación de aceleración y desaceleración, pueden jugar con el y ver que hace cada curva.

Easing personalizado

En mi caso, dejare las curvas así:

Curva personalizada

Y el efecto es este:

Claro, esto tambien lo habrias podido hacer sin Flash 8, pero en MX2004 o anteriores, te habria quedado asi la linea de tiempo

Linea de tiempo MX

Sin contar con el monton de numeritos para el easing :P

Un detallito para diseñadores.

Información adicional

Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Tutoriales relacionados