Latest Entries »

FLASH ¿Cómo hacer un menú desplegable?

  1. Crear los botones que conformarán al menú, en el archivo de ejemplo se colocaron seis botones, entre parentesis está su nombre de instancia para actionScript, en botón 0 (b0), botón 1 (b1) y botón 2 (b2) y tres sub botones que se despliegan al pasar el mouse sobre el botón 0: botón 0a (b0a), botón 0b (b0b) y botón 0c (b0c)

  2. Los botones 0, 0a, 0b y 0c se colocan encimados en la misma posición, pueden organizarse en con capas y carpetas, o cambiando su posición con la opción que aparece al dar clic derecho a los botones: Arrange, es importante que el botón 0 sea el que esté sobre los demás.

  3. Agregar una capa para actionScript y escribir el siguiente código:

    import fl.transitions.Tween;
    import fl.transitions.easing.*;

    b0.addEventListener(MouseEvent.MOUSE_OVER, dropDown);

    function dropDown (me:MouseEvent):void {
    var b0atween:Tween = new Tween(b0a, "y", Regular.easeIn, 71, 98, .3, true);
    var b0bween:Tween = new Tween(b0b, "y", Regular.easeIn, 71, 125, .3, true);
    var b0ctween:Tween = new Tween(b0c, "y", Regular.easeIn, 71, 152, .3, true);
    }

    b0.addEventListener(MouseEvent.CLICK, dropUp);
    b0a.addEventListener(MouseEvent.CLICK, dropUp);
    b0b.addEventListener(MouseEvent.CLICK, dropUp);
    b0c.addEventListener(MouseEvent.CLICK, dropUp);
    b1.addEventListener(MouseEvent.CLICK, dropUp);
    b2.addEventListener(MouseEvent.CLICK, dropUp);

    function dropUp (me:MouseEvent):void {
    if (b0a.y == b0.y){
    //nada
    } else {
    var b0atween:Tween = new Tween(b0a, "y", Regular.easeIn, 98, 71, .3, true);
    var b0bween:Tween = new Tween(b0b, "y", Regular.easeIn, 125, 71, .3, true);
    var b0cween:Tween = new Tween(b0c, "y", Regular.easeIn, 152, 71, .3, true);
    }
    }

    Primero importamos las librerías tween y easing para transiciones de Flash y agregamos un addEventListener a b0 de tipo MOUSE_OVER para que ocurra la función dropDown al pasar el mouse sobre él. Entonces para cada botón del menú desplegable se establece el tiempo y posiciones, antes y después.

    Para volver el menú a su posición original al dar clic a algún botón se agrega a todos los botones al darles clic la función dropUp y con un loop (if y else) cuando la posición del botón 0a sea la misma que el 0, no hará nada, luego entonces, si varía, enviará de nuevo a su posición los botones.

    archivo de ejemplo referencia de tutvid

About Me

Mi foto
Alberto Barrios L.
Diseñador de Gráficos en Movimiento e Interactividad Multimedia.



ESTUDIOS

- Pasante de la Maestría en Docencia para Arte y Diseño FAD-UNAM 2012-2014.

- Licenciado en Artes Visuales ENAP-UNAM 1999-2004.

- Diplomado en Aplicaciones TIC para la Enseñanza DGTIC-UNAM 2008-2009.

- Diplomado en Realización Cinematográfica ENAP-UNAM 2008-2009.

- Diplomado en Multimedia DGSCA-UNAM 2005-2006.

ACTIVIDAD LABORAL

- Profesor comisionado en apoyo al Centro de Cómputo plantel Azcapotzalco CCH-UNAM 2015-2016.

- Profesor comisionado en apoyo al Centro de Cómputo plantel Vallejo CCH-UNAM 2012-2015.

- Profesor de Opciones Técnicas del Colegio de Ciencias y Humanidades UNAM 2009-2016.

- Instructor de la Dirección General de Cómputo y de Tecnologías de la Información y Comunicación UNAM 2004-2016.

- Colaborador del Área de Postproducción del Observatorio de Visualización de la UNAM-Ixtli DGSCA-UNAM 2004-2010.
Ver todo mi perfil