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