/// 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

En ocasiones nos puede interesar mostrar una imagen diferente (y de forma aleatoria) en un flash cada vez que se carga la página web que lo contiene. Para ello hay que seguir los siguientes pasos:

1.- Creamos las imágenes que queremos cargar de forma aleatoria, por ejemplo 5. Convendrá que todas las imágenes tengan el mismo tamaño y formato. Las llamamos de forma secuencial img001.jpg, img002.jpg, etc…

2.- En la película flash, creamos un movieclip y lo nombramos "imagenes_mc". Aquí es donde se cargarán las imágenes aleatoriamente.

3.- En el primer fotograma clave de la misma linea de tiempo ponemos la siguiente acción:

imagenes_mc.loadMovie ("img00" add (1+random(5)) add ".jpg");

"imagenes_mc" donde se cargan las imágenes, loadMovie la instrucción que carga una película/imagen en la película actual, para lo que definimos "img00" el nombre de la imagen más un número aleatorio del 1 al 5 (número de imágenes) más la extión del archivo .jpg

Sencillo verdad? :)