Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Creación de Menu con Flash y XML

Prácticas y Ejemplos de XML y Adobe Flash

 

Tutorial por Jorge Oyhenard (elQuique)

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, explico parte de esto en:

Introducción al XML, PHP, Flash y Base de Datos MySQL

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 que vimos en la parte anterior del tutorial:

_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[i].childNodes[0].firstChild; // Le asignamos el correspondiente texto al botón

    _root["boton"+i].linkurl = opciones[i].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[i].childNodes[0].firstChild;

y esta otra línea:

opciones[i].childNodes[1].firstChild;

opciones[i] 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[i].childNodes[0]

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

opciones[i].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, y si dan click en cada botón visitaran nuestros sitios:

Nota: en la próxima entrega, veremos una variante, donde agregaremos imágenes y swf cargados externamente.

Comentarios de Creación de Menu con Flash y XML

↑ Tutorial

  • gelbermoran

    gelbermoran

    2008-06-12 13:59

    Una pregunta, el menu funciona correctamente desde el swf, pero tengo problemas cuando lo coloco en una web, tengo problemas cuando pego el swf con php, no me carga el xml, no se si tenga problemas con la ruta, alguien me puede ayudar???
  • skylee

    skylee

    2008-06-15 23:38

    Hola he realizado el tutorial al pie de la letra y sucede que al publicarlo de crea bien el menu y al hacer clic sobre algun elemento, este hace su funcion de modo correcto, pero ninguno realiza la animacion correspondiente al estado over del boton que contiene el movieclip!!!!
    de hecho el ejemplo aca publicado tampoco lo hace.
    alguien puede decirme que anda mal??
  • skylee

    skylee

    2008-06-16 15:15

    Ya resolvi lo de la animacion
    simplemente borre la linea que define la accion del botón:
    _root["boton"+i].onRelease = function () {
    getURL(this.linkurl, "_blank");}
    y le puse el siguiente codigo al boton que se encuentra dentro del MC mcBoton:
    on (release) {getURL(linkurl, "_blank");}

    Ojala y les ayude
  • guineo

    guineo

    2008-06-22 23:07

    me intereza saber como cargar swf usando menu xml. pues tengo una plantilla de menu en xml y no logro cargar la pelicula que tengo dentro de la plantilla. gracias
  • MartinZan

    MartinZan

    2008-09-05 15:47

    Buenos dias.. hasta he podido hacer todo lo que necesito de acuerdo a lo que se explica, me esta quedando saber porque el texto dinamico no forma parte de la zona interactiva del boton.. si me pueden ayudar estere muy agradeciso.
  • ferchorc24

    ferchorc24

    2009-03-23 21:52

    buenas noches, una pregunta el primer ejercicio si me salio bien sin el xml pero ya poniendo el xml ya no salio te dejo mi codigo a ver que salio mal

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

    opcionesXML.load("menu.xml");

    } 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


    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[i].childNodes[0].firstChild; // Le asignamos el correspondiente texto al botón

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

    { // 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


    gracias
  • ferchorc24

    ferchorc24

    2009-03-23 22:06

    a deberas y ya no se puede descargar el archivo.

    seria bueno que lo pusieras de nuevo para tener una mejor base.

    gracias y espero puedas resolver mi duda
  • alcivar_karina

    alcivar_karina

    2009-03-24 17:20

    Con la misma peticion que FERCHORC24; si pudiesen poner el archivopara descargar de nuevo y tener una base o punto de comparacion para los errores.
    De antemano gracias
  • ferchorc24

    ferchorc24

    2009-03-24 20:35

    hola a todos otra ves yo, un favor a alguien de ustedes que les salio ya el ejercicio me lo podrian mandar para ver que error tengo es que no me carga el xml.

    se los agradeseria por siempre.

    fercho-rc@hotmail.com

    espero que me lo puedan mandar me salvarian la vida jejeje

    gracias
  • guillercore

    guillercore

    2009-03-28 13:49

    buenas gente, que buenos tutoriales tienen, tengo una consulta un poco presurada, ya que no han lanzado el tutorial de las variantes para cargar imagenes y swf externos.

    Si por favor pueden ayudarme al menos con la variante de cargar swf externos dentro de la misma pelicula en vez de cargar el contenido por URL. desde ya muchas gracias.
  • niwo

    niwo

    2009-04-23 15:26

    Saludos, la verdad este me parecio un muy buen ejemplo, lo unico es que tengo el mimso problema que SKYLEE, pero ya trate con su solucion y no me sirvio ..podrian explicarme mejor por favor?...Gracias.
  • niwo

    niwo

    2009-04-23 15:32

    bueno GUILLERCORE, yo lo hago de la siguiente forma:

    en vez de usar getUrl, yo creo un clip de pelicula vacia y le doy el nombre de Holder y la funcion que hace el boton seria

    Holder.loadMovie("Nombre_del_swf.swf");

    y eso es todo lo que hago. Si quieres el ejemplo (archivo.fla) me mandas un correo a mniwo@hotmail.com