Animación en Flash con TweenLite
Escrito por Revista NeoPixel Miércoles, 23 de Marzo de 2011 20:17
Una de las características más importantes y potentes de Flash Professional, es la posibilidad de crear Animación apoyándonos en las herramientas que el mismo Framework nos provee o también, con las que podamos encontrar en la red (motores de animación, ejemplos, etc). Pero lo más importante no es solo con que realizamos estas animaciones sino también la calidad y la duración de las mismas.
Las interpolaciones de movimiento que nos brinda este motor se ejecutan de forma veloz, incluso cuando se aplican a más de un objeto a la vez y de forma aleatoria.
TweenLite
Es un motor de animación que nos provee un gran número de interpolaciones y opciones que harán de nuestra animación, una de las mejores experiencias web del usuario. Es potente, ligero y además cuenta con dos versiones (una gratuita y una de pago); ambas versiones contienen funciones muy interesantes y atractivas. TweenLite es la mejor opción para cuando se requiere una gran cantidad de posibilidades (en cuanto a animación), en un swc muy ligero y que hará de nuestro trabajo algo excepcional.
Un poco de Historia
TweenLite nace hace 10 años ante la necesidad de una herramienta que permitiera de manera sencilla, la integración de animación sin tener un conocimiento avanzado de ActionScript e incluso sin tener que invertir mucho tiempo en esta integración.
Su creador es un Diseñador/Desarrollador que comenzó a generar su propio código en base a esta necesidad, puesto que trabajo un tiempo en una agencia de publicidad y su labor era justamente crear experiencias increíbles para el usuario. Con el tiempo se dio cuenta de que hay mucho código en blogs y foros, que podemos utilizar pero que no siempre funciona como queremos y que en muchas ocasiones tiene una gran cantidad de errores. De esta forma decidió compartir su código con mas desarrolladores, que rápidamente pasaron la voz e hicieron de este motor uno de los más famosos en la actualidad.
Ejemplo
La siguiente animación muestra algunas de las interpolaciones que TweenLite nos permite realizar. Utilizando TweenLite.to y TweenLite.from brindamos la sensación de movimiento en nuestros objetos, e incluso aplicamos esta animación a objetos (en este caso shapes) generados y posicionados aleatoriamente, como es el caso de las estrellas.
A la luna se le aplico un efecto sencillo de movimiento que incluye a nuestra animación un objeto que se encuentra inicialmente posicionado afuera del área visible.
Y finalmente, un trabajo en conjunto entre las interpolaciones aplicadas a nuestro meteorito y al planeta tierra, generan una explosión sencilla que se ejecuta en cuanto nuestro meteorito se impacta en el planeta.
Tips
• TweenLite te provee de muchos recursos para aprender a implementarlo en tus animaciones, puesto que cuenta con Foros, una documentación muy bien hecha e incluso videotutoriales.
• Puedes sobrescribir las interpolaciones ya existentes y desarrollar las tuyas, TweenLite te muestra cómo hacerlo en su apartado recursos.
• Si es que aun no has dado el gran salto de ActionScript 2 hacia ActionScript 3, TweenLite te provee de una versión para ambas versiones.
• Agrega EventListener’s que se ejecuten en cuanto la interpolación se haya realizado exitosamente e incluso puedes enviar a esta función los parámetros requeridos.
• Revisa la sección Tips & Tricks donde siempre encontraras algo muy interesante y sobretodo útil, para optimizar tus animaciones.
TweenLite VS TweenMax
Ambos motores son desarrollados por GreenSock los cuales cuentan con una versión gratuita y una versión de pago. Ambas versiones de pago contienen muchas características e interpolaciones muy atractivas. TweenMax contiene a su vez interpolaciones que visualmente son superiores a las de TweenLite, y esto se ve reflejado en el peso total de ambos SWC’s, puesto que TweenLite pesa solo 4.8 kb y TweenMax 8.8 kb (en sus versiones gratuitas).
TweenMax contiene a su vez efectos visuales que van mas allá de movimiento y velocidad de movimiento, por ejemplo Blur que podemos combinar con un efecto de traslación que harían de nuestro objeto algo impactante.
TweenLite es sin duda un muy buen motor de animación para diseñadores que no desean meterse en tanto código y para desarrolladores que desean realizar su trabajo velozmente.
Texto por Jesus Macedo, colaborador activo en el equipo de Activ, Adobe Authorized Training Center. Siguelo en Twitter como @jesus_macedo
RSS feed Comments
