TweenLite. Tween sencillo, ligero y potente

Publicado por Iván Gajate el 22 de octubre de 2008 en AS2, AS3, Flash, Tutoriales

Llevaba tiempo queriendo probar esta librería para hacer Tweens, dicen que el rendimiento es increíblemente bueno y es muy sencilla de usar. Y en tan solo 3KB!

Hay muchas librerías de tweens, como Tweener, Zigo o las propias de Flash. Yo he probado algunas pero no termina de convencerme ninguna. La de Flash era la que usaba hasta ahora, pues las otras me habían dado problemas anteriormente, pero se queda corta algunas veces.

La TweenLite me ha sorprendido por lo fácil que es de usar, y tiene todo lo que siempre he necesitado en un Tween y alguna característica que no me esperaba.

Nota: Un Tween es una forma de animar objetos mediante programación. Es muy útil cuando no conoces el punto inicial de la animación.

Vamos a hacer un movimiento sencillo, una bola moviéndose de izquierda a derecha con movimiento elástico.

(Archivo Flash, para verlo necesitas Adobe Flash Player.)

Para usar el TweenLite hay que descargarlo y guardarlo en nuestro classpath predeterminado o junto a nuestro archivo fla, como prefiramos. A continuación creamos un clip de película con un círculo, lo arrastramos al escenario con un nombre, “bola_mc” y escribimos este código:

import gs.TweenLite;

// TweenLite.to( clip, duracion, parametros )
TweenLite.to(bola_mc, 1, {_x:350})

Lo que estamos haciendo es importar la clase TweenLite y hacer una llamada al método “to” indicándole tres parámetros:

  • clip, de tipo Object: Es el objeto sobre el que queremos hacer el tween. Normalmente será un clip de película, pero veremos que puede ser otro objeto.
  • duración, de tipo Number: Es el tiempo que queremos que dure nuestro tween en segundos.
  • parámetros, de tipo Object: En este objeto pondremos todos los parámetros “extra” que queramos. Como mínimo la propiedad que queremos que cambie del objeto destino. En nuestro caso, la x del clip bola.

Esto es lo que mas me gusta, es súper sencillo de utilizar si no quieres complicarte la vida. Pero si queremos tener mas control sobre el tween, podemos ponerle mas propiedades dentro del tercer parámetro. Al ser un objeto, podemos poner las propiedades que queramos y en el orden que queramos.

Por defecto hace un movimiento de tipo Regular.easeOut, pero puede cambiarse por otro añadiendo el parámetro “ease” al TweenLite.

Cada clase de movimiento puede ser de tipo “easeIn”, “easeOut” e “easeInOut”, que indica si el easing se aplica al principio del movimiento (como una pelota en caída libre), al final del movimiento (como una pelota al lanzarla hacia arriba), o en ambos extremos.

(Archivo Flash, para verlo necesitas Adobe Flash Player.)
import gs.TweenLite;
import gs.easing.*;

// TweenLite.to( clip, duracion, parametros )
TweenLite.to(bola_mc, 1.5, {_x:250, ease:Elastic.easeOut})

Ésta es la representación de cada una de las curvas, de menor inclinación a mayor. Cuanto mas lineal sea la curva, mas uniforme será el movimiento, y cuanto mas curva, mas acentuada será la aceleración.

Ver curvas:

curvas easing

También tiene estas otras curvas que producen movimientos con “carrerilla”, elástico, o de rebote:

curvas easing otras

Se pueden añadir todos estos parámetros:

  • delay, de tipo Number: Es el retardo del tween.
  • ease, de tipo Function: Es el tipo de easing.
  • easeParams, de tipo Array: Parámetros extra para la función de easing, como por ejemplo para el movimiento elástico.
  • autoAlpha, de tipo Number: Si se utiliza en lugar de la propiedad “_alpha”, se gana la posibilidad de poner la visibilidad a false cuando el alpha llega a cero.
  • _visible, de tipo Boolean: Para ajustar la propiedad “_visible” de un clip de película al finalizar el tween.
  • volume, de tipo Number: Cambia el volumen de un clip de película.
  • tint, de tipo Number: Tinta un clip de película con el color especificado en hexadecimal. Ej: 0xff0000
  • removeTint, de tipo Boolean: Para eliminar el tintado de un clip de película.
  • frame, de tipo Number: Para hacer un tween sobre los fotogramas de un clip de película.

  • onStart, de tipo Function: Función que es llamada al comenzar el movimiento. Muy útil si hay un delay.
  • onStartParams, de tipo Array: Listado de parámetros que se le pueden pasar a la función de onStart. Opcional
  • onStartScope, de tipo Object: Muy útil para pasarle el ámbito de la función de onStart.

  • onUpdate, de tipo Function: Función que es llamada cada enterFrame mientras dure el tween. Útil para actualizar el escenario.
  • onUpdateParams, de tipo Array: Listado de parámetros que se le pueden pasar a la función de onUpdate. Opcional.
  • onUpdateScope, de tipo Object: Indica el ámbito de la función de onUpdate.

  • onComplete, de tipo Function: Función que se llama cuando termina el movimiento.
  • onCompleteParams, de tipo Array: Listado de parámetros que se pueden pasar a la función de onComplete.
  • onCompleteScope, de tipo Object: Ámbito de la función de onComplete.

  • persist, de tipo Boolean: Si su valor es True, la instancia de TweenLite NO será eliminada por el garbage collector al terminar el tween, aunque sí puede ser sobrescrita por otro tween. False por defecto.
  • renderOnStart, de tipo Boolean: Si se usa TweenFilterLite.from() con un delay, y se quiere evitar que se aplique el filtro hasta que el tween comience realmente, poner a true este valor. False por defecto, lo que hace que se apliquen los filtros mientras se espera el delay.
  • runBackwards, de tipo Boolean: Intercambia los valores inicial y final del tween para que corra al revés.
  • overwrite, de tipo Number: Controla el comportamiento de varios tweens que se aplican sobre el mismo objeto. Puede tener estos valores:
    • 0 (Ninguno): Ningún tween se sobrescribe. Es el mas rápido, pero hay que tener cuidado para no crear un tween con propiedades que se solapen, pues podría funcionar mal.
    • 1 (Todos): Es el valor por defecto. Sobrescribe cualquier tween del mismo objeto al instante.
    • 2 (Auto): Solo sobrescribe las propiedades del tween que se solapen.
    • 3 (Concurrente): Sobrescribe todos los tweens del mismo objeto que estén activos cuando el tween comienza. Si existe un delay y no se pisan no se sobrescriben.

Y si en lugar de querer animar un objeto desde su posición inicial hasta una posición final, queremos hacerlo al revés, siendo su posición actual donde tiene que quedarse al finalizar el tween, se puede utilizar el método “from” en lugar del “to”. Esto es muy útil cuando queremos animar una serie de objetos y los colocamos en el escenario en la posición donde queremos que terminen, y con el TweenLite, los animamos desde otras posiciones iniciales. Ejemplo:

(Archivo Flash, para verlo necesitas Adobe Flash Player.)
import gs.*;
import gs.easing.*;

TweenLite.from(esto, 1.5, {_y:"-50", ease:Elastic.easeOut});
TweenLite.from(es, 1.5, {_y:"-50", ease:Elastic.easeOut, delay:0.25});
TweenLite.from(una, 1.5, {_y:"-50", ease:Elastic.easeOut, delay:0.5});
...

Otros detalles que me han gustado especialmente de este tween son:

Si ponemos el valor entrecomillado, lo toma como referencia relativa, es decir, que:

TweenLite.to(bola_mc, 1, {_y:"10"});

le indica que hay que hacer un tween de la propiedad “y” de la bola hasta 10 píxels mas de su posición actual. Puede resultar muy útil para efectos de rollover donde queremos elevar su posición “y” sobre la que tiene actualmente.

También me parece muy útil el poder cambiar el volumen de un clip con tan solo una línea. Ya estoy tirando a la basura un par de funciones que me había hecho para subir y bajar el volumen con un efecto de fadeIn y fadeOut. Ahora es una cosa tal que asi:

TweenLite.to(this, 2, {volume:0})

Brutal no?

También se puede cambiar el color de un clip de película con solo una línea:

(Archivo Flash, para verlo necesitas Adobe Flash Player.)
import gs.TweenLite;
import gs.easing.*;
import fl.events.ColorPickerEvent;

myColorPicker.addEventListener(ColorPickerEvent.CHANGE, changeHandler);

function changeHandler(event:ColorPickerEvent):void {
var color:Number = Number("0x" + event.target.hexValue);
        TweenLite.to(bola_mc, 1.5, {tint:color});
}

Fácil no? De hecho, lo mas complejo de ese código es para usar el componente ColorPicker de AS3 y recoger el valor del color seleccionado. Lo demás es sólo una línea con el TweenLite 😀

Pues aún hay mas. Los adictos a las matrices como yo encontrarán lo que sigue muuuuuy interesante, y es que también se puede hacer un tween sobre una matriz, indicándole la matriz en la que tiene que terminar. Un ejemplo:

(Archivo Flash, para verlo necesitas Adobe Flash Player.)
import gs.*;
import gs.easing.*;

// Array con los valores iniciales del tween.
var posiciones_array:Array = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);

// Funcion que se ejecuta onUpdate.
// Actualiza la altura de cada barra del grafico.
function actualizar() {
	for (var i = 1; i<=12; i++) {
		this["b_"+i]._height = posiciones_array[i-1];
	}
}

// Le indico el array de valores en el que tiene que finalizar el tween, y la referencia a la funcion actualizar, con su ambito y cambio el tipo de suavizado
TweenLite.to(posiciones_array,1.5,{endArray:[100, 150, 75, 18, 90, 62, 157, 110, 12, 45, 36, 78], onUpdate:actualizar, onUpdateScope:this, ease:Strong.easeOut});

Existe también una orden con la que podemos detener todos los tweens de un objeto. El primer parámetro es el nombre del objeto, y el segundo si queremos que el tween finalice inmediatamente (va al valor final y llama al evento onComplete).

TweenLite.killTweensOf(bola_mc, true);

Otra orden que podemos usar es el delayedCall, que es exactamente igual que un setTimeOut de Flash, pero bueno, ahí queda.

Y claro, tiene un método para detener cualquier delayedCall de una función:

TweenLite.killDelayedCallsTo(function:Function);

Existe otra forma de instanciar un TweenLite, y es con un “new”, como en cualquier POO, y se puede guardar su referencia en una variable:

var miTween:TweenLite = new TweenLite(bola, 1, {_x:130});

Y por supuesto se puede eliminar el tween mediante

TweenLite.removeTween(miTween);

Y lo mejor de todo es que la versión en AS3 es exactamente igual que AS2, tan solo cambian los nombres de las propiedades obviamente, que en lugar de ser “_x”, es “x”, o “_visible” pasa a ser “visible”, pero por lo demás la sintaxis es igual. Es algo a agradecer, en estos momentos de *cambio de mentalidad AS2–>AS3* 😀

 

19 comentarios para “TweenLite. Tween sencillo, ligero y potente”

  1. Para bajar el volumen en AS3 si el sonido es externo, hay que usar el SoundChannel:


    var myChannel = mySound.play();
    TweenMax.to(myChannel, 2, {volume:0});

  2. Pues no se Arturo, asegurate de que tienes la carpeta de TweenLite (gs) junto a tu archivo de flash, y que está en AS2, pues los ejemplos están hechos así. Y que la bola tiene el mismo nombre de instancia que en los ejemplos.

  3. Muy bueno el aporte. No se que pasa con los ejemplos cuando lo ejecuto en el Flash Cs3 no sale ningun error pero la bola no se mueve. Sabes xq sucede esto???????????

  4. Joder qué guapo lo del fade out/in para el audio! y en una sóla línea…
    Gracias!

  5. Quien será el del «con uno dentro y otro…»? Tengo mis sospechas…

    En fin, que está muy chulo la verdad. Muy útil y parece simple… al menos hasta que un negado como yo con la programación se meta a tocarlo y seguro que no me funcionará xDDD

  6. Con uno dentro y el otro... dice:

    Muy chulo, muy minimal el diseño, me encanta, sencillito y mola. Muy bien explicado y accesible desde el primer vistazo. Gracias!