WP Greet Box icon
Hola! Si estás nuevo por aquí y te gusta lo que ves, puedes disfrutar de una actualización automática y gratuita por RSS para leer nuestros artículos completos cuando lo deseas en tu lector RSS favorito.

Para obtener el menú desplegable podemos seguir estos pasos:

  1. Creamos un símbolo (CTRL + F8) llamado “submenu” de “tipo clip de película”

    Nuevo simbolo

  2. 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

    Submenu

    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)

  3. En cada botón colocamos el siguiente código:
    on(rollOver){
    	this._visible = true;
    }
    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

  4. Seleccionamos el primer botón y desda la barra de propiedades le aplicamos un Alpha al 0% asi

    Aplicando color alpha

    De tal modo que tengamos:

    Boton transparente

    Este es el lugar que ocupará el botón principal (El que despliega el submenú)

  5. Creamos una nueva capa 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:

    línea del tiempo

    El escenrio se verá asi:

    Rectangulo

    Notemos que el rectángulo cubre totalmente los botones

  6. Ahora cambiamos el punto de referencia del rectángulo creado para ello seleccionamos el rectángulo y con la herramienta “selección libre” Herramienta de selección libre seleccionamos el centro del rectángulo de tal modo que ahora se ubique en la parte superior asi:

    Cambio de referencia

  7. Seleccionamos el frame que contiene el rectángulo y lo convertimos en interpolación de movimiento, haciendo click derecho sobre el asi:

    Crear interpolación de movimiento

  8. Seleccionamos alrededor de 5 frames y presionamos la tecla F6 de tal forma que creemos un frame principal

    Frame principal

  9. Convertimos esta capa en una máscara

    Mascara

  10. En la capa “botones” seleccionamos el frame 5 y presionamos F5, nuestra línea de tiempo se verá asi:

    Linea de tiempo

    Lo que hemos hecho desde el paso 5 hasta este es crear una animacion que despliege el submenu de forma suave.

  11. Seleccionamos el último frame de la capa rectángulo y desde el panel de acciones ditamos
    stop();

    Stop

  12. Seleccionamos el primer frame de la capa rectángulo y le colacamos la etiqueta abrir.

    Colocando etiqueta en fotograma

    Esto nos permite indicar desde que frame empieza la animación

    Nuestra linea del tiempo se verá asi:

    Linea tiempo actualizado

  13. 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”.
  14. 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:

    Linea de tiempo

    Mientras que los simbolos en el escenario se veran asi:

    Paso 15

    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:

    Color de contorno

  15. Colocamos el submenu alineado al eje de referencia asi:

    Submenu sobre el eje de referencia

  16. Colocamos el nuevo boton de igual forma alineado al el eje de referencia asi:

    Nuevo botón alineado con el eje de referencia

  17. Seleccionamos el submenu y le colocamos una etiqueta “clpMenu”

    Etiqueta clpMenu

  18. 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

  19. Ahora solo resta arrastrar el simbolo menu al escenario

Al publicar la pelicula el resultado será:

Descarga los archivos