Hola, en este Tutorial 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:

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

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

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 de manera regular.
Strong: Se mueve de una manera más fuerte.
Back: Se mueve y Vuelve un pocoy 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:

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

Quedando luego nuestro código así:

//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:

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í:

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í:

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);
{
mover2.start();
}
function list3 (event:Event){
mover.start();}

Ojalá se entienda y sirva de algo

Ejemplos:

(Click sobre el cuadro rojo para repetir);

Post Relacionados:

• Onda sonora con perdida de Intencidad en As3.
• Tutorial: PHP, SQL y Bases de Datos
• Uso de la propiedad Float y Clear [CSS]
• Programación en Batch 3º Parte.
• Distintas maneras de crear un preloader. [As3] Parte 2

El post fue publicado en Saturday, April 19th, 2008 a las 12:40 pm.
Puedes seguir las respuestas de este post desde el feed RSS 2.0.
Puedes dejar una respuesta, o hacer un trackback desde tu propio sitio.