1. Primer Paso.
Creo que estaremos de acuerdo si digo que el botón tiene, acciones que serían más o menos así: " si me hacés un click muestro el menú" y otra acción para cuando el menú esta visible que dice " si me haces un click oculto el menú" sigamos..
2. Realizar el primer paso.
La primera parte consiste en un MC (movie clip) que posee en el primer frame (o fotograma) un layer (o capa) con la acción:
y en otro layer un botón, el cual contiene la acción:
Código:
on (release) { ......gotoAndStop(2);
}
¿y esta acción para que? y pues, en el segundo Frame del MC, colocás los botones que mostrarán el menú.
Ahora creamos el segundo frame, justo como muestra la imagen superior, luego de colocar los botones debes asignarle las acciones. La acción del botón que despliega el menu será:
Código:
on (release) { ......gotoAndStop(2);
}
para regresar el menú a su estado inicial.
Y al resto de los botones deberás colocarle las acciones que tu requieras...
Muy fácil no?
Ok, es muy simple? entonces intentemos complicarlo.
3. Segundo paso, el menú ahora tiene que tener efecto (algún movimiento entre los frames)!
- Pero... ¿y que tan complejo puede ser esto? - Pues como tu quieras, es solo un poco de imaginación y motion tween, para quienes AS nos queda grande aún. Veamos como lo hice.
4. Teoría del funcionamiento del menú
Para hacerlo mas simple, el menú consta de dos partes, como primera parte tenemos el botón que mostrará y ocultará el menú, y segundo nos queda el efecto que muestra y oculta los botones y los botones propiamente dichos. Todo esto claro, dentro de un MC.
Una forma util de organizarnos sería, ubicando todo en layers distintos, uno para las acciones, pues necesitamos un "stop" en el primer fotograma, otro layer para el botón principal. Y para los botones y la animación necesitaremos un layer para los botones y otro layer que transformaremos a "MASC" (máscara),
...y procedemos a colocarlos de esta manera......
en la timeLine tendremos
y dentro del mc tendremos algo así....
Esto es lo que deberías tener en el primer fotograma, claro, sin las letras :P
Ahora, recuerda colocar el "Stop" en el primer fotograma, y cada cosa en su lugar...
Al botón principal, recuerda colocarle la acción:
Código:
on (release) {
......play();
}
en esta parte deberás colocar también la acción para cada botón del menú y también la acción para que desaparezcan los botones si así lo deseas... [esta acción sería la misma que para el botón principal, (la que está en el cuadro inferior)]
Recuerda tambien el rectangulo gris que dibuje en el layer MASC, es el área visible, (si tienes dudas sobre MASCARAS, te recomiendo que veas el tutorial de máscaras antes de seguir..
Ahora que tienes todo en el primer fotograma realicemos la animación de los botones. Presta atención a esto...
En el layer botones, insertaremos un fotograma clave en el frame 20, al resto de las capas también debes agregarle frames, así es que, en el frame 20 posiciónate en cada layer y presiona F5 (insertar fotograma vacío).
Volvemos a "botones"
Selecciona todos los fotogramas y crea un motion tween (interpolación de movimiento) - ya sé, que esto esta muy largo?, que a donde voy con esto? pues, ahora con el motion tween creado, inserta un fotograma clave en el frame 10, selecciona el grupo de botones, muévelos y colócalos dentro del área gris de la capa, que para mayor comodidad puedes colocar en modo Contorno, (clikeando en el cuadradito de color que esta despues del ojito y el candado)
aquí un ejemplo de como queda...
como verás, no solo hay un keyframe en "botones", sino que también hay otro en el layer "acciones" y otro en el layer "botón"
En "acciones" debes colocar un "Stop" para detener la película y dejar que el navegante seleccione alguna opción.. y al botón principal solo déjale la misma acción de "play" que colocaste en el primer fotograma.
Y ya es hora de que pruebes tu propio menú desplegable....
Recuerda colocar una instancia de MC en el escenario y "Ctrl + Enter" para ver como quedó!!!
Si tienes algun problemita, no te desesperes... antes de quemar nada, sería bueno que revises desde el paso 4, comparando las imágenes, y verifica también las acciones en los botones y los fotogramas...
De seguro no tienes problema alguno.
Ahora que verificaste lo fácil que puede ser crear un menú de seguro querrás agregarle algunos otros truquillos.. como el de que aparezca con solo colocar el puntero sobre el botón, o que desaparezca alejando el puntero..
5. Mejorando el menú
Bueno esto no es más que un simple truco con un botón invisible, ¿ha? si un botonito que no tiene nada en ninguno de los tres primeros estados.. solo posee un cuadradito en el ultimo estado "zona activa"
Esto lo usaremos de la siguiente forma, en el fotograma 10, donde colocaste el "stop" colocaremos el botón invisible, y le colocaremos una acción que será, cuando el puntero toque al botón esconder el menú.
Nno creas que esto es difícil, solo bastará con, crear 2 nuevos layers, ubicarlos al final, en el último colocamos el botón, y en el anterior al último luego de convertirlo en máscara, colocamos un gran rectángulo que usaremos de ventana,
aquí una imagen para que veas como sería...
por si te queda alguna duda, el rectángulo gris con una ventana al medio es el contenido de "masc 2" y ese fondo celeste agua de pileta, es el botón invisible, que ha sido estirado para abarcar el tamaño del rectangulo gris (masc 2)
En pocas palabras, lo que hicimos fue una máscara para que cuando el cursor toque el botón invisible, desaparezca el menú...
Claro ahora hay que colocarle la acción al botón invisible...
Código:
on (rollOver) {
......play();
}
Atento que dice rollOver!
ahora podrías también cambiar la acción del botón principal en el primer fotograma y colocar rollOver en vez de release,
Por último, algunas sugerencias para los efectos...
- En vez de animar los botones, puedes animar la máscara
- Si quieres un mejor efecto puedes colocar cada botón del menu en un layer distinto y animarlo independientemente.
Recuerda que al diseñar con flash creamos ilusiones... aprende a complacer al navegante..
Que te sea útil, y cualquier pregunta, pues ya sabes..