Creación de Menu dinamico con Flash y XML

Creación de Menu con Flash y XML

Prácticas y Ejemplos de XML y Adobe Flash

Este tutorial, que pertenece a la serie de Introducción al XML con Adobe Flash, nos muestra como desarrollar un Menú Dinámico con opciones configurables..


Luego de nuestra Introducción al XML, y nuestra Segunda parte Practica, comenzamos a ver la Creacion de un menú con Botones Reutilizables que toman la informacion desde un archivo XML, pueden ver el comienzo de este tutorial acá. Recomendamos la lectura de las dos partes anteriores de nuestro Tutorial de XML para una mejor comprensión.

Comenzaremos creando un archivo XML, yo utilizo Dreamweaver, pero pueden usar cualquier editor de texto, el contenido debe ser asi:

Foro Creativo
http://www.forocreativo.net/


Taller Webmaster
http://www.tallerwebmaster.com/


Solo Photoshop
http://www.solophotoshop.com/


Defino un conjunto general que contiene varios elementos y cada uno de estos, formado por un y un , repitiendose por tantos como botones queremos en nuestro menú, yo use solo 3.

Luego de esto debemos definir el lector de XML en flash, lo cual es muy sencillo.

La carga desde flash se hace sencilla con la función load, que permite cargar un archivo (xml, html, etc), en mi ejemplo usare esta linea:

opcionesXML.load("menu.xml" );

La función load, la podemos personalizar, y a la variable opcionesXML deberíamos declararla antes de usarla, la forma básica es:

var opcionesXML:XML = new XML(); // Declaramos la variable opcionesXML, que sera del tipo XML y contendra un nuevo grupo de datos XML

opcionesXML.ignoreWhite = true; // Con esto prevemos si hay saltos de lineas en blanco, le decimos que lo ignore

opcionesXML.onLoad = function (sucess:Boolean) { // Acá comienza la función de carga definida por nosotros

if (sucess) { // Si todo va bien, hará lo que queremos al cargar ...

/// ACÁ VA LA FUNCIÓN DE CARGA ///

} else { // Si hay algún error ...
trace("Error al Leer archivo XML" ); // mostramos un mensaje de error
}

} // acá termina la función de carga definida por nosotros
Donde dice, /// ACÁ VA LA FUNCIÓN DE CARGA /// <<< es la parte fundamental del cargador, por eso la deje separada para explicarla mejor, tal como ustedes merecen

Para guiarnos, recordemos como era el código para mostrar 1 solo botón:

_root.attachMovie("mcBoton", "boton1", this.getNextHighestDepth());
_root["boton1"]._x = 50;
_root["boton1"]._y = 30;
_root["boton1"].texto = "Foro Creativo";
_root["boton1"].linkurl = "http://www.forocreativo.net/";

Una de las cosas que debemos cambiar es boton1, ya que debe ser automático, boton0, boton1, boton2, es se soluciona fácil haciendo así:

"boton" + i;

siendo i, una variable que cuenta del 0 al 2 (recuerden que los array y xml se cuentan del cero en adelante 0, 1, 2 y no 1, 2, 3 ).

Lo otro que debe cambiar es la posición _y, ya que el botón debe quedar uno debajo de otro, eso es fácil haciéndolo así:

_y = 30 + (i * 50);

en el primer caso que i vale 0, 0 x 50 = 0 + 30 = 30 (queda en la misma posición del primer botón), en el segundo caso, cuando i vale 1, 1 x 50 = 50 + 30 = 80, esa sera la posición del segundo, y el tercero 2 x 50 = 100 + 30 = 130, y así sucesivamente si tuviéramos más botones.

y obviamente, la variable texto y linkurl, cambiaran con los valores del XML que estamos leyendo con load, para cada botón y link.

Explicamos ahora la parte de carga tomando en cuenta lo que comentamos en las lineas anteriores sobre esta función:

var opciones:Array = this.firstChild.childNodes; // Creamos una variable del tipo Array y le asignamos los datos que vienen del XML

for(i = 0; i < opciones.length; i++) { // Comienza a repetirse esta parte del código, tantas veces como elementos hay en el XML

_root.attachMovie("mcBoton", "boton"+i, _root.getNextHighestDepth()); // Creamos un MC copiado del original, tal como explicamos anteriormente

_root["boton"+i]._x = 50; // Su posición horizontal sera a 50 px
_root["boton"+i]._y = 30 + (i * 50); // Su posición vertical va cambiando como explicamos hace un momento

_root["boton"+i].texto = opciones.childNodes[0].firstChild; // Le asignamos el correspondiente texto al botón

_root["boton"+i].linkurl = opciones.childNodes[1].firstChild; // Le asignamos el correspondiente Link a botón

_root["boton"+i].onRelease = function () { // Como todo botón, debemos definir también lo que sucede al presionarlo, ...

getURL(this.linkurl, "_blank" ); // ... en este caso le decimos que llame a la url, en una nueva ventana

} // fin de la función de click en el boton

} // termina la repetición del for

explicare este código para que se entienda la relación con el XML, veamos esta línea:

opciones.childNodes[0].firstChild;

y esta otra línea:

opciones.childNodes[1].firstChild;

opciones es cada uno de los grupos de (recuerden que son 3 que van de 0, 1, 2, marcado esto por i)


Foro Creativo
....


donde...

opciones.childNodes[0]

se refiere al primer elmento del grupo , o sea Foro Creativo y

opciones.childNodes[1]

se refiere al segundo elmento, o sea .... y le agregamos el .firstChild para obtener el texto de adentro de las etiquetas y no estas <> incluidas.

El resultado visual es el mismo, pero claro, tenemos un archivo XML que podemos modificar sin necesidad de reprogramar todo nuestro menú, modificando, eliminando o agregando links, incluso si toman mi SWF y le cambian el archivo XML con el block de notas cambiaran mi menú.

Les dejo el adjunto con el archivo FLA:
Descargar Archivo FLA con los Fuentes de este Tutorial menuXML-3.zip

Acá pueden ver el resultado, aunque como no supe como poner un swf, tuve que poner una imagen:

Creación de Menu dinamico con Flash y XML

Datos Relacionados:
El post Introducción a XML, con Flash, PHP y MySQL - Parte 1

Agradecimientos: Tutorial por Jorge Oyhenard (elQuique) de Developers Live

5 comentarios - Creación de Menu dinamico con Flash y XML

adrigusty
el fla esta bueno pero pusiste el archivo menu.xml yo lo puse pero no me funciona, por favor lo subis. Gracias
pethux
Hermano muchas gracias me sirve mucho la info sigue asi
por fa si puedes postear mas archivos en .fla o ejemplos te lo agradeceria mucho!
Tetsuo
hola, el xml tiene que tener este contenido:
&lt;?xml version=\&quot;1.0\&quot; encoding=\&quot;utf-8\&quot;?&gt;

&lt;contenido&gt;
&lt;web&gt;
&lt;nombre&gt;Foro Creativo&lt;/nombre&gt;
&lt;url&gt;http://www.forocreativo.net/ &lt;/url&gt;
&lt;/web&gt;

&lt;web&gt;
&lt;nombre&gt;Taller Webmaster &lt;/nombre&gt;
&lt;url&gt;http://www.tallerwebmaster.com/&lt;/url&gt;
&lt;/web&gt;

&lt;web&gt;
&lt;nombre&gt;Solo Photoshop&lt;/nombre&gt;
&lt;url&gt;http://www.solophotoshop.com/ &lt;/url&gt;
&lt;/web&gt;

&lt;web&gt;
&lt;nombre&gt;Clarin&lt;/nombre&gt;
&lt;url&gt;http://www.clarin.com/&lt;/url&gt;
&lt;/web&gt;

&lt;web&gt;
&lt;nombre&gt;La Nación&lt;/nombre&gt;
&lt;url&gt;http://www.lanacion.com/&lt;/url&gt;
&lt;/web&gt;

&lt;/contenido&gt;