Tutorial FLASH - Animación de clips con ActionScript. La clase Tween.

Versión Flash: 8 y superiores   |   Compatible con ActionScript 2.0   |   Nivel: Medio   |   Hits: 115099

Cuando un diseñador conoce Flash, se maravilla de lo sencillo que resulta animar elementos basándose en fotogramas clave e interpolaciones. Sim embargo, a medida que uno se familiariza con la herramienta, comienza a descubrir su potencial, va complicando las películas y se añade interactividad, la animación mediente código se hace necesaria.

Hasta la aparición de la clase Tween en Flash 8, la animación por código se centraba básicamente en alguna variante de MovieClip.onEnterFrame.
Por ejemplo, aquí estamos creando una animación circular de un clip llamado miClip_mc.

x0 = 100;
y0 = 100;
radio = 50;
angulo = 0;
miClip_mc.onEnterFrame = function() {
_root.angulo+=5;
radian = _root.angulo*Math.PI/180;
this._x = x0+radio*Math.cos(radian);
this._y =y0+radio* Math.sin(radian);
};

Para detener la animación había que poner
delete miClip_mc.onEnterFrame;
o
miClip_mc.onEnterFrame=null;

También existen extensiones basadas en prototipos como las Movie Clip Tweening prototypes de Laco que funcionan de modo muy similar a la clase Tween que vamos a explicar en este tutorial.

Lo cierto, es que la clase Tween es una herramienta muy poderosa que nos va a permitir controlar todos los aspectos de la animación de la propiedades de un objeto gráfico. Podemos definir la propiedad que queremos animar, la duración de la animación (en fotogramas o en segundos), los valores inicial y final de la propiedad y lo más interesante, el método de suavizado. El método de suavizado es una función que se pasa como parámetro que nos va a decir que tipo de movimiento es (si es de retardo al final, si es de rebote...).

Además, gracias al detector de eventos de la clase, podemos ejecutar acciones en determinados momentos de la secuencia. Es decir, podemos hacer una animación de desvanecimiento (fadeout) de un clip animando su _alpha de 100 a 0 en 2 segundos y una vez que haya terminado, establecer su propiedad _visible=false;

COMO HACERLO. Ejemplo 1.
En el primer ejemplo sencillo de uso de la clase Tween, vamos a animar la propiedad _x de un clip desde la posición _x=50 hasta _x=150. Para ello vamos a poner las acciones en un botón.

on (release) {
import mx.transitions.Tween;
var myTween:Tween = new Tween(miClip_mc, "_x", mx.transitions.easing.Elastic.easeOut, 50, 150, 2, true);
}

La línea import mx.transitions.Tween; es obligatoria para tener disponible la clase. En la línea siguiente, creamos el objeto Tween, pasándole los parámetros adecuados para realizar el movimiento deseado. En el momento de crear el objeto, la animación comienza. La sintaxis para crear un animación con este sistema es:
var myTween:Tween = new Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean ) ; los parámetros los comentamos a continuación:

obj. El nombre de instancia del clip de película que queremos animar.
prop. La propiedad del clip que queremos animar, por ejemplo: "_x", "_width" o "_alpha".
func. Función que define el suavizado, es decir, el tipo de animación que vamos a hacer. Se compone de una clase de suavizado y de un método. Las clase pueden ser: Back, Bounce, Elastic, Regular, Strong y None. Los métodos pueden ser: easeIn, easeOut y easeInOut y easeNone. Para combinar una clase y un método, el valor del parámetro func se escribe de la forma mx.transitions.easing.clase.método, es decir, un ejemplo sería mx.transitions.easing.Elastic.easeOut. Podemos combinar todas las clases con todos los métodos salvo una excepción, la clase None va con el método easeNone. Lo mejor es que experimenteis vosotros mismos con las diferentes combinaciones para ver su funcionamiento.
begin. Valor de la propiedad al iniciar la animación.
finish. Valor de la propiedad al finalizar la animación.
duration. Duración de la animación en segundo o en fotogramas.
useSeconds. Valor booleano, si ponemos true, la duración de la animación se mide en segundos, si ponemos false, se mide en fotogramas.

Ejecutar acciones en distintos momentos de la animación.

Están disponibles los controladores de eventos:

myTween.onMotionStarted = function() {
// acciones a ejecutar cuando comienza la animación
// útil para inicializar variables
};
myTween.onMotionChanged = function() {
// acciones a ejecutar durante el
// transcurso de la animaciín
};
myTween.onMotionFinished = function() {
// acciones a ejecutar cuando
// termina la animación
};
myTween.onMotionStopped = function() {
// acciones a ejecutar cuando
// pausamos la animación con myTween.stop();
};
myTween.onMotionResumed = function() {
// acciones a ejecutar cuando
// reanudamos la animación después de
// un myTween.stop();
};

Ejemplo 2. Para ver un ejemplo de aplicación, en el ejemplo1 cambiamos el código del botón y le añadimos un onMotionChanged, quedando:

on (release) {
import mx.transitions.Tween;
var myTween:Tween = new Tween(miClip_mc, "_x", mx.transitions.easing.Elastic.easeOut, 50, 150, 2, true);
myTween.onMotionChanged = function() {
pos = "_x = "+Math.round(this.position);
};
}

Podemos enlazar una animación con otra usando onMotionFinished o incluso volver a la posición de inicio simplemente llamando al método myTween.yoyo();, lo cierto es que las posibilidades son practicamente ilimitadas.

Con esto que os hemos enseñado aquí tenéis las bases para crear vuestras propias animaciones por código. Si consultáis la ayuda de Flash para ampliar conocimientos, tened en cuenta que la clase Tween se encuentra bajo el epígrafe "Referencia del lenguaje de componentes" y no dentro de "Clases de ActionScript".

Podéis descargaros el ejemplo 2 y ver como funciona: tween2.fla