Menú desplegable en Flash

Que tal, pues hoy pondré un pequeño tutorial de como hacer menús desplegables en flash como este:




Bueno, primero que nada creamos un archivo nuevo en flash y creamos una capa adicional a la que ya existe, en la primera capa dibujamos nuestro boton de menú y lo hacemos botón, a esa capa la llamamos menú y a la capa de abajo botones.

1.- Para trabajar más comodamente bloqueamos la capa de menu y le quitamos la visualización, trabajaremos con ella más tarde.

2.- En nuestra capa "botones", creamos los botones o figuras que deseamos que aparezcan al dar click en nuestro botón menú en la posicion que queremos que permanezcan al terminar la animacion.

3.-Los seleccionamos todos y los convertimos en clip de pelicula presionando f8 y seleccionando movie clip o clip de pelicula dependiendo de el idioma de nuestro programa y lo nombramos botones.

4.- En la barra de propiedades, le ponemos como nombre de instancia a nuestro clip de pelicula: botones. NOTA: Es muy importante poner este nombre de instancia, ya que sin eso no fnciónara nuestra película.

5.- Damos doble click en nuestro clip de pelicula para entrar a el, ya dentro del clip de pelicula, nuevamente seleccionamos nuevamente nuestros tres elementos, damos click derecho sobre ellos y despues click en: Distribuir en capas (o Distribute to layers) y veremos como se destribuyen los elementos en una capa cada uno. La capa de hasta arriba, que es adicional a la de nuestros elementos, la aprovecharemos para poner tags o etiquetas, pero eso será mas adelante, por lo pronto la bloqueamos.

6.-Creamos una capa nueva que quede debajo de la de las etiquetas, pero encima de nuestras 3 figuras, a esta capa le llamaremos acciones, al fotograma 1 le ponemos un stop, o sea: stop(); dentro de la misma capa vamos al fotograma 25, insertamos un fotograma clave vacio y nuevamente insertamos un stop.

7.-En cada una de nuestras capas de nuestros elementos creamos un fotograma clave en el fotograma 25, en el fotograma 1 ponemos nuestro elemento a la altura del boton de menu que esta en nuestra escena, despues en el canal alpha le ponemos el valor 0, en el fotograma 25 lo dejamos tal y como está.

8.-En cada una de nuestras capas, en la linea de tiempo, seleccionamos todos los fotogramas del 1 al 25, damos click derecho y despues click en copiar, despues nos posicionamos en el fotograma número 26, damos click derecho y click en pegar, despues, con los fotogramas seleccionados damos click derecho en "reverse frames" o "invertir fotogramas".

9.-¿Recuerdan nuestra primera capa que dejamos vacia? Pues vamos hacia alla, seleccionamos el primer fotograma y en la barra de propiedades, en donde dice escribimos uno. En el fotograma 2 agregamos un fotograma clave vacio y en el mismo lugar escribimos dos, en el fotograma 26 aregamos un fotograma clave vacio y en el mismo lugar escribimos tres, vamos al fotograma numero 50 y agregamos un fotograma clave vacio.

10.-Ahora vamos a dibujar un área sensible para que cuando el mouse se posicione sobre ella, nuestros botones regresen a su posicion inicial, o sea, desaparescan, para esto creamos una nueva capa llamada zona sensible, en esta capa vamos al fotograma numero 25 y creamos un fotograma clave vacio, en este fotograma dibujamos tres rectángulos que rodeen nuestros botones, más o menos así:


Los seleccionamos a los 3, los agrupamos y los convertimos en un botón, damos doble click sobre el y el fotograma "up" lo arrastramos hasta el fotograma "hit" de manera que quede asi:


11.-Regresamos a nuestro clip de película llamado botones, seleccionamos nuestro boton de zona sensible y en el panel de acciones escribimos lo siguiente:

on(rollOver){ gotoAndPlay("tres");}

12.- Ahora regresaremos a nuestra escena principal, ¿Recuerdan nuestra capa de menú? pues ahora vamos a ella, desbloqueandole y activando su vizualización, ahora bloqueando y quitando la visualización de la capa de botones.

13.- Damos click en nuestro botón de menú y en el panel de acciones escribimos lo siguiente:

on(release){_root.botones.gotoAndPlay("dos");}

14.- Adicionalmente si lo deseamos podemos ponerle efectos de color al botón menú al darle click o posicionar el mouse sobre el como yo lo hice.

Bueno, pues espero que les sirva este pequeño tutorial que elaboré, gracias por su atención.