/// DESIGN-ROOT /// Diseño, usabilidad y animación web

Las extensiones de Flash son archivos .mxp que permiten añadir comandos, herramientas y componentes de todo tipo a la interfaz de Flash ampliando así las posibilidades del programa.

Empezaremos por algo sencillo, las extensiones MotionTween que permiten controlar la posición de los objetos del esnerario estableciendo las propiedades _x, _y por medio de actionscript ahorrándonos el trabajo (y tiempo) de crear las animaciones tradicionalmente (con interpolación de movimiento).

1.- Instalar el módulo Extension Manager necesario para añadir o eliminar una extensión.

2.- Descárgate en http://laco.wz.cz/tween/ un zip con extensiones MovieClip.tween() para crear animaciones de posición _x e _y. Para instalarla, bastará con hacer doble clic sobre el archivo. Automáticamente se añadirá a la ventana de Extension Manager.

3.- Una vez instalada, necesitamos las clases (.as) _tween() para esta extensión que podemos descargarnos en la misma web, en el siguiente enlace: http://laco.wz.cz/tween/files/lmc_tween120.zip

En el archivo zip encontramos, entre otros, los dos archivos que nos interesan (ambas para Flash Player 6):

"lmc_tween.as" para ActionScript 2.0

"lmc_tween_as1.as" para ActionScript 1.0

4.- El uso de esta clase en flash viene definida de la siguiente forma:

my_mc.tween(property, pEnd, seconds, animType, delay, callback);

property - en nuestro caso, _x e _y, pero se puede utilizar para variar otras propiedades como el _alpha, _rotation, _width, _height,…

pEnd - el valor de la propiedad

seconds - duración de la animación

animType - tipo de la animación, que son las siguientes:

"linear",
"easeInQuad","easeOutQuad","easeInOutQuad","easeOutInQuad"
"easeInCubic","easeOutCubic","easeInOutCubic","easeOutInCubic"
"easeInQuart","easeOutQuart","easeInOutQuart","easeOutInQuart"
"easeInQuint","easeOutQuint","easeInOutQuint","easeOutInQuint"
"easeInSine","easeOutSine","easeInOutSine","easeOutInSine"
"easeInExpo","easeOutExpo","easeInOutExpo","easeOutInExpo"
"easeInCirc","easeOutCirc","easeInOutCirc","easeOutInCirc"
"easeInElastic","easeOutElastic","easeInOutElastic","easeOutInElastic"
"easeInBack","easeOutBack","easeInOutBack","easeOutInBack"
"easeInBounce","easeOutBounce","easeInOutBounce""easeOutInBounce"

delay - segundos para que empiece la animación

callback - la función a la que llamará al terminar la animación.

————————————————————————————-

Siguiente paso, crear las animaciones en la película Flash. Vamos a animar un movieclip que inicialmente se encuentra fuera del escenario y lo vamos a cambiar su propiedad _x para que sea igual a 500.

1.- Lo primero será guardar la clase lmc_tween.as en el mismo directorio que la película flash, puesto que relacionaremos película y clase mediante un #include. En el primer fotograma de la película escribimos el siguiente script para cargar la clase:

#include "lmc_tween.as"

2.- Creamos el movieClip al que le aplicaremos la animación. Lo nombramos, por ejemplo, clip.

3.- Para utilizar las clases necesitamos crear una función, y las funciones sólo las podemos aplicar a MovieClips, de modo que crearemos un clip que será el que al hacer click sobre él ejecute la función. Nombramos a este movieclip accion, por ejemplo.

4.- Creamos la función:

accion.onRelease = function() {
clip.tween("_x", 500, 0.5, "customEasing");

}

5.- Exportamos la película. Al pulsar sobre el clip "accion" debería desarrollarse la animación con el moviclip "clip".

————————————————————————————-

Recomiendo probar todos los tipos de animación _tween() para familiarizarse con las clases. En los siguientes enlaces puedes ver ejemplos prácticos:

http://laco.wz.cz/tween/?page=examples