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 300x300 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 170x250 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í.
|