Post actualizado el 16/07/2015

E añadido un ejemplo al enlace de descargas de cómo utilizar el menú desde flash builder/flex.
Para utilizar el menú es preciso exportar todas las clases relacionadas con la clase botón y todos sus movieclips en un archivo SWC,  para así poder instanciarlo desde flex.
Para cambiar el diseño del botón solo hay que editar el archivo boton.fla que hay en la carpeta src. Ahora se pueden deshabilitar los botones indicando su índice, cada menú ya sea máster o esclavo tiene el método enabledByIndex(1,false);
Por lo tanto para deshabilitar el segundo botón de por ejemplo un supuesto menú DESCARGAS seria DESCARGAS.enabledByIndex(1,false); y para habilitarlo DESCARGAS.enabledByIndex(1,true);
También se puede invertir el menú para que se desplegué hacia arriba con una propiedad pública invert pero solo lo implemente para mi necesidad y solo funciona con 2 niveles de profundidad de menús a partir del tercero el menú se descuadra.
El código asociado al frame del botón dije que lo abstraería en una clase y al final sigue igual, es lo que tiene la perrera, quizás algún día..
La instanciación en flex de los iconos para el menú resulta algo más compleja que en flash al utilizar la propiedad EMBED, pero se podrían exportar los icono en una librería swc desde flash para importar en flex y se podría instanciar las imágenes de la misma manera que en flash con el simple  new imgClassName();

La potencia de este menú reside en su sencillez de montaje y edición del diseño y el dinamismo con el que poder crear los menús de manera dinámica mediante por ejemplo bases de datos.

Por lo menos a mi me sirve aunque sea código espagueti, Saludos.

Aqui el código

Aqui os dejo el ejemplo en flex, la descarga la encontrareis al final del post.

A partir de aqui todos los ejemplos son basados en flash

Nueva version v.1.2 el 04/04/2012 añadido metodo markable

Al final del post encontrareis 2 ejemplos con el nuevo metodo markable y la descarga de los ejemplos.

Flash AS3 Class MenuLiveXR to create static or drop down menu
Menu desplegable en flash as3 actionscript

Aquí os traigo la clase MenuLiveXR para crear menús desplegables que hice hace poco. (los archivos de descarga al final de la entrada)

Esta clase se puede mejorar en muchos aspectos ya que la hice solo para cubrir una pequeña necesidad, aunque tal como está ya cumple con su cometido básico.

Esta clase es de libre uso y si alguien decide realizarle algunas mejoras y quiere reportarlas entonces encantado subiré las nuevas versiones para que estén disponibles para su descarga.

El uso de la clase es muy sencillo

Ej:

Primero importamos la clase y una vez importada creamos una nueva variable para instanciarla pasándole 2 parámetros obligatoriamente, el primero requiere un String que solo acepta los valores “MASTER” o “SLAVE”, el segundo parámetro requiere una cadena o String identificativo para el nombre del menú.

PARAMETRO 1: _Type(String)

_Type – acepta los valores “MASTER” o “SLAVE” y las reglas que debemos tener en cuenta para definir un menú como MASTER o SLAVE son las siguientes:

1 Si creamos un solo menú este debe definirse “siempre” como MASTER ya que solo los menús MASTER pueden inicializarse con el método startMenu() los menús definidos como SLAVE no pueden inicializarse desde fuera de la clase.

2 Solo los menús definidos como MASTER deben agregarse al displayList con addChild(miMenu) los menús definidos como SLAVE son agregados al displaylist automáticamente por el menú MASTER.(Los menús definidos como SLAVE se pueden agregar al displaylist pero produciría un comportamiento erróneo del menú)

3 Solo un menú definido como MASTER se puede configurar con el método setConfig(); los menús SLAVE adoptan automáticamente la configuración del menú MASTER. (En una posible revisión se mirara de agregar un método de configuración abreviado para los menús definidos como SLAVE).

REVISIÓN:

(Ahora ya se permite utilizar el método setConfig con los menús ESCLAVOS para configurarlos independientemente del menú MASTER, si el método setConfig no es utilizado en un submenú el submenú adoptara la configuración del menú superior del que sea hijo o del menú MASTER)

4 Un menú definido como MASTER no puede asociarse a otro menú MASTER

5 Un menú definido como SLAVE se puede asociar a un menú MASTER

6 Los menús definidos como SLAVE se pueden asociar a otros menus SLAVE

7 Un menú MASTER no se puede asociar a un menú SLAVE

PARAMETRO 2: _MenuName(String)
_MenuName – Requiere un nombre para el menú, necesario solo para identificar que menú emitió un error en el caso de que rompiera alguna de las reglas anteriores.

——————————————————————————————————————–

Una vez tengamos nuestro menú instanciado pasaríamos a configurarlo con el método setConfig
Ej:

El metodo setConfig acepta 8 parametros

[Dir:String] – Indica la dirección del menú y los valores posibles son “V” para VERTICAL y “H” para HORIZONTAL.

[MenuAlign] – Especifica la alineación del menú a la derecha, izquierda o centro respecto a la posición X inicial del objeto. Los valores pueden ser “R” = RIGHT, “L” = LEFT, “C” = CENTER(El valor de este parámetro hace variar la posición X del menú, Si hemos colocado el menú en la posición x = 0 del stage y la alineación es “L” el menú aparecerá desde la posición 0 a la derecha, si la alineación es “R” el menú aparecerá desde la posición 0 a la izquierda y si la alineación es “C” el menú aparecerá centrado en la posición 0). Por defecto el valor es “C”

[EqualWidth] – Si EqualWidth es igual a false el ancho de cada botón se ajusta al ancho de su texto. Si es true el ancho de todos los botones se ajustan al ancho del botón que contenga el texto más ancho. Por defecto el valor es false.

[TextAlign] – Si se ha especificado EqualWidth a true podemos especificar la alineación del texto, por defecto el valor es “C”. Los valores pueden ser “L” = LEFT, “R” = RIGHT, “C” = CENTER. Si _EqualWidth no está definido o su valor es false la propiedad TextAlign es ignorada aunque este definida (Esto es así porque si los botones están ajustados al texto no hay espacio para alineación.

[DropDown] – Si el valor es true entonces se mostrara el menú como desplegable mostrando solo el primer botón y el resto se desplegara al pasar el ratón por encima. Si el valor es false todos los botones del menú principal serán visibles. (Esta propiedad solo afecta a los menús MASTER, aunque modificando la clase puede hacerse para que jerárquicamente los menús SLAVE tomen el mismo comportamiento).

[SpacingButton] – Espacio o separación entre los objetos y márgenes contenidos dentro de cada botón expresado en pixeles.
Los márgenes se aplican de la siguiente manera en un botón sin icono: Botón –> [ margen ( texto Botón ) margen ]
y un botón con icono: Botón –> [ margen [ icono ] margen ( texto Botón ) margen ]

[MenuSpace] – Espacio o separación entre botones. Si el menú es vertical el espacio se aplica en Y si es horizontal el espacio se aplica en X

[Markable] – (NUEVO METODO) Específica si los botones pueden ser marcados al hacer clic (Solo quedara marcado el último botón al que se haya hecho clic). Además si Markable es true se podrá utilizar la propiedad pública MENU.markedByIndex(1), con la que podremos marcar un botón por defecto a voluntad.

——————————————————————————————————————–

Una vez configurado nuestro menú tenemos que pasar a configurar y añadir los botones del mismo y para tal uso utilizaremos el método setButton();

Podemos añadir tantos botones como queramos utilizando para ello el método setButton, este método acepta los siguientes parámetros:

[TextButton] – Cadena de texto para el botón

[ButtonName] – Nombre interno del botón ej: Botón1, Botón2, Botón3 etc. Puede especificarse una cadena bacía “” entonces automáticamente se le dará un nombre con un numero incremental. (Esta propiedad es necesaria en el caso que necesitamos averiguar que botón a lanzado el evento si hemos especificado la misma función para todos los botones en el parámetro onClickFunctionCall).

[onClickFunctionCall] – Requiere el nombre de una función que será ejecutada al hacer click en el botón.(Si no es necesario puede especificarse null. Se puede especificar una función diferente para cada botón o una misma función para todos los botones, la clase retorna a la función el objeto que ha lanzado el evento(Si se ha especificado una misma función para todos los botones se puede identificar que botón a lanzado el evento con e.currentTarget.name)

[ButtonIcon] – Requiere una instancia Sprite de una imagen (Ej: imagen o símbolo como MovieClip de la biblioteca exportado para actionscript. Si no es necesario puede especificarse null) .

[slaveMenu] – Requiere un objeto o instancia de la clase menú definido como SLAVE, este parámetro sirve para asociar a este botón un menú ESCLAVO, al pasar el ratón por encima de este botón se desplegara dicho menú.(Solo se pueden pasar como parámetro instancias de menús definidos como SLAVE, intentar asociar un menú MASTER a un botón dará un error)

—————————————————————————————————————-

Recordad que mediante el parámetro [onClickFunctionCall] del método setButton podemos especificar una función independiente para cada botón o la misma función para todos, en el siguiente código de ejemplo yo he optado por utilizar la misma función para todos los botones.

Una vez tengamos los botones necesarios configurados ya solo nos faltara colocar nuestro menú en la posición deseada e inicializarlo con el método startMenu(); con lo que el resultado final sería el siguiente:

Ejemplo flash:

Nota: Si el menu se sale fuera del escenario la alineacion de los submenos se invierten.
El uso del campo para añadir separacion entre botones solo funciona correctamente cuando se utiliza un solo menu y no esta marcada la opción como desplegable

(REVISION NUEVA PROPIEDAD markedByIndex(0) AGREGADA);
Si el nuevo parámetro markable del método setConfig es true entonces podemos marcar el botón con la propiedad pública markedByIndex(0). Esta propiedad debe utilizarse siempre después de haber inicializado el menú con startMenu(). Si el metodo markable es false la propiedad markedByIndex(0); es ignorada.

Finalmente los metodos disponibles para la clase són:
MENU.setConfig();
MENU.setButton();
MENU.startMenu();
MENU.markedByIndex(0);

Bueno hasta aquí hemos aprendido a configurar un menú MASTER, podemos crear tantos menús MASTER como queramos y combinarlos entre sí, aunque existe otra manera de combinarlos y es utilizando menús definidos como SLAVE, es decir podemos crear un menú SLAVE y asociarlo a un menú MASTER consiguiendo que al pasar el ratón por uno de los botones del menú MASTER se desplegué el menú SLAVE.

Para crear un menú como SLAVE creamos una nueva instancia de la clase MenuLiveXR y le pasamos al primer parámetro el valor SLAVE y al segundo parámetro un nombre identificativo.
Solo hay que tener en cuenta que las instancias de los menús definidos como SLAVE no se deben añadir al displayList, tampoco es necesario configurarlas mediante setConfig ni tampoco inicializarlas con startMenu, simplemente debemos añadir y configurar los botones necesarios para el menú.

Ej:

Ahora os estaréis preguntando vale muy bonito pero ¿cómo asocio este menú SLAVE al menú MASTER y que se desplegué al pasar el ratón por el botón descargas? Pues muy fácil, sencillamente le pasamos el nuevo menú al parámetro [slaveMenu] del método setButton del menú MASTER .

Ej:

También podemos crear otro Nuevo submenú SLAVE y hacer que cuelgue del subMenuDescargasSlave asociándolo por ejemplo al botón btnFlex, como debéis imaginar podemos hacer que un menú SLAVE cuelgue de otro menú SLAVE y a su vez de otro y de otro etc. Además al igual que con los botones de un solo menú podemos asociar una misma función para todos los botones o una función para cada uno, podemos hacer lo mismo con todos los menús que existan, es decir podemos tener 20 menús y una sola función asociada a todos los botones.

Se puede combinar de muchas maneras, podemos hacer que un mismo menú cuelgue de diferentes botones de un solo menú máster o de dos o tres… El limite esta en tu imaginación.

Aquí dejo el ejemplo final un menú del que cuelgan 2 submenús más:

Ejemplo Flash:

Para modificar el diseño del boton basta con acceder al movieclip del boton y cambiar su diseño.
Nota: Si el menu se sale fuera del escenario la alineacion de los submenos se invierten.
El uso del campo para añadir separacion entre botones solo funciona correctamente cuando se utiliza un solo menu y no esta marcada la opción como desplegable

Menu desplegable Live actualizado a la versión v1.1 el 23/01/2012

Ahora se permite configurar independientemente los menus SLAVES, si no se configuran heredan la configuración del menu MASTER.
Los botones con menú asociado ahora muestran un pequeño icono(flecha)
Añadido un nuevo parametro path que retorna una cadena o url al hacer click
Para ver un ejemplo final de la v1.1 hacer click aqui

Menu desplegable Live actualizado a la versión v1.2 el 04/04/2012

Nuevo parámetro Markable añadido, este parámetro permite dejar marcado el ultimo botón pulsado, además si Markable es true también se permite marcar un botón por defecto con la nueva propiedad pública de la clase menú “markedByIndex(0)” si el parámetro markable del método setConfig es false la propiedad markedByIndex() es ignorada.

Ejemplo simple:

Resultado ejemplo simple:

Ejemplo con 2 sub menús y refactoring revisado con el metodo markable:

El efecto de marcado puede ser cambiado editando el codigo del movieclip boton de la libreria.

[download id=”30″ format=”2″]

Social Report xavirobot