Web Design Luis Dallan Perez
  • Nov
    12

    Menu con efecto de easing en Flash

    Filed under: Flash;

    La innovación y creatividad en la web ha venido en gran medida gracias a Flash y su altisima capacidad de «experimentar», entre ellas, los nuecos conceptos de navegación, eso si, siempre manteniendo la usabilidad; este es un ejemplo de ello, un menu de navegación con efecto de easing (Desaceleración) que es implementado gracias a ActionScript.

    Lo que haremos será:
    1. Teoría
    Crear un clip bajo una mascara, que de acuerdo al botón que se presione, el clip se moverá a determinado punto. Sintetizando, tenemos que crear un clip, una mascara, y los botones (para nuestro caso, 3 son suficientes)

    2. Practica
    Para trabajar el mismo fla que dejo para la descarga, haremos lo siguiente:
    Ajustar el tamaño de nuestra película a 300 X 400 px
    Crear un movie clip de tamaño 300 X 50, en la posición x=0, y=100 con nombre de instancia «clip_mc»
    A este clip «clip_mc», crearle una mascara de tamaño 100 X 50 en posición x=100, y=100
    Crear tres botones con nombre de instancia «a_btn», «b_btn» y «c_btn», en cualquier posición.
    Si alguno de los puntos anteriores no es claro, revisar el fla de descarga.

    3. Codigo ActionScript
    Al «clip_mc» pongámosle este código:
    /*Cargamos una variable cualquiera «x» con valor 0, que será la que modificaremos con los botones, y claro, el clip lo cargaremos en la posición «_x» con valor 0*/
    onClipEvent(load){
    x=0;
    _x=0;
    }
    /*ahora , cíclicamente, se estará calculando un incremento en la posición «_x» del clip, de acuerdo al resultado de la ecuación «(x-_x)*0.3», que cambiara notablemente cuando cambiamos el valor de «x», al presionar los botones. Recordemos que esto se ejecuta constantemente, por el evento «enterFrame» es decir que siempre estará disponible para cualquier cambio en sus variables iniciales, que le darán el efecto de movimiento*/
    onClipEvent(enterFrame){
    _x+=(x-_x)*0.3;
    }

    En el frame pongamos este otro código:
    //al presionar «a_btn», se cambia el valor de «x» asignado a «clip_mc» a 100
    a_btn.onRelease = function() {
    clip_mc.x=100;
    }
    //al presionar «b_btn», se cambia el valor de «x» asignado a «clip_mc» a 0.
    b_btn.onRelease = function() {
    clip_mc.x=0;
    }
    //al presionar «c_btn», se cambia el valor de «x» asignado a «clip_mc» a -100.
    c_btn.onRelease = function() {
    clip_mc.x=-100;
    }

    Probemos nuestra película con CONTROL+ENTER y si no funciona revisemos el fla de descarga.

    No Comments

Leave a reply


Donde vivo


Ver ecuador en un mapa más grande

Comentarios recientes

    Espol

    Calendario

    noviembre 2014
    L M X J V S D
         
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    Espol
    Espol

    Twitter

    Reloj