Home » AS3 »Básico »Flash » Currently Reading:

Cómo crear transiciones entre fotogramas en Flash

enero 18, 2010 AS3, Básico, Flash 9 Comments
Cómo crear transiciones entre fotogramas en Flash

Hace unos días me preguntaron como crear transiciones entre fotogramas en Flash. Esto es una tarea bastante sencilla de implementar así que aprovecho para explicarla en forma de Tip.

Lo que se pretende conseguir es que al cambiar de fotograma, los elementos del fotograma actual desaparezcan de forma animada antes de saltar al siguiente fotograma. Como se ve en el ejemplo:


Clicka en los botones de colores

Esta sencilla película está estructurada en varios fotogramas con un elemento diferente en cada uno de ellos y una serie de botones que nos hacen saltar de uno a otro.

La idea del ejemplo es que cada fotograma esté contenido en un MovieClip que contenga a su vez la animación de entrada y salida. Y por código haremos que se reproduzcan estas animaciones al cambiar de fotograma.

En el primer fotograma del MovieClip tendremos todo su contenido tal cual nos interese tener en pantalla, y apartir del segundo fotograma haremos la animación de entrada y salida.

Para este ejemplo la animación de entrada y salida será la misma interpolación de movimiento que reproduciremos adelante o hacia atrás según sea el caso.

Para poder referenciar el código colocaremos un Label “on” en el primer frame de la animación, un Label “anim” en los fotogramas internos de la animación, y un Label “out” en el último fotograma de la animación.

[h3]Ahora vayamos al código:[/h3]

Empezaremos por la clase Main.as, que es la clase de la pelicula y donde asignaremos los comportamientos a los botones:

  1. package {
  2.     import flash.display.MovieClip;
  3.     import flash.events.MouseEvent;
  4.     //
  5.     public class Main extends MovieClip {
  6.  
  7.         public var currentFrameClip:MovieClip;
  8.  
  9.         public function Main() {
  10.             this.boton1.addEventListener(MouseEvent.CLICK,gotoFrame);
  11.             this.boton2.addEventListener(MouseEvent.CLICK,gotoFrame);
  12.             this.boton3.addEventListener(MouseEvent.CLICK,gotoFrame);
  13.             this.boton4.addEventListener(MouseEvent.CLICK,gotoFrame);
  14.             this.stop();
  15.         }
  16.         private function gotoFrame(e:MouseEvent):void {
  17.             switch (e.currentTarget) {
  18.                 case boton1 :
  19.                     currentFrameClip.gotoFrame(1);
  20.                     break;
  21.                 case boton2 :
  22.                     currentFrameClip.gotoFrame(2);
  23.                     break;
  24.                 case boton3 :
  25.                     currentFrameClip.gotoFrame(3);
  26.                     break;
  27.                 case boton4 :
  28.                     currentFrameClip.gotoFrame(4);
  29.                     break;
  30.             }
  31.         }
  32.     }
  33. }

Aquí lo único que hacemos es que los botones de la película hagan ejecutar al MovieClip, referenciado desde una variable “currentFrameClip“, un método llamado “gotoFrame“, que como su nombre indica nos hará saltar al fotograma pasado como parámetro.

Vayamos ahora a la clase que asignaremos a cada uno de los MovieClip de los fotogramas y que es la que hará reproducir la animación y saltar de fotograma:

  1. package {
  2.     import flash.display.MovieClip;
  3.     import flash.events.Event;
  4.     //
  5.     public class FrameInOut extends MovieClip {
  6.  
  7.         public var goto:uint;
  8.        
  9.         public function FrameInOut() {
  10.             MovieClip(this.parent).currentFrameClip=this;
  11.             frameIntro();
  12.         }
  13.         public function gotoFrame(frame:uint):void {
  14.             if (frame!=MovieClip(this.parent).currentFrame) {
  15.                 goto=frame;
  16.                 this.gotoAndStop("on");
  17.                 this.addEventListener(Event.ENTER_FRAME,avanzaFrame);
  18.             }
  19.         }
  20.         //-----------------------------------------------------
  21.         private function frameIntro():void {
  22.             this.gotoAndStop("out");
  23.             this.addEventListener(Event.ENTER_FRAME,retrocedeFrame);
  24.         }
  25.         private function retrocedeFrame(e:Event):void {
  26.             if (this.currentLabel=="on") {
  27.                 this.removeEventListener(Event.ENTER_FRAME,retrocedeFrame);
  28.             } else {
  29.                 this.prevFrame();
  30.             }
  31.         }
  32.         private function avanzaFrame(e:Event):void {
  33.             if (this.currentLabel=="out") {
  34.                 this.removeEventListener(Event.ENTER_FRAME,avanzaFrame);
  35.                 MovieClip(this.parent).gotoAndStop(goto);
  36.             } else {
  37.                 this.nextFrame();
  38.             }
  39.         }
  40.     }
  41. }

Esta clase lo que hace es guardar el valor del fotograma al que debe de saltar. Luego reproduce la animación de salida desplazandose desde el Label “on” al Label “out”, y es entonces cuando llama ejecutar el gotoAndStop que hace cambiar de fotograma.

El contructor de la clase también tiene una llamada a una función que hace reproducir la animación de entrada creandose así la transición de un fotograma al otro.

Aquí puedes descargarte el archivo.

Compártelo:

Cómo crear transiciones entre fotogramas en Flash
Visto 16.361 veces

Currently there are "9 comments" on this Article:

  1. Distriker dice:

    Muchas, muchísimas gracias camarada ZGuillez, se lo agradezco.

    Ya le comentaré cuando lo pruebe.

    Saludos

  2. freddybg dice:

    Sencillo y práctico. Buen tip 😉

  3. samuel dice:

    hola guille, he seguido tu tutorial, estoy empezando ahora con as3, (solo sabia java jeje), lo que no entiendo de este tutorial como haces el uso de las clases sin importarlas,(al menos no lo diviso en el fla).Un saludo.

  4. admin dice:

    @samuel:

    La clase Main está asignada a la película desde el panel de propiedades, y la clase del MovieClip se asigna en el menú de vinculación desde la biblioteca

    saludos

  5. samuel dice:

    muchas gracias, ya he aprendido algo nuevo, para no tener que estar importando ni declarando.

  6. jut dice:

    tengo una duda.. el mc q carga al clicar en los botones, es siempre el mismo, lo que cambia es la “tinta”. entonces si intento poner mc diferentes segun el fotograma.. m da error “TypeError: Error #1009: No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo.
    at FrameInOut/gotoFrame()
    at Main/gotoFrame()”
    haber si m puedes decir q tengo q modificar para q me funcione con diferentes mc.. m está dando muchos dolores d cabeza intentarlo sola.. stoy empezando con as3… muchisimas gracias!!

  7. Pablo dice:

    Me estaba rompiendo el bocho para saber de donde enlazabas la clase del MC!…

    gracias!..

  8. Victor Rodríguez dice:

    Hola, he leído el tutorial y lo que no me queda claro es donde se colocan los botones y como mando a llamar los otros movieclips, es decir ya sé que es a través de las clases pero no he podido resolverlo, alguien puede orientarme…saludos!!!

  9. Jonatan Cordero dice:

    Creo que Distriker no lo probo! XD

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com