Uso de XML con Flash y Actionscript 3.0 / Using XML with Flash and Actionscript 3.0

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

En el manejo de tecnologías web, existe una muy importante que nos permite organizar y visualizar información, esta tecnología es el XML que significa algo así como Lenguaje de Marcas (ó etiquetas mas bien) Extensible, si quieren conocer un poco más del tema aquí hay un link (español) y aquí otro (inglés).

Una ventaja de usa esta tecnología es que la información que coloquemos es este tipo de archivos se puede usar para visualizarse en diferentes interfaces con diferente tecnología, por ejemplo: un mismo archivo XML nos puede servir para almacenar el inventario de una tienda y que sea visualizado en una página web usando HTML, al mismo tiempo en una aplicación de escritorio usando AIR ( proximamente un post al respecto ) y hasta un archivo swf local, todas estas aplicaciones utilizando el mismo XML de manera que al actualizar dicho archivo, los contenidos en cada aplicación cambian.

En esta publicación manejaremos un archivo XML utilizando AS 3.0 para crear una pequeña galería de imágenes, como en el ejemplo siguiente:




Nota: si no se visualiza el ejemplo, se uede ver aquí

Para lograr la aplicación previa necesitaremos seguir los pasos a continuación.

1.- Crear el XML.
2.- Leer el XML desde Flash.
3.- Crear las imágenes y textos dinámicamente en correspondencia al XML.

1.- Creando el XML

El objetivo de este post no es hablar del formato XML (pronto un post al respecto), sino de utilizarlo en nuestro Flash, así que sólo describiremos la estructura que se usará. Para crear nuestro XML se puede usar cualquier editor de texto, sólo es necesario guardar el archivo con la extensión XML (en lo particular normalmente utilizo Adobe Dreamweaver).

Utilizaremos un nodo principal que se llamará "lugares" quedando el código de esta manera:

<?xml version="1.0" encoding="utf-8"?>

<lugares>

</lugares>

Dentro del nodo principal, colocaremos los nodos que definirán cada elemento en Flash, y cada uno de estos nodos se llamarán "locacion", agreguemos el primero:

<?xml version="1.0" encoding="utf-8"?>

<lugares>

           <locacion>

           </locacion>

</lugares>

Cada uno de estos nodos se usará para almacenar la información que Flash colocará en pantalla, así que coloquemos la información que necesitamos para la galería: nombre del archivo de la imagen y una descripción en diferentes nodos, quedando el siguiente código:

<?xml version="1.0" encoding="utf-8"?>

<lugares>

<locacion>

<imagen>Bangkok.jpg</imagen>

<info continente="asia">Bangkok siempre misterioso</info>

</locacion>

</lugares>

Es bueno aclarar que podemos agregar ciertos parámetros en los nodos, como por ejemplo en el nodo "info" agregamos el parámetro "continente" que podremos usar para hacer filtros de búsqueda en Flash.

Y de esta manera agregamos tantos nodos como sean necesarios. En el ejemplo se utilizarán 9 en total, y tendremos el siguiente código final para el XML:

<?xml version="1.0" encoding="utf-8"?>

<lugares>

<locacion>

<imagen>Bangkok.jpg</imagen>

<info continente="asia">Bangkok siempre misterioso</info>

</locacion>

<locacion>

<imagen>Brasil.jpg</imagen>

<info continente="america">Brasil y su carnaval</info>

</locacion>

<locacion>

<imagen>Egypt.jpg</imagen>

<info continente="africa">Egipto ciudad mítica</info>

</locacion>

<locacion>

<imagen>London.jpg</imagen>

<info continente="europa">Londres con su Big Ben</info>

</locacion>

<locacion>

<imagen>Mexico.jpg</imagen>

<info continente="america">Verano en México</info>

</locacion>

<locacion>

<imagen>New_York.jpg</imagen>

<info continente="america">Los rascacielos de New York</info>

</locacion>

<locacion>

<imagen>Paris.jpg</imagen>

<info continente="europa">Torre Eiffel en París</info>

</locacion>

<locacion>

<imagen>Rome.jpg</imagen>

<info continente="europa">Roma y su Coliseo</info>

</locacion>

<locacion>

<imagen>Venece.jpg</imagen>

<info continente="europa">Las calles de Venecia</info>

</locacion>

</lugares>

Finalmente la manera de interpretar el XML es que tiene un nodo principal (root) llamado "lugares", y dentro tiene 9 nodos llamados "locacion", que a su vez tienen los nodos "imagen" y "info" donde encontraremos la información para Flash. Guardemos este archivo como "galeria.xml".

2.- Leer el XML desde Flash.

Desde la incorporación de Actionscript 3.0 la manera de leer un XML es mucho más fácil, gracias a una nueva herramienta llamada E4X (ECMAScript for XML) que ayuda a trabajar de manera mas fácil e intiutiva con archivos XML (incluyendo archivos XML dinámicos).

La clase principal de esta herramienta es (claro) la clase XML, que vamos a utlizar para acceder a los datos de nuestro archivo. Así que lo primero que haremos será crear un nuevo archivo de Flash (AS3 por supuesto) donde en el primer y único frame de la línea de tiempo y desde el panel de acciones crearemos la variable "cargador" que será quien buscará y cargará el archivo XML que tenemos; este "cargador" será una variable de tipo URLLoader (dentro de poco también habrá un artículo al respecto).

var cargador:URLLoader=new URLLoader();

Este "cargador" tiene la capacidad de cargar algún archivo externo, que podría ser un archivo txt o un XML en este caso, para hacerlo se necesita especificarle la dirección del archivo utilizando un objeto URLRequest (prometo que pronto estarán todos estos artículos), de tal forma que la variable queda inicializada de la manera siguiente:

var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") );

A esta variable "cargador" le asignaremos un listener (en verdad todos estos artículos pronto los verán) que detectará cuando termine de cargar el archivo con el evento Event.COMPLETE, ya que no podemos utilizarlo sin cargarlo por completo.

var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista);

Y en la función que le corresponde sólamente haremos que se muestre el contenido del "cargador".

var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { trace( cargador.data ); //pueden intentar/you can try: trace( e.target.data ); }


Y al correr la película deben ver el mismo archivo XML pero desde el panel Output de Flash!!!!!

En este punto ya hemos podido leer un archivo externo XML, pero ¿cómo trabajar con él y sus datos dentro?

Vamos a generar una nueva variable que será global para poder acceder a ella en todo momento llamada "datosXML" que será de tipo XML.


var datosXML:XML; var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { trace( cargador.data ); //pueden intentar/you can try: trace( e.target.data ); }


Ahora vamos a modificar nuestro código de manera que cuando el "cargador" termine de cargar el archivo le asigne esa información a nuestra variable "datosXML" y después acceder a sus datos. Ahora modificamos el mensaje que habíamos colocado para poner ahora otro pero mostrando la variable "datosXML".

var datosXML:XML; var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { datosXML = new XML(e.target.data); trace( datosXML ); }


Listo!!! Hemos asignado la información de un XML externo a una variable de nuestro Flash y ahora podemos ver sus nodos y usarlos para nuestra aplicación.

A continuación algunos códigos que serán de gran ayuda para trabajar con XML:


var datosXML:XML; var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { datosXML = new XML(e.target.data); trace( datosXML ); //Esto nos muestra la cantidad de objetos dentro del nodo principal que tenemos trace( datosXML.children().length() ); /*Este código hace lo mismo pero aquí podemos escribir el nombre del nodo que será el elemento que usaremos "locacion"*/ trace( datosXML.locacion.length() ); /*Para seleccioanr específicamente un nodo podemos usar este código, donde indicamos el índice que queremos ver, igual que un array el primer índice es 0, en este caso usamos 2, es importante usar sólo índices que sabemo sque existen, en caso contrario nos mostrará un error*/ trace( datosXML.locacion[2]) ); /*Con este código también podemos "filtrar" los resultados, en este caso filtramos los nodos donde info tenga como parámetro continente igual a "asia" */ trace( datosXML.locacion.info.(@continente=="asia") ); }

Perfecto!
Ahora que conocemos bien el funcionamiento de un XML con AS3 podemos usar este archivo para generar nuestra galería.

3.- Crear las imágenes y textos dinámicamente en correspondencia al XML

IMPORTANTE: Hasta este punto hemos podido leer un XML con AS3, pero es necesario que además del archivo XML también tengamos a la mano las imágenes que utilizaremos, con los nombres correspondientes a los nodos del XML.

Vamos a basarnos en el siguiente código para continuar:

var datosXML:XML; var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { datosXML = new XML(e.target.data); trace( datosXML ); }

Lo que haremos será utilizar el XML para saber cuántas y cuáles imagenes colocaremos en nuestra galería, entnces necesitaremos saber exactamente cuántos nodos existen al leer el archivo XML; para esto utilizaremos otra variable global que llamaremos "numeroElementos" a la que le asignaremos el número de nodos del XML, esta variable será de tipo entera y positiva.

var datosXML:XML; var numeroElementos:uint; var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { datosXML = new XML(e.target.data); numeroElementos = datosXML.locacion.length(); trace( "Existen "+numeroElementos+" nodos" ); }

Ahora en base a este número y utilizando un ciclo for (antes de que se acabe el mundo también un post de ciclos) colocaremos una imagen y su texto correspondiente tantas veces como nodos tenga el XML.

Primero hagamos los ciclos:


var datosXML:XML; var numeroElementos:uint; var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { datosXML = new XML(e.target.data); numeroElementos = datosXML.locacion.length(); for(var i:uint=0;i<numeroElementos;i++){ trace( "Elemento "+i ); trace( "El archivo de imagen es "+datosXML.locacion[i].imagen ); trace( "El texto de este elemento es "+datosXML.locacion[i].info ); trace("-----------------------------------------------------------") } }

Al reproducir la película nos daremos cuenta de que el ciclo for recorre uno por uno cada nodo con ayuda de la variable "i", que también utilizamos para mostrar cada nodo. Al crear el ciclo for le indicamos que comenzará su variable "i" en 0, y que irá aumentando de uno en uno mientras sea MENOR que el total de nodos del XML, es importante recordar que si el archivo XML tiene por ejemplo 4 nodos en total, entonces el primer nodo tendrá el índice 0 y el último el índice 3.

El siguiente paso será colocar las imágenes y los textos adecuadamente. Comencemos con las imágenes.

Para colocar imágenes usaremos un "Loader", que es un objeto que permite cargar en este caso imágenes.


var datosXML:XML; var numeroElementos:uint; var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { datosXML = new XML(e.target.data); numeroElementos = datosXML.locacion.length(); for(var i:uint=0;i<numeroElementos;i++){ trace( "Elemento "+i ); //trace( "El archivo de imagen es "+datosXML.locacion[i].imagen ); var imagen:Loader = new Loader(); imagen.load( new URLRequest(datosXML.locacion[i].imagen) ); addChild(imagen); trace( "El texto de este elemento es "+datosXML.locacion[i].info ); trace("-----------------------------------------------------------") } }
Si reproducimos la película notaremos que las imágenes se colocan en la misma posición cubriendose unas a otras, posiblemente sólo se vea la que queda sobre todas las demás. Podemos corregir esto colocando cada imagen en diferente posisción.

En nuestro ejemplo cada imagen mide 200x200, así que usaremos ese dato para colocarlas a manera de que se ubiquen en orden del XML.

var datosXML:XML; var numeroElementos:uint; var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { datosXML = new XML(e.target.data); numeroElementos = datosXML.locacion.length(); for(var i:uint=0;i<numeroElementos;i++){ trace( "Elemento "+i ); //trace( "El archivo de imagen es "+datosXML.locacion[i].imagen ); var imagen:Loader = new Loader(); imagen.load( new URLRequest(datosXML.locacion[i].imagen) ); imagen.x = 210*i; addChild(imagen); trace( "El texto de este elemento es "+datosXML.locacion[i].info ); trace("-----------------------------------------------------------") } }

Listo!! Ya tenemos una galería dinámica con AS3, ahora debemos colocar el texto debajo de cada imagen, y para eso haremos un proceso muy parecido, esta vez usaremos un TextField de anchura 200 (la anchura de las imágenes) que colocaremos 5 pixeles debajo de cada imagen.


var datosXML:XML; var numeroElementos:uint; var cargador:URLLoader=new URLLoader( new URLRequest("galeria.xml") ); cargador.addEventListener(Event.COMPLETE, cargaLista); function cargaLista (e:Event) { datosXML = new XML(e.target.data); numeroElementos = datosXML.locacion.length(); for(var i:uint=0;i<numeroElementos;i++){ trace( "Elemento "+i ); //trace( "El archivo de imagen es "+datosXML.locacion[i].imagen ); var imagen:Loader = new Loader(); imagen.load( new URLRequest(datosXML.locacion[i].imagen) ); imagen.x = 210*i; addChild(imagen); trace( "El texto de este elemento es "+datosXML.locacion[i].info ); var texto:TextField=new TextField(); texto.width=200; texto.text=datosXML.locacion[i].info; texto.y=imagen.y + 205; //5 pixeles debajo de la imagen texto.x= imagen.x; addChild(texto); } }

Excelente!!!! Hemos logrado terminar una galería dinámica usando XML y AS3 !!!!!

Debo comentar que este post tiene como objetivo el manejo básico de un XML con AS3, el ejemplo que seutilizó se puede mejorar ampliamente, pero creo que es un buen comienzo.

Como siempre aquí encontrarán los archivos fuente de este ejemplo, y en esta ocasión agregé un archivo más con la variante de organizar en filas y columnas.

Espero les sea de utilidad esta publicación y debo agradecer a cada visitante del blog ya que se han superado las 3000 visitas. Por otro lado pronto habrá noticias acerca de La Casa de León, gracias y felices códigos!!!!