Este tutorial introduce las bases del API, incluyendo la clase de partículas geométricas y la función de inicialización de la animación para controlar la vida y comportamiento de las partículas.

Partículas Geométricas

Lo primero que se necesita para las partículas, es un conjunto de geometría. Cada elemento es un conjunto que representara un tipo de partícula. Se puede usar cualquier figura geométrica, incluyendo figuras geométricas primitivas proporcionadas por Away3D o figuras geométricas cargadas desde un archivo externo. Sin embargo, no se recomiendan las figuras con muchos vértices, ya que afectaran el rendimiento de la animación.

Puedes estar preguntándote porque las figuras están predefinidas en lugar de ser creadas al vuelo como otros sistemas de partículas. Esto es debido a las limitaciones impuestas al búfer de carga de vértices, en el cual si se agregan las figuras de las partículas de forma dinámica, necesitara ocurrir mucho más frecuentemente. Cargar un búfer de vértices conlleva a un costo de rendimiento, así que es una buena idea el reducir dichas cargas si es posible. Además, las figuras geométricas dinámicas tienen restricciones al compartir el búfer de vértices a través de diferentes instancias de la animación.

La demostración incluye archivos de ejemplo (que puedes descargar aquí) para este tutorial que usan CubeGeometry como el conjunto de elementos geométricos. Puedes encontrar este código de ejemplo en el archivo TheBasicTutorial.as:

var cube:Geometry = new CubeGeometry(10, 10, 10);
var geometrySet:Vector. = new Vector.;
for (var i:int = 0; i < 1000; i++){
    geometrySet.push(cube);
}

El código anterior agrega 1000 cubos al conjunto geométrico. Si se requiere, se pueden mezclar diferentes tipos de figuras geométricas en el mismo conjunto geométrico.

Una vez que el conjunto está listo, se puede usar el API para convertir el conjunto en la partícula geométrica final.

var particleGeometry:ParticleGeometry = ParticleGeometryHelper.generateGeometry(geometrySet);

Ahora se tiene la instancia final de la partícula geométrica, lista para su animación.

Tiempo de vida de la Partícula

El siguiente paso es crear un conjunto de partículas de animación. Puede que ya estés familiarizado con el concepto del ciclo de vida del tiempo de vida de las partículas. En un sistema de partículas tradicional, una partícula tiene un tiempo de vida definido, a través del cual otras propiedades (color, posición, etc.) son controladas.

En Away3D, una partícula tiene una propiedad startFrame relacionada al tiempo del sistema, y una propiedad opcional de duración. (Si no se especifica la duración, entonces la partícula tendrá una duración infinita). La propiedad de retraso (también opcional) representa el tiempo de retraso entre el fin de la duración de una partícula y el inicio de la duración de otra. Cuando se usan estas propiedades, una partícula aparecerá en su tiempo de inicio, se mantendrá “viva” durante su tiempo de duración, y entonces desaparecerá en su tiempo de retraso.

Debido a que estas propiedades son fundamentales para los cálculos de tiempo dentro del código del GPU, se tiene que predefinir cuales serán utilizadas. El primer parámetro del constructor ParticleAnimationSet indica si se estarán utilizando la propiedad duration de la partícula. El segundo parámetro indica si se usara una línea de tiempo cíclica (de modo que una vez una partícula ha completado su ciclo, automáticamente lo comenzara una nueva). EL tercero indica si las partículas desaparecerán en el tiempo de retraso antes del reinicio de sus ciclos.

En este ejemplo, las tres propiedades han sido establecidas en true:

var animationSet:ParticleAnimationSet = new ParticleAnimationSet(true, true, true);

Es importante notar que no hay propiedades en el conjunto de animación. Si las hubiera, todas las partículas tendrían las mismas propiedades y aparecerían y desaparecerían al mismo tiempo. En vez de ello, se usa una función que establece cada propiedad en las partículas de manera separada. debido a que son locales para cada partícula y se establecen una sola vez, startTime, duration, y delay son conocidas como propiedades estáticas locales. La función que establece estas propiedades será invocada para cada partícula. Se puede identificar el índice de la partícula usando el valor ParticleProperties::index, y entonces se establecen los valores ParticleProperties::startTime, ParticleProperties::duration y ParticleProperties::delay para la partícula, por ejemplo:

animationSet.initParticleFunc = initParticleParam;
private function initParticleParam(prop:ParticleProperties):void {
    prop.startTime = prop.index * 0.005;
    prop.duration = 10;
    prop.delay = 5;
}

El código anterior crear un conjunto de propiedades estáticas locales que harán que las partículas inicien su ciclo cada 5 milisegundos de diferencia, las mantendrá “vivas” por 10 segundos, y entonces las enviara a “dormir” por 5 segundos.

Posición de la Partícula

Otros sistemas de partículas tienen un emisor que se usa para controlar la posición de origen de cada partícula. El sistema de partículas de Away3D implementa la misma funcionalidad de una forma más efectiva a través de comportamientos (uno de los conceptos más importantes en el API de partículas).

La clase ParticlePositionNode puede controlar la posición para cada partícula en la instancia de ParticleGeometry. La naturaleza de su control está determinada a través de una propiedad en constructor de la clase. Esto toma tres valores diferentes:

• ParticlePropertiesMode.LOCAL_STATIC (las partículas pueden tener diferentes propiedades iniciales para el comportamiento).
• ParticlePropertiesMode.GLOBAL (todas las partículas tienen las mismas propiedades iniciales).
• ParticlePropertiesMode.LOCAL_DYNAMIC (las partículas pueden tener diferentes propiedades que son controladas al vuelo).

Los modos LOCAL_STATIC y GLOBAL pueden compartir recursos de GPU a través de instancias de la animación, resultando en alto rendimiento. Así que, es una buena idea usar estos dos modos tanto como sea posible.

Este ejemplo usa ParticlePropertiesMode.LOCAL_STATIC:

animationSet.addAnimation(new ParticlePositionNode(ParticlePropertiesMode.LOCAL_STATIC));

Esto controla el valor de posición a través de la función initParticleFunc:

private function initParticleFunc(prop:ParticleProperties):void {
    prop.startTime = prop.index * 0.005;
    prop.duration = 10;
    prop.delay = 5;
    //calculate the original position of every particle.
    var percent:Number = prop.index / prop.total;
    var r:Number = percent * 1000;
    var x:Number = r*Math.cos(percent * Math.PI * 2 * 20);
    var z:Number = r*Math.sin(percent * Math.PI * 2 * 20);
    param[ParticlePositionNode.POSITION_VECTOR3D] = new Vector3D(x, 0, z);
}

Antes de poder visualizar el efecto, se tiene que crear el material, mesh, y el objeto animador para las partículas. Esto toma el mismo enfoque que otras formas de animar en Away3D.

//create material, mesh and animator
var material:ColorMaterial = new ColorMaterial(0xff0000);
var particleMesh:Mesh = new Mesh(particleGeometry, material);
var animator:ParticleAnimator = new ParticleAnimator(animationSet);
particleMesh.animator = animator;
animator.start();
_view.scene.addChild(particleMesh);

(click en la imagen para lanzar ejemplo)

Velocidad de la Partícula

Ahora ya se está listo para hacer que las partículas se muevan. Para esto, se necesitara utilizar otro comportamiento, el ParticleVelocityNode, el cual es un nodo de la animación de la partícula usado para establecer la velocidad inicial de la partícula.

Ya sabes que se debería estar usando ambos modos LOCAL_STATIC o GLOBAL tanto como sea posible. Pero, ¿cuál es mejor para esta aplicación? Internamente, el modo LOCAL_STATIC usa una corriente de registros para pasar los datos al GPU, de modo que los datos pueden ser representados por partícula. Sin embargo, GLOBAL usa registros constantes para pasar los datos por comportamiento. El número de corrientes de registros disponibles es más bajo que el número de registros constantes, y las corrientes de registros requieren más datos y más tiempo de inicialización. Así que como regla, deberías optar por el modo GLOBAL cuando sea posible.

En este caso, el objetivo es tener todas las partículas moviéndose con la misma velocidad, así que se puede usar el modo ParticlePropertiesMode.GLOBAL:

animationSet.addAnimation(new ParticleVelocityNode(ParticlePropertiesMode.GLOBAL, new Vector3D(0, 50, 0)));

Así luce el resultado:

(click en la imagen para lanzar ejemplo)

A dónde ir desde aquí

Has visto como crear una partícula geométrica, como establecer el tiempo de inicio y las propiedades de posición en partículas individuales, y cómo hacer que se muevan. Por supuesto, el API tiene muchas más características que las que se cubrieron aquí, pero ahora tienes un buen punto de partida desde el cual se pueden crear efectos impresionantes! Solo como un ejemplo, puedes crear el siguiente efecto usando las únicas características descritas en este tutorial:

(click en la imagen para lanzar ejemplo)

Aquí hay algunos recursos que puedes usar para continuar aprendiendo acerca de Away3dD:

• Creando juegos 3D y aplicaciones con Away3D y Stage 3D – Parte 1: Configurando un proyecto de 3D en 30 minutos
• Interoperando Away3D y Starling
• Creando una animación 3D interactiva con Away3D y Autodesk 3ds Max
• Referencia y documentacion del API de Away3D

Recuerda que en Activ tenemos un curso de ActionScript que te ayudará a sacarle más aprovecho a Away3D

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.

Además de destacar y ofrecer información de doce nuevas características en HTML5 y CSS3, el sitio mismo hace un uso amplio de nuevas características como transiciones CSS3, transformaciones CSS3, almacenamiento web y mucho más para brindar un recurso visualmente atractivo para aprender más acerca de HTML5 y CSS3.

El sitio destaca las siguientes características:

• Animación CSS3
• Gradientes CSS3
• Media Queries CSS3
• Sombras CSS3
• Transformaciones CSS3
• Transiciones CSS3
• Fuentes Web CSS3
• Audio HTML5
• Canvas HTML5
• Formularios HTML5
• Video HTML5
• Almacenamiento Web

Cada página de cada característica contiene:

• Un demo de la característica.
• Datos del soporte del navegador.
• Enlaces a ejemplos en los que se usa esa característica.
• Enlaces a recursos y tutoriales más a fondo.
• Detección y estrategias de reserva de la característica.

El objetivo es brindar una rápida introducción y comprendimiento de las nuevas características, proporcionar información y enlaces para que los diseñadores y desarrolladores puedan obtener una comprensión más profunda acerca de qué trata la característica, para qué puede ser utilizada y cómo utilizarla.

¿Por qué beta?

¿Entonces por qué este sitio fue lanzado como una versión beta? Bueno, la respuesta simple es que aún hay algunos errores en el sitio, particularmente en navegadores viejos y algunos dispositivos. A pesar de esto, hemos decidido lanzar el sitio como beta, para compartir los recursos e información con la comunidad, compartir algunas de las lecciones que hemos aprendido desarrollando el sitio, y obtener retroalimentación de esto.

Cuando comenzamos el desarrollo del sitio un par de meses atrás, diseñamos un plan ambicioso para un sitio que aprovecha y destaca una amplia gama de características de vanguardia. En efecto, y en retrospectiva, probablemente fuimos demasiado ambiciosos en nuestro alcance. Además de hacer frente a los problemas normales a través de los navegadores al hacer desarrollo web, ahora teníamos que lidiar con una gran cantidad de funcionalidad del núcleo del sitio que no era soportada consistentemente (o en su totalidad) entre los navegadores. Mientras que este es un problema particular en navegadores viejos, aún fue un problema para la mayoría de los navegadores actuales. Por ejemplo, el sitio usa transiciones CSS3 para animar las transiciones de las páginas, una característica con la cual no es compatible la versión actual de Internet Explorer 9.

Podríamos haber elegido soportar únicamente los navegadores más actuales, pero sentimos que incluso los demos de las características no serían soportados, los recursos y el contenido listado en cada página aún serían valiosos para los desarrolladores y diseñadores. Por lo tanto, el sitio se ejecuta en navegadores viejos como Internet Explorer 7, aunque la mayoría de las características que se destacan, no son compatibles.

Por supuesto, lidiar con las diferencias entre navegadores es una realidad del desarrollo web. Necesitas desarrollar con esto en mente, además de desarrollar estrategias de reserva para cuando una característica requerida no sea soportada. Sin embargo, en nuestro caso, ya que estábamos intentando destacar específicamente las nuevas características, tuvimos que lidiar con más problemas de implementación y soporte de los navegadores de un sitio habitual.

Lecciones aprendidas

Así que, ¿Cuáles son algunas de las lecciones que hemos aprendido al crear un sitio que hace un uso extenso de nuevas características de HTML5 y CSS3?

Decidir con anticipación si se soportaran los navegadores viejos

Soportar los navegadores viejos cuando se trabaja con nuevas características agrega un nivel adicional de complejidad al proyecto. Las nuevas características que agregues, requerirán de más tiempo de implementación y depuración para desarrollar una solución de reserva para los navegadores viejos.

Como mínimo, asegúrate de tener un sólido entendimiento de lo bien que se degradan las nuevas características. Por ejemplo, si las fuentes web no están disponibles, entonces puedes fácilmente retroceder a una fuente incorporada. Sin embargo, si las transiciones CSS3 son cruciales para tu sitio, entonces puede que tengas que hacer trabajo adicional para implementar las animaciones vía JavaScript para situaciones donde las animaciones CSS no son soportadas.

Si decides no soportar los navegadores viejos, entonces quizá quieras considerar el reducir el número de nuevas características en que se basa tu sitio.

Utiliza en tu sitio únicamente las nuevas características de HTML5/CSS3 esenciales

Para cada nueva característica de vanguardia que uses en tu proyecto, tendrás que considerar el tiempo de desarrollo y el costo de cada uno de los siguientes:

• Implementar una estrategia de reserva para navegadores que no soportan la característica.
• Lidiar con diferencias en las implementaciones de la característica entre los navegadores que no soportan la característica.
• Estar preparado para nuevas versiones de los navegadores y para cambiar las implementaciones de la característica (más información abajo).

Esto es especialmente cierto cuando se apunta a navegadores viejos que no soportan algunas de las características.

Esto no sugiere que no deberías usar las nuevas características, pero necesitaras ser consciente de los costos de desarrollo y mantenimiento que puede acarrear. Al centrarse únicamente en las características esenciales para el sitio, puedes ayudar a reducir el impacto de los elementos anteriores.

Plan de más mantenimiento después del lanzamiento

Esto es algo que nos tomó por sorpresa. Si estás construyendo un sitio que hace uso extenso de nuevas características de HTML5 y CSS3, para su mantenimiento necesitas planear tener mayores recursos de los normales.

Esto porque HTML5 y CSS3 consisten relativamente en nuevas características que no necesariamente han sido estandarizadas. Debido a que son nuevas, las implementaciones de los navegadores pueden (y lo harán) cambiar entre versiones.

Desafortunadamente, descubrimos esto de la forma difícil. Apple lanzó Safari 5.1 cerca de una semana antes del lanzamiento del sitio, y este lanzamiento termino rompiendo un par de cosas en nuestro sitio. Cuanto más tiempo pasa después del lanzamiento de tu sitio, habrá más lanzamientos de navegadores, y así lo más probable es que tu sitio se rompa. Por supuesto, esto se aplica a cualquier contenido web, pero dado que estas son nuevas características, es un problema en particular cuando se usan algunas de las nuevas funcionalidades de HTML5 y CSS3.

El rendimiento no es sólo acerca de JavaScript

Cuando empezamos este proyecto, nuestra preocupación principal era el rendimiento en torno a las diferencias en la ejecución de JavaScript entre navegadores (especialmente los viejos). Sin embargo, cuando empezamos a implementar algunas de las transiciones de CSS3 para animaciones de transición de página, tuvimos que lidiar con diferencias en el rendimiento de las animaciones entre navegadores.

Así como más y más sitios web utilizan motion graphics, esto llegara a ser un problema importante para los creadores de contenido. Por ejemplo, en el caso de transiciones CSS3, fueron dos causas primarias de las diferencias.

La primera, algunos navegadores aceleran las transiciones CSS3 con el uso del hardware, lo cual puede brindar muy buen rendimiento a la animación. Sin embargo, no todos los navegadores lo hacen. En nuestro caso, el rendimiento de la animación fue el mismo, pero el uso del CPU puede ser significativamente mayor que cuando las transiciones no eran aceleradas.

La segunda, animar el contenido en los dispositivos puede tener perfiles de desempeño dramáticamente diferentes. No solo entre navegadores de escritorio y dispositivos, sino entre los diferentes dispositivos. Por ejemplo, encontramos que para nuestro proyecto el iPad de Apple brinda un mejor desempeño de animación que el de la XOOM de Motorola.

La clave es comprender cuáles son los límites de los motion graphics en particular, y cuando se degrada el rendimiento a un punto en que necesitas considerar la implementación de una solución de reserva para una animación menos intensa. Este límite cambiara de proyecto en proyecto.

En el caso de theexpressiveweb.com, cuando un navegador o un dispositivo no puede ejecutar la animación suavemente, el sitio cambia a una transición menos intensa que construye los gráficos y los hace aparecer, lo opuesto a animarlos desde el lado.

No muevas demasiadas cosas a la vez

Esta es muy simple, pero como una regla general, mientras se animen menos cosas simultáneamente, las animaciones se realizarán más suavemente.

En theexpressiveweb.com, cuando cambias las páginas pasan un par de cosas:

• La navegación de la página y los elementos de información se animan al salir
• La página de ejemplo se construye fuera
• La navegación de la página y los elementos de información se animan al entrar
• Los recursos de los demos se animan al entrar

Algunos navegadores podrían manejar todos estos elementos animándose al mismo tiempo. Sin embargo, algunos navegadores tienen problemas al animar todos los elementos suavemente. Nosotros arreglamos esto al animar primero los elementos de navegación y el contenido y entonces la transición de la página de demostración.

Esto no solo proporciona animaciones suaves, también provee al usuario con información y contenido anterior, ambos de los cuales hacen que el sitio se sienta mucho más responsivo.

Tener una estrategia de reserva para características clave es una parte fundamental del plan de desarrollo

Deberías tener una estrategia de reserva para cualquier característica nueva de HTML5/CSS3 que estés utilizando. Esto es particularmente importante para características que son clave para el sitio o para la experiencia que estás intentando crear. Para estas características, necesitas desarrollar la estrategia de reserva desde el principio como una parte clave del desarrollo del sitio y el proceso de diseño.

Para theexpressiveweb.com, hicimos un uso extenso de transiciones CSS3 para animar las transiciones de las páginas. Estos motion graphics son una parte clave para la experiencia del sitio. Debido a que son clave, desde el principio tuvimos que desarrollar el sitio con una estrategia de reserva en mente.

Como mencione anteriormente, si las transiciones CSS3 no son soportadas (o no se realizan bien), entonces el sitio vuelve a animaciones de transiciones más simples. Esto aún brinda una buena (aunque ligeramente degradada) experiencia para el usuario.

Pudimos haber vuelto a animar las transiciones usando JavaScript, sin embargo, encontramos que las transiciones basadas en JavaScript no se realizan bien en algunos casos (especialmente en dispositivos). Ya que todavía tendríamos que implementar una transición más simple para estos escenarios, decidimos no implementar una reserva a través de JavaScript.

Diseñar y desarrollar con móvil en mente

Mientras que mantener en mente los navegadores móviles es importante cuando se diseñan sitios regulares, es particularmente importante cuando se diseñan y desarrollan sitios que usan motion graphics. Además de tener que lidiar con las diferencias en las resoluciones de los dispositivos y los métodos de entrada, también debes poner atención al rendimiento de las animaciones.

En general, los navegadores móviles proveen mejor soporte para las nuevas características, y brindan buen soporte para la aceleración de hardware para transiciones, transformaciones y animaciones de CSS3. Sin embargo, cualquier movimiento y animación tiene la posibilidad de agravar severamente al navegador y al dispositivo. Comprender estas limitaciones a tiempo en el ciclo de desarrollo hará tu proceso de desarrollo mucho más suave.

Usa Modernizr

No hay mucho que decir aquí. Si estas usando nuevas características, necesitarás asegurarte de que el navegador las soporta. La librería Modernizr es sin duda la forma más robusta y fácil para detectar cuáles características soporta el navegador.

Si necesitas revisar frecuentemente el soporte de una característica de tu sitio, vale la pena hacer todas las comprobaciones en la primera carga y entonces guardar los resultados, lo opuesto a revisar cada vez que se necesita. Encontramos que en algunas situaciones esto podría brindar una mejora notable en el rendimiento de inicialización.

Herramientas

Una pregunta que hemos estado escuchando es: “¿Qué herramientas utilizaron para construir el sitio?” Específicamente, “¿Usaron Adobe Edge para construir el sitio?”.

Bueno, primero, el equipo utilizó las mismas herramientas que otros diseñadores y desarrolladores web utilizan para construir sitios web. Estas incluyen herramientas como Adobe Dreamweaver, TextMate, Coda y Photoshop. También usamos Adobe Flash para crear las animaciones de hojas de sprites las cuales son utilizadas en la página de Audio HTML5.

Sin embargo, no utilizamos Adobe Edge para crear los motion graphics del sitio. Comenzamos el proyecto hace un par de meses mientras que la versión de prueba de Edge aún estaba siendo desarrollada. Más importante, la versión actual de Edge no está realmente orientada a este tipo de dinámica, la animación en tiempo de ejecución.

Como los ejemplos en el sitio de Adobe Edge destacan, la versión actual de Adobe Edge está enfocada en crear animaciones estáticas de tiempo de autor. Mientras que puedes aprovechar su salida en JavaScript, no es el enfoque primario de este lanzamiento. Por supuesto, esta es solo la versión de prueba, y el plan es proporcionar los ganchos en los lanzamientos posteriores para habilitar el tipo de animaciones dinámicas conducidas por eventos que se ven en theexpressiveweb.com.

Sin embargo, una cosa que hemos aprendido al desarrollar Flash, y al trabajar muy de cerca con la comunidad Flash, es que hay un balance entre lo que es animado en tiempo de autor en la herramienta, y lo que es animado programáticamente en tiempo de ejecución. Por ejemplo, para theexpressiveweb.com, Adobe Edge habría sido muy útil para crear rápidamente las animaciones y transiciones de todas las páginas de contenido y los elementos de navegación. Sin embargo, para los bloques de animaciones que construyen los demos, aún podríamos utilizar JavaScript, transiciones CSS3 y animar los bloques individuales en tiempo de ejecución. Esto debido a la complejidad de la animación, el número de veces en que se usan animaciones similares (doce en el sitio), el mero número de elementos siendo animados, y la facilidad de reutilizar el modelo del código para agregar nuevas animaciones. Adobe Edge permitirá este tipo de animaciones complejas, donde se animan cientos de elementos, pero en algunos casos, puede que aún quieras usar JavaScript y CSS directamente. Adobe Edge te dará esa opción.

El último objetivo de Adobe Edge es proporcionar la flexibilidad de trabajar dentro de ambos modelos. Sin embargo, para la primera versión de prueba, el equipo se enfocó en animaciones de tiempo de autor.

Retroalimentación

El sitio está en beta, pero nos gustaría escuchar cualquier retroalimentación, preguntas, o problemas que puedas tener. Puedes enviarnos tus comentarios a theexpressiveweb_feedback@adobe.com.

Aprender más

Si quieres aprender más acerca de cómo desarrollamos el sitio o acerca de HTML5 y CSS3 en general, revisa la página de recursos en theexpressiveweb.com la cual lista muchos recursos útiles para comenzar con HTML5 / CSS3. Por supuesto, beta.theexpressiveweb.com es también un gran recurso en características específicas.

Finalmente, puedes aprender más acerca de todo el trabajo que Adobe está haciendo en el sitio de Adobe y HTML5.

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.

Pese a que anteriormente no hablamos acerca del motor que el mismo Flash nos ofrece, lo haremos en esta ocasión comparándolo con los demás motores.

TweenLite

Desarrollado por GreenSock con apoyo de Grant Skinner.

Ventajas

• Incluye plugins de fácil instalación y muy interesantes
• Se puede integrar con Flex
• Brinda la posibilidad de aplicar “reversa” a una animación
• GreenSock provee al desarrollador/diseñador de trucos para una mejor animación

Desventajas

• Aunque TweenMax pesa el doble, incluye mas y mejores plugins
• Incluye pocos plugins

GTween

Desarrollado por Grant Skinner.

Ventajas

• Los plugins son muy fáciles de instalar e integrar en los proyectos
• Esta orientado a desarrolladores, y pese a que esto no impide que un diseñador lo utilice
• Puede integrarse con Flex y Papervision
• Brinda la posibilidad de aplicar play, pausa reversa a una animación

Desventajas

• No ha sido actualizado desde el 2009, por lo cual puede en determinado punto no cubrir ciertos bugs

TweenCube

Comenzó como un proyecto privado de Inkora, un grupo de desarrolladores comenzó para cubrir sus necesidades en cuanto a animación, pero con el tiempo decidieron compartirlo de forma gratuita.

Ventajas

• Brinda la posibilidad de manipular una animación por medio de un componente (por ejemplo un Slider)
• Permite pausar una animación que genera objetos aleatoriamente
• Brinda la posibilidad de agregar Tweens a archivos de audio

Desventajas

• No cuenta con una documentación tan extensa, lo cual hace hasta cierto punto difícil solucionar un problema o indagar mas allá acerca de otra solución

Tweener

Desarrollado por Caurina, un grupo de personas que en conjunto a la comunidad dan soporte a este motor.

Ventajas

• Documentación disponible en Ingles, Portugués y Japones
• Disponible no solo en ActionScript, también para Python, JavaScript y C++
• Puede integrarse con Papervision facilmente

Desventajas

• Solo permite pausar las animaciones
• No recomendado para alguien con nivel básico en ActionScript

Flash

Flash Professional nos ofrece su propio motor de animación, el cual fue incluido desde la versión 8.

Ventajas

• Perfecto para principiantes o personas con nivel de ActionScript básico

Desventajas

• Muy fácilmente puede quedar pequeño ante las necesidades del desarrollador/diseñador
• Algunas interpolaciones se ejecutan muy lentamente
• No recomendado para animar elementos generados aleatoriamente

Tabla comparativa de mas características mas importantes:

Aunque a simple vista ofrezcan cosas parecidos cada uno es diferente, esta misma diferencia sera mas notoria cuando se trabaje con cada uno.

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.

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.

En esta ocasión toca el turno de un motor de animación muy recomendable, potente y con una variedad de opciones muy útil.  TweenCube es un motor de animación que resultara muy atractivo para quienes han probado otros y que a pesar de sus características siguen necesitando más.

TweenCube es desarrollado por Inkora, un grupo de profesionales que justamente han visto en esta necesidad la oportunidad de desarrollar un motor propio y potente, pero que además lo comparten de forma gratuita. Actualmente se encuentra en la versión 1.2 y en comparación a los demás motores de los cuales hemos hablado (TweenLite y GTween), pesa 4.5KB.

TweenCube incluye la posibilidad de agregar Tweens a nuestros MovieClips por medio de XML, lo cual significa que por medio de un archivo externo, o un XML definido y creado dentro de nuestro código ActionScript podremos hacer uso de este motor. Otra de las cualidades más interesantes de este motor es que incluye una línea de tiempo propia, es decir, no solo contamos con la línea de tiempo que por default nos proporciona Flash y que podemos extender cuanto queramos, sino que nuestras animaciones pueden correr dentro de un segundo plano independiente.

A continuación se muestra una forma de incluir Tweens dentro de XML:

La documentación referente a este motor se encuentra en el sitio desde el cual podemos descargarlo; quizá no es tan extensa como alguna otra con la que hayamos trabajado anteriormente, pero esa brevedad y sencillez es la que te permite comenzar rápidamente con la integración de TweenCube en tus animaciones.

Ejemplo

A continuación se muestran dos ejemplos. El primero que se ejecuta tras cargar la animación, nos muestra un Tween (en este caso Bounce.easeOut con ligero cambio en la rotación) sencillo que muestra un MovieClip en nuestro escenario. A contnuacion podemos ejecutar el siguiente Tween, dando clic en el botón “Play”, para así visualizar la traslación que realizara el planeta tierra alrededor del sol para volver a su posición inicial. Existe un cambio en la posición Z del MovieClip, mismo que se aplica durante el mismo Tween.

Al presionar el botón “Siguiente” podremos visualizar cinco MovieClips, los cuales podremos mover al mismo tiempo mientras arrastramos el Horizontal Slider. Esto puede hacerse por medio de Tweens que se ejecutan al mismo tiempo, pero que modifican las propiedades X y Y en valores diferentes; para lograr esto se omiten las funciones Complete que permiten ejecutar otro Tween finalizado uno.

Tips

• Si aun no tienes conocimientos muy avanzados en ActionScript no te será difícil comprender como funciona este motor, sin embargo, te servirá mejor comenzar ya sea con TweenLite y GTween, ya que su empleo es más sencillo.
• Este motor de animación no es uno que se pueda recomendar a diseñadores (a menos que tengan un buen nivel de conocimiento acerca de ActionScript), puesto que a veces la comprensión de la sintaxis se vuelve muy difícil, mas cuando se trabaja con Tweens por medio de XML.
• Pese a que los ejemplos aplican un gran número de interpolaciones, no significa que debas complicarte la vida de la misma forma, una vez hayas comprendido los elementos principales, puedes modificar la forma en que aplicas estas interpolaciones sin sufrir un dolor de cabeza al intentarlo, esto gracias a que es un motor opensource.
• En cuanto hayas modificado el motor a tu gusto, puedes comprimir estas clases dentro de un SWC, de forma que sea más ligero y no incremente mucho el peso de tus animaciones.

TweenCube es un motor de animación recomendado para aquellos que poseen conocimientos medios/avanzados de ActionScript, más que nada por la complejidad que la sintaxis pueda tener; sin embargo esto no significa que alguien con conocimientos básicos no pueda utilizarlo plenamente. Si has trabajado con otros motores de animación y sigues sintiendo la necesidad de más dinamismo y rendimiento, sin duda TweenCube será el motor adecuado para ti, y su peso total es de 4.5KB

Uno de los mejores desarrolladores Flash del mundo es sin duda Grant Skinner (@gskinner), quien se ha dedicado a desarrollar uno de los más famosos y potentes motores de animación con ActionScript llamado GTween. Este motor es gratuito y no cuenta con una versión Premium, aunque sí con varios plugins que nos permiten agregar fuerza a dicho motor.

GTween ha sido desarrollado desde agosto del 2008 y a lo largo de sus diferentes versiones ha ido reforzando puntos débiles y errores que fueron reportados por usuarios del mismo, es de esperarse que con cada actualización vengan cosas muy buenas que nos permiten llevar nuestras animaciones al siguiente nivel.

Un motor tan liviano y potente es sin duda la mejor opción para los animadores y desarrolladores que han probado varios motores, y que siguen sintiendo la necesidad de rapidez, facilidad de uso y variedad; estas necesidades sin duda son cubiertas por GTween.

Grant Skinner contribuye en el desarrollo de TweenLite y es por esto mismo que usar ambos motores es muy fácil, aunque cabe aclarar que GTween pesa incluso menos que la versión gratuita de TweenLite. Este motor cuenta con una serie de plugins incluidos (y que se encuentran deshabilitados), los cuales no solo son muy fáciles de usar, sino que cada uno amplia enormemente las posibilidades de desarrollo. A continuación podemos ver la sintaxis para habilitar los plugins utilizados en el ejemplo que se encuentra más adelante:

MotionBlurPlugin.install();
ColorAdjustPlugin.install();

Si necesitamos animar objetos generados/posicionados al azar en nuestra animación, y que además poseen propiedades distintas, podemos estar seguros de que sin importar la cantidad de estos objetos siempre serán visualizados correctamente en nuestra animación. Hasta ahora se ha mejorado la interacción con EventListener’s de ActionScript 3, cuenta con una línea de tiempo propia que puede sernos muy útil cuando requerimos de una aplicación que pueda ser ejecutada en reversa por el usuario, así como también puede ser pausada.

Ejemplo

Esta animación muestra algunas características que GTween nos provee. Tras cargar nuestra animación nos muestra tres botones de colores, uno azul, uno rojo y uno amarillo (los cuales ejecutaran cada una de estas propiedades). El botón Azul nos muestra una interpolación de movimiento aplicada a un MovieClip, que además se ve afectado por el efecto Blur antes de llegar a la siguiente posición.

El botón rojo nos muestra cómo podemos hacer cambio a las propiedades visuales de nuestras imágenes (también aplicable a cualquier MovieClip), modificando su contraste (de -100 a 0) y su saturación (de 70 a 0).

El botón amarillo nos mostrara un hexágono que inicialmente se traslada desde la parte inferior de nuestro contenedor, hasta la parte superior derecha con un movimiento horizontal. Al hacer clic sobre el espacio en blanco de nuestro contenedor, podemos modificar el curso de nuestro hexágono que comenzara a trasladarse de arriba hacia abajo en base a la coordenada en X del clic que hagamos.

Tips

• Cuando tengas una serie de Tweens a ejecutar uno tras otro, será mejor que los posiciones en tu código de ActionScript, de forma invertida (es decir, el ultimo primero y el primero al último); así ahorraras tiempo puesto que en ocasiones no ejecuta de manera correcta los tweens sin haber detectado antes los demás a ejecutar.
• El uso de este motor no está restringido para su uso en la industria puesto que no cuenta con una versión de pago, Grant Skinner solo pide mantengas sus comentarios en las cabeceras de los archivos fuente.
• El usuario siempre querrá tener el control de nuestra animación, por lo cual podemos incluir en nuestro código las propiedades necesarias que le permitan ya sea pausar nuestra animación, reiniciarla e incluso regresarla.
• La sintaxis de GTween es muy parecida a la de TweenLite, de modo que si has probado con anterioridad este otro motor, te será aun más sencillo trabajar con GTween.

Si tienes conocimientos básicos de ActionScript este motor te ayudara a integrar animación a tus proyectos, el mismo archivo zip que contiene el SWC, incluye también la documentación y algunos ejemplos, básicos pero muy interesantes en los cuales aprenderás a abrirte paso en el mundo de la animación, haciendo uso de un motor tan potente.

Las interpolaciones de movimiento que nos brinda este motor se ejecutan de forma veloz, incluso cuando se aplican a mas de un objeto a la vez y de forma aleatoria.

TweenLite

Es un motor de animación que nos provee un gran numero de interpolaciones y opciones que harán de nuestra animación, una de las mejores experiencias web del usuario. Es potente, ligero y ademas 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.

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 mas 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 animacion 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 animacion 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 sobreescribir las interpolaciones ya existentes y desarrollar las tuyas, TweenLite te muestra como 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 interpolacion 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 util, 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.

El core de Flash es como tal una maquina de animación, por lo cual podemos usarlo para crear animación de dos formas: 1.- a través de Tweens, y 2.- a través de código ActionScript. Nosotros podemos apoyarnos fácilmente en cualquiera de estos dos para el desarrollo de animaciones en nuestro trabajo, la diferencia es que si lo hacemos por medio de ActionScript tendremos el control sobre todo evento que se esté realizando en el escenario.

Definimos Animación como: “Diseñar y Producir objetos que se ejecutan a cierta velocidad para crear la ilusión de movimiento”. El movimiento es básicamente cambiar algo de posición, “un momento está aquí, y al siguiente esta allá”. Pero un objeto no necesariamente debe cambiar su posición para ser considerado animación; el objeto puede cambiar su tamaño, su orientación, o puede simplemente cambiar su color.

Movimiento a través de Frames.

Un frame es un fotograma o cuadro, el cual puede ser considerado como el elemento más pequeño e importante dentro de nuestra animación. Los frames son ejecutados a una velocidad de 24 fps (frames por segundo), lo cual significa que 24 frames componen un segundo en nuestra animación. Virtualmente todos los medios de animación usan frames, los cuales son imágenes fijas que se ejecutan rápidamente para simular el movimiento o cambio en el objeto.

Si deseas una animación más lenta puedes hacer que tu animación se ejecute a menos frames por segundo, e incluso si deseas que tu animación se ejecute a una velocidad mayor también puedes cambiar esta velocidad, solo ten en cuenta que llegara un punto en que no se distinga apropiadamente puesto que a mayor velocidad, mayor será la dificultad para que sea apreciada por el ojo humano.

Animación Dinámica vs Animación Estática.

ActionScript hará tus animaciones dinámicas temporalmente, y te permitirá implementar las interpolaciones que tú desees (aunque también tiene sus límites). Aquí no hay mucho que destacar más que un punto muy importante, y es cuando una animación dinámica se convierte en estática.

Cuando un usuario ha visualizado tu animación más de una ocasión y esta ha dejado de ofrecerle una nueva experiencia, es entonces cuando tu animación se convierte en estática. Sin importar cuánto código de ActionScript este ejecutándose, puesto que finalmente serán los mismos frames los que se ejecuten una y otra vez. Solo hay una forma de salvar tu animación por más tiempo y conseguir que siga siendo dinámica; añadiéndole interactividad.

Puedes permitirle al usuario interactuar con tu animación ya sea por medio del teclado o el mouse, esto incrementara la experiencia de usuario que brinda al usuario (aunque también requerirá más lógica dentro de tu código). Ahora tendrás que preocuparte solo por las fuerzas físicas que afecten a los objetos dentro de tu animación.

Event Listeners

Para añadir interactividad a tu animación necesitaras de EventListener’s, los cuales se encargaran de captar las acciones de los objetos en el escenario. O lo que es lo mismo, añadirán a tus objetos la posibilidad de comunicarse con tu código. Sin embargo necesitamos saber qué tipo de evento estamos esperando de nuestro objeto, ya sean de mouse, teclado, etc. Dependiendo del tipo de datos que estemos manejando serán también los tipos de eventos que podremos usar.

Cuando se está trabajando con animación es muy común utilizar ENTER_FRAME y Timer. El primero se lleva a cabo en cuanto ejecutamos nuestra animación, es decir, solo cuando se ha ejecutado la animación y no durante todo el tiempo que dure nuestro trabajo (aunque esto depende de tus necesidades). Y el segundo consta de una lógica más profunda que nos permitirá ejecutar una función en base al tiempo.

ENTER_FRAME.

Este EventListener nos permitirá tener el control de nuestra animación desde el momento en que esta ha sido ejecutada por el usuario, iniciando así la interacción que nosotros deseamos tenga el usuario. Basta con agregar este EventListener a nuestro escenario.

Ejemplo: Tenemos un proyecto que carga dentro de un UILoader otro swf. Mediante el uso de este EventListener conseguiremos que al cargar nuestra aplicación principal, nuestro componente UILoader cargue a su vez nuestro segundo swf (el cual permite la interacción de las flechas del teclado).

Timer

Consta de una lógica más avanzada puesto que se ejecutara ya sea cada cierto tiempo (especificado en segundos), lo cual hace a este EventListener la mejor opción cuando buscamos una interacción guiada por el tiempo transcurrido; por ejemplo una animación que requiere captar las acciones que realiza el usuario solo cierta cantidad de tiempo.

Ejemplo: Tenemos un MovieClip que avanzara 5 pixeles por segundo, cada vez que el usuario de clic al botón. Si queremos que una función se lleve a cabo cada cierto tiempo, podemos hacer uso de la clase Timer para ello.

Motores de Animación.

Si bien pueden llegar a ser pocas las interpolaciones y en cierto momento podemos llegar a sentir una falta de recursos en cuanto a lo que podemos o no podemos hacer en Flash y ActionScript, tenemos la opción de incluir en nuestro proyecto un motor de animación. Estos “motores” no son más que clases contenidas en un swc, que nos permitirán agregar mayor alcance a nuestro proyecto (en cuanto a animación); algunos son gratuitos y algunos tienen versiones de pago.

Tenemos muchas opciones de terceros que nos permitirán trabajar de una forma más ligera y/o más rápida de lo que nos da el propio Flash. Entre estos motores tenemos unos muy famosos ya sea por el renombre que el desarrollador en cuestión ha llegado a tener, o por la misma fama que el motor se ha creado en cuanto a función.

Los más recomendables e interesantes son: TweenLite, gTween (de Grant Skinner), Tweener y TweenCube; los cuales abarcaremos en post siguientes de forma individual.