1. Lorena Rodríguez Turrubiates
~Practica 16
**Crear un submenú**
Para obtener el menú desplegable podemos seguir estos pasos:
Creamos un símbolo (CTRL + F8) llamado “submenú” de “tipo clip de
película”
En el nuevo simbolo colocamos los botones que formarán parte del
submenú, es decir el que se desplegara, para el ejemplo he colocado
5 botones
Los botones que uso para este ejemplo son extraidos de la librería
provista en flash, los podemos encontrar en ventana > bibliotecas
comunes > botones, elegimos el botón de nuestro agrado y lo
arrastramos al escenario.
Notemos que el primer botón se encuentra alienado sobre el eje de
referencia (la cruz)
En cada botón colocamos el siguiente código:
on(rollOver){ }
this._visible = true; on (press) {
} //Tu código para cada
boton
on (rollOut) {
GAEM 3ºC }
this._visible = false;
2. Lorena Rodríguez Turrubiates
Este código permite mostrar/ocultar el submenú cuando se pasa el
mouse sobre el
Seleccionamos el primer botón y desda la barra de propiedades le
aplicamos un Alpha al 0% asi
De tal modo que tengamos:
Este es el lugar que ocupará el botón principal (El que despliega el
submenú)
Creamos una nueva capa y en ella creamos un rectángulo de tal
modo que cubra todos los botones hasta el momento nuestra línea del
tiempo se verá asi:
El escenrio se verá asi:
Notemos que el rectángulo cubre totalmente los botones
Ahora cambiamos el punto de referencia del rectángulo creado para
ello seleccionamos el rectángulo y con la herramienta “selección libre”
GAEM 3ºC
3. Lorena Rodríguez Turrubiates
seleccionamos el centro del rectángulo de tal modo que ahora se
ubique en la parte superior asi:
Seleccionamos el frame que contiene el rectángulo y lo convertimos
en interpolación de movimiento, haciendo click derecho sobre el asi:
Seleccionamos alrededor de 5 frames y presionamos la tecla F6 de tal
forma que creemos un frame principal
Convertimos esta capa en una máscara
En la capa “botones” seleccionamos el frame 5 y presionamos F5,
nuestra línea de tiempo se verá asi:
GAEM 3ºC
4. Lorena Rodríguez Turrubiates
Lo que hemos hecho desde el paso 5 hasta este es crear una
animacion que despliege el submenu de forma suave.
Seleccionamos el último frame de la capa rectángulo y desde el panel
de acciones ditamos
stop();
Seleccionamos el primer frame de la capa rectángulo y le colacamos
la etiqueta abrir.
Esto nos permite indicar desde que frame empieza la animación
Nuestra linea del tiempo se verá asi:
El submenú esta listo, ahora solo nos resta crear el menú, para ello
creamos un nuevo símbolo llamado “menu” de tipo “clip de película”.
En el nuevo símbolo creamos 2 capas, una llamada “menu” en la que
colocamos un nuevo boton y otra llamada “submenu” en la que
colocamos el submenu (el simbolo que creamos en los pasos
anteriores), nuestra linea del tiempo se verá asi:
GAEM 3ºC
5. Lorena Rodríguez Turrubiates
Mientras que los simbolos en el escenario se veran asi:
Nota: El simbolo “submenu” se muestra verde pues aplique un color de
contorno, caso contrario no se vera en el escenario. El color de
contorno lo aplicamos asi:
Colocamos el submenu alineado al eje de referencia asi:
Colocamos el nuevo boton de igual forma alineado al el eje de
referencia asi:
Seleccionamos el submenu y le colocamos una etiqueta “clpMenu”
En el nuevo botón que colocamos en la capa “menu”, escribimos el
siguiente código
GAEM 3ºC
6. Lorena Rodríguez Turrubiates
on (rollOver) {
if (!this.clpMenu._visible)
{
this.clpMenu.gotoAndPlay("abrir");
this.clpMenu._visible = true;
}
}
Esto despliega controla el despliege del submenu
Ahora solo resta arrastrar el simbolo menu al escenario
Al publicar la pelicula el resultado será:
GAEM 3ºC