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.
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();
}
Muy bien pero prueva moviendo 20 movies o uno que tenga 20 o mas instancias en diferentes condiciones o haciendo twenn al alpha pa que veas lo que es un maco(Error inesperado o acciones incompletas) en el sdk de as3-cs3 Por:Borlon Roman_blog
Borlon Roman_blog :
Muy bien pero prueva moviendo 20 movies o uno que tenga 20 o mas instancias en diferentes condiciones o haciendo twenn al alpha pa que veas lo que es un maco(Error inesperado o acciones incompletas) en el sdk de as3-cs3
Increible tip. Muy bien hecho. ¿Para cuando tu proximo tip? Por:Ed
O que bueno que te haya gustado mi tip. Mi próximo tip? No se, de que te gustaría que fuera? Pero en todo caso esta en "Lista de publicación" un tutorial de Batch. Por:JaLeRu
holaaaaa,excelentisimo esto eh, oye, podrias explicar un codigo que no puedo resolver y se parece mucho a esto, tener una franja vertical en medio de la pantalla con un boton de "inicio" y al pulsar el boton la franja se mueva hacia la derecha y el boton desaparezca, me explico? Por:wottan_blog
Si claro que se puede, tomando en cuenta de que entendiste el tutorial. Al botón, colocale una accion que inicie la animación y que se desaparesca a el mismo.
Para que el se desaparesca pones
Código :
boton.visible=false
Osea la acción del botón seria como:
Código :
boton.addEventListener(MouseEvent.CLICK, botonAccion)
function botonAccion(e:MouseEvent):void
{
animacion.start();
boton.visible=false;
}
No he revisado el código, puede tener errores. Pero me parece correcto. Por:JaLeRu
pongan el link de descarga tontos Por:sershito-blog
me gusta jazmin. Por:pacheco-blog
recomiendo tweenlite o tween max, estas clases funcionan barbaro, no generan variables, y no fallan ( a mi la verdad q tween de as3 me fallaba sin causa aparente, adaba barbaro hasta q no se que le pasaba q fallaba) a todo esto, este es el link
.
