Easing: Clases Tween y easing (parte 2)

Sigamos... :D . Como lo prometido es deuda las hoy vamos a seguir el tutorial de easing, en particular vamos a explicar la clase Tween.
Esta clase, junto con la clase easing, es la que nos da la posibilidad de crear movimiento solo con ActionScript, y lo mas importante, podemos crear movimiento dinamico, cunado digo "movimiento dinamico" me refiero a que lo que estamos hacienndo no es un moviemiento que se repite una y otra vez, sino que estamos creando un movimiento apartir de otras variables lo contrario al movimiento estatico. Un ejemplo de moviemiento estatico es el del ejemplo de la parte anterior, solo se mueve de un punto A a otro punto B, si volvemos a aprretar el boton se va a mover de ese punto A al punto B nuevamente y asi indefinidamente, pero con un movimiento dinamico podemos decile a flash "movete 20 cm adelante" y en el caso de que un objeto empiece en el punto 0cm cuando apretemos el boton se va a mover hacia el punto 20cm, y cuando lo volvamos a apretar al punto 40cm, y asi aansando de a 20cm. Vamos empezando.
La clase Tween, tiene 9 metodos, 5 propiedades (solo lectura) y 5 controladores de eventos. Los metodos nos proporcionan un mayor control sobre la animacion creada va a ver los metodos uno a uno:

miTween.yoyo(): Lo que hace este metodo es la inversa a la animacion hecha, al menos eso es lo que dice la ayuda de Macromdia, pero no es tan asi, cunado dice inversa se refiere a todas las propiedades exepto al savisado de movimiento (despues lo vamos a explicar). Lo que hace es crear un bucle de movimiento desde un punto o valor hasta otro de ida y vuelta. Ejemplo:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto= Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 200;
tiempo= 3;
segundos = true;
fotogramas (false);
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.onMotionFinished = function(){
Flaxes.yoyo();
}
}







Lo que hice en la funcion en las ultimas dos lineas del cuerpo del on(release) fue:

Flaxes.onMotionFinished = function(){
Flaxes.yoyo();
}

En idioma humano: Cuando termine la animacion de Flaxes (Flaxes.onMotionFinished ), ejecuta esta funcion ( function(){} ): Flaxes.yoyo() (que en realidad es un metodo). No se confundan, en este ejemplo el cuadrado de mueve indefinidamente porque siempre la funcion la ejecuta cuando termina la animacion.

miTween.fforward() y miTween.rewind: Estos metodos lo que hacen es mover la animacion hasta el final o el principio de la animacion respectivamente, hagamoslo mas grafico reutilizando el codigo del metodo anterior:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 200;
tiempo = 3;
segundos = true;
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.fforward();

}




Como veran al parecer no hace nada mas que mover instantanemente el cuadrado de una pocicion a la otra. Per si se fijan en el codigo lo unico que hago es crear Flaxes con var Flaxes:Tween = new Tween() y antes de darle tiempo a que empiece la animacion ejecuto Flaxes.fforward(); que adelanta la animacion hasta el funal, por lo que nunca se ve la animacion, por supuesto hay mejores formas de implementarlo pero eso se lo dejo a ustedes :D.

miTween.nextFrame() y miTween.prevFrame() : Estos son mucho mas simple que los anteriores, lo unico que hace es moverse solo un frame mas adelante o mas atras (respectivamente) en la animacion. Me parece que no hace falta ninguna explicacion cualquier cosa chiflen.

miTween.start(): Este metodo lo que hace es comenzar la animacion desde el principio cambiemos un poco el codigo (no tanto:D ) :

Codigo de "Crear Tween"

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 200;
tiempo = 3;
segundos = true;
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.stop();
}

Codigo de Start:

on (release) {
Flaxes.start();
}



En el boton Crear Tween, creamos el tween para el cuadrado e inmediatamente lo paramos con Flaxes.stop(); y la animacion recien la comienza cunado apretamos Start que empieza la animacion desde el principio.

miTween.stop(): Este metodo como vimos arriba lo que hace es parar la animacion, mien esto:

Crear Tween:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 20;
segundos = true;
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
}

Stop:
on (release) {
Flaxes.stop();
}




el ejemplo es lo suficientemente grafico.


miTween.resume(): Este es facil resume en ingles es retomar, en vez de hacer lo que hace start() lo que hace resume() es volver a donde se paro una animacion, miren:

Crear Tween:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 20;
//en segundos
segundos = true;
// esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
}

Stop:

on (release) {
Flaxes.stop();
}

Retomar:

on (release) {
Flaxes.resume();
}




miTween.toString(): [Copio&Pego de la ayuda de Macromedia]Devuelve el nombre de clase, "[Tween]".

Voy a salter las propiedades porque son demasiado obvias y se entienden pergfectamente desde la ayuda de Macromedia (y tambien porque me da fiaca :D ).

Sigamos con los controladores de eventos. Los controladores de eventos son metodos de la clase Tween que lo que hacen es detectar algun tipo de cambio en el objeto Tween. Lo que hacen algo parecido a los controladores de evento de boton (parecidos en funcionalidad y no en usabilidad), por ejemplo los controladoes de eventos de botones estan siempre esperando a que se realice un press() cuando esto se cumple ejecutamos nuestra funcion. Y los tan utiles controladores de eventos de la clase Tween son:

miTween.onMotionChange: Este controlador detexta cunadola propiedad citada por el tween cambia, si lo detecta ejecuta una funcion. Un Ejemplo:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 20;
//en segundos
segundos = true;
// esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.onMotionChanged = function() {
texto1.text += "a";
}
}



Lo que hace esto es detectar cunado cambia la propiedad (_x en este caso) y cunado lo hace agrega una " a " al campo de texto texto1.

miTween.onMotionChange: Este controlador detectsa cuando termino la animacion. Ejemplo:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 3;
//en segundos
segundos = true;
// esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.onMotionFinished = function() {
texto1.text += "Termino!";
}
}

+



miTween.onMotionResumed, miTween.onMotionStarted y miTween.onMotionStopped: Detectan cunado los metodos resume(), start() y stop() (respectivamente) son detectados. Un ejemplo mas y no jodemos mas:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 3;
//en segundos
segundos = true;
// esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.onMotionStopped = function() {
texto1.text = "Para un poquito eh ! ";
};
Flaxes.onMotionResumed = function() {
texto1.text = "Dale! anda de nuevo!";
};
Flaxes.onMotionStarted = function() {
texto1.text = " Empecemos! ";
};
}



Los primeros 3 botones tieme en el cuerpo del on (release){} las funciones Flaxes.start(); , Flaxes.stop(); y Flaxes.resume(); cunado detectan que se ejecuta cada uno cambie el texto del campo texto1.

Bueno, espero que les sirva, y cualquier cosa chiflen. (Este lo largo con faltas de ortografi y sin ni 1 acento :P )