Bienvenidos a la quinta entrega de nuestra serie de artículos sobre Animación en Flash con ActionScript; anteriormente hemos hablado acerca de los motores de animación TweenLite, GTween y TweenCube.

En esta ocasión hablaremos acerca de Tweener un motor de animación desarrollado por Caurina, un grupo de personas que se encargan de dar mantenimiento al motor corrigiendo los bugs que los usuarios reportan.

Tweener es un motor Open Source y se encuentra actualmente en la versión 1.33 ademas de que cuenta con una version para ActionScript 2 y una de ActionScript 3.

A decir verdad es un motor robusto que puede trabajar en integración con Papervision. Esto no es de sorprender, puesto que en su núcleo mismo utiliza también las ecuaciones de Robert Penner (también Open Source). Esta robustez lo hace también mas pesado (el mas pesado de todos los motores que tratado), 30.3KB.

Tweener cuenta ademas con diferentes versiones para varios lenguajes de programación (C++, JavaScript, Python), las cuales han sido desarrolladas por los mismos usuarios y que también están disponibles para su descarga aquí.

Ejemplo

A continuación se presenta un ejemplo que muestra de manera breve el uso de este motor. Veremos tres tipos de interpolaciones o animaciones que podemos nosotros aplicar a nuestros botones. Al pasar el Mouse sobre el primer botón, observaremos como cambia su tamaño haciéndose mas grande, para volver a su tamaño original cuando retiramos el cursor. El segundo botón se rotara un poco mientras se hace grande, y al retirar el cursor volverá a su posición y tamaños originales. Mientras que el tercero cambiara de tener un color claro a uno mas oscuro modificando su propiedad alpha.

Debemos recordar que la finalidad mencionada en el articulo Introducción a la Animación es permitirle al usuario interactuar de manera directa con nuestras aplicaciones por medio de la animación, estos son algunos ejemplos de animaciones que podemos incluir en nuestras aplicaciones y que harán mas agradable al usuario su uso.

[kml_flashembed movie=”http://activ.com.mx/wp-content/uploads/2011/04/TweenerDemo.swf” height=”200″ width=”350″ /]

Un ejemplo acerca de la integración de Tweener con Papervision podrás descargarlo aquí. Si buscas algo diferente que permita al usuario una mayor interacción por medio de curvas Bézier y elementos generados y posicionados solo cuando el usuario lo pida puedes descargar este ejemplo.Ambos desarrollados por los fundadores de Tweener.

Tips

  • Si eres diseñador o tienes conocimientos básicos de ActionScript te recomiendo revises los ejemplos que puedes descargar aquí.
  • Siempre deja tu comentario/duda o simplemente reporta un bug acerca del motor, tanto los colaboradores como los demás usuarios podrán orientarte al respecto.
  • Puedes utilizar este motor para el desarrollo de demos interactivas en 3D uniendo Tweener con Papervision.

Si necesitas interpolaciones sencillas que no requieran de una integración mayor, te recomiendo utilices alguno de los otros motores de animación, incluso mas cuando requieras que tu SWF final sea liviano. Si no debes escatimar en recursos tendrás una feliz integración con Tweener, que pese a que no cuenta con algún blog o foro dedicado si encontraras tips y ejemplos muy buenos en los blogs personales de cada uno de los desarrolladores, Arthur Debert, Nate Chatellier y Zeh Fernando.