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).
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:
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.
Y en la función que le corresponde sólamente haremos que se muestre el contenido del "cargador".
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.
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".
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:
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:
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.
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:
Muy buen tutorial, en general me parecen buenos los tutoriales de este Blog, pero estaría excelente postear algo un poco mas avanzado, de clases AS3, o de Flex, no?, Saludos
ResponderEliminarpor fin joder ¡¡¡¡
ResponderEliminartodo el dia buscando esta información, y nadie daba una respuesta clara amigo :)
mas claro imposible :)
añadido a la lista de favoritos
infinitas gracias
VIVA MEJICO ¡¡¡
Muchas gracias, a ti, y espero poder agregar más contenido que pueda ser de utilidad. Gracias!
EliminarEstupendo, buscaba algo para un novato y hasta que lo encontré, gracias muy claro y didáctico.
ResponderEliminarMuchas gracias a ti por el comentario y prometo pronto ponerme al día con la publicaciones! Gracias!
EliminarProfe! Muchas gracias por su ayuda!! No sabe el parototote que me hizo!! GRANDE! GRANDE!!
ResponderEliminar