galeria imagenes xml

Este tutorial mostrará cómo crear fácilmente una sencilla galería de imágenes en Flash con ActionScript 3 y XML. Puedes ver el resultado final y descargar el archivo .fla completamente comentado y el archivo XML usado.

Para este ejercicio hemos usado:

1. Un archivo .fla el cual contiene dos botones (anterior_btn y siguiente_btn) y una caja de texto dinámico (descripcion_txt).
2. Una carpeta llamada imagenes que naturalmente contiene las fotos que usamos en el ejercicio.
3. Un archivo XML el cual tiene como atributos de sus etiquetas un id, la ruta de las imagenes (imagen) y una descripción.

En la línea de tiempo principal del .fla se encuentra el script:

var carga:URLLoader = new URLLoader(); //define una variable carga de tipo URLLoader que servirá para cargar el archivo XML

var xmlExterno:XML; //define una variable xmlExterno de tipo XML

var i:Number=0; //esta variable inicializada en O permitira navegar dentro de los nodos del XML

var lista:XMLList; //define una variable lista de tipo XMLList la cual es una clase que permite interactuar con los nodos del archivo XML

var total:Number; //esta variable corresponderá mas adelante al número de nodos hijos del XML

var fotos = new Loader(); //define una variable fotos de tipo Loader la cual es una clase que sirve para cargar imagenes o swf externos

addChild(fotos); //ubica en el stage el "contenedor" de las imagenes

fotos.x = 100; //posicion x de las imagenes que se cargaran

fotos.y=50; //posicion y de las imagenes que se cargaran

carga.load(new URLRequest("galeria.xml")); //el metodo load carga la información que el URLRequest captura del XML

carga.addEventListener(Event.COMPLETE,cargarXML); //agregamos un listener a la carga para que ejecute la función cargarXML cuando la carga del XML se complete

function cargarXML(evento:Event) //funcion ejecutada por el listener, por ese motivo recibe como parametro la variable evento de tipo Event

{

xmlExterno = new XML(evento.target.data) //a la variable xmlExterno se le asigna los datos cargados por la variable carga

lista=xmlExterno.children(); //la variable lista guarda los nodos "hijos" del nodo principal del XML

total=lista.length(); //la variable total guarda el número de nodos que en este caso es el número de imágenes

descripcion_txt.text=lista[i].attribute("descripcion"); //asigna al texto dinamico descripcion_txt el contenido del atributo descripcion el primer nodo

fotos.load(new URLRequest(lista[i].attribute("imagen"))); //carga la imagen que se encuentra en la ruta descrita en el atributo imagen del primer nodo

}

siguiente_btn.addEventListener(MouseEvent.CLICK, siguiente); //listener del boton siguiente que ejecuta la función siguiente

anterior_btn.addEventListener(MouseEvent.CLICK, atras); //listener del boton anterior que ejecuta la función atras

function siguiente(event:MouseEvent)

{

if (i

{

i++;

descripcion_txt.text=lista[i].attribute("descripcion"); //asigna al texto dinamico descripcion_txt el contenido del atributo descripcion

fotos.load(new URLRequest(lista[i].attribute("imagen"))); //carga la imagen que se encuentra en la ruta descrita en el atributo imagen

}

}

function atras(event:MouseEvent)

{

if (i>0) //si se esta mostrando la segunda foto (cuando i=1) o siguientes

{

i--; //reduce en 1 el valor de i

descripcion_txt.text=lista[i].attribute("descripcion"); //asigna al texto dinamico descripcion_txt el contenido del atributo descripcion

fotos.load(new URLRequest(lista[i].attribute("imagen"))); //carga la imagen que se encuentra en la ruta descrita en el atributo imagen

}

}