TweenLite

La animación por código siempre ha sido un tema estrechamente relacionado con ActionScript. Extrañamente, Macromedia nunca cuidó demasiado este campo, así que algunos programadores empezaron a trabajar en iniciativas propias para cubrir sus necesidades.

Algunas de ellas se convirtieron poco menos que en míticas. ¿Quién no recuerda a Robert Penner por sus revolucionarias librerías de Easing, o a Moses Gunesch por su FuseKit?

Con la llegada de AS2 vimos algún avance pero muy pobre, y con AS3 yo pensé que ya no haría falta recurrir a soluciones de terceros, pero estaba equivocado. Aunque es cierto que con los paquetes fl.transitions, fl.motion, fl.transitions.easing y fl.motion.easing (en los que ha trabajado Penner, por cierto) se puede crear todo tipo de animaciones, a la hora de la verdad las clases son poco prácticas, ya que la sintaxis es engorrosa, no son suficientemente intuitivas y sobretodo son muy pesadas.

Por suerte, la comunidad AS se movió bastante rápido y en el 2007 ya había disponibles varios kits de animación para AS3. La mayoría de gente optó por Tweener, entre ellos yo, pero hace cosa de 4 meses probé TweenLite y quedé encantado. Desde entonces, cuando tengo que animar por código, TweenLite es mi primera opción.

Podría resumir TweenLite (que cuenta con versiones tanto para AS2 como para AS3) en tres características: muy fácil de usar, muy muy rápido y muy muy ligero.

Fácil

Como en casi todos los kits de animación, la sintaxis es muy fácil e intuitiva. No hay que crear ningún objeto, simplemente llamarlo y pasar 3 argumentos: el objeto a animar, el tiempo y las propiedades que deben ser animadas. Por ejemplo:

[as3]TweenLite.to(clip, 2, {alpha:0.5, x:120});[/as3]

Dispone de muchas funciones avanzadas, como métodos onComplete, onStart y onUpdate (pudiendo pasar parámetros), delays, posibilidad de animar por frames, tweens simples para alpha, volumen, color…

Lo mejor es ir a la web para descubrir todas sus características. Ahí encontrarás también un ejemplo donde se ve lo fácil que es animar cualquier propiedad.

Rápido

El código está excelentemente optimizado, por lo que TweenLite es capaz de manejar cientos e incluso miles de tweens a la vez sin muchos problemas.

El propio autor tiene en su web un test comparativo entre distintos engines donde TweenLite marca diferencias.

¡Ojo al seleccionar el Tween de Adobe porque realmente te cuelga el navegador! Poner un número de instancias bajo.

Y si te quedan dudas, puedes echar un ojo también a esta serie de benchmarks de Moses en los que TweenLite obtiene unos fantásticos resultados.

Veréis que en los test hay un “candidato” llamado Go que destaca también por sus resultados. Go no es en sí un paquete de animación, sino una especie de framework desarrollado por Moses para crear nuestros propios tweens.

Y como una imagen (o un swf) vale más que mil palabras, he desarrollado un pequeño ejemplo (click para empezar/parar) donde TweenLite maneja cerca de 4000 shapes por segundo con fluidez. Quite impressive, no?

This movie requires Flash Player 9

Descargar ejemplo

A modo de comparativa, hice el mismo ejemplo con Tweener y la diferencia es abismal. En el código dejo comentada la función por si alguien quieren hacer las pruebas, pero no añado las clases de Tweener para que no pese demasiado la descarga.

Ligero

Lo mejor es que TweenLite (que realmente es una clase con unas 300 lineas de código útil) sólo añade a nuestra película 3kb de peso.

Esto lo hace ideal para todo tipo de campañas online donde el tema del peso es crítico (precisamente yo lo probé cuando tuve que hacer un banner que no podía superar los 20kb). Este factor ha hecho que muchísimos desarrolladores y agencias apostemos por él.

Pero aún hay más…

TweenFilterLite

TweenFilterLite es una clase separada que extiende de TweenLite para poder animar todo tipo de filtros y otras propiedades como brillo, contraste, saturación, etc.

El mayor objetivo de Jack Doyle, autor del engine, es mantener siempre bajo mínimos el peso de las clases, de ahí que optara por separar funcionalidades. Utilizar las 2 clases sólo añade 6kb a nuestra película.

TweenLite me encanta, pero TweenFilterLite es una pequeña maravilla. Aunque no haya necesidad de animar, es infinitamente más fácil cambiar cualquier propiedad de una matriz mediante tween que mediante código.

En el mismo sitio donde se puede descargar, encontrarás un ejemplo donde se muestra todo lo que se puede hacer con esta clase. Visita obligada.

Y otro ejemplo de cosecha propia. Con una simple linea de código se pueden conseguir efectos como estos (click para cambiar la composición):

This movie requires Flash Player 9

Descargar ejemplo

Contras

Como ya he comentado, el gran objetivo de este kit es que sea liviano. Las 2 clases del paquete suman 50kb frente a los más de 100kb de Tweener contenidos en 9 clases. Esto quiere decir que TweenLite no tiene tantas funcionalidades como este último.

De todas maneras, estas funcionalidades podríamos calificarlas de muy avanzadas, y seguro que en la gran mayoría de casos TweenLite nos satisfará completamente.

Con todo, hay algo que sí podemos echar mucho en falta: no soporta tweens con Bezier. Si para tus animaciones utilizar curvas es un requisito sine qua non, de momento necesitarás otro engine.

Y digo de momento porque Jack está trabajando en lo que llama TweenMax, clase que extenderá de TweenLite para agregar funcionalidades más potentes como esta. Gran noticia :)

Resumiendo

La animación por código es algo que prácticamente todos hacemos, ya no sólo programadores, sino también muchos diseñadores. Debido a esta popularización hoy se pueden encontrar muchos kits de animación (yo conozco hasta 7 para AS3). Entre tantos, puede ser difícil elegir uno.

Durante todo el artículo he estado continuamente haciendo comparaciones con Tweener, y lo he hecho precisamente porque he trabajado mucho con este último y me parece un gran engine, más que recomendable.

Personalmente creo que no se puede decir que uno es mejor que otro: cada uno tiene un enfoque propio y prioriza determinadas cosas.

Aún así, el autor de TweenLite ha sabido crear un paquete que, con un impacto mínimo en el peso de nuestro archivo, permite animar fácilmente un número enorme de objetos sin que nuestra aplicación se resienta. Si todavía no lo has probado, dale una oportunidad y seguro que no te arrepentirás.

Descargas

TweenLite

TweenFilterLite

Información del artículo

Post publicado el 05 de April de 2008 a las 0:24 por llops

Categorias: Utilidades

Etiquetas: , , , ,

Comparte

1 trackback

12 comentarios

  • Precisamente desde esta semana empencé a usar TweenLite por recomendacuión de unos compañeros de trabajo y me parece la relación rendimiento/ peso es incomparable, espero pronto sacarle fruto y usarla en mis próximos proyectos.

  • Thanks for the article! I just wanted to let you know that I’m wrapping up TweenMax and I think you’ll like it a lot. I’ve got two kinds of bezier tweening in place, plus hex color tweening, easier sequencing, pause/resume capability, and the whole TweenLite family is now syncronized with an internal timer.

    TweenMax is coming in the next few days, so watch the blog.
    http://www.TweenMax.com

    Cheers!

    Jack

  • Hey Jack, this is a great news!!! I can’t wait to test TweenMax :)

    Thanks a million for all your hard work.

  • Gran artículo!
    Estaba enredando con Caurina pero probaré esta también

  • Que bueno Dani, precisamente ahora comenzaba un proyecto y estaba buscando un engine para tweening que fuera potente. Tu artículo explica muy bien las bondades de TweenLite, que me ha dejado estupefacto. También probaré TweenMax que tiene muy buena pinta, sobre todo para Bezier, que veo fundamental. Por cierto, en la lluvia que has creado, ahora faltaría que las gotas reboten contra el cursor a medida que hacemos mousemove.
    Un abrazo titán. ;-)

  • Sam

    Excelente, pero no funciona la descarga del ejemplo de las gotas…. :D

  • Arreglado!
    Gracias Sam :)

  • luis

    Me sirve para mis juegos comerciales o debo pagar licencia?

  • Enzo

    Hola,quisiera saber como aplicar Delay a Tween lite ya que este parametro si lo incluyen los tweener …gracias

  • Muy simple:
    [as3]TweenLite.to(mc, 5, {delay:2, x:100});[/as3]

  • Enzo

    Buenisimo ¡¡¡¡…Muchas gracias por la respiesta Llops

  • Otra preguntita ; quisiera saber hacer para que al clickera un boton a mi mc se le vaya incrementando un valor sobre el eje x o sea que se corra cada vez mas hacia un lado al clickear un boton , esto utilizando TweenLite.to(mc, 1, {_x:46});

    gracias

Sigue los comentarios

Suscribiéndote al feed de comentarios: RSS 2.0


Warning: Illegal string offset 'solo_subscribe' in /home2/llops/public_html/blog/wp-content/plugins/subscribe-to-comments.php on line 359

Deja un comentario