Embed Size (px)
Citation preview
Linda Aurora Márquez Reyes
Practica 16
Crear un submenu
Para obtener el menú desplegable podemos seguir estos pasos:
Creamos un símbolo (CTRL + F8) llamado “submenu” 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;
GAEM 3ºC
Linda Aurora Márquez Reyes
}
on (rollOut) {
this._visible = false;
}
on (press) {
//Tu código para cada boton
}
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:
GAEM 3ºC
Linda Aurora Márquez Reyes
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” 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
GAEM 3ºC
Linda Aurora Márquez Reyes
En la capa “botones” seleccionamos el frame 5 y presionamos F5, nuestra línea de tiempo se verá asi:
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:
GAEM 3ºC
Linda Aurora Márquez Reyes
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:
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:
GAEM 3ºC
Linda Aurora Márquez Reyes
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
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
GAEM 3ºC
Linda Aurora Márquez Reyes
Al publicar la pelicula el resultado será:
GAEM 3ºC
