Ir al contenido principal

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).



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:




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.



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.



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.




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

Comentarios

  1. 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

    ResponderEliminar
  2. por fin joder ¡¡¡¡
    todo 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 ¡¡¡

    ResponderEliminar
    Respuestas
    1. Muchas gracias, a ti, y espero poder agregar más contenido que pueda ser de utilidad. Gracias!

      Eliminar
  3. Estupendo, buscaba algo para un novato y hasta que lo encontré, gracias muy claro y didáctico.

    ResponderEliminar
    Respuestas
    1. Muchas gracias a ti por el comentario y prometo pronto ponerme al día con la publicaciones! Gracias!

      Eliminar
  4. Profe! Muchas gracias por su ayuda!! No sabe el parototote que me hizo!! GRANDE! GRANDE!!

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Efecto "Colorear" en Flash

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.

Hace un par de meses tuve que generar para un banner el efecto de una imagen en tonos de grises que al pasar el mouse encima se vaya "coloreando", este ejercicio me pareció divertido e interesante y por esta razón decidí colocarlo en este blog.

Puedes comenzar a iluminar la imagen de la tortuga en cuanto aparezca.

Para generar este sencillo efecto utilizaremos elementos de: máscaras dinámicas, Sprite, UILoader, además claro de MovieClips y Listeners.

Bueno, pues definamos y acotemos el problema:


Permitir que el usuario pueda "colorear" una imagen con el mouse.Se debe mostrar una imagen inicial y una final ( mo importa si son iguales o no ).Las imágenes deben de ser externas al flash para optimizar su tamaño.Cuando el usuario presione el mouse y luego lo mueva sobre la imagen inicial deberá ir …

Usando Componentes de Flash: Paleta de Colores / Using the Flash Components: Color PIcker

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.

Al desarrollar en Flash Professional encontraremos un sinfin de ventajas, una de ellas son las prestaciones visuales, es decir la calidad visual de los elementos que se pueden integrar y también la interactividad y diversidad de ellos.

Cuando es necesario podemos crear nosotros mismos los elementos que necesitemos dependiendo de las características, comportamientos, vista, etc. Para nuestra fortuna existen ya varios elementos de antemano fabricados y diseñados para su correcto funcionamiento e implementación, dichos elementos se llaman "Componentes" y los podemos encontrar en el panel del mismo nombre.

Este es el primer post de una serie donde se platicará de manera práctica acerca de lo sdiferentes componentes que ya incluye Flash. En esta ocasión hablaremos del Color Picker o "Seleccionador de Co…