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:
- Sala de Estar: Sillas, Mesas, Mobiliario, TV/DVD
- Comedor: Sillas, Mesas, Mobiliario, Utilitarios
- Cocina: Juegos de Mesa, Alacenas, Bajomesadas, Mobiliario
- Habitación: Sommiers, Mesas de Luz, Placards, Mobiliario
- Cuarto Niños: Sommiers, Mesas de Luz, Placards, Mobiliario
- Escritorio: Sillas, Escritorios, Bibliotecas, Armarios
- Deco: Pinturas, Objetos de Arte, Mantas/Cortinas, Estilo Vintage
¡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:
- Estar y Escritorio: Sillas, Mesas, TV/DVD, Escritorios, Bibliotecas, Mobiliario
- Cocina y Comedor: Sillas, Mesas, Conjuntos, Alacenas, Bajomesadas, Utilitarios
- Habitación: Sommiers, Mesas de Luz, Placards, Mobiliario, Muebles para Niños
- 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).
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Ã:
Crear la caja de texto y escribir cada subsección- Generar un cuadrado debajo, teniendo en cuenta las lÃneas de diseño del menú inicial
- 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.
- Selecciona un rectángulo (el primero en este caso es Sillas)
- Convierte el rectángulo en Botón (F8)
- 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…
- Selecciona todo el menú
- Conviértelo en Movie Clip
- Nombra a la Movie Clip como menu1
- Ingresa en la pelÃcula y convierte nuevamente todo en Movie Clip
- Genera una animación, creando un nuevo fotograma clave en el frame 4 y otro, por ejemplo, en el frame 7.
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.- Genera interpolación de movimiento (tween) entre todos los frames.
- 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ú.
Volviendo 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:
- Ingresa dentro de la movie menu1
- Crea una nueva capa por debajo de la existente
- Dentro de esa capa, en el fotograma 4 crea un fotograma clave
- Crea un rectángulo que abarque el menú y el nombre del menú
- Convierte el rectángulo en botón invisible
- 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
Ahora 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 |
Lunes, 5 de Mayo de 2008 a las 13.52
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…
Lunes, 5 de Mayo de 2008 a las 16.29
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
Martes, 8 de Julio de 2008 a las 13.26
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
Jueves, 10 de Julio de 2008 a las 10.41
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