TweenLite básico

TweenLite, es una potente librería que permite la creación de movimientos en Flash, basado en procedimientos aritméticos. En ocasiones y en especial cuando se es desarrollador hacer animaciones con línea de tiempo en Flash, es un proceso que lleva mucho tiempo y que puede que no entregue los resultados esperados.

En este post voy a hacer una pequeña introducción al trabajo con la librería de TweenLite que a mi concepto es una de las más fáciles de utilizar y una de las más completas además.

--

Antes de empezar, hay que descargar las clases, yo recomiendo crear una carpeta donde se almacenen todas las librerías que descarguemos, esto nos permite compartir librerías entre proyectos y lógicamente mantener el orden de nuestro material.

Al tener el paquete descargado y descomprimido encontraremos una carpeta llamada gs y un par de archivos SWF que permiten explorar todas las posibilidades de animaciones utilizando las clases de TweenLite, recomiendo ver como funcionan y explorar un buen tiempo las herramientas.

Para poder utilizar las librerías debemos crear un nuevo proyecto de ActionScript 3.0 y crear en él un nuevo Clip de película.

lo nombramos cara_mc (o lo que sea) y lo dejamos en el escenario, después de eso, debemos ponerle un nombre de instancia, preferiblemente el mismo nombre que le dimos al crearlo, este nombre de instancia es para poder llamar al objeto desde el código AS3, para poner el nombre de instancia se debe hacer desde el panel de propiedades en la parte superior del panel, cuando el clip de película está seleccionado.

Ahora guardamos el archivo en algún lugar y al mismo nivel de carpetas copiamos y pegamos la carpeta GS de TweenLite, esto para que el archivo de Flash pueda importar las clases y pueda utilizar los métodos de las mismas.

Teniendo listo todo, es hora de pasar al código, vamos a iniciar con un ejercicio sencillo, hacer que el clip de película se desplace de un lugar a otro, para ello vamos a crear una nueva capa llamada AS y en el primer fotograma (hasta el momento no tenemos más de un fotograma) vamos a buscar el panel de acciones de Flash y escribimos lo siguiente:

import gs.TweenLite;

//el import se encarga de llamar a las clases de la carpeta gs

// TweenLite.to( clip, duracion, parametros )

TweenLite.to(cara_mc, 1.5, {x:350,y:200})

//cara_mc es nuestro clip de película

//1.5 es el tiempo en milisegundos que tardara la animación

//los parametros x,y y sus valores, son el destino final del MC

Esto genera una animación sencilla sobre nuestro clip de película. Ahora vamos a hacer una animación más compleja donde el clip persigue el puntero del Mouse, el código debe variar de esta manera:

import gs.TweenLite;

import gs.easing.*;

stage.addEventListener(MouseEvent.MOUSE_MOVE,seguir);

function seguir(e:MouseEvent):void{

TweenLite.to(cara_mc, 2.5,x:this.mouseX,y:this.mouseY, ease:Elastic.easeOut})

}

En este código manejamos un "escuchador de evento" Listener que será objeto de estudio en un próximo post, la función seguir recibe como parámetro un objeto de la clase MouseEvent ya que es la clase encargada de manejar el evento de movimiento del Mouse, por otra parte, la última parte del códigoease:Elastic.easeOut se encarga de generar el movimiento elástico que se ve en la animación.

Espero que les guste y si tienen inquietudes recuerden dejar sus comentarios o escribirme a sebastian44van[at]gmail.com o en Twitter: @juanchoVanegas.