Imágenes aleatorias en Flash MX

Muchos hemos visto en los portales, que en el lugar de los banners, estos nos cargan de manera aleatoria, es decir, un banner distinto cada vez que entramos, cuyo orden no esta establecido, y además de esto, cambian cada cierto tiempo. Esto se puede hacer de una manera muy interesante y sin necesidad de lenguajes dinámicos del lado del servidor gracias al lenguaje "ActionScript" de Flash MX.

Primero vamos a crear una carga aleatoria de imágenes JPG, y luego, haremos el mismo proceso con archivos SWF.

Carga aleatoria de imágenes

Flash, solo carga dentro de sus películas, imágenes del tipo JPG, así que este deberá ser el formato en el que las traeremos dinámicamente.
Para empezar crearemos una película, la he creado de 300×300 pixeles.
Algo que debemos tener claro antes de iniciar es que DEBEMOS, por buenas costumbres de programación y diseño, tener un tamaño fijo para cada uno de los archivos JPG que vamos a cargar, he creado 5 imágenes, de 170×250 pixeles cada una, otra cosa importante es ponerles un nombre secuencial, mis imágenes se llaman:

1. ima001.jpg
2. ima002.jpg
3. ima003.jpg
4. ima004.jpg
5. ima005.jpg

Ahora vamos a lo interesante, para lograr cargar nuestras imágenes en el escenario, debemos crear un movie clips a donde lleguen los datos, así que he creado un cuadrado de 170*250 pixeles, lo he convertido a movie clip y aquí esta como se debería ver en el escenario:

Si se fijan bien notaran que el punto de registro (Es decir, el centro del movie clip) se encuentra en la esquina superior izquierda; esto es porque ese es el punto (0,0) del movie clip, así que esa será la esquina donde se cargaran las imágenes.

Como hacer para que al crear el movie clip el punto de registro nos quede allá arriba??? xD

Noten la posición del cuadrito negro de "Registration", esta en la esquina superior izquierda.

Ahora si, lo interesante, digamos que queremos que se cargue una nueva imagen cada 20 segundos; así que, tendremos que crear 240 frames (Suponiendo que la película anda a 12fps, entonces 20segs*12frames=240); y colocar el código en el primer Keyframe de la película, así cada vez que la línea de tiempo pase por el primer frame (Osea, cada 20 segundos si son 240 frames) la carga de la imagen volverá a ser invocada y aparecerá una nueva.
Antes de continuar, coloquémosle un nombre de instancia a nuestro movie clip; se llamara "imagenes_mc"

Y lo que todos estaban esperando (Sonido de redoblante no encontrado )
El código ActionScript!!!!!!!!!!!, producto de varias semanas de investigación sin dormir, dejar de lado todo tipo de placeres terrenales y no poder conectarme a Matrix de nuevo(Lo cual me ha creado un problema legal); aquí están las interminables líneas de código ActionScript
Este, colóquenlo en el primer KeyFrame

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

Reto a ver esa línea y no reirse, pero si la analizan, si tiene sus pequeñas cosas raras. Así que analizemosla

imagenes_mc; pues nada, ese es el nombre del movie clip que cargara las imágenes

loadMovie; esa es la instrucción que nos carga las imágenes y recibe por parámetro, el nombre de la imagen a cargar, es ahí donde entra lo interesante

"ima00" es el prefijo por el que inician todas las imágenes, verdad???.
El operador "add" concatenara dos valores en uno solo, este operador nos será útil para unir la cadena de caracteres (String) "ima00", con el valor aleatorio de 1 a 5.
Por que de 1 a 5?: en el disco duro tenemos 5 imágenes cuyo nombre de archivo solo tiene una diferencia, un solo numero que indica cual es, así que ese numero es el que debemos generar aleatoriamente, como?, tenemos esto:

(1+random(5))

La función "random", recibe por parámetro un numero, en este caso "5", y devolverá un numero aleatorio con ese rango, o sea, generara cualquiera de estos numero [0,1,2,3,4], 5 números aleatorios de 0 a 4, cualquiera de ellos; pero no nos sirve!!!!, necesitamos que los genere de 1 a 5; por eso le sumo 1 al resultado, así siempre nos va a devolver un numero de 1 a 5

Por ultimo, tenemos que vuelve un operador "add" a concatenar todo lo anterior con la extensión de los archivos, o sea ".jpg"

Con estos sencillos pasos (Que los hago ver complicados es otra cosa ) hemos creado un cargador aleatorio de imágenes que podrá ser encapsulado en un componente o un movie clip para su posterior uso distribuido en sus futuras animaciones en Flash.
Al final, la línea de tiempo debió quedarles así:

Ok, me dirán que hay no hay 240 frames, … pero, creen que iba a meter una foto de mi línea de tiempo con 240 frames???; creo que no les gustaría hacer Scroll horizontal.

Fin

Bueno, Freddie, tu también prometiste hacerlo con archivos SWF para los banners

Ok, ok, lo acepto, el articulo aun no termina, pero no es mucho lo que hay que decir, se utiliza una técnica exactamente igual, para los archivos SWF, solo cámbiales la extensión en el código, y listo!!!! (Obviamente, también los nombras como movie001.swf, movie002.swf, ETC!)

Espero que tengan suerte haciendo esto (La van a necesitar [risas], pase 2 horas buscando un error que consistía en que el código estaba en el movie clip y no en el frame, así que de lección queda ver siempre la ventanita del output y no cerrarla instintivamente [:)] )

Aquí está cómo debería verse.
Descarguen el ejemplo completo aquí.

Deja un comentario