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?
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):
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.
Sam
luis
Enzo
[…] mantenido por llops. Experimentos y artículos entorno a la plataforma flash y as3. « TweenLite […]