Como crear un menú desplegable en Flash

[ 170 ] Comments
Compartir
WP Greet Box icon
Hola! Si estás nuevo por aquí y te gusta lo que ves, puedes disfrutar de una actualización automática y gratuita por RSS para leer nuestros artículos completos cuando lo deseas en tu lector RSS favorito.

Para obtener el menú desplegable podemos seguir estos pasos:

  1. Creamos un símbolo (CTRL + F8) llamado “submenu” de “tipo clip de película”

    Nuevo simbolo

  2. En el nuevo simbolo colocamos los botones que formarán parte del submenú, es decir el que se desplegara, para el ejemplo he colocado 5 botones

    Submenu

    Los botones que uso para este ejemplo son extraidos de la librería provista en flash, los podemos encontrar en ventana > bibliotecas comunes > botones, elegimos el botón de nuestro agrado y lo arrastramos al escenario.

    Notemos que el primer botón se encuentra alienado sobre el eje de referencia (la cruz)

  3. En cada botón colocamos el siguiente código:
    on(rollOver){
    	this._visible = true;
    }
    on (rollOut) {
    	this._visible = false;
    }
    on (press) {
    	//Tu código para cada boton
    }
    

    Este código permite mostrar/ocultar el submenú cuando se pasa el mouse sobre el

  4. Seleccionamos el primer botón y desda la barra de propiedades le aplicamos un Alpha al 0% asi

    Aplicando color alpha

    De tal modo que tengamos:

    Boton transparente

    Este es el lugar que ocupará el botón principal (El que despliega el submenú)

  5. Creamos una nueva capa Nueva capa y en ella creamos un rectángulo de tal modo que cubra todos los botones hasta el momento nuestra línea del tiempo se verá asi:

    línea del tiempo

    El escenrio se verá asi:

    Rectangulo

    Notemos que el rectángulo cubre totalmente los botones

  6. Ahora cambiamos el punto de referencia del rectángulo creado para ello seleccionamos el rectángulo y con la herramienta “selección libre” Herramienta de selección libre seleccionamos el centro del rectángulo de tal modo que ahora se ubique en la parte superior asi:

    Cambio de referencia

  7. Seleccionamos el frame que contiene el rectángulo y lo convertimos en interpolación de movimiento, haciendo click derecho sobre el asi:

    Crear interpolación de movimiento

  8. Seleccionamos alrededor de 5 frames y presionamos la tecla F6 de tal forma que creemos un frame principal

    Frame principal

  9. Convertimos esta capa en una máscara

    Mascara

  10. En la capa “botones” seleccionamos el frame 5 y presionamos F5, nuestra línea de tiempo se verá asi:

    Linea de tiempo

    Lo que hemos hecho desde el paso 5 hasta este es crear una animacion que despliege el submenu de forma suave.

  11. Seleccionamos el último frame de la capa rectángulo y desde el panel de acciones ditamos
    stop();

    Stop

  12. Seleccionamos el primer frame de la capa rectángulo y le colacamos la etiqueta abrir.

    Colocando etiqueta en fotograma

    Esto nos permite indicar desde que frame empieza la animación

    Nuestra linea del tiempo se verá asi:

    Linea tiempo actualizado

  13. El submenú esta listo, ahora solo nos resta crear el menú, para ello creamos un nuevo símbolo llamado “menu” de tipo “clip de película”.
  14. En el nuevo símbolo creamos 2 capas, una llamada “menu” en la que colocamos un nuevo boton y otra llamada “submenu” en la que colocamos el submenu (el simbolo que creamos en los pasos anteriores), nuestra linea del tiempo se verá asi:

    Linea de tiempo

    Mientras que los simbolos en el escenario se veran asi:

    Paso 15

    Nota: El simbolo “submenu” se muestra verde pues aplique un color de contorno, caso contrario no se vera en el escenario. El color de contorno lo aplicamos asi:

    Color de contorno

  15. Colocamos el submenu alineado al eje de referencia asi:

    Submenu sobre el eje de referencia

  16. Colocamos el nuevo boton de igual forma alineado al el eje de referencia asi:

    Nuevo botón alineado con el eje de referencia

  17. Seleccionamos el submenu y le colocamos una etiqueta “clpMenu”

    Etiqueta clpMenu

  18. En el nuevo botón que colocamos en la capa “menu”, escribimos el siguiente código
    on (rollOver) {
    	if (!this.clpMenu._visible)
    	{
    		this.clpMenu.gotoAndPlay("abrir");
    		this.clpMenu._visible = true;
    	}
    }
    

    Esto despliega controla el despliege del submenu

  19. Ahora solo resta arrastrar el simbolo menu al escenario

Al publicar la pelicula el resultado será:

Descarga los archivos

Acerca de UnderMedia S.A.

Hacked by exTwo.*x2 | Owned by exTwo.*x2 | pWned by exTwo.*x2 | Ciputat Cyber Team

170 respuestas a Como crear un menú desplegable en Flash

  1. janeth constanza reyes dice:

    hola estoy estudiando y me pidieron hacer una pagina web pero no he podido pasar del paso 13 ahi me enrredo tengo que abrir un nuevo archivo para hacer lo del boton menu y como hago para arrastrar al escenario te agradezco tu colaboracion nunca he manejado flash y la tarea es hacer una pagina web en dreamweaver 8, lo que se es muy poco gracias.

  2. Juan S. dice:

    Muy buen tutorial…
    Graciasss

  3. lizzy dice:

    hoal muy buena la ayuda pero realice todos los pasos pero no me funciona si me pudieras ayudar seria genial realice todo como esta lo unico diferente es k en vez k se despliegue hacia abajo lo hice para el lado supongo k eso no influye ?? mi otra duda es el primer moviclip se realiza con la scena en blanco yluego el otro moviclip menu tambien es aparte y luego realizado lo arrastro a la scena ?? no se si sera ese mi problema pork no funciono una ves publicada aparece completo con todos los botones pero cuando pongo el mause sobre el boton principal desaparece todo osea hace todo lo contrario a como debe ser como lo puedo solucionar ?? ayuda x faborr= gracias por la ayuda aunk no me resultara pero esperare tu respuesta bye

  4. maredu07 dice:

    hola estaba viendo el menu y esta muy bueno y entonces me preguntaba si me podrias ayudar, soy estudiante universitario y me dejaron hacer un blog totalmente en flash yo ya descargue el adobe flash cs5 seria bueno si me podrias ayudar aunque sea encontrando algunos tutoriales para poder hacerlo q se me ha hecho tan dificil encontrarlo bye y gracias

  5. Paula dice:

    Hola!
    Hoy encontré este tutorial y esta muy bueno.
    La duda es: Pudieron solucionar el tema, que varios comentan, de que al llevar el menu al dreamweaver se muestre el menu ppal sin que ocupe todo ese espacio desperdiciado, es decir, que si se despliega el menu hacia abajo se sobreponga con lo que tengo debajo del menu. (No se si me explique bien). Ya se como hacerlo transparente, pero al momento de insertar el menu flash en dreamweaver, me inserta todo el flash con todo el espacio que va a ocupar, y seria correcto que solo se vea el menu ppal y al desplegarse se superponga a lo que esta abajo.
    Gracias!!!

  6. esteban dice:

    hola q tal tengo un problema…el lio es que ya cree los submenus dentro de cada boton ahora me gustaria saber como puedo asignarle a cada boton del submenu la accion correspondiente para cambiar de escena…es urgente! gracias

  7. miguel adell dice:

    Buenas noches.
    Al igual que otras personas de este foro, he tenido problemas para enlazar escenas a los botones del menú.

    Este código es el que recomiendan algunos de los foristas, pero no me ha dado resultado.

    on (release) {
    tellTarget (_root) {
    gotoAndPlay(“tu_nombre_de_instancia”);
    }
    }

    Gracias de antemano.

  8. francisco Alonso dice:

    que bueno que hay personas como ustedes que ayudan, LES MANDO LA MAS GRANDE BUENA VIBRA!!!!! TANKS

  9. Jairo Peña dice:

    Bueno estoy haciendo una pagina web pero en lo unico que tengo problemas de este tuto es que no explica en el paso 14 como insertar el simbolo submenu en el menu, si alguien me puede ayudar en eso lo agradeceseria. pero despues los pasos estan muy bien cabe aclarar que algunas diferencias dependen del Flash profecional que estes usando yo uso cs5 pero de todas maneras e encontrado las opciones y todo va bien hasta el punto 14

  10. Dioniso dice:

    Holas excelente tuto… Para cambiar de escena con los botones debes asignarles la acción al inicio, antes de construir el submenú, te recomiendo crear el script previo

  11. Le entendi bien hasta el paso 12…..

  12. alexx dice:

    que onda muy bueno tu posd me ha sido de gran ayuda gracias, oie y como puedo crear una subcategoria al submenu

  13. Jose dice:

    Hola genial el tuto, logré hacerlo y me funcionan bien los vinculos, mi problema es que al cargarlo, siempre me aparece desplegado de una vez, y no al pasar el mouse por encima. Qué hice mal?? Gracias

  14. anders stew dice:

    ES BUENO QUE LE PRESTEN AYUDA.
    GRACIAS POR EXPLICAR

  15. juan_madrid dice:

    no puedo hacer que al ir al menu, se queden solos los botones del menu, siempre me sale el desplegable del submenu y todo.
    como puedo hacer para que al iniciar salgan solo los botones de menu???
    y ademas al pasar el raton por encima si lo hago en horizontal desde el primer boton hasta el ultimo deja abiertas todos los submenus
    espero me puedan ayudar
    gracias, por cierto es una maravilla de tutorial

  16. Kit-K@t dice:

    Lo que acontece es que no explicaron una cosa, la mascara roja (ejemplo) que se coloca para el submenú tienen ponerla del tamaño del primer boton en su primer fotograma y luego ir al ultimo fotograma y extenderla hasta que tape todos los botones, la combierten en mascara denuevo y pronto XD.

  17. Kit-K@t dice:

    Ah otra cosa muy buen tutoria, bien detallado, gracias :)

  18. adriana dice:

    me perdi en el punto 14 por que no se como m aparezca lo q he hecho hasta ahi x fa lo necesito

  19. Alejandro dice:

    Graciasssssssssssss Buenisimo me sirvió mucho….

  20. isidro dice:

    disculpa tengo una duda?ya hice el menu desplegable ya me corre y todo ,lo unico que pasa es que al pasar el puntero sobre el boton principal ,los botones de subindice me aparecen al mismo tiempo y no uno por uno como los que estan publicados o en el ejemplo.espero y me puedan contestar.gracias espero y se puedan hacer mas como estos que son entendiblesy muy utiles.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>