galeria imagenes xml

Creado a las // comentar

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
}
}

0 comentarios: