Tutorial por Jorge Oyhenard (elQuique) de Foro Creativo
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.
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:
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 :)
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ú.
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???
Fecha: 15/06/2008
SKYLEE escribió:
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??
Fecha: 16/06/2008
SKYLEE escribió:
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
Fecha: 22/06/2008
GUINEO escribió:
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
Fecha: 05/09/2008
MARTINZAN escribió:
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.
Fecha: 23/03/2009
FERCHORC24 escribió:
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
Fecha: 23/03/2009
FERCHORC24 escribió:
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
Fecha: 24/03/2009
ALCIVAR_KARINA escribió:
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
Fecha: 24/03/2009
FERCHORC24 escribió:
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
Fecha: 28/03/2009
GUILLERCORE escribió:
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.
Fecha: 23/04/2009
NIWO escribió:
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.
Fecha: 23/04/2009
NIWO escribió:
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
