Vamos a ver como crear animaciones por programación en una aplicación AS3. empezaremos por desarrollar una aplicación sencilla en la que un objeto del escenario se moverá en forma aleatoria e indeterminadamente. veamos el ejemplo aqui.
Esta práctica servira para introducir el funcionamiento de la clase Tween, para luego pasar a desarrollos más complicados.
descarga el .rar con todos los archivos del ejemplo que haremos a continuación
Para crear el programa deben seguirse los pasos basicos de crear un archivo .fla y la clase Main.as para controlar toda la lógica, tal como se hizo en el primer tutorial. Podemos pensar en esta como el mundial “Hola mundo” pero para animaciones por programación.
package {
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import flash.display.MovieClip;
public class Main extends MovieClip {
//variables con los tweens
private var tw1:Tween;
private var tw2:Tween;
public function Main():void {
tw1 = new Tween(mc1, "x", None.easeInOut, mc1.x, Math.random()*550, 10, false);
tw2 = new Tween(mc1, "y", None.easeInOut, mc1.y, Math.random()*400, 15, false);
tw2.addEventListener(TweenEvent.MOTION_FINISH, reinicia);
}
private function reinicia(e:TweenEvent):void {
e.target.removeEventListener(TweenEvent.MOTION_FINISH, reinicia);
tw1 = new Tween(mc1, "x", None.easeInOut, mc1.x, Math.random()*550, 10, false);
tw2 = new Tween(mc1, "y", None.easeInOut, mc1.y, Math.random()*400, 15, false);
tw2.addEventListener(TweenEvent.MOTION_FINISH, reinicia);
}
}
}
Las clases relacionadas a los Tweens que tenemos que importar son fl.transitions.Tween -> aquí esta la clase encargada de animaciones. fl.transitions.easing -> aqui están efectos que aplican sobre la animación (por ahora solo usaremos None, el cual no aplica ningún efecto).
Luego de crear la clase tenemos la declaracion de las variables:
private var tw1:Tween;
private var tw2:Tween;
Es importante que estas dos variables con los tweens sean globales, y siempre que las utilicemos será de esa manera, puesto que flash tiene un mecanismo interno (llamado garbage collector) que nos causaría problemas si las variables no fuesen globales (si fuesen de nivel local, por ej. en una función, es posible que las animaciones queden incompletas por “culpa” del garbage collector, pero otro día hablaremos de el…).
Ahora si veamos como es la creación del Tween:
tw1 = new Tween(mc1, "x", None.easeInOut, mc1.x, Math.random()*550, 10, false);
el parámetro mc1 es el objeto sobre el cual estamos aplicando la animación (previamente en el .fla debimos haber creado un movieclip y darle nombre de instancia “mc1″, en el archivo .rar de ejemplo puedes verlo).
el segundo parametro es la propiedad del objeto que va a ser animada.al colocar “x” le estamos diciendo a la función que vamos cambiar el objeto en su coordenada x durante la animación. El tercer parametro es el efecto, como mencione antes None.easeInOut significa que hacemos una transición sin efectos adicionales.
Los dos parámetros siguientes (cuarto y quinto) son el punto de partida y el punto final respectivamente. mc1.x significa que la animacion comienza en la coordenada x que posea actualmente el objeto.
La funcion
Math.random()
sirve para obtener un valor aleatorio entre 0 y 1. como vamos a hacer que el objeto se mueva al azar esta función es lo que necesitamos. el escenario (Stage) mide 550px, es por ello que multiplicamos el resultado del random por esta cantidad, de este modo el objeto se puede mover a cualquier parte dentro del área del stage.
Finalmente los dos ultimos parametros son “duracion” y “usarSegundos”. con usarSegundos (es un boolean, true significa que la duracion es en segundos, false significa que es en frames) definimos la unidad de duracion, y en “duracion” el valor. al colocar 10 y false, estamos indicando que la animacion dura 10 frames.
Como se puede ver en el codigo he creado dos Tweens, uno se encarga de mover el objeto en la coordenada “x” y el otro en la coordenada “y”.
Ahora veamos el resto de las funciones:
tw2.addEventListener(TweenEvent.MOTION_FINISH, reinicia);
y luego
private function reinicia(e:TweenEvent):void {
e.target.removeEventListener(TweenEvent.MOTION_FINISH, reinicia);
tw1 = new Tween(mc1, "x", None.easeInOut, mc1.x, Math.random()*550, 10, false);
tw2 = new Tween(mc1, "y", None.easeInOut, mc1.y, Math.random()*400, 15, false);
tw2.addEventListener(TweenEvent.MOTION_FINISH, reinicia);
}
addEventListener es la forma basica de agregar eventos a un objeto, el “listener” indica que cuando un determinado evento ocurra en un objeto, se debe ejecutar una funcion. En este caso estamos diciendo que cuando se acaba una animacion se debe ejecutar la funcion reinicia, en la cual iniciamos nuevamente dos animaciones en “x” e “y”, manteniendo de esta manera al objeto siempre en movimiento.

animacion de un objeto