Movimientos dinámicos con la Clase Tween en ActionScript 3

Hola, este es mi primer tip. Aquí les enseñaré cómo lograr un efecto de Easing Tween mediante Actionscript 3, ya que es una de las primeras cosas que aprendí solo en Actionscript 3.

Primero debemos importar los paquetes necesarios:

Código :

import fl.transitions.*;
import fl.transitions.easing.*;

Luego creamos un nuevo Sprite, en este caso dibujaremos un simple cuadrado.

Código :

var box:Sprite= new Sprite   //  Se crea
box.graphics.beginFill(Math.random()*0xffffff); // Se elije color
box.graphics.drawRect(0,0,100,100); // Dibujamos el cuadrado
box.graphics.endFill(); //Terminamos de dibujar
box.x=10  //Posición
box.y=10
addChild(box); // Lo enviamos al Stage.

Comenzando ya con el Tween lo creamos, dándole las opciones de:
(Objeto,Propiedad,Método,Partida,Termino,Duracion,Animación)

Objeto: Es el sprite que creamos en este caso. O sea, a lo que le queremos aplicar el Tween.

Propiedad: Es La propiedad que queremos cambiarle, ya sea el x, el y o el alpha.

Método: Es el tipo de Animación, existen varias. El modo de escribirla es: Movimiento.ease:

Donde movimiento:
None: Se mueve de el lugar a otro pero no le afectan los ease
Elastic: Efecto Elástico
Bounce: Efecto de Rebote
Regular: Se mueve
Strong: Se mueve
Back: Se mueve y Vuelve un poco

y Ease:
easeIn(): Parte lento
easeinOut(): Parte y Termina Lento
easeOut(): Termina Lento

Partida y Término, es donde empieza y donde termina la propiedad a la cual vamos animar.

Duración : Es el tiempo que demorará en hacer la animación.

Por ultimo "Animación", siempre déjenlo en true, ya que en false no la muestra.

Esto resumido para crear el Tween es:

Código :

var mover:Tween = new Tween(box,"x",Elastic.easeInOut, box.x, 400,3, true)

Quedando luego nuestro código así:

Código :

//Primero debemos importar los paquetes correspondientes:

import fl.transitions.*;
import fl.transitions.easing.*;

// Luego seleccionamos el RateFrame

stage.frameRate=30 // <= Numero que uno desee

// Creamos el Sprite "box" así lo he llamado,y luego dibujamos en ella una caja
var box:Sprite= new Sprite   //  Se crea
box.graphics.beginFill(Math.random()*0xffffff); // Se elije color
box.graphics.drawRect(0,0,100,100); // Dibujamos el cuadrado
box.graphics.endFill(); //Terminamos de dibujar
box.x=10  //Posición
box.y=10
addChild(box); // Lo enviamos al Stage.

//Creamos el Easing
var mover:Tween = new Tween(box,"x",Elastic.easeInOut, box.x, 400,3, true)

Con esto, al ver la película el cuadrado haría una animación pequeña.
También podemos detenerla, comenzarla o hacer que "loopee" o sea que la animación se repita constantemente. Para esto se ocupa:

Código :

mover.stop() //Lo detiene
mover.start() //Lo Comienza
mover.looping=true // Para que se repita

Lo otro interesante es que podemos agregarle Listeners, que se ocupan así:

Código :

mover.addEventListener(TweenEvent.MOTION_FINISH, termino)
function termino (e:TweenEvent){
trace("Termino");
}

Con todo esto logré hacer que el cuadrado, al terminar una animación, vuelva a su estado original, con otra animación, y así repitiendo.

El código me quedó así:

Código :

import fl.transitions.*;
import fl.transitions.easing.*; //Importo Paquetes
stage.frameRate=40
var box:Sprite= new Sprite();
box.graphics.beginFill(0xFF000);
box.graphics.drawRect(50,50,50,50);
box.graphics.endFill();
addChild(box);
//Creo un Tween
var mover:Tween = new Tween(box,"x",Elastic.easeInOut, 50, 350,5, true)
var mover2:Tween = new Tween(box,"x",Elastic.easeInOut, 350, 50,5, true)
mover2.stop();
//Creo un Listener
mover.addEventListener(TweenEvent.MOTION_FINISH, list); //En este caso es al terminar
mover2.addEventListener(TweenEvent.MOTION_FINISH, list3); 

//Creo la función "list"

function list (event:Event)
{
mover2.start();
}
function list3 (event:Event)
{
mover.start();
}

Ojalá se entienda y sirva de algo

Ejemplos:

 

Tweet