Comunidad de diseño web y desarrollo en internet

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:


¿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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate