1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

[TUTORIAL]Menu animado con ActionScirpt 3.0

Tema en 'Tutoriales Desarrollo Web' iniciado por kitsch, 11 Dic 2008.

  1. kitsch

    kitsch Nuevo usuario

    Bueno comienzo por aclarar que un inicio este tutorial no era precisamente un tuto, sino más bien una respuesta a una consulta que me hicieron vía MSN, pero como quedo relativamente bien, pues decidí subirlo como tuto y explicar cómo funciona el script, en fin que ya me había tomado la molestia de hacerlo.
    Este tuto, es básicamente la conversión del famoso tutorial de Rosvel, publicado originalmente en Cristalab (http://www.cristalab.com/tutoriales/123/boton-con-fade-in-y-fade-out-animado.html) el cual funciona perfecto para ActionScript 2.0 pero para AS3 pues simplemente no funciona; es tan popular y bueno este método para animar nuestros botones que me puse a actualizar el código a AS3 y ponerlo al día por un tiempo más.

    También y antes de comenzar a lo que nos interesa que es el código; es importante aclarar que este tuto no es para principiantes pues no le dedicare tiempo a explicar cómo crear los botones, movieclips y texto dinámicos; si no que iré directamente al script.

    Bien, terminando la nota aclaratoria, comenzamos con el tuto.

    1.- En la primera capa creamos 3 MovieClips animados de 10 fotogramas cada uno, añadiendo un stop() al primer y último fotograma; y les asignamos el nombre de instancia an1, an2 y an3 respectivamente.

    2.- Creamos una segunda capa e insertamos 3 textos dinámicos y les asignamos el nombre de instancia t1, t2 y t3 respectivamente.

    3.- En la tercer capa creamos 3 botones vacios (solo el área activa) del tamaño de nuestra animación (MC que se va animar) y les damos el nombre de instancia b1, b2 y b3 respectivamente.

    4.- Creamos una cuarta capa y la dejamos vacía; la nombraremos ACCIONES, con el primer fotograma seleccionado abrimos el editor de ActionScript (F9) y comenzamos.

    El codigo completo del script lo muestro a continuación y mas abajo lo explico a detalle.
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->//Importamos la clase Eventos
    import flash.events.*;
    /*Definimos las variables que vamos a necesitar */
    //-----------------------------------------------
    //Variable para definir el tipo de funcion
    var evento:MouseEvent;
    //Variables para el primer y ultimo fotograma de la animacion over/out
    var max:String = "10";
    var min:String ="1";
    //Variables para controlar los condicionales switch
    var m1:String = "";
    var m2:String = "";
    var m3:String = "";
    //Variables de los MovieClips animados
    var a1:MovieClip = an1;
    var a2:MovieClip = an2;
    var a3:MovieClip = an3;
    //
    /*Fin de la defincion de variables globales */
    //--------------------------------------------
    //Textos de los botones
    this.t1.text = "Estilo Flash";
    this.t2.text = "Taller Webmaster";
    this.t3.text = "SoloPhotoshop";
    //Links de los botones
    var link1:String = "http://www.estiloflash.com";
    var link2:String = "http://www.tallerwebmaster.com";
    var link3:String = "http://www.solophotoshop.com";
    //
    //Eventos para los botones
    //
    //Al presionar:
    this.b1.addEventListener(MouseEvent.CLICK,links);
    this.b2.addEventListener(MouseEvent.CLICK,links);
    this.b3.addEventListener(MouseEvent.CLICK,links);
    //
    //Al poner encima:
    this.b1.addEventListener(MouseEvent.MOUSE_OVER, over);
    this.b2.addEventListener(MouseEvent.MOUSE_OVER, over);
    this.b3.addEventListener(MouseEvent.MOUSE_OVER, over);
    //Al quitar de encima:
    this.b1.addEventListener(MouseEvent.MOUSE_OUT, out);
    this.b2.addEventListener(MouseEvent.MOUSE_OUT, out);
    this.b3.addEventListener(MouseEvent.MOUSE_OUT, out);
    //
    //----------- Funciones ------------
    //
    //Al presionar:
    function links(evento):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (evento.target.name) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigateToURL(new URLRequest(link1));
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b2' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigateToURL(new URLRequest(link2));
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b3' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigateToURL(new URLRequest(link3));
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }
    //
    //Funciones del Fade In/Out
    function anime1(Event):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (m1) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'run1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a1.currentFrame!=int(max)) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a1.nextFrame();
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'stp1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a1.currentFrame!=int(min)) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a1.prevFrame();
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }
    function anime2(Event):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (m2) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'run2' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a2.currentFrame!=int(max)) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a2.nextFrame();
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'stp2' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a2.currentFrame!=int(min)) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a2.prevFrame();
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }
    function anime3(Event):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (m3) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'run3' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a3.currentFrame!=int(max)) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a3.nextFrame();
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'stp3' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a3.currentFrame!=int(min)) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a3.prevFrame();
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }
    //
    //Funcion al poner encima:
    function over(evento):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (evento.target.name) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a1.addEventListener(Event.ENTER_FRAME,anime1);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m1="run1";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b2' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a2.addEventListener(Event.ENTER_FRAME,anime2);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m2="run2";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b3' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a3.addEventListener(Event.ENTER_FRAME,anime3);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m3="run3";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }
    //
    //Funcion al retirar cursor:
    function out(evento):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (evento.target.name) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a1.addEventListener(Event.ENTER_FRAME,anime1);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m1="stp1";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b2' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a2.addEventListener(Event.ENTER_FRAME,anime2);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m2="stp2";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b3' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a3.addEventListener(Event.ENTER_FRAME,anime3);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m3="stp3";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;}

    }
    //Detiene la pelicula.
    stop();<!--c2--></div><!--ec2-->

    En ActionScript 3.0 es una práctica recomendada importar las clases o paquetes que vamos a necesitar, generalmente se importan por default pero no está de más hacerlo nosotros mismos y nos evitamos problemas.
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->import flash.events.*;<!--c2--></div><!--ec2-->
    De este modo importamos todas las herencias de la clase events.

    Despues otra buena practica es primero definir todas las variables globlaes que se necesitaran a lo largo del scirpt, en este caso serían las siguientes:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var evento:MouseEvent;
    //Variables para el primer y ultimo fotograma de la animacion over/out
    var max:String = "10";
    var min:String ="1";
    //Variables para controlar los condicionales switch
    var m1:String = "";
    var m2:String = "";
    var m3:String = "";
    //Variables de los MovieClips animados
    var a1:MovieClip = an1;
    var a2:MovieClip = an2;
    var a3:MovieClip = an3;<!--c2--></div><!--ec2-->
    A estas les llamaremos en este caso <b>variables globlales</b>, son globales porque podremos acceder a ellas en cualquier momento desde cualquier función. Además si recordamos que en ActionScript 2.0 se sugería definir el tipo de variable para evitar errores, en ActionScript 3.0 es obligatoria esta práctica.
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->this.t1.text = "Estilo Flash";
    this.t2.text = "Taller Webmaster";
    this.t3.text = "SoloPhotoshop";
    //Links de los botones
    var link1:String = "http://www.estiloflash.com";
    var link2:String = "http://www.tallerwebmaster.com";
    var link3:String = "http://www.solophotoshop.com";<!--c2--></div><!--ec2-->
    Continuando con la definicion de variables, definimos el texto que va en los cuadros de texto dinamicos y las url a donde nos dirigiran nuestros botones al ser presionados. Es una practica recomendable definir los titulos por codigo y no directamente en el campo de texto por la sensilla razón de que pueden venir de un XML o simplemente es más rapido al momento de actualizar.

    Ahora vamos a definir los diferentes eventos que deberan tener nuestros 3 botones; over, out y press (encima del boton, fuera del boton y al presionar el boton):
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->this.b1.addEventListener(MouseEvent.CLICK,links);
    this.b2.addEventListener(MouseEvent.CLICK,links);
    this.b3.addEventListener(MouseEvent.CLICK,links);
    //
    //Al poner encima:
    this.b1.addEventListener(MouseEvent.MOUSE_OVER, over);
    this.b2.addEventListener(MouseEvent.MOUSE_OVER, over);
    this.b3.addEventListener(MouseEvent.MOUSE_OVER, over);
    //Al quitar de encima:
    this.b1.addEventListener(MouseEvent.MOUSE_OUT, out);
    this.b2.addEventListener(MouseEvent.MOUSE_OUT, out);
    this.b3.addEventListener(MouseEvent.MOUSE_OUT, out);<!--c2--></div><!--ec2-->
    En ActionScript 3.0 a diferencia de la anterior version y como seguramente la mayoria ya ha notado y investigado por ahí; getURL paso a mejor vida; se remplaza por la funcion <b>addEvenListener();</b>, la cual requiere de ciertos parametros para funcionar; esta nueva funcion brinda un control absoluto de los botones y su funcionamiento es más o menos así:

    <i>MovieClip + addEventListener ( Tipo de Evento + Evento + funcion a realizar );</i>

    En el anterio bloque de codigo vemos que se llama en los 3 eventos a la clase <b>MouseEvent</b>, pues el funcionara dependiendo del evento del mouse que se realice; en este caso son 3 eventos los que llamamos en cada bloque, MOUSE_OVER, MOUSE_OUT y CLICK; creo que el nombre explica que es lo hace cada uno; para finalmente llamar a una funcion cuando se cumpla la condición, las cuales son over, out y links.

    <i>Si ahora probamos nuestra pelicual (ctrl + Enter) nos va arrojar varios errores y esto es por llamamos a 3 parametros que aun no existen (las funciones over, out y links).</i>

    Seguramente, antes de ver este tutorial todos ya se han encontrado con el remplazo de getURL de la siguiente manera:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->this.b1.addEventListener(MouseEvent.CLICL, link);
    //
    function link(MouseEvent):void {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigateToURL("http://el_link.html");
    }<!--c2--></div><!--ec2-->
    Pero que pasa cuando por ejemplo en este tuto, tememos varios botones; tendriamos que crear una funcion para cada link; si tenemos 20 links, nos va quedar un codigo enorme (ademas de tedioso); es la razon por la que en este tuto utilizamos otro metodo para simplificarnos un poco las cosas y se basa en el condicional switch:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->function links(evento):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (evento.target.name) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigateToURL(new URLRequest(link1));
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b2' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigateToURL(new URLRequest(link2));
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b3' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigateToURL(new URLRequest(link3));
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }<!--c2--></div><!--ec2-->
    Creamos la funcion links (que es la llaman nuestros botones) pero en los parametros le decimos que es igual a la variable <b>evento</b>, la cual defimos al principio del código como <b>MouseEvent</b> y despues creamos un switch donde la condicio es <b>evento.target.name</b>; lo que al español sería algo así como: <i>"al evento de raton, tu objetivo es el nombre"</i>. Desde luego nombre se remplaza por los casos a evaluar, en este caso: b1, b2 y b3 (que son los nombres de instancia de nuestros botones). En resultado en una sola funcion evaluamos los 3 botones y les asignamos a cada uno su link correspondiente (las variables link1,2,3).

    Ahora vamos a crear el efecto de animación para nuestro boton al estar sobre y fuera del boton; lo haremos de la siguiente forma:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->function anime1(Event):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (m1) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'run1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a1.currentFrame!=int(max)) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a1.nextFrame();
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'stp1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (a1.currentFrame!=int(min)) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a1.prevFrame();
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }<!--c2--></div><!--ec2-->
    Creamos la funcion anime1 (que es la que llama el boton b1) y como parametros definimos Event; ya que esta vez la funcion no depende de un evento de raton, si no de un evento global (ENTER_FRAME) y creamos un condicional que evalua dos caso run y stp (run corre la animacion mientras que stp la detiene); en ambos casos se evalua con un if si el fotograma actual no es igual al mayor/menor entonces que valla al siguiente/anterior forograma segun sea el caso (run/stp).

    Repetimos la misma funcion para anime2 y anime3, obviamente remplazando las variables por las correspondientes.

    Ahora crearemos la funcion over:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->function over(evento):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (evento.target.name) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a1.addEventListener(Event.ENTER_FRAME,anime1);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m1="run1";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b2' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a2.addEventListener(Event.ENTER_FRAME,anime2);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m2="run2";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b3' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a3.addEventListener(Event.ENTER_FRAME,anime3);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m3="run3";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;}
    }<!--c2--></div><!--ec2-->
    En escencia es lo mismo que la funcion link, solo que en este caso hay una llamada de envento a la variable a1(la cual es nuestra animacion an1), este evento no es un MouseEvent si no un evento general, es decir que se ejecutara al entrar en el fotrograma (ENTER_FRAME) y ejecutara la funcion anime (la cual creamos lineas arriba).
    Ademas a la variable m(1,2 o 3) modificamos su valor para que corresponda al condicional definido en anime(1,2 o 3) y corra la animacion del MC an[x].

    La funcion out es basicamente igual a la anterior, solo modificando la variable m(1,2 o 3) para controlar las salidas del raton:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->function out(evento):void {
    &nbsp;&nbsp;&nbsp;&nbsp;switch (evento.target.name) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b1' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a1.addEventListener(Event.ENTER_FRAME,anime1);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m1="stp1";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b2' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a2.addEventListener(Event.ENTER_FRAME,anime2);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m2="stp2";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 'b3' :
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.a3.addEventListener(Event.ENTER_FRAME,anime3);
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m3="stp3";
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
    &nbsp;&nbsp;&nbsp;&nbsp;}

    }<!--c2--></div><!--ec2-->
    Finamente detenemos la pelicula y bingo ;) Nuestro menu de tres botones realizado con ActionScript 3.0 y completamente funcional.

    Anexo el ZIP con el FLA de Ejemplo.

    Bien, este es un modo muy "rupestre" de hacer la cosas; se puede mejorar aun mas, pero eso quedara pendiente para el proximo tutorial, el cual espero no demore mucho en subir :)

    Saludos
     

    Adjuntos:

    • menu.zip
      Tamaño de archivo:
      7 KB
      Visitas:
      305
  2.  
  3. elQuique

    elQuique Usuario activo

    Genial buen aporte :)
     


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·