Comunidad de diseño web y desarrollo en internet online

Tutorial del componente MenuBar de Flash

Primero pondremos un componente MenuBar en nuestra biblioteca y lo traeremos de la biblioteca mediante attachMovie() como es normal.
//Atacheamos el menu de nuestra librería
attachMovie("menuBar", "barramenu", 1);
Una vez hecho esto pasaremos a ponerle el tamaño y el estilo que nos guste, para ello utilizaremos setSize() y setStyle(). Recomiendo que os miréis la ayuda de Flash si queréis ver todo lo que da de si el método setStyle().
//Propiedades del menu
barramenu._x = 0;
barramenu._y = 0;
barramenu.setSize(300, 18);
//Estilos
barramenu.setStyle("fontFamily", "_sans");
barramenu.setStyle("fontSize", 10);

Ahora pasaremos a crear las opciones de los menus. Para ello utilizaremos el método addMenu(), para añadir las opciones del menú; y addMenuItem() para añadir las subopciones del menu. Con rowHeight estamos dandole una altura a las subopciones del menu, para que queda mas compacto y bonito.

Si os fijais cuando usamos addMenuItem ponemos dos propiedades, label e instanceName. La propiedad label nos pondrá el texto que saldrá en el menú, y la propiedad instanceName, nos dará un nombre a esa opcion del menu. Por último tenemos el type, en este caso lo hemos utilizado para poner separadores.

//Creamos las opciones del menu
var menuArchivo = barramenu.addMenu("Archivo");
menuArchivo.addMenuItem({label:"Nuevo", instanceName:"archivoNuevo"});
menuArchivo.addMenuItem({label:"Abrir", instanceName:"archivoAbrir"});
menuArchivo.addMenuItem({type:"separator"});
menuArchivo.addMenuItem({label:"Cerrar", instanceName:"archivoCerrar"});
//Propiedades
menuArchivo.rowHeight = 16;
var menuEdicion = barramenu.addMenu("Edición");
menuEdicion.addMenuItem({label:"Copiar", instanceName:"edicionCopiar"});
menuEdicion.addMenuItem({label:"Cortar", instanceName:"edicionCortar"});
menuEdicion.addMenuItem({label:"Pegar", instanceName:"edicionPegar"});
menuEdicion.addMenuItem({type:"separator"});
menuEdicion.addMenuItem({label:"Estirar", instanceName:"edicionEstirar"});
menuEdicion.addMenuItem({label:"Rotar", instanceName:"edicionRotar"});
menuEdicion.addMenuItem({type:"separator"});
menuEdicion.addMenuItem({label:"Propiedades...", instanceName:"edicionPropiedades"});
//Propiedades
menuEdicion.rowHeight = 16;
var menuAyuda = barramenu.addMenu("Ayuda");
menuAyuda.addMenuItem({label:"Ayuda", instanceName:"ayudaAyuda"});
menuAyuda.addMenuItem({label:"Tutoriales", instanceName:"ayudaTutoriales"});
menuAyuda.addMenuItem({label:"Ejemplos", instanceName:"ayudaEjemplos"});
menuAyuda.addMenuItem({type:"separator"});
menuAyuda.addMenuItem({label:"Acerca de Elecash.org", instanceName:"ayudaElecash"});
menuAyuda.addMenuItem({label:"Acerca de Cristalab.com", instanceName:"ayudaCristalab"});
//Propiedades
menuAyuda.rowHeight = 16;
Ahora el menu ya va, lo único que tenemos que hacer es configurar las opciones con los listeners o escuchadores. Estos nos servirán para saber que estamos haciendo sobre nuestro menu, si estamos clicando, cambiando de opcion a opcion, etc. Así podremos hacer que cuando hemos clicado sobre algun item de nuestro menu que haga alguna acción.
//Listener para cuando se activa el evento onChange.
var al_cambiar = new Object();
al_cambiar.change = function(evento){
var menu = evento.menu;
var item = evento.menuItem;
//Menu Archivo
if (item == menu.archivoNuevo){
trace(item.attributes.label);
}
else if (item == menu.archivoAbrir){
trace(item.attributes.label);
}
else if (item == menu.archivoCerrar){
trace(item.attributes.label);
}
//Menu Edicion
else if (item == menu.edicionCopiar){
trace(item.attributes.label);
}
else if (item == menu.edicionCortar){
trace(item.attributes.label);
}
else if (item == menu.edicionPegar){
trace(item.attributes.label);
}
else if (item == menu.edicionEstirar){
trace(item.attributes.label);
}
else if (item == menu.edicionRotar){
trace(item.attributes.label);
}
else if (item == menu.edicionPropiedades){
trace(item.attributes.label);
}
//Menu Ayuda
else if (item == menu.ayudaAyuda){
trace(item.attributes.label);
}
else if (item == menu.ayudaTutoriales){
trace(item.attributes.label);
}
else if (item == menu.ayudaEjemplos){
trace(item.attributes.label);
}
else if (item == menu.ayudaCristalab){
getURL("http://www.cristalab.com", "_blank");
}
else if (item == menu.ayudaElecash){
getURL("http://www.elecash.org/blog", "_blank");
}
}
//Eventos
//Al seleccionar una opción

menuArchivo.addEventListener("change", al_cambiar);
menuEdicion.addEventListener("change", al_cambiar);
menuAyuda.addEventListener("change", al_cambiar);

Bien, primero hemos creado un objeto que se llama al_cambiar, este objeto es nuestro listener, y es el que escuchara que esta ocurriendo en nuestro menu. Cuando haya algun cambio, por ejemplo, que un item de nuestro menu haya sido clicado, entonces se ejecutara el evento change. Luego con unos if-else, configuramos facilmente que queremos que haga.

Por último, tenemos las tres opciones del menu a las cuales les añadimos un listener mediante addEventListener. Si os fijais todos apuntan al mismo objeto, esto es para ahorrar objetos, con uno nos basta.

Ahora añadiremos también listeners para cuando abrimos los menús así, puedes poner debajo de los eventos change las siguientes líneas:

//Al abrir un menú
menuArchivo.addEventListener("menuShow", alAbrir);
menuEdicion.addEventListener("menuShow", alAbrir);
menuAyuda.addEventListener("menuShow", alAbrir);
Ahora, una vez creados los eventos, solamente tenemos que programar el listener, puedes ponerlo encima o debajo del anterior listener, donde más te guste...
//Listener para cuando se activa el evento menuShow.
alAbrir = new Object();
alAbrir.menuShow = function(evento) {
if (evento.menu == menuArchivo) {
trace("Has abierto Archivo");
} else if (evento.menu == menuEdicion) {
trace("Has abierto Edición");
} else if (evento.menu == menuAyuda) {
trace("Has abierto Ayuda");
}
};

Una vez abrimos el menú comprobamos si el evento que recogemos es igual a la variable que hemos creado anteriormente. Así, si evento.menu es igual a la variable menuArchivo, quiere decir que estamos abriendo Archivo, traceando así el resultado.

Y ya esta, ya tenéis vuestro menu listo para usar!

¿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

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate