Principal | Animacion | Flash | Crear un menu desplegable en Flash - Drop down menu

Crear un menu desplegable en Flash - Drop down menu

TamaÒo de la fuente: Decrease font Enlarge font

Autor & Creditos: Maverick

Este es un menu desplegable muy simpatico (drop down menu flash).

Antes de crear el Menu, como veremos en el video, hemos creado dos imagenes una imagen es la que se muestra en el boton de reposo  y la otra imagen es de sustitución cuando pasamos el mouse por encima de nuestro menu.

Quizas no entiendan muy bien cuando trato de duplicar los botones arrastrando los botones, como copiar el boton llamando "invisible button" esta acción se realiza precionando la Tecla SHIFT + ALT arrastramos con el mouse y lo soltamos y se duplica.

Ejemplo:

 

Clic en la Imagen para ver el Video Tutorial

 Clic en la Imagen para ver el Video Tutorial

 

 En la ultima parte del video hablamos sobre agregar el codigo para que abra nuestros vinculos, bien son estos los codigos.

Abre la pagina en la misma ventana

on (press) {
    getURL("http://www.alt224.com/");
}

Abre la página en una nueva ventana.

on (press) {
    getURL("http://www.alt224.com/","_blank");
}

 

 

Adicionar a: Add to your del.icio.us del.icio.us | Digg this story Digg

Comentarios (65 Publicado):

Alejo Sobre 02 June, 2010 04:19:42
avatar
Hola hice todo el tutorial al pie de la letra y a la hora de probarlo me tira este error:

"Advertencia: Etiqueta duplicado, Símbolo=button1_mc, Capa =labels, Fotograma=20, Etiqueta=open"
Edgar Sobre 22 May, 2010 07:56:12
avatar
Hola, lo unico que me falla es el codigo de "rollover".. no se de donde sacarlo :(
salvador Sobre 15 May, 2010 10:29:48
avatar
hola quisiera saber si se puede poner un xat com. en el escenario de flash cs3. pues he hecho varias pruebas y no lo consigo les dejo el codigo del xat haber si me pueden ayudar.

<img style="visibility:hidden;width:540px;height:405px;" border=0 width=540 height=405 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNzM3NzQyMjkzMzMmcHQ9MTI3Mzc3NDIzOTU1NiZwPTUzMTUxJmQ9Jmc9MSZvPTc1OTFjNGM2YmI2MjQ3ZGY4Mjhk/Yjc1YTU2MzUzOWE4.gif" /><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" width="540" height="405" name="chat" FlashVars="id=37071924&gn=palosnervios" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/chat/embed.php?id=37071924&GroupName=palosnervios">

un saludo . SALVADOR.
edwar caro Sobre 14 April, 2010 02:25:10
avatar
quisiera conocer otros tutoriales hacerca de diseño de animaciones de menu
Felpe Sobre 24 March, 2010 01:42:55
avatar
No puedo descargar el video tutorial. ¿Es posible que me ayuden a descargarlo?
Salvador Sobre 19 March, 2010 01:36:16
avatar
Excelente !!!

Gracias por compratir , era lo que buscaba
Pablo Sobre 10 March, 2010 05:37:08
avatar
Maverik realise todos los pasos ahora yo quiero que los botonos se dirigan a un frame donde desarrolle la pagina por ejemplo a uno de los botones emergentes le doy la siguiente acción y no me responde:
on (release) {
gotoAndStop (1);
}
quisiera que al hacer clik en el boton emergente vaya al frame donde tengo la pagina web. me podrías dar una respuesta a ello. muchas gracias
Angel Sobre 17 February, 2010 08:24:14
avatar
Hola Maverick: Muchas gracias por este estupendo tutorial. Estaba atascado con el menú y me has salvado. Funciona todo perfectamente.
Saludos
sergio Sobre 08 February, 2010 08:44:21
avatar
hola maverick tengo un problema kaundo kiero kiero k los botones me ballan a una escena kon x fotograma por decir escena 2 al fotograma 15 se supene k el kodigo es on (release) {
gotoAndPlay("escena2", 15);
}
pero kuando los ejecuto no hace nada no ve a la escena k le pido ni nada me puedes colaborar en eso?
kelmier Sobre 06 February, 2009 02:31:05
avatar
mi pregunta es como enlazar el menu con el iframe e puesto lo siguiente y no me hace nada

on(release){getURL("verinci.html","mainFrame");}
JOse Carlos Sobre 30 January, 2009 07:26:35
avatar
Que onda maverik te felicito desde Guate , muy buenos tutoriales fijate que he hecho todo los pasos del tutorial y en el momento de probarlo no pasa nada y lo raro es q tampoco me sale error en el script que puedo hacer? GRACIAS =)
Maverick Sobre 12 January, 2009 03:19:31
avatar
poloko, mirate el video numero 3 de full flash site, ahi enseño como vicular los botones a una determinada escena. solo asiganle un nombre de instancia a la escena y listo.
Poloko Sobre 08 January, 2009 06:04:27
avatar
Hola Maverick, un saludo desde Col. te cuento que me parece muy Vacano tu videotutorial, es completo, pero he tenido problemas tratando que el menu me lleve a otras escenas.

la cuestion es la siguiente:
escena 1: inicio
escena 2: quienes

en el menu tiene la sigiente estructura.

Quienes somos.
- Historia
- Mision

que quiero, cuando de click en historia, me lleve a la escena "quienes" fotograma 1.
me podrias ayudar. el prototipo de lo que hago esta en www.sunrise.com.co
te agradezco.
Poloko
fede Sobre 04 January, 2009 12:47:26
avatar
Me ayudaste mucho gracias pero te hago una pregunta

¿Podes poner para descargar los archivos?
Maverick Sobre 04 January, 2009 05:56:43
avatar
metro, yo creo que la mejor solucion en estos casos son los comboboxs, hacer una lista desplegable te tomaria mucho tiempo realizando capa por capa de cada boton.
metro Sobre 02 January, 2009 05:36:42
avatar
Hola amigazo!! muy buenos tus tutoriales.Soy novato en flash y te agradezco por los videos-tutos.
Consulta : como podria hacer que se combine con otro desplegable , o sea por ejemplo tener uno con nombres d epaises y que al hacer clic en boton elegido salga cargado en el otro las provincias .
Muchas gracias.
PD.: Es que con el combobox no me sirve me da error porque es con carga externa
Maverick Sobre 22 December, 2008 06:53:19
avatar
Mayra estas escribiendo mal el codigo: gotoAnPlay

es asi:

gotoAndPlay
mayra Sobre 13 December, 2008 06:07:09
avatar
hola, gracias por el tutorial, es muy bueno y sencillo. mi problema es que al colocarle el codigo al boton no funciona;
on(press){
gotoAnPlay("Escena 2",1);
}
no pasa a la siguiente escena, si pudieras decirme que esta mal o cual codigo puedo usar, te lo agradeceria.

att: mayra
Maverick Sobre 10 December, 2008 09:29:49
avatar
adolfo para vincular a un MC, lo que tienes que hacer es darle un nombre de instancia, mira unos comentarios mas abajo, le explico lo mismo a otro usuario.

Pablo, que es lo que no funciona? trata de ser especifico, asi podre darte un asistencia concreta.

Tambien te recomiendo que seas paciente y veas el video unas dos veces y luego reciend realizes el ejemplo, no siempre nos sale a la primera...
pablo Sobre 08 December, 2008 04:08:52
avatar
muy buen tutorial hombre te pasaste pero sabes no me funcionan las scipt, te pediria k me los dieraas exactamente, porfavor, pero te mereces mil felicitaciones
Adolfo Sobre 07 December, 2008 08:53:51
avatar
Estimado Maverick, el comentario es para felicitarte y darte las gracias por este EXELENTE tutorial, lo seguí paso a paso y funciona perfectamente bien; sin embargo, tuve un problema al momento de querer vincular los botones hacia un fotograma de la Escena 1 al que he llamado “principal”. Ya utilicé las sugerencias que describes en el foro, pero desgracia todas sin un resultado satisfactorio.
Ojala puedas ayudarme. De antemano muchas gracias.

Adolfo_morales2@yahoo.com.mx
Maverick Sobre 05 December, 2008 03:43:34
avatar
solo cambia la url por el nombre de tus paginas:

on (press) {
getURL("index.html");
}

Abre la página en una nueva ventana.

on (press) {
getURL("contacto.html","_blank");
}
Sobre 05 December, 2008 01:47:26
avatar
hey mira se me olvidaba... tengo otra pregunta.. como hac¡go para vincular uno de los botones desplegables. a un archivo swf, a un pdf, y a un html pero que no esta en la red, osea no como www.google.com o www.videotutoriales.us, si no a un html q hice en dremwever... y q tngo en mi pc..... te agradeceria mucho la respuesta... y disculpa q joda tanto
Sobre 05 December, 2008 01:40:47
avatar
hey muchisimas gracias maverick... me salvast la vida..... y si me funciono..EXELENTE!!!!!! ya me corrio cabal la pagina muy bueno el tuto.....
mario Sobre 04 December, 2008 03:40:54
avatar
disculpa estan muy interesantes tus tutoriales y me gustaria que pusieras mas. tengo una duda porque pusiste rectangulos a los lados del menu. gracias
Maverick Sobre 04 December, 2008 01:49:14
avatar
juantonio, para poder enlazar a un escenario (movie clip) tienes que haberla creado, por ejemplo si creamos un movie clip, a ese MC tenemos que darle un nombre de instancia que esta en propiedades, le ponemos "contenidos" ingresamos a ese MC y creamos 5 fotogramas que pueden trabajar con 5 botones,

entonces en el boton iria el siguiente codigo para vincule a la escena:

on(release){
this.contenidos.gotoAndStop("1");
}

entonces ahi le estamos diciendo al boton que vaya al MC contenidos y al fotograma 1.
juantonio Sobre 04 December, 2008 09:30:13
avatar
hey maverick excelente tutorial solo tengo un problema, al qrer vincular a la escena fuera del movie clip no me deja, y ya intente como digidt de ir a comportamiento luego + , clip de pelicula ir y detener fotograma o etiqueta, vaya asta lli bn todo pero solo me da opcion de enlasarlo con otros movie clip, y yo lo quiero enlasar al escenario principal.... de antemano gracias.... y si puedes agregame juantonio_05@hotmail.com habr si me puedes ayudar..... mil gracias
Maverick Sobre 03 December, 2008 08:26:06
avatar
cristian, solo cambia la url por el nombre de tus paginas:

on (press) {
getURL("index.html");
}

Abre la página en una nueva ventana.

on (press) {
getURL("contacto.html","_blank");
}
cristian Sobre 03 December, 2008 05:57:54
avatar
gracias por los vidos estan muy buenos pero tengo una inquietud, ise una paguina y le meti los menus desplegables pero solo me hace vinculo a pag oficiales como google y quisiera que me isiera el vinculo pero al comtenido de mi web espero me ayan entendido gracias
lo_co Sobre 30 November, 2008 11:16:27
avatar
sos un kpo
Karem Sobre 28 November, 2008 04:51:33
avatar
Hola!!!
Queria agredecerte por tu tutorial! Me ayudo muchismo!!!
Maverick Sobre 21 November, 2008 08:26:28
avatar
Lucky mira bien la ultima parte del video, es donde se crea una capa invisible para que el menu sea desplegable.

jorgetex, hay un video en la seccion de flash, para aprender a crear reprodcutor de mp3.
jorgetex Sobre 21 November, 2008 07:45:40
avatar
oye excelente los videotutoriales que haces,,mira estoy diseñando una pagina en flash y quisiera ponerle un reproducir musica en mi pagina el diseño lo puedo hacer pero lo que no se es como crear los reproductores de musica y como hacerlo nitido.. gracias de antemano por la ayuda.
Lucky Sobre 19 November, 2008 02:37:56
avatar
Hola, quiero agradecer por este tutorial, soy novata en flash y me ayudó bastante, solo que al probar la película, no me despliega el menú, solo hace el efecto de color el el boton del menú y los demás no se despliegan .... AYUDAAAAAA!!! gracias
Maverick Sobre 19 November, 2008 07:59:00
avatar
Alex, lee los comentarios de abajo, ahi tienes la solución.
alex Sobre 18 November, 2008 04:57:06
avatar
Maverick excelente tutorial,
Solo tengo un pequeño problema, quiero que al hacer clic en el boton vaya a un fotograma,en la pelicula en la que trabajo y no puedo, gracias!!!
dina Sobre 16 November, 2008 06:25:03
avatar
Maverick !! Eres un genio!! Mil gracias por ayudarnos con los actions scripts, que son un dolor de cabeza!! me a servido muchisimo!!..saludos!!
JJ Sobre 10 November, 2008 12:32:23
avatar
QUISIERA LOS CODIGOS
PARA DARLES EFECTOS AL
MENU DEZPEGABL

POR FAS

NO LO PUEDO INTRODUCIR

MANUALMENTE
Maverick Sobre 05 November, 2008 07:49:04
avatar
Alexis para enlazar el movieclip con el boton, seleciona el boto, luego vas a comportamientos (si no esta activo ve a ventana ahi lo activas) luego le das clic en el signo MAS (+) Seleccionas "Clip de Pelicula" y luego escoges "ir y detener en fotografama" y finalmente escojes vincular al MC que quieres reproducir con ese boton.
Alexis Zanini Sobre 03 November, 2008 03:56:06
avatar
Hola Maverick, antes que nada felicitaciones x el tutorial, la verdad me esta ayudando mucho. Pero tengo un problema, y espero que puedas ayudarme a solucionarlo, hice el menú y me salio bien, le puse el vinculo getURL y también me salio, pero si quiero hacer un vinculo para alguna escena de mi archivo flash no me anda. ¿que puedo hacer?
Dentro del clip de películas que tengo los botones, le pongo a un botón el siguiente codigo:
on (release){
gotoAndPlay ("nombre de la escena",1);
}
pero cuando lo publico y lo pruebo no me funciona. ¿que estoy haciendo mal?
Por favor te agradecería mucho si me podes ayudar.
Desde ya muchas gracias.
Alexis.

kelly Sobre 02 November, 2008 02:14:32
avatar
Al ingresar :
on (rollOver) {
gotoAndStop("open")
}
me sale error
Maverick Sobre 27 October, 2008 06:15:29
avatar
Hola dpruebas, bien puedes cojer el boton, luego activas el panel de "comportamientos" en VENTANA, una vez activa la ventana de comportamientos, das clic en el icono + que esta a tu izquierda del panel y te abre un submenu, seleccionas clip de pelicula, luego "ir y detener en fotograma" seleccionas tu fotograma donde quieres que vaya el link, y listo... eso es todo.

Perdonen si no puedo responder muy rapido, es que andamos en la semana de Photoshop, preparando los videos dia a dia.
dpruebas Sobre 23 October, 2008 11:28:44
avatar
¿¿Como coloco vinculos a otros fotogramas??

Por favor...
Dpruebas Sobre 21 October, 2008 06:57:07
avatar
Un saludo...

Maverick excelente tutorial, gracias a el lo iba haciendo con mi propio estilo, incluso puse botones en varias direcciones...

Solo tengo un pequeño problema, quiero que al hacer clic en el boton vaya a un fotograma, intente hacerlo como lo he hecho en otros botones que me funciona funcionan pero no son desplegables(Comportamientos->Clip de pelicula->Ir y reproducir en fotograma o etiqueta), y lo que ocurre es q el boton deja de funcionar.

Quisiera saber como puedo hacerlo, repito, para ir a un fotograma clave (del mismo flash y escena) que tiene etiqueta, y no a una web como haces referencia.

Gracias y espero me respondas.

Suerte!
david hilla Sobre 21 October, 2008 05:29:23
avatar
hola buenas tardes.

excelente tutorial en verdad, super didactico.

mi pregunta es:

he hecho todo lo q dice, pero al mamento de asignarle al boton q vaya a la escena que quiero (la primera q es en donde tengo, en cada frame, las hojas q quiero se vean) no me manda para el label asignado. se queda en donde esta. en el tutorial le dicen q vaya a X web, lo cual funciona maravillosamente, pero para q me regrese al label en la escena q quiero no me lo permite.

mi menu desplegable esta hecho en un movie clip q se encuentra en un frame de la escena 1, el frame q quiero se vea se encuentra en dicha escena, como le hago???

de antemano gracias por su pronta respuesta
jorge Sobre 21 October, 2008 12:22:42
avatar
me sale el siguiente error: Sólo se permiten los eventos de ratón para las instancias de botón, al poner el siguiente codigo-. on(rollOver){
gotoAndStop("open");
}, que puedo hacer????
Maverick Sobre 14 October, 2008 03:30:07
avatar
Hola cinthia que es lo que no te sale?, podrias ser un poco más especifica en el problema que tienes?
cinthia Sobre 14 October, 2008 07:00:52
avatar
Hola, disculpa tu tutorial esta muy bien pero van varias veces que lo intento y la verdad no me sale ojala y pudieras ayudarme por que lo he hecho igualito y no me funciona al final solo se queda el puro menu y no hace nada te lo agradeceria mucho.
Bile Sobre 06 October, 2008 05:34:18
avatar
La Esencia, mientras estas probando el menu no te va a abrir en la misma ventana, tienes que ponerlo en html para que te abra en la misma ventana, por favor lee lo que te dijo Maverick
La Esencia.. Sobre 06 October, 2008 02:19:34
avatar
Pues como lo hago para que se me abra en la misma ventana el link de mi menu flash???

Muchas Gracias.
Baruchoo! Sobre 01 October, 2008 04:00:16
avatar
hola!! oye si me salio el menu y asi todo padre!! pero quiero ponerle el vinculo al boton para que pase a otra escena y no funciona!! porfaaa ayudenme!! gracias!
Maverick Sobre 22 September, 2008 12:43:29
avatar
Hola La Esencia, seguramente estas probando el flash mediante el reproductor por defecto de flash, lo que pasa es que cuando tienes esta sentencia: on (press) {
getURL("http://www.alt224.com/");
}
trata de abrir esa página en la misma ventana y como flash player no puede reproducir páginas, si no solo archivos SWF, entonces no lo abre, Pero si pones el mismo codigo pero agregado la sentencia BLANK, estas diciendole que abra en una nueva ventana. entonces si tu tu archivo le agregas al HTML con el primer código trabajará con normalidad, pero te abrira en la misma ventana, cosa que no hace el segundo código.
La Esencia.. Sobre 21 September, 2008 04:51:46
avatar
cuando pongo este codigo para que vaya a una dirrecion no me funciona:

on (press) {
getURL("http://www.alt224.com/");
}

en cambio cuando pongo este

on (press) {
getURL("http://www.alt224.com/","_blank");
}

si que me funciona,

me prodian explicar porque no funciona.

Gracias!!
Mortensen Sobre 17 September, 2008 11:59:18
avatar
Hola, exelente los tutoriales, me ahn ayudado mucho la verdad... muchas gracias... :D
una pregunta... la verdad que soy nuevo en esto... y como estoy haciendo una web en flash muchas cosas nose, mi pregunta es como hacer para que de un documento en flash, atravez de las acciones, pase a otro documento. Por lo que vi es:
1 on (realce){
2 getURL(""):
3}
El problema de esto es que se me abre una ventana en la que estan todos los documentos... ¿como ago para que abra uno en especial?
Desde ya muchisimas gracias...
Jose Alberto Lugo Sobre 12 September, 2008 09:14:52
avatar
Le puse el codigo que me pasate y nada,.

no funciona no se lo que pasara,.


Gracias,.
Maverick Sobre 12 September, 2008 06:14:32
avatar
Prueba con este código: <object type="application/x-shockwave-flash" data="http://one.xthost.info/flowdenene2/La%20Esencia%20Menu.swf" width="385" height="700">
<param name="movie" value="http://one.xthost.info/flowdenene2/La%20Esencia%20Menu.swf" />
<param name="quality" value="high" />
<img src="flash.png" width="700" height="385" alt="Imagen en reemplazo de flash" />
</object>
Jose Alberto Lugo Sobre 12 September, 2008 05:57:19
avatar
lo subo con este codigo a mi blog


http://moresongss.blogspot.com/



<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" type="application/x-shockwave-flash" height="385" src="http://one.xthost.info/flowdenene2/La%20Esencia%20Menu.swf" bgcolor="#FFFFFF" width="700" name="mp3player"></embed>
<br/>
Maverick Sobre 12 September, 2008 05:51:53
avatar
es muy extraño, prueba exportando en Actionscript 2.
Jose Alberto Lugo Sobre 12 September, 2008 05:45:58
avatar
Si eso si que se hacerlo, lo que pasa es que cuando voy a Control y voy a Probar Pelicula, y le doy a los botones me redirecciona a las webs que he puesto,.

Pero cuando subo esa imagen flash los botones no me hacen ninguna funcion,.

Muchas Gracias.
Maverick Sobre 08 September, 2008 05:55:33
avatar
Hola José, selecciona el boton y preciona la tecla F9, te abre el panel de acciones e insertar este código:
on (press) {
getURL("http://www.alt224.com/");
}

alt224.com lo reemplazas por la dirección de tu Web.

Saludos
Jose Alberto Lugo Sobre 08 September, 2008 10:04:40
avatar
Esta chulo este sitio, y espero que sigas haciendo tutoriales.

Yo hice un menu flash cuando lo subo todo bien pero cuando le doy por a un boton de mi menu no me abre la pagina que quiero, si es posible contacta conmigo para explicarte si no entendiste mejor. josepita91@hotmail.com

necesitaria los codigos para subirlo o algo no se para que puedan funcionar los botones de mi menu gracia,.

;)

La Esencia,.
miguel Sobre 25 August, 2008 08:38:15
avatar
otro exelente tutorial muchas gracias que didactico espero que sigas haciendo mas tutoriales hermano gracias de nuevo
Maverick Sobre 25 August, 2008 06:28:59
avatar
No estas haciendo bien la parte donde creamos un boton invisible para que pueda desaparecer el menu, una vez que quitamos el puntero de la barra-menu.

El boton invisible es cuando creamos una cuadro medio verde. fijate bien en esa parte.
harold Sobre 25 August, 2008 08:44:55
avatar
hey tatpe gracias por el tutorial una pregunta.. he hecho todo el menu y me salio todo bien!!! pero cuando pruebo el clip y cuando pongo el puntero del mouse dentro del menu tambien funciona, pero cuando lo saco ya no desaparece se queda como desplegado que hice mal?
lupita Sobre 16 August, 2008 12:02:32
avatar
oye gracias me sirvio muchisimo este tutorial...no habia encontrado una explicacion tan bien dada como la que das tu muchas gracias!!!

Envie sus comentarios comment

Por favor ingrese el codigo de la imagen:

  • email Email a un amigo
  • print Imprimir version
  • Plain text Texto plano
Tags
Rate el articulo
5.00
Advertising
Powered by Vivvo CMS v4.0