Comunidad de diseño web y desarrollo en internet

Banners en Flash, imagenes y carga aleatoria

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

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

Carga aleatoria de imagenes

Flash, solo carga dentro de sus peliculas, imagenes del tipo JPG, asi que este debera ser el formato en el que las traeremos dinamicamente.
Para empezar crearemos una pelicula, 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 imagenes, de 170x250 pixeles cada una, otra cosa importante es ponerles un nombre secuencial, mis imagenes 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 imagenes en el escenario, debemos crear un movie clips a donde lleguen los datos, asi que he creado un cuadrado de 170*250 pixeles, lo he convertido a movie clip y aqui esta como se deberia ver en el escenario :

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, asi que esa sera la esquina donde se cargaran las imagenes.

Como hacer para que al crear el movie clip el punto de registro nos quede alla arriba??? xD
El puntito de registro, ese escondido feature de Flash MX :D
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; asi que, tendremos que crear 240 frames (Suponiendo que la pelicula anda a 12fps, entonces 20segs*12frames=240); y colocar el codigo en el primer Keyframe de la pelicula, asi cada vez que la linea de tiempo pase por el primer frame (Osea, cada 20 segundos si son 240 frames) la carga de la imagen volvera a ser invocada y aparecera una nueva.
Antes de continuar, coloquemosle un nombre de instancia a nuestro movie clip; se llamara "imagenes_mc"

Y lo que todos estaban esperando (Sonido de redoblante no encontrado )
El codigo 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); aqui estan las interminables lineas de codigo ActionScript
Este, coloquenlo en el primer KeyFrame

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

imagenes_mc; pues nada, ese es el nombre del movie clip que cargara las imagenes

loadMovie; esa es la instrucciòn que nos carga las imagenes y recibe por parametro, el nombre de la imagen a cargar, es ahi donde entra lo interesante

"ima00" es el prefijo por el que inician todas las imagnes, verdad???.
El operador "+" concatenara dos valores en uno solo, este operador nos sera util 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 imagenes cuyo nombre de archivo solo tiene una diferencia, un solo numero que indica cual es, asi que ese numero es el que debemos generar aleatoriamente, como?, tenemos esto:

(1+random(5))

La función "random", recibe por parametro un numero, en este caso "5", y devolvera un numero aleatorio con ese rango, osea, generara cualquiera de estos numero [0,1,2,3,4], 5 numeros aleatorios de 0 a 4, cualquiera de ellos; pero no nos sirve!!!!, necesitamos que los genre de 1 a 5; por eso le sumo 1 al resultado, asi siempre nos va a devolver un numero de 1 a 5

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

Con estos sencillos pasos (Que los hago ver complicados es otra cosa :D) hemos creado un cargador aleatorio de imagenes que podra ser encapsulado en un componente o un movie clip para su posterior uso distribuido en sus futuras animaciones en Flash.
Al final, la linea de tiempo debio quedarles asi:

Y si no les quedo asi,..... no doy soporte tecnico :D

Ok, me diran que hay no hay 240 frames, ... pero, creen que iba a meter una foto de mi linea de tiempo con 240 frames???; creo que no les gustaria hacer Scroll horizontal.

FIN

Bueno, Freddie, tu tambien 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 tecnica exactamente igual, para los archivos SWF, solo cambiales la extensión en el codigo, y listo!!!! (Obviamente, tambien 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 consistia en que el codigo estaba en el movie clip y no en el frame, asi que de lección queda ver siempre la ventanita del output y no cerrarla instintivamente [:)] )

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate