En este tutorial vamos a explicar como implementar una galeria en AS3 leyendo un archivo XML para su configuración.

1- Creamos nuestro archivo .fla bajo el nombre de galeria.fla y le decimos que como archivo AS3.
2- Ahora sabemos que son una serie de fotos que debemos guardar en una carpeta, Se necesita crear una carpeta Imagenes.
3- Todas estan fotos van hacer llamadas desde un archivo xml , para eso debemos pensar como crear el archivo XML.

Debes crear ciertas etiquetas (nodos) donde cada etiqueta represente una foto con sus propiedades como id_foto, descripcion, imagen.

Podriamos tener lo siguiente:

<galeria titulo=”titulo galeria”>

    <foto id=”1”  imagen=”imagenes/foto1.jpg” descripcion=”texto 1”/>

   <foto id=”2”  imagen=”imagenes/foto1.jpg” descripcion=”texto 2”/>

</galeria>

Con esto observamos como si tuvieramos una tabla galeria y foto es cada uno de sus registros correspondientes a las fotos de la galeria .

El nombre asignado del xml : galeria.xml

4. Ahora debemos proceder a cargar el archivo xml dentro del flash

Cargamos el siguiente código:

var loader:URLLoader = new URLLoader();
var XmlExterno:XML;
var lista:XMLList;

URLLoader , sirve para verificar la carga del archivo.
URLRequest, sirve para cargar un archivo externo.

loader.addEventListener(Event.COMPLETE,cargarXML); //evento de cargar
loader.load(new URLRequest(”galeria.xml”)); //cargar el archivo XML

En donde hemos agregado un listener para detectar que se ha cargado completamente el archivo ,aqui tenemos presente que cuando carga el archivo “galeria.xml” el evento ejecuta una función llamada cargarXML.

function cargarXML(event:Event){
var cargador:URLLoader = event.target as URLLoader;
XmlExterno = new XML(cargador.data);
lista=XmlExterno.children();
total=lista.length();

}

Esta función cargo el XML el contenido del archivo “galeria.xml” y con la variable lista que declare tipo XMLlist puedo leer la lista de los hijos de mi nodo principal

Que serían:

    <foto id=”1”  imagen=”imagenes/foto1.jpg” descripcion=”texto 1”/>

   <foto id=”2”  imagen=”imagenes/foto2.jpg” descripcion=”texto 2”/>

5. Ahora que ya hemos leido el XML continuamos en agregar codigo AS3 para leer las fotos cada vez que doy clic sobre un boton de avanzar e igual tendre un boton de atras para devolver a las fotos anteriores.

Con esto debemos tener 2 botones que pueda ir leyendo los nodos hijos

Los dos botones tendrán los nombres respectivos boton1 y boton2

boton1.addEventListener(MouseEvent.CLICK,siguiente);
boton2.addEventListener(MouseEvent.CLICK,atras);

Para el evento clic de cada uno de los botones leerá la función siguiente y atras.

function siguiente(event:MouseEvent){

   if(i<total-1)i++;

   descripcion.text=lista[i].attribute(”descripcion”);

   fotos.load(new URLRequest(lista[i].attribute(”imagen”)));

}

function atras(event:MouseEvent){

   if(i>0)i–;

   descripcion.text=lista[i].attribute(”descripcion”);

   fotos.load(new URLRequest(lista[i].attribute(”imagen”)));

}

Observamos que en cada función tenemos una variable i que para avanzar se incrementará y para ir atras se decrementará.

Además cada vez que avance o retrocede debe cargar la imagen y la descripción de esa imagen leyendo los atributos imagen y descripción dentro del nodo hijo foto.

    <foto id=”1”  imagen=”imagenes/foto1.jpg” descripcion=”texto 1”/>

Declaramos una variable que se encargara de cargar la foto , esta es la manera cuando utilizabamos loadMovie en AS2

var fotos = new Loader();
addChild(fotos);

Descargar Fuente

Escrito Por:sancano| December 18th, 2008 | Tags: As3, Flash | Category: Flash | Subscribe to comments | Leave a comment | Trackback URL