Eventos de la clase Tween de Actionscript 2

Antes de leer este tip, es necesario que leeas la primera parte de la Clase Tween, ya que esta vez veremos las funciones para controlar las animaciones a medida que se ejecutan.

La clase Tween trae por defecto una serie de eventos que nos permiten controlar sus interpolaciones más efectivamente, vamos a ver uno a uno con un ejemplo de su funcionamiento.

onMotionChanged

Esta función nos permite asignar eventos medida que la animación se ejecuta, osea mientras dura; veamos un ejemplo, vamos a iniciar un movimiento en x y vamos a mostrar en un campo de texto la posición a cada instante.

Código :

import mx.transitions.Tween;
import mx.transitions.easing.*;
//
var miTween:Tween = new Tween(miClip, "_x", Strong.easeInOut, 5, 320, 2, true);
//
miTween.onMotionChanged = function() {
   //
   out = "la posición en x es: " + Math.round(this.position);
};

onMotionFinished

Con esta funcion podemos ejecutar acciones una vez finalizada la animacion.
veamoslo con un ejemplo

Código :

import mx.transitions.Tween;
import mx.transitions.easing.*;
//
var myTween:Tween = new Tween(miClip, "_x", Strong.easeInOut, 5, 320, 2, true);
//
myTween.onMotionFinished = function() {
   //
   out = "Tween finalizada.";
};

onMotionStarted

Mediante esta función es posible asignar eventos al iniciarse la animación, ideal para inicializar variables, cabe aclarar que la función de por si no funciona sola, debe se llamada mediante miTween.start(); ya que se ejecuta una vez que la animación ha terminado y se vuelve a iniciar o bien si la animación ha sido detenida con miTween.stop(); Mejor veamos un ejemplo:
vamos a declarar dos tweens, una para _x y otra para _alpha, de esta manera, vamos a detener el movimiento en x y suspenderlo hasta que la trancicion de alpha se haya ejecutado

Código :

import mx.transitions.Tween;
import mx.transitions.easing.*;
//
var transparencia:Tween = new Tween(miClip, "_alpha", Strong.easeInOut, 0, 100, 2.5, true);
var moviemiento:Tween = new Tween(miClip, "_x", Strong.easeInOut, 5, 320, 2.5, true);
//
movimiento.stop();
//
transparencia.onMotionFinished = function(){
   movimiento.start();
}
//
movimiento.onMotionStarted = function() {
   //
   out = "iniciando movimiento en x...";
};

onMotionResumed

Con esta función podemos "pausar" una animación y reanudarla desde el momento donde fue detenida. Del mismo modo que con onMotionStarted ésta debe ser llamada mediante miTween.resume(); Vamos a verlo con un ejemplo:
tendremos nuestra animación mas un botón para detenerla y otro para reanudarla

Código :

import mx.transitions.Tween;
import mx.transitions.easing.*;
//
var miTween:Tween = new Tween(miClip, "_x", Strong.easeInOut, 5, 320, 5, true);
//
btn_stop.onRelease = function() {
   //
   miTween.stop();
   out = "Tween detenida.";
}
//
btn_resume.onRelease = function() {
   //
   miTween.resume();
};
//
miTween.onMotionResumed = function() {
   //
   out = "reiniciando...";
};

yoyo

Yoyo() es una función que sirve para retroceder una animación, algo muy útil por ejemplo cuando hacemos botones; veamos un ejemplo de un botón con alpha:

Código :

import mx.transitions.Tween;
import mx.transitions.easing.*;
//
var transparencia:Tween;
//
miClip.onRollOver = function(){
   //
   transparencia = new Tween(this, "_alpha", Strong.easeOut, 100, 50, 2.5, true);
};
miClip.onRollOut = function(){
   //
   transparencia.yoyo();
};

con yoyo() tambien podemos por ejemplo hacer un loop, combinando con onMotionFinished, podemos lograr algo asi:

Código :

import mx.transitions.Tween;
import mx.transitions.easing.*;
//
var myTween:Tween = new Tween(miClip, "_x", Strong.easeInOut, 5, 320, 1.5, true);
//
myTween.onMotionFinished = function() {
   //
   myTween.yoyo();
   out = this.position;
};

Bueno espero sirva y le sea útil

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.