TweenMax – TweenLite, movimiento, transiciones desde actionscript

Desde que flash es un lenguaje puramente OOP se incremento sustancialmente la disponibilidad de clases personalizadas. En este caso contamos con la clase Tween escrita por  Jack Doyle de fácil y excelentes resultados.

Actualmente también podemos contar con clases personalizadas como la TweenMax o TweenLite creada por Jack Doyle (http://www.greensock.com) que son mucho mas completas. Estas clases no sólo tienen más propiedades, suavizados y efectos sino también que son ideales para controlar objetos diferentes a los heredados por InteractiveObject como por ejemplo sonido o fotogramas.

La diferencia entre la versión Max y Lite es simplemente su peso, por consecuencia en la versión Lite hay métodos que no están disponibles.

Descargada la clase e importada a nuestro Actionscript vamos a poder implementar su uso de la siguiente manera:

ActionScript
< view plain text >
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. TweenLite.to(peli_mc, 1, {y:225, ease:Elastic.easeOut});

Como se ve, básicamente es lo mismo que la clase Tween de Adobe pero con la gran particularidad que sólo indicamos la posición final del objeto utilizando el método “to”. Esto es una ventaja sustancial a la hora de mover objetos mediante código cuando no sabemos la posición inicial que tendrán.

La estructura de uso es mediante una clase estática “TweenLite” o “TweenMax”, utilizamos el método “to” para indicar el movimiento y propiedades. En los paréntesis indicamos primero el objeto a mover, el tiempo en segundos (por defecto), ecepto que entre las llaves indiquemos useFrames:true el cual en ese caso la interpolación se completara teniendo en cuenta la cantidad de fotogramas. Las llaves {} indicamos las propiedades y métodos a utilizar separados los grupos por coma (,)

ActionScript
< view plain text >
  1. TweenLite.to( objeto, tiempo {métodos} )

Los easing también son similares a la clase Tween de Adobe con la diferencia que contamos con una cantidad superior de movimientos. En este caso utilizamos un movimiento elástico al final de la animación. Al importar todos los Easing tendremos disponibles los siguientes movimientos: Back, Bounce, Circ, Cubic, CustomEase, Elastic, FastEase, Linear, Quad, Quart, Quint y Strong con sus respectivos comportamientos (easeOut, easeIn, easeInOut).

Fíjese que el movimiento va indicado dentro de las {}, la clase utiliza esta nomenclatura para indicar el método y el valor. Si quisiéramos indicar una demora antes de iniciar la animación seria así: {delay:1}

ActionScript
< view plain text >
  1. TweenLite.from(peli_mc, 1, {y:225, ease:Elastic.easeOut,delay:1});

Podemos agregar cuantos métodos quisiéramos separados por coma(,) ejemplo:{y:10,x:45,delay:10, onComplete:listo}

También esta clase cuenta con una opción novedosa que es poder indicar posición final del objeto utilizando su posición actual, al contrario del ejemplo anterior. En ves de utilizar el método “to” lo reemplazamos por el método “from”.

ActionScript
< view plain text >
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. TweenLite.from(peli_mc, 1, {y:225, ease:Elastic.easeOut});

El valor 225 del eje “y” ahora no es la posición final sino la inicial.

Controles

TweenMax o su versión lite dispone de métodos para controlar el estado del movimiento mientras este se realiza.

pause() y resume(): Pausan o reanudan la interpolación donde se encuentre actualmente.
Reverse (Boolean): Indica que debe ir en reversa la interpolación, si usa true indica que usa el mismo tiempo para reversa que el tiempo inicial.
useFrames (Boolean): indique true para utilizar frames como  unidad de tiempo y no segundos.
Delay (Number): Segundos de demora antes de realizar la animación.

Ejemplo como usar el método pause y resume: Es importante para este tipo de interpolación crear una variable con la referencia al tween.

ActionScript
< view plain text >
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. //creamos una referencia
  4. var miTween:TweenMax = TweenMax.to(peli_mc,3,{y:300,ease:Quint.easeOut});
  5. var isToggle:Boolean = false;
  6.  
  7. stage.addEventListener(MouseEvent.CLICK,stageClic);
  8. function stageClic(e:MouseEvent):void
  9. {
  10. if (isToggle == false)
  11. {
  12. miTween.pause();
  13. }
  14. else
  15. {
  16. miTween.resume();
  17. }
  18. isToggle = ! isToggle;
  19. }

Este ejemplo pausa y reanuda la animación del objeto cada vez que hacemos click en el escenario.

Eventos:

Esta clase cuenta con un sin numero de controladores de eventos para facilitarnos la tarea de manipulación de objetos secuencialmente según el estado de los mismo.

Los eventos están relacionados a una función, siguiendo internamente los principios de la clase Event y sus listeners correspondientes. Así mismo la nomenclatura es muy fácil e intuitiva su uso.

El ejemplo siguiente se agrega un escuchador para cuando se completo la interpolación mediante el método onComplete.

ActionScript
< view plain text >
  1. TweenMax.to(peli_mc, 1, {y:300, ease:Quint.easeOut,onComplete:seCompleto});
  2. function seCompleto():void
  3. {
  4. trace("Interpolación completa");
  5. }

Eventos que podemos utilizar:

onStart: Ejecuta un evento cuando comienza la animación.
onStartParams: Cuando comienza la animación envía parámetros a la función relacionada.
onComplete: Ejecuta un evento cuando la animación finalizo.
onCompleteParams: Cuando finaliza la animación envía parámetros a la función relacionada.
onRepeat: Ejecuta un evento cada vez que la animación inicia un ciclo.
onReverseComplete: Ejecuta un evento cuando el movimiento en reversa llega a su fin.

La clase cuenta con mucho mas detectores de eventos y ello en su mayoría pueden recibir parámetros como el ejemplo de “onCompleteParams”. No se puede usar onComplete y onCompleteParams al mismo tiempo para detectar y enviar parámetros. Simplemente use onCompleteParams para detectar el final de la animación y entre paréntesis () envíe los valores como parámetros.

ActionScript
< view plain text >
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. TweenMax.to(peli_mc, 1, {y:300, ease:Quint.easeOut,onCompleteParams:seCompleto (4)});
  4. function seCompleto(id:uint):void
  5. {
  6. trace(“parametro pasado: ”id);
  7. }

En conclusión la clase Tween de Adobe es ideal para interpolaciones básicas o iniciales. En contrapartida vamos a poder explotar mejor el código tanto con interpolaciones y efectos con paquetes personalizados como TweenMax, el uso al momento de programar justificará cual es el más adecuado.

Caurina Tweener, movimiento, transiciones desde actionscript

El paquete caurina cuenta con clases escritas para actionscript 2 o 3 que nos facilitara la tarea de realizar movimientos de objetos o efectos de transiciones de manera muy fácil, cuenta con una extensa documentación de uso y también disponible para otros lenguajes como javaScript o C++. Primero lo que debemos hacer es descargar el paquete, colocamos la carpeta caurina donde tenemos nuestro archivo fla e importamos la clase.
Para el ejemplo construimos un mc con el nombre de instancia cuadrado_mc

Movimiento simple lineal

ActionScript
< view plain text >
  1. //importamos la clase
  2. import caurina.transitions.Tweener;
  3. //evento del mouse sobre el cuadrado
  4. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  5. //
  6. function mover(e:MouseEvent):void {
  7. //ejecutamos el movimiento en el eje x 200px desde donde se encuentre el cuadrado con una velocidad total de 1 seg . En este ejemplo el objeto a mover esta puesto “e.target” que es el cuadrado, pero podria ir el nombre de la instancia de otro objeto.
  8.  
  9. Tweener.addTween(e.target, {x:200, time:1, transition:"linear"});
  10. }

Caurina cuenta una lista muy completa de tipos de transiciones, puedes consultar dicha lista con ejemplos descargando el pdf o swf con la muestra.

Movimiento en varios ejes

ActionScript
< view plain text >
  1. import caurina.transitions.Tweener;
  2. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  3. function mover(e:MouseEvent):void {
  4. // simplemente se agrego un eje mas a los parametros y 100px
  5. Tweener.addTween(e.target, {x:200,y:100, time:1, transition:"linear"});
  6. }

Retrazar una propiedad en segundos

ActionScript
< view plain text >
  1. import caurina.transitions.Tweener;
  2. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  3. function mover(e:MouseEvent):void {
  4. Tweener.addTween(e.target, {x:200, time:0.5, transition:"easeInSine"});
  5. // la propiedad delay retraza el movimiento en y en 0.5 seg, para que se complete el recorrido en x
  6. Tweener.addTween(e.target, {y:100, time:1, transition:"easeInSine",delay:1});
  7. }

Detectar evento de inicio y finalización de la transición.

ActionScript
< view plain text >
  1. import caurina.transitions.Tweener;
  2. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  3. function mover(e:MouseEvent):void {
  4. Tweener.addTween(e.target, {x:200, time:1, transition:"easeOutQuint",onStart:comenzo,onComplete:finalizo});
  5. }
  6.  
  7. function comenzo ():void {
  8. trace("comenzo")
  9. }
  10. function finalizo ():void {
  11. trace("finalizo")
  12. }

Pasar parámetros a una función

ActionScript
< view plain text >
  1. import caurina.transitions.Tweener;
  2. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  3. function mover(e:MouseEvent):void {
  4. // en este ejemplo pasamos la cadena hola cuando se completa el movimiento, también puede pasar un parámetro cuando inicia el movimiento utilizando onStartParams en ves de onCompleteParams, porsupuesto que la funcion a llamar sera con la propiedad onStart
  5. Tweener.addTween(e.target, {x:200, time:1, transition:"easeOutQuint",onComplete:finalizo,onCompleteParams:["hola"]});
  6. }
  7.  
  8. function finalizo (parametro:String) {
  9. trace(parametro)
  10. }

El paquete caurina cuenta con muchísimas mas propiedades y funciones que iré ampliando en este mismo post, mientras pueden ver la referencia completa.
En los archivos para descargar les dejo estas pruebas y sus respectivos fla en cs4, y en ver ejemplo les dejo un sitio que utiliza caurina en sus transiciones y objetos.

Como utilizar o importar clases en actionscript

Cuando decidí ir colocando clases tanto mías como de terceros para compartirlas con ustedes, me llegaron muchas consultas de cómo importarlas?, unos de los problemas  que cometemos los que estamos en el tema es que damos muchas cosas por sabidas y olvidamos de explicar los pasos o fundamentos básicos del porque de las cosas, así que este post es como un pedido de disculpas de cierta manera :), voy a ir repasando los post y colocando cosas mas básicas y útiles junto a contenidos mas avanzado así es mas democrático!!!

¿Que es una clase?
Podríamos decir que una clase es un constructor de objetos que se basa en pautas ya establecidas o que se deban asignar (propiedades), pero en definitiva el resultado será un nuevo objeto con propiedades y métodos (funciones) listo para utilizar.

Por ejemplo si tuviéramos una fabrica de mesas, en vez de tener que pensar como esta compuesta la mesa a la hora de crear cada nueva mesa, e ir haciendo paso a paso el ensamblaje a medida que vamos relacionando las partes, nos daríamos cuenta que seria mucho mas útil si implementáramos un plano o croquis, donde ese plano indique los elementos básico como debe situarse por ejemplo las patas, la tapa, etc. En el mismo plano seguro que podremos indicar que partes de las mesas deberían poder ser personalizada (propiedades), por ejemplo el color. Este modelo lineal de establecer los pasos para construir una mesa podríamos repetirlo miles de veces con cada mesa logrando una serialización donde si quisiéramos agregar o modificar un paso en vez de hacerlo con cada mesa simplemente lo indicamos en el plano. De la misma manera funciona una clase, el constructor “new” siempre da origen un objeto nuevo con sus propiedades y métodos (funciones) listo para ser utilizado. Normalmente muchas veces harán uso del mismo, por ejemplo cuando creamos un movieClip desde actionscript: var miPeli:MovieClip = new MovieClip(), este es un claro ejemplo en el uso de clases, donde creamos un nuevo objeto MovieClip con todas sus propiedades y funciones listo para ser utilizado.

Aclaro que el mundo de las clases es muchísimo mas que esto, pero la idea es que mas o menos puedan entender el porque y que es una clase de manera simple.
Dado esto veremos que al programar abra tareas repetitivas donde seria bueno delegar dicha tarea a una clase, por ejemplo si requerimos hacer una mascara para un mc, sabemos que necesitamos un recuadro, no seria muy complicado crearlo, con solo unas 4 a 6 líneas estaría todo listo, pero si dichas líneas de código la implementáramos en una clase aislada para la función crear recuadro, en una sola línea podríamos implementarla, por ejemplo var mask:Recuadro = new Recuadro(100,100,0xFF0000); Esta sola línea hace referencia (instancia) a un nuevo objeto Recuadro con las propiedades 100 px de ancho, 100 px de alto y de color rojo y de esta manera podríamos crear cuantos recuadros quisiéramos de una manera mucho mas fácil y controlable.

¿Como importo una clase?
Si la clase se encuentra en la raíz de nuestro archivo fla, simplemente utilizando la sentencia: import nombredelaClase desde el panel acciones (F9), si en cambio la clase esta dentro de una carpeta deberíamos indicar la ruta de la misma: import carpeta. nombredelaClase, el punto es el conector para navegar por las carpetas.

Una vez importada la clase ya esta disponible para utilizarla, ejemplo:

Importamos la clase DrawCircle.as > import DrawCircle;
Creamos un nuevo objeto > var circulo:DrawCircle = new DrawCircle(100,100,20,0xFF0000)

Las propiedades y métodos de cada clase serán particularidades según el caso, por eso es bueno siempre al utilizarlas ver cuales son sus métodos y propiedades admitidas en los documentos de referencia.

Numero random según rango – Number – clase de actionscript 3

Clase:

ActionScript
< view plain text >
  1. package {
  2.     /**
  3.      * ...
  4.      * @author LeoBaraldi
  5.      //ejemplo > Randomize.getRandom(10,100)
  6.      */
  7.     public class Randomize {
  8.         public static function Random(_min:Number, _max:Number):Number {
  9.             var num:Number = Math.floor(Math.random() * (_max - _min + 1)) + _min;
  10.             return num;
  11.         }
  12.     }
  13. }

Uso:

ActionScript
< view plain text >
  1. import Randomize
  2. trace(Randomize.Random(0,100))

Dibujar circulo – Sprite – clase de actionscript 3

En esta sección iré colocando todas las clases que fui recolectando tanto mías como de terceros que me parecieron útiles para automatizar los procesos de programación en Adobe Flash, Flex o AIR.
Todas las mejoras que se les ocurra estaría bueno que las compartan así las publicamos y actualizamos periódicamente.

La siguiente clase es muy simple, pero no menos importante. La misma dibuja un circulo en un Sprite pasándole posición, tamaño y color de relleno.

Clase

ActionScript
< view plain text >
  1. package {
  2. import flash.display.Graphics;
  3. import flash.display.Sprite;
  4. /**
  5. * ...
  6. * @author LeoBaraldi
  7. */
  8. public class DrawCircle extends Sprite {
  9. private var clip:Sprite;
  10. private var posX:uint;
  11. private var posY:uint;
  12. private var radius:Number;
  13. private var bgColor:uint;
  14. /*
  15. param:
  16. _posX: posición en X =&gt; px
  17. _posY: posición en Y =&gt; px
  18. _radius: tamaño del circulo =&gt; px
  19. _bgColor: color del circulo =&gt; 0xFF0000
  20. */
  21. public function DrawCircle(_posX:uint, _posY:uint, _radius:Number, _bgColor:uint):void {
  22. posX=_posX;
  23. posY=_posY;
  24. radius=_radius;
  25. bgColor=_bgColor;
  26. drawCircle();
  27. }
  28. private function drawCircle():void {
  29. clip = new Sprite();
  30. clip.graphics.beginFill(bgColor);
  31. clip.graphics.drawCircle(posX, posY, radius);
  32. addChild(clip);
  33. }
  34. }
  35.  
  36. }

Ejemplo de uso:

ActionScript
< view plain text >
  1. import DrawCircle;
  2. var circulo:DrawCircle = new DrawCircle(100,100,20,0xFF0000)