LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

TweenMax – TweenLite, movimiento, transiciones desde actionscript

| 3 Comments

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.

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, para sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, conocimientos en CEO. Desarrollador de sitios multi plataformas en, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Director de la carrera de diseño gráfico, Profesor de Diseño III y Diseño Web, en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

3 Comments

  1. Muchas gracias por el tutorial, lo he estado buscando para estas transiciones y por fin encuentro uno que merece la pena. Gracias!

    Un saludo.

  2. hola, como se integra el codigo que muestra TweenMax en mi proyecto?? podra alguien orientarme, Muay ahradecido esatre a quien me ayude. Gracias

  3. Muy bueno el tutorial!!

    Saludos.

Deja un comentario

Required fields are marked *.