sábado, 30 de mayo de 2015

Actuate: 10 ejemplos sencillos


Actuate es una librería originalmente creada para ActionScript con el objetivo de facilitar la creación y manejo de Tweens. Luego fue adaptada para su utilización con Haxe.


Fue creada y es mantenida (entre tantas otras) por Joshua Granick dentro del proyecto OpenFL. Si bien nos vamos a encontrar muchas similitudes con su versión original (Para AS3), su sintaxis difiere un poco. 




Pero comencemos por el principio:
Por lo general, se instala por defecto al instalar Openfl...pero pueden forzar su instalación como siempre:


haxelib install actuate


e incluirla en el project.xml


<haxelib name="actuate" />


Actuate nos permite generar y manipular Tweens. Un tween no solo se aplica a un gráfico o sprite en particular, también permite manipular efectos como ruidos, distorsiones, incluso sonido, pero lo veremos más adelante).
Típica animación Tween



Estas transiciones, pueden ser de dos tipos (cuando son gráficas): Espaciales o Morfológicas (o ambas al mismo tiempo).

Modificando color y aplicando filtros



Espaciales son aquellas que mueven el objeto en el espacio (en este caso nuestra ventana) desde un punto de origen hacia un punto de destino.


Morfológicas o de forma, son aquellas que muestran transformaciones del objeto, pero sin cambiar su posición.

Muchos Tweens al mismo tiempo



Los tweens (al menos con Actuate), son manipulados siempre siguiendo una línea de tiempo. Ello hace que sean fáciles de poner en práctica, pero en ciertas circunstancias pueden crear algún que otro problema (como veremos en la próxima entrada). Ello le permite a la librería, generar pilas o stacks de tweens para mantener el control de los mismos y que no “compitan” entre sí al momento de renderizar.


La documentación es escasa (como siempre) y la mejor forma de aprender como se utiliza es jugando con ella un poco, así que veamos:


Ya vimos cómo instalarla y agregarla a nuestro proyecto, solo nos queda importarla:


import motion.Actuate;


En el ejemplo vamos a ver 10 formas básicas de manejo de tweens y todo arranca con la creación de un simple sprite:

Cualquier tipo de forma que les guste servirá de todas formas.



Para hacerlo más fácil, los 10 ejemplos se pueden visualizar presionando las teclas del 0 al 9.


La sintaxis general de la función es la siguiente:


Actuate.tween (MiObjeto, tiempo, {accion: valor }, overwrite:Bool ).actuador (accion1). actuador2(accion2)..n;


Entonces tenemos el primer ejemplo:




Donde objeto claro está, en este caso es nuestro Sprite (un insulso rectángulo verde).
Luego tenemos tiempo (expresado en segundos) que puede tomar valores float (0.4..1.3..etc)
Por último las propiedades “objetivo” digamos, o acción que debería tomar Actuate.


El resultado en este caso, será nuestro objeto cambiando de tamaño (largo) en 10 segundos.

Nuestro Tween trabajando
Lo de “en 10 segundos” tómenlo como absoluto hasta la próxima entrada del blog.


Tenemos una idea básica de lo que es un Tween con Actuate. Dentro de las acciones, podemos incluir varias cosas. incluso funciones enteras ,pero los más sencillos son los parámetros de la clase (en este caso un objeto sprite tenemos tamaño, posición, alpha, rotación, etc).



Luego tenemos el parámetro overwrite (Bool) que va a especificar si un nuevo Tween aplicado al mismo objeto, va a sobreescribir las propiedades anteriores del objeto. Por defecto es Verdadero (true) y no hace falta pasarlo a la función como parámetro.

Por último están  los actuadores o modificadores:

Diferentes tweens
Que pueden ser varios, incluso podemos modificarlos o llamar a funciones. dentro de los más comunes o sencillos tenemos:


delay (tiempo): Va a producir una espera (tiempo) antes de comenzar con el tween.
reverse(): Produce el efecto inverso.
snaping(): redondea todos los valores que le pasemos a la función
repeat(valor): vuelve a repetir el tween (x veces), si se deja en blanco es un loop constante.
reflect(): Produce un nuevo tween al finalizar con el efecto inverso, debe ser utilizado juntamente con repeat().


No podían faltar los modificadores ease:


Que son distintas ecuaciones aplicadas para modificar comportamientos. Se le atribuyen a Robert Penner y son muy utilizadas en el campo de la animación.

Diferentes ecuaciones dan como resultado diferentes curvas



No están todas soportadas por Actuate, pero sí las más usuales:


Para terminar, tenemos diferentes funciones para controlar nuestros tweens:


Actuate.stop (MySprite); Detendrá el tween

Actuate.pauseAll (); Pondrá en pausa todos los tweens.

Actuate.pause (MySprite); Pondrá en pausa el tween especificado

Actuate.pause (MySprite, MyOtherSprite); Lo mismo, pero especificando más de uno



Actuate.resumeAll (); Resume todos los tweens

Actuate.resume (MySprite); Resume el tween especificado

Actuate.resume (MySprite, MyOtherSprite); Lo mismo con varios.

Actuate.reset (); Vuelve a inicializar.


Hasta aquí llegamos por hoy. Es una librería muy extensa y creo que es conveniente ir de a poco con ella. Nos vemos en la próxima con ejemplos un poco más elaborados.




Pueden descargar los archivos desde el repo de GitHub.


Antes que me olvide, si alguno le dio curiosidad el Ide que estoy usando, es Atom. Un proyecto de la gente de GitHub basado en Chromiun. Tomaron los fuentes de un Navegador y salió un Editor muy configurable.

La primer versión estable “oficial” estará disponible a principios de Junio, pero hace tiempo que anda dando vueltas. Pueden encontrar algunos PlugIns para Haxe.

Tengan en cuenta que si bien el proyecto hace un tiempo que anda dando vueltas, es medio inestable todavía.

Pueden descargarlo de la página oficial y probarlo. Total no cuesta nada.

Un saludo.-