Alejandra 1 de mayo de 2008 a las 12.13
   Imprimir artículo
elWebmaster.com

Taller de Flash: Menúes emergentes


Antes de ver guías de movimiento y a pedido de ustedes, una clase de regalo sobre menúes emergentes. Cuando tu sitio tiene demasiadas secciones, es casi imposible armar un menú simple: deberás recurrir a los menúes emergentes.

Los menúes desplegables se ven bien, organizan mejor la estructura de tu sitio y son cruciales en temas de usabilidad. En esta clase veremos cómo generar este tipo de menúes a partir de algunos conceptos de diseño, máscaras y un poquito de ActionScript.

Usabilidad en botones desplegables

Steve Krug, en su libro sobre usabilidad “Don’t make me think” habla de la importancia de hacer las cosas simples. Para él, cuando hay muchas opciones es más difícil decidirse. Es preferible darle al usuario pocas opciones. No importa si tiene que hacer 5 veces clic: lo importante es que cada vez que haga clic tenga la seguridad de que está yendo por buen camino.

En este sentido, si tenemos un menú con muchas opciones, es mejor simplificarlo. Las opciones principales de un menú deben verse como la estructura madre sobre la que se organiza el sitio. Pueden chequear nuestra clase anterior sobre la estructuración de un sitio.

Cuando tengas organizada la estructura de tu menú, ten en cuenta que estarás frente a nuevos problemas de usabilidad. ¿O nunca te sucedió de abrir un menú de estos y que se cerrara solo? Bueno, son cosas para resolver…

Planificando el menú

He creado un sitio nuevo especialmente para esta clase. La temática del sitio es una mueblería. Mis secciones y subsecciones iniciales eran las siguientes:

  1. Sala de Estar: Sillas, Mesas, Mobiliario, TV/DVD
  2. Comedor: Sillas, Mesas, Mobiliario, Utilitarios
  3. Cocina: Juegos de Mesa, Alacenas, Bajomesadas, Mobiliario
  4. Habitación: Sommiers, Mesas de Luz, Placards, Mobiliario
  5. Cuarto Niños: Sommiers, Mesas de Luz, Placards, Mobiliario
  6. Escritorio: Sillas, Escritorios, Bibliotecas, Armarios
  7. Deco: Pinturas, Objetos de Arte, Mantas/Cortinas, Estilo Vintage

Secciones iniciales Usabilidad

¡Son 7 secciones! La pregunta es, ¿Necesito tantas opciones iniciales? ¿No estoy mareando al usuario? Con un poco de tiempo pude reorganizar el sitio y por fin dí con una solución que me deja muy conforme:

  1. Estar y Escritorio: Sillas, Mesas, TV/DVD, Escritorios, Bibliotecas, Mobiliario
  2. Cocina y Comedor: Sillas, Mesas, Conjuntos, Alacenas, Bajomesadas, Utilitarios
  3. Habitación: Sommiers, Mesas de Luz, Placards, Mobiliario, Muebles para Niños
  4. Deco y Accesorios: Pinturas, Objetos de Arte, Mantas/Cortinas, Estilo Vintage

Analiza qué secciones fusioné y cómo generé nuevas subsecciones. Es importante que en tu listado separes cuáles son los puntos más importantes de tu empresa. En este caso agrupé los muebles de habitación para adultos y niños en una sola sección. Sin embargo, si los muebles para niños son un producto muy importante de la empresa, debería dejarlos en una sección aparte…

Armado del menú

El diseño general del home del sitio lo vamos a generar en una capa a la que vamos a llamar simplemente “Fondo” (1). Por otro lado, el menú inicial lo vamos a generar en otra capa nueva llamada “Menú” (2).

Capas iniciales de menú

Cuando tengas el diseño general hecho vamos a empezar con los menúes individuales. Como primer pauta, vas a necesitar un menú por cada opción inicial (en este caso 4 menúes individuales). Es conveniente diseñar cada menú ya desplegado. Para estos menúes crea una capa nueva. La vamos a llamar “M.Individuales”. En secuencia quedará por encima la capa “Menúes”, luego la “M.Individuales” y por última y debajo la capa “Fondo”.

Para crear los menúes individuales, estos fueron los pasos que seguí:

  1. Menú desplegableCrear la caja de texto y escribir cada subsección
  2. Generar un cuadrado debajo, teniendo en cuenta las líneas de diseño del menú inicial
  3. Agregar una línea entre cada palabra

La línea “corta” al cuadrado, generando un rectángulo por cada subsección. En el gráfico puedes ver que el rectángulo Bibliotecas tiene una apariencia más clara que el resto. Esto es porque fue seleccionado.

Lo mismo vas a hacer con cada menú que quieras generar. De hecho puedes copiar el primero y editarlo. Cuando tengas todos los menúes, viene la parte divertida 😉 Vamos a hacer que cada palabra del menú se transforme en un botón.

  1. Selecciona un rectángulo (el primero en este caso es Sillas)
  2. Convierte el rectángulo en Botón (F8)
  3. Trabaja el botón internamente dándole un color más claro en la opción de “sobre” o “over”.

Repite lo mismo con todos los rectángulos de todos los menúes… Es probable que las líneas separadores desaparezcan. En realidad lo que sucede es que al crear botones, estos “tapan” a las líneas. Lo que debes hacer es seleccionar sólo las líneas, agruparlas y traerlas al frente.

Ya tienes tu menú individual listo. Ahora tienes que darle animación…

  1. Selecciona todo el menú
  2. Conviértelo en Movie Clip
  3. Nombra a la Movie Clip como menu1
  4. Ingresa en la película y convierte nuevamente todo en Movie Clip
  5. Genera una animación, creando un nuevo fotograma clave en el frame 4 y otro, por ejemplo, en el frame 7.
  6. En el fotograma clave 1, mueve el menú de manera que quede arriba de la línea límite de la barra de menúes, tal como se ve en la imagen. En el fotograma clave 4, deja el menú como estaba (como si fuera el menú de la derecha del gráfico: por debajo de la línea límite). En el fotograma clave 7 repite la operación del fotograma clave 1.
  7. Genera interpolación de movimiento (tween) entre todos los frames.
  8. Al primer fotograma clave (frame 1) y al segundo (frame 4) asígnale la acción stop()

Ya tenemos la animación del primer menú. Puedes repetir los pasos con los menúes siguientes, cambiando siempre el nombre de la Movie Clip como menu2, menu3 y menu4. Yo voy a hacerlo únicamente con el primer menú.

Boton invisibleVolviendo a la escena inicial, crea un rectángulo agrupado en la capa “Menú” de un tamaño similar al título de tu primer menú, en este caso: Estar y Escritorio, tal como se ve en la imagen.

No importa el color, porque este rectángulo va a convertirse en un botón invisible. ¿Te acuerdas cómo hacer botones invisibles? Haz clic aquí para ver la clase de Botones avanzados.

Cuando ya tengas tu botón invisible vamos a pasar a la siguiente y última etapa: programar.

Comandos

No hay ningún secreto en lo que debes hacer:

Selecciona el botón invisible y en el panel de acciones escribe esto:

on (rollOver) {
tellTarget ("menu1") {
gotoAndPlay(2);
}
}

O sea que cuando poses el mouse sobre el botón invisible, le vas a decir a la movie menú1 que se reproduzca a partir del fotograma 2. ¿Qué logramos con esto? Que cada vez que alguien pase el mouse por encima de “Estar y Escritorio”, se despliegue el menú correspondiente.

Ahora, quiero que cada vez que saque el mouse de encima del menú, este menú emergente se oculte. Para eso:

  1. Ingresa dentro de la movie menu1
  2. Crea una nueva capa por debajo de la existente
  3. Dentro de esa capa, en el fotograma 4 crea un fotograma clave
  4. Crea un rectángulo que abarque el menú y el nombre del menú
  5. Convierte el rectángulo en botón invisible
  6. Selecciona el botón y en el panel de acciones copia lo siguiente:

on (rollOut) {
gotoAndPlay(5);
}
}

De esta manera le estamos diciendo que cuando pasemos el mouse por fuera del botón (o sea del menú), el menú desplegable se oculte.

Máscara

MascaraAhora prueba y verás que todo es como lo imaginamos, excepto que el menú jamás se oculta. Para ocultarlo debemos crear una máscara. Entre la capa Menú y la capa M.Individuales, debes crear una capa nueva a la que llamaremos “Máscara”. Allí generarás un rectángulo desde la línea límite hacia abajo, como se ve en la imagen.

Haz clic con el botón derecho del mouse sobre la capa nueva y selecciona la opción Máscara (Mask). ¡Has convertido la capa en una máscara!

Verás que la capa M.Individuales aparece como “contenida” por la máscara. Así debe ser. Lo que has logrado es que todos los elementos de la capa M. Individuales se muestren únicamente cuando están dentro dentro de esta máscara.

Ahora prueba. ¡Vas a ver que sí funciona!

Ten en cuenta que cada opción dentro del menú desplegable es un botón. Selecciona cada botón dentro del fotograma 4 (el que queda estático) para darle la acción que quieras.

Haz clic para descargar el ZIP del archivo FLA original (15,8 kb)

Para ver el archivo necesitas contar con la versión 8 de Adobe Flash o superior.

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (17)

  1. Danniels Castillo dice:

    Wow esta clase esta super interesante
    gracias por enseñarnos este tipo de estructura de Menúes
    Pero parece que el Archivo FLA esta dañado porque no lo abre…
    deberias de verificarlo…

  2. Alejandra dice:

    Para abrir el archivo necesitas tener Flash 8 o una versión superior. Ya agregué la aclaración… Es un problema esto de las versiones de Flash. Cuando llegas a la CS3 ya no puedes guardar en versiones viejas :(

  3. Claudia mendoza dice:

    ENCONTRE SUPER BUENOS SUS CURSOS, YO ICE EL DE FLASH Y ME A AYUDADO MUCHO, ESO SI TENGO UNA PEQUEÑA DUDA RELACIONADO A LA CLASE DE MENU EMERGENTE EN FLASH, HICE TODO LO QUE ME DIJERON, Y AL FINALIZAR INTENTE DARLE UNA ORDEN A LOS BOTONES , FUI A ACCIONES Y LE DIJE QUE FUERA (gO TO) A UNA ESCENA X Y NO PASA NADA, PARECE QUE AL SER MOVIE CLIP NO DEJA PASAR LA ORDEN, PORQUE YO HAGO DOBLE CLICK, ENTRO AL BOTON LE DOY LA ORDEN, SALGO Y AL PROBARLO NO HACE NADA…
    PORFIS
    AYUDENME
    GRACIAS

  4. Alejandra dice:

    Hola Claudia! Me es muy difícil poder ver cuál es el problema. En todo caso, me puedes enviar tu archivo .FLA a flash@elwebmaster.com para que lo revise y me dé una idea de qué está sucediendo. Un saludo. Ale

  5. Paulina M dice:

    Hola !! A mi me pasa lo mismo, tengo mi menú emergente, y entro a la movie clip y le doy la instrucción a cada botón.

    Por ejemplo quiero que uno mande a un frame label llamado alim de la Escena 1, asi pongo la instrucción:
    on (press, release) {
    gotoAndPlay(“Scene 1”, “alim”);
    }

    y no me lleva a esa escena ni al frame label, se queda como esta. Intente poner el frame label alim dentro de la línea de tiempo del movie clip y ahí si hace caso, pero, las secciones que no son del menu emergente, se tapan con las secciones que están dentro del movie clip.

    Te voy a amandar el archivo de las dos maneras, con las secciones dentro del movie clip, que es donde hace caso pero tapado a las que están fuera.

    Y en el que están en la linea de tiempo de la Escena 1 y no hace caso a la instrucción de cada botón.

    Mil Gracias.

  6. Paulina M dice:

    Ya lo encontré Claudia, a los botones de tu movie clip hay que ponerles este código, para que te lleve a algún frame de la línea de tiempo de la escena principal.

    on(release){
    this._parent.gotoAndStop(20);
    }

    En el peréntesis pon el número frame al que quieres que se dirija.

    Saludos.

  7. jhonatan dice:

    Hola… sigo todo al piè de la letra pero no funciona me aparece que el scrip tiene errores

    ayuda porfavor

  8. Fede dice:

    El tutorial funciona correectamente.
    Eso si… por ahi hay unas llamas { de mas que van a tener que borrar
    Y no copien y peguen lo que leen aca… las comillas, por ejemplo, están al reves y da error. ESCRIBANLO UDS. MISMO!

    SALUDOS!

  9. Laura Acela dice:

    Hola buen día,
    Tengo una duda muy grande quiero que mi menú este del lado derecho y que al pasar sobre el me saque otro menú y al darle clic me salga otra información pero no puedo hacer que en primera salga de un lado y también darle la acción que es lo que puedo hacer?.

    Laura

  10. Carolina dice:

    Hola!!!!
    No me resulta hacer el menú mergente. Todo lo hago según las indicaciones, pero hay una parte en que me pierdo, cuando se hace la animación. Ahí dice que hay q hacer 2 movie clip, el primero lo nombro “menu1” y el segundo “menu2”.
    Luego al hacer los comandos señalo que hay q llamar al “menu1” (o sea, el primer movie clip que hice), pero resulta que me da error, el cual dice así “Destino no encontrado: Destino=”menu1″ Base=”_level0”
    No sé que pasa, pero no resulta.

    Ayuda por favor!!!!

  11. Ana dice:

    Hola, escelente el tutorial. pero en este ejemplo no lo puedo hacer, lo hago todo tal cual pero no funciona, si uso tellTarget, me sale el error de destino no encontrado, entonces lo reemplace con _parent.Menu1.gotoAndPlay(2);, con esto no sale error, pero tampoco me aparece el submenu. :S
    me pueden ayudar? necesito urgente hacer un menu asi y soy bastante nueva en flash y no me sale.
    muchas gracias
    espero tu respuesta
    saludos

  12. Ana dice:

    Perdon: EXCELENTE, y no ESCELENTE jiji

  13. Gerardo Ferral dice:

    Hola, no sé el tiempo real en el que leas esta nota pero deseo que te la estés pasando muy bien.
    El motivo de mi comentario es el agradecerte lo mucho que me has ayudado aunque tú no lo sepas.
    Llevo un buen rato siguiendo tus clases y la verdad creo que voy aprendiendo poco a poco (más vale un paso firme que varios inciertos…) el cómo sacarle jugo a este programa.
    Gracias a personas como tú, muchos como yo podemos salir de la angustia de una “hoja en blanco” y convertir esa angustia en un sueño hecho animación.
    Me despido no sin antes ponerme a tus órdenes y deseándote lo mejor para ti y tu familia en este año 2010.

  14. kenneth cordero dice:

    Hola, bueno, hice este tutorial paso a paso, me resulto muy interesante, sin embargo en el último paso, el de visualizar q todo quedra como se suponía (al darle Ctrl+Enter), cuando posiciono el cursor por encima del primer menú, en lugar de desplegarme el submenu, me abre una ventana q me dice: Destino no encontrado: Destino=”Symbol 1″ Base=”_level10″
    Si me pudieras ayudar te lo agradecería mucho. Gracias

  15. Edna Goretti dice:

    Me encantan estos tutoriales, ya he avanzado mucho, que bueno que existan estos sitios. Muchas gracias al web master

  16. mariia joxexita dice:

    meguxto aprendi muxo muxo

  17. michael dice:

    tengo un leve incombeniente pues me aparese un error diciendo disiendo que deberia aver un punto y como antes de leftbrace pero abri el tullo y aperecio el mismo error pero igual servia

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder