Tutorial del componente Menu de Flash

Este componente lo utilizaremos para hacer rápidos menus contextuales de selección. Las opciones de los menús las sacaremos de un archivo XML para una mayor accesibilidad y usabilidad. Creemos nuestro XML y carguemoslo como es costumbre.

<menu>
	<menuitem label='Ver tutoriales' />
	<menuitem label='Ver ejemplos' />
	<menuitem label='Enviar un mensaje' />
	<menuitem type='separator' />
	<menuitem label='Visitar web' />
</menu>

Y para cargarlo...

//Cargamos el XML
xmlMenu = new XML();
xmlMenu.ignoreWhite = true;
xmlMenu.onLoad = function(success) {
	if (success) {
		llenarMenu();
	} else {
		trace("No se pudo cargar el XML");
	}
};
xmlMenu.load("Menu.xml");

Ahora para llenar el menú sólo tenemos que hacer la típica función...

function llenarMenu() {
	//Atacheamos el componente
	attachMovie("Menu", "miMenu", 1);
	//Llenamos el menu
	miMenu.dataProvider = xmlMenu.firstChild;
}

Como nuestro XML está montado de la misma forma que Flash MX 2004 monta internamente los XML para los menus, al asociarlo con el dataProvider, el menu se monta automáticamente. Pero... ¿qué pasa? pruebo esto y no funciona. Esto es debido a que tenemos que usar el método show(), para ello lo que haremos será colocar un componente Button (nombre de instancia eleButton) y agregarle este código:

//Eventos, al final de la función llenarMenu()
eleButton.addEventListener("click", alClicar);
//Listener para cuando clicamos en los botones, fuera de la función llenarMenu()
alClicar = new Object();
alClicar.click = function(evento) {
	miMenu.show(_root._xmouse, _root._ymouse);
};

Ahora sí, cuando clicamos en nuestro botón, se nos muestra el menú en la posición donde este el puntero del ratón. El dataProvider del componente Menu es algo especial, ya que usa una subclase llamada MenuDataProvider con la cual podemos controlar las opciones a mostrar en el menú.

Vamos a añadir otro Button (nombre de instancia freButton), y lo que haremos será que cuando cliquemos en él añadir una opción al final diferentea para cada uno, añadiendo así funcionalidad a nuestro Menu. Deja el código como sigue:

//Listener para cuando clicamos en los botones
alClicar = new Object();
alClicar.click = function(evento){
	//Si clicamos en el botón Elecash
	if (evento.target == eleButton){
		eleActivado = true;
		freActivado = false;
		miMenu.removeMenuItemAt(5);
		miMenu.addMenuItemAt(5, { label:"Visitar Blog", selected:false, enabled:true} ); 
		miMenu.show(_root._xmouse, _root._ymouse);
	}
	//Si clicamos en el botón Freddie
	else if (evento.target == freButton){
		eleActivado = false;
		freActivado = true;
		miMenu.removeMenuItemAt(5);
		miMenu.addMenuItemAt(5, { label:"Visitar Foros", selected:false, enabled:true} ); 
		miMenu.show(_root._xmouse, _root._ymouse);
	}
}

Cuando cliquemos en el botón de Freddie®, añadiremos una opción, luego, al clicar en el botón Elecash, eliminaremos la opción creada anteriormente y pondremos la nueva. Si os fijais hemos creado unas variables que hemos llamado eleActivado y freActivado, estas nos servirán para saber en cual hemos pulsado, y las utilizaremos en los listeners del menu.. Ahora, por último, sólo nos falta crear los listeners para nuestro menú y ya lo tendremos totalmente programado.

Los eventos como siempre, al final de la función llenarMenu()...

//Eventos
miMenu.addEventListener("change", alSeleccionar);

Y luego los listeneres, fuera de la función al final del todo...

//Listener para cuando seleccionamos una opcion del menu
alSeleccionar = new Object();
alSeleccionar.change = function(evento){
	//Si hemos pulsado el botón Elecash
	if (eleActivado == true){
		if (evento.menuItem.attributes.label == "Visitar web"){
			getURL("http://www.elecash.org", "_blank");
		} else if (evento.menuItem.attributes.label == "Visitar Blog"){
			getURL("http://www.elecash.org/blog", "_blank");
		}
	}
	//Si hemos pulsado el botón Freddie
	else if (freActivado == true){ 
		if (evento.menuItem.attributes.label == "Visitar web"){
			getURL("http://www.cristalab.com", "_blank");
		} else if (evento.menuItem.attributes.label == "Visitar Foros"){
			getURL("http://www.cristalab.com/foros/", "_blank");
		}
	}
}

Con esto, haremos que según en que botón hayamos clicado entre en un if-else, u otro, donde ahi dentro comprobaremos en que opción del menú contextual ha clicado, enviando así al usuario a una dirección web u otra.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Tutorial del componente Menu de Flash

Publica tu comentario

o puedes...