Estás en: Cristalab > Tutoriales > Galería de imagenes en flash con loadMovie

Galería de imagenes en flash con loadMovie

Por: Ereb

24 de Enero del 2006

1333 de clabLevel
Otros artículos de Ereb

241,962 visitas

Algunas veces necesitamos tener una pequeña galeria dentro de nuestros sites, o simplemente desarrollar una, en ésta ocasión haremos una utilizando loadMovie() y un poco de html (el cual está limitado a algunos atributos los cuales podremos ver en Lista de Etiquetas HTML soportadas en Flash MX).

Esta galería puede trabajar con imagenes JPG y GIF, las cuales son unas de las más comunes, escencialmente una vez desarrollada y deseamos modificarla sólo necesitaremos modificar algunas variables dentro de Flash, sin mas ni mas comencemos.

Creación de Variables

En el primer frame agregamos todo el código que abajo se muestra, comenzaremos creando variables:

Galeria Loadmovie Variables

archivo: Nombre del archivo de .TXT del cual tomará los datos del título y la descripción de la imagen.
ruta: Nos indica la ruta de las imagenes (si descargas el ejemplo notarás que las imagenes deberán de estar en la carpeta "Galeria") y el nombre del archivo que asignamos (preferiblemente todos los archivos de imagen deben de de tener el mismo nombre e identificarlos por un número al final ej. imagen1.jpg, imagen2.jpg etc.
ext: Puede ser .JPG o .GIF.
total: Con esta viarable indicaremos el número de imagenes que deseamos cargar.
i: Variable que nos servirá de contador para la carga de las imagenes..

Cargamos el archivo de texto

En nuestro caso el archivo lleva por nombre "Galeria.TXT", es un archivo creado con el Bloc de Notas tipo UTF-8, recordemos que para iniciar una variable lo debemos de hacer con & (ampersan):

Bueno pero regresemos a donde estábamos que es con el código, a continuación se muestra el código que utilizarmos para realizar la carga de nuestro archivo TXT:

La primera asignamos las variables del archivo TXT a la variable "carga" (que es nuestra variable interna en Flash).
La segunda línea indicamos que permita el uso de código HMTL.
La tercera línea una vez cargadas las variables asignamos una función que llevará por nombre "ok" a "carga" y en la línea 8cerramos la función.
La cuarta y la septima línea creamos y cerramos la condición if() de la función "ok"
En la quinta línea le indicamos que a la variable "describe" (que es la que nos muestra la descripción de la imagen), va tomar los datos del archivo que se está cargando en la variable "carga" y toma la variable "texto"que se encuentra en el archivo TXT, de igual modo le asignamos el número de texto con la variable "i", que si recuerdan tiene el valor 1, entonces la podríamos interpretar como "texto1".
En la sexta línea de igual modo que la anterior cargamos en la variable "titulo", la variable "titulo" que se encuentra en el archivo TXT.
La septima línea se encarga nuevamente de cargar el archivo "Galeria.TXT"
Ahora en ésta última linea pondremos un poco más de atención, ya que aquí es donde realizamos la carga de la primera imagen utilizando loadMovie(), se notará que que iniciamos con puras variables y al final le indicamos que se cargará en un Movie Clip llamado "contenedor", nuevamente recordemos el valor de nuestras variables y la línea se podría leer así:

loadMovie("\\galeria\image1.jpg", "contenedor");

Pero si utilizarmos el código directamente así, únicamente nos cargaría una imagen y como en nuestro caso tendríamos que hacerlo 6 veces, ya no sería práctico el estar modificando una cantidad de líneas, es por eso que estamos manejando la mayor parte en variables.

Código para los botones

A continuación mostraremos el código que llevará nuestros botones para realizar el cambio de la imagen y el contenido de nuestra descripción:

Como se notarán que el código cambia solamente en algunas líneas que brevemente explicaremos:

La línea uno le indicamos que al presionar el botón que lleva por nombre "sig_btn" se asigna una función, la cual indica que si "i" es menor a "total", entonces le incremente el valor a "i" quedando con un valor de 2 hasta así llevar al total de imagenes que es 6 y así nuevamente cargar el archivo "Galeria.TXT" y que cargue la imagen2.jpg.
- Para el botón de retroceso utilizaremos un código similar al anterior con las diferencias de que primero restaremos 1 y le diremos que cuando "i" sea mayor a 1 ejecute el código que ya hemos explicado.

Simbolos

Ya creado todo nuestro código empezaremos a crear los simbolos que utilizaremos en nuestra pequeña galeria, es aconsecable que el código quede en un frame vacio y crear una nueva línea de tiempo donde podríamos poner todos nuestros simbolos

Primero necesitamos crear un MovieClip en el cual crearemos un cuadrado de W 389.9 x H 298, y quedeberemos centrar del siguiente modo:

Esto es por que las imagenes que se manejan en este ejemplo son de 400 x 300 pixeles, lo cual es totalmente modificable, pero hay que recordar modificar el tamaño de nuestra película para que no tengamos problemas al momento de ejecutarla, ya por último le podremos el nombre de instancia "contenedor".

Ya por último crearemos un botón (que también se pueden crear dos, uno para sig y otro para anterior), y lo duplicamos en nuestra escena y les pondremos el nombre de instancia "sig_btn" y "ant_btn" respectivamente.

Con esto daríamos por terminado nuestra galería, solo un último detalle, en el caso de ser utilizada en internet les recomiendo que las rutas sean completas es decir "archivo=http://www.tusitio.com/galeria.txt" al igual que para las imagenes "ruta=http://www.tusitio.com/galeria/imagen".

Información adicional

Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Cristalab