peivem.com cerrará sus puertas
Esta entrada ha sido publicada en mi nuevo blog, en:
http://www.sebastianbarria.com/web/animacion-en-flash-con-la-clase-tween/
Por favor, visita mi nuevo sitio, porque este lo daré de baja muy pronto. Gracias!

Como lo comentaba en este otro artículo, en flash es posible crear tus propias funciones que te faciliten la realización de animaciones (simples) de algunos objetos. De esta manera, podemos hacer un efecto de fade o de slide a cualquier objeto según las acciones que haga el usuario.

El problema con las funciones anteriores es que, si bien funcionan perfecto, están programadas para realizarse onEnterFrame, y por lo tanto, el objeto al que necesitamos aplicarle la función, debe estar consultando cada frame si es que la ejecuta o no. Mientras sea un archivo pequeño, todo funciona de maravillas, pero si trabajamos con 30 movieclips al mismo tiempo y si algunos de ellos contienen imágenes, tenemos que pensar que vamos a estar haciendo consultas 30 veces en cada fotograma (entre 15 y 30 veces por segundo), y eso a la larga revienta cualquier computador.

Entonces: la solución, es utilizar la clase tween para animar, la cual es una clase que viene "pre-programada" en flash y que nosotros debemos importarla para poder utilizarla. Esto quiere decir que la clase "está ahí, en alguna parte de flash, pero no se carga a menos que se lo solicitemos".

Para utilizarla debemos llamarla (antes del momento en que la vayamos a utilizar) con la siguiente línea:

import mx.transitions.Tween;

De esta manera, le decimos a flash que importe esta clase y la mantenga en memoria para utilizarla.

Ahora el tema es "como la utilizamos". Para generar una animación, basta con crear una nueva instancia de la clase, entregándole los siguientes parámetros:

new Tween(objeto, propiedad_a_modificar, tipo_de_animacion, valor_inicial, valor_final, tiempo, utilizar_segundos);

Esto quiere decir que si necesitamos hacer desaparecer un objeto que está en _root y tiene como nombre de instancia "mi_mc", debemos hacerlo de la siguiente manera:

new Tween(_root.mi_mc, "_alpha", mx.transitions.easing.Strong.easeOut, 100, 0, 1, true);

Así el objeto _root.mi_mc animará su propiedad _alpha con el tipo de animación "strong" y con easing al final de la animación, desde 100 a 0 en un segundo.

Lo bueno de utilizar esta función es que podemos animar cualquier propiedad de cualquier objeto, o incluso podemos hacer funciones adicionales que ejecuten varias tareas a la vez. Lo otro bueno es que no tendremos que llamarla onEnterFrame, sino que podremos llamarla cada vez que necesitemos y que con un solo llamado se ejecuta la animación completa, independiente de los fotogramas que estemos utilizando, pues está basada en el tiempo. Así nuestra película no le pedirá muchos recursos al computador y se verá todo mucho más fluido.

Acá hay un ejemplo de una función para hacer un fadeIn a cualquier objeto:

function fadeIn(obj){
    new Tween(obj, "_alpha", mx.transitions.easing.Strong.easeOut, obj._alpha, 100, 1, true);
}

Como verán esta función reemplaza a la que mencionaba en el post anterior y ocupa menos recursos también.

Descargar el archivo de ejemplo