FLASH Y XML (V): Generar un menú a partir de un xml

0 - - 13/12/2004 00:00:00

Para una mejor comprensión de este tutorial es conveniente haber leído los anteriores tutoriales sobre este tema. Puedes utilizar la búsqueda la web para acceder a ellos.

1.- Vamos a crear un menú a partir de un XML. El documento xml de partida es el siguiente:

GOOGLE EL MUNDO NOMASTER YAHOO EL MUNDO

Tenemos un nodo raíz <menu>, cuya notación para acceder a él sería por ejemplo: menuXml.firstChild

y una serie de items < boton> que conforman el menú, a los que accederíamos por:

menuXml.firstChild.childNodes
2.- Una vez tenemos el documento xml, vamos a crear en Flash los elementos necesarios para el menu. Accedemos a Insertar > Nuevo Símbolo y creamos un clip de película con el nombre "item_mc"

3.- Una vez creado, y dentro del clip de película creamos dos capas, la capa 1 la llamamos "Boton" y la capa 2 "Texto".
4.- En la capa "Boton" creamos un rectángulo que convertimos en botón con los estados que deseemos y le asignamos como nombre de instancia "Rectangulo_btn".

5.- En la capa "Texto" creamos una caja de texto dinámico, que actuará como etiqueta, justo encima del botón que hemos creado en el anterior paso. La nombramos "etiqueta_txt".
6.- Una vez creado esto abrimos la biblioteca y al clip de película le hacemos clic con el boton derecho y accedemos a "Vinculación". Activamos "Exportar para actionscript" y le asignamos como identificador "item_mc".
7.- Sobre un fotograma de la línea de tiempo principal insertamos el siguiente ActionScript:

//Creamos una nueva instancia XML menuXml = new XML(); //Ignoramos los espacios en blanco menuXml.ignoreWhite = true; //Creamos una función asegurarnos de que se ha cargado menuXml.onLoad = function(success) { if (success) { //Creamos una variable "menuItem" que nos devuelve // una array con todos los items del menu var menuItem = menuXml.firstChild.childNodes; //Creamos un bucle desde 0 al total de items (menuItem.length) for (var i = 0; i< menuItem.length; i++) { //Accedemos al valor de cada uno de los items Nombre = menuItem[i].firstChild.nodeValue; //Accedemos al atributo url de cada uno de los items Link = menuItem[i].attributes.url; //Mediante attachMovie creamos instancias del clip de pelicula item_mc attachMovie("item_mc", "item_mc"+i, i); //A cada una de las instancias le asignamos... //La posición en la coordenada x _root["item_mc"+i]._x = 0; //La posición en la coordenada y _root["item_mc"+i]._y = 20*i; //La etiqueta de texto _root["item_mc"+i].etiqueta_txt.text = Nombre; //El link al que irá _root["item_mc"+i].Link = Link; //Le asignamos la acción al boton _root["item_mc"+i].Rectangulo_btn.onRelease=function(){ getURL(this._parent.Link); } //Cerramos el bucle } //Cerrramos el if } //Cerramos la función }; menuXml.load("menu.xml");

Descargar Ejemplo: Descargar

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha