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

Asignar código actionscript en clases a fotogramas concretos

octubre 9, 2008 AS3, Básico, Flash 5 Comments
Asignar código actionscript en clases a fotogramas concretos

Cuando trabajamos con Flash es probable que montemos la película colocando cada pantalla de la aplicación en un fotograma de la linea de tiempo principal, y que vayamos saltando de fotograma a fotograma para cambiar de pantalla.

Evidentemente cada fotograma tendrá sus gráficos y botones que deberán ejecutar unas funciones. En principio estos códigos deberíamos colocarlos en los fotogramas correspondientes. Quizás para el código no nos interese tener que ir colocándolo fotograma a fotograma sino que queramos trabajarlo a través de clases, y mantener el .fla limpio de código.

Mucha gente al hacer esto se encuentra con el problema que no sabe como escribir y ejecutar funciones a medida vas cambiando de fotograma en la película, o que les salta el típico error de ejecutar las acciones antes de que el fotograma esté disponible.

En este ejemplo mostraré una serie de clases que me sirvieron para hacer esto.

El resultado es que en la clase de la película principal tengo esté código:

  1. package
  2. {
  3.     import flash.display.MovieClip;
  4.     import com.zguillez.core.TimelineScript;
  5.     //--------------------------------------------------------------------------------
  6.     public class Main extends MovieClip
  7.     {
  8.         private var _timelineScript:TimelineScript;
  9.         //----------------------------------------------------------------------------
  10.         public function Main()
  11.         {
  12.             _timelineScript = new TimelineScript(this);
  13.             _timelineScript.setFrame( 1, new Frame1(this) );
  14.             _timelineScript.setFrame( 2, new Frame2(this) );
  15.             _timelineScript.setFrame( 3, new Frame3(this) );
  16.             /* etc.. */
  17.             stop();
  18.         }
  19.         //----------------------------------------------------------------------------
  20.     }
  21. }

Como se ve, hay una clase que le llamo TimelineScript que me controla que código hay en cada fotograma, y a la que se le agragan a través de la función setFrame() una serie de clases (Frame1, Frame2, Frame3, etc..) que son las clases que contienen el código para cada fotograma independientemente.

Un ejemplo de clase para manejar un fotograma podría ser este:

  1. package
  2. {
  3.     import flash.display.MovieClip;
  4.     import flash.events.MouseEvent;
  5.     import com.zguillez.core.FrameScript;
  6.     //--------------------------------------------------------------------------------
  7.     public class Frame1 extends FrameScript
  8.     {
  9.         //----------------------------------------------------------------------------
  10.         public function Frame1(ruta:MovieClip)
  11.         {
  12.             super(ruta);
  13.         }
  14.         //----------------------------------------------------------------------------
  15.         override protected function actions():void
  16.         {
  17.             var boton:MovieClip = _ruta.getChildByName("bot1") as MovieClip;
  18.             boton.buttonMode = true;
  19.             boton.addEventListener(MouseEvent.CLICK, function()
  20.             {
  21.                 gotoFrame(2)
  22.             });
  23.             /* resto del código para este fotograma */
  24.         }
  25.         //----------------------------------------------------------------------------
  26.     }
  27. }

El código para este fotograma lo colocaremos dentro de la función actions(). En este caso únicamente hacemos que un clip llamado “bot1” nos salte la película hasta el fotograma 2. En principio tendríamos una clase como esta para cada fotograma.

Hay que fijarse que esta clase extiende de otra clase llamada FrameScript. Esta clase contiene métodos comunes para todas las clases de fotogramas como la clase actions(), que deberemos sobreescribir desde las clases concretas, y la función pública gotoFrame() que es la que nos cambia de fotograma y que deberemos utilizar en lugar de un gotoAndStop().

Tanto la clase FrameScript como la TimelineScript las tendremos guardadas dentro de nuestro package de clases para reutilizarlas en diferentes proyectos ya que no necesitaremos editarlas para ningún proyecto concreto.

Aquí las vemos:

  1. package com.zguillez.core
  2. {
  3.     import flash.display.MovieClip;
  4.     import flash.events.Event;
  5.     import com.zguillez.core.TimelineScript;
  6.     //--------------------------------------------------------------------------------
  7.     public class FrameScript
  8.     {
  9.         protected var _ruta:MovieClip;
  10.         private var _timelineScript:TimelineScript;
  11.         //----------------------------------------------------------------------------
  12.         public function FrameScript(ruta:MovieClip)
  13.         {
  14.             _ruta = ruta;
  15.         }
  16.         //----------------------------------------------------------------------------
  17.         internal function set timelineScript(t:TimelineScript):void
  18.         {
  19.             _timelineScript = t;
  20.         }
  21.         //----------------------------------------------------------------------------
  22.         public final function init():void
  23.         {
  24.             _ruta.stage.addEventListener(Event.ENTER_FRAME, iniActions);
  25.         }
  26.         //----------------------------------------------------------------------------
  27.         private final function iniActions(e:Event):void
  28.         {
  29.             if (_ruta.numChildren > 0)
  30.             {
  31.                 if (_ruta.getChildAt(0) != null)
  32.                 {
  33.                     _ruta.stage.removeEventListener(Event.ENTER_FRAME, iniActions);
  34.                     actions();
  35.                 }
  36.             }
  37.             else
  38.             {  
  39.                 _ruta.stage.removeEventListener(Event.ENTER_FRAME, iniActions);        
  40.                 actions();
  41.             }
  42.         }
  43.         //----------------------------------------------------------------------------
  44.         protected function actions():void { /* override */ }
  45.         //----------------------------------------------------------------------------
  46.         protected final function gotoFrame(f:uint):void
  47.         {
  48.             _ruta.gotoAndStop(f);
  49.             _timelineScript.update();
  50.         }
  51.         //----------------------------------------------------------------------------
  52.     }
  53. }

Como vemos esta clase, que es de la que extienden todas las clases concretas de fotogramas, contiene una referencia de la ruta en la que están los gráficos y una referencia de la clase TimelineScript que es la que contiene todas las clases concretas de fotogramas.

Esta clase contiene un método actions() que esta vacío ya que este método será sustituido a través de un override desde las clases concretas de fotograma, ya que evidentemente cada clase tendrá sus propias funciones a ejecutar.

También tiene el método gotoFrame() que como he dicho antes es el que nos hace saltar de fotograma. Vemos que esta función contiene el gotoAndStop() y además ejecuta el método update() de la clase TimelineScript.

Las acciones que incluyamos en la función actions() han de ser inicializadas desde el método init(), más concretamente desde el método iniActions().

Como podemos ver hemos utilizado un ENTER_FRAME para realizar la llamada a la función actions(). Esto es debido a que cuando cambiamos de fotograma y ejecutamos un código, este código se ejecuta antes de que los elementos gráficos de dicho fotograma estén disponibles, con lo que cualquier referencia a ellos desde el código (como por ejemplo el getChildByName(“bot1”)) nos daría el error de que no existen. Con el ENTER_FRAME generemos un bucle de llamadas hasta que reconoce los elementos gráficos del fotograma, en ese momento ejecuta la acción que les asigna el código.

Vista esta clase, nos queda la clase TimelineScript:

package com.zguillez.core
{
import flash.display.MovieClip;
import com.zguillez.core.FrameScript;
//——————————————————————————–
public class TimelineScript
{
private var _ruta:MovieClip;
private var _frameScript:Array = new Array();
//—————————————————————————-
public function TimelineScript(ruta:MovieClip)
{
_ruta = ruta;
initArray();
}
//—————————————————————————-
private function initArray():void
{
for (var i:uint = 0; i <= _ruta.totalFrames; i++) { _frameScript.push(void); } } //—————————————————————————- public function setFrame(n:uint, s:FrameScript):void { s.timelineScript = this; _frameScript[n] = s; if (n == _ruta.currentFrame) { _frameScript[n].init(); } } //—————————————————————————- public function update():void { _frameScript[_ruta.currentFrame].init(); } //—————————————————————————- } }[/as] Esta clase contiene un [b]Array[/b] al que le introducimos tantos elementos como fotogramas tiene la línea de tiempo principal. A este Array le añadiremos las clases de código concreto para cada fotograma en la posición que les corresponda, a través del método [b]setFrame()[/b], tal como vimos en la clase de la película. Esta clase también contiene una función [b]update()[/b] que lo que hace es ejecutar la función [b]init() [/b]de la clase que corresponda al fotograma actual y de esta manera ejecutar las funciones correspondientes para dicho fotograma, y como hemos visto anteriormente esta función [b]update()[/b] se ejecuta cada vez que cambiamos de fotograma en la película.

Compártelo:

Asignar código actionscript en clases a fotogramas concretos
Visto 14.251 veces

Currently there are "5 comments" on this Article:

  1. dario dice:

    Flaco te fuiste al carajo con el codigo, la verdad me encantaria entenderlo del todo pero es demaciado para m,i

    ojala algun dia llegue a tener tu nivel
    sds
    Dario

  2. Juan dice:

    Esta bien la idea, pero no pones como pasar de un frame a otro, y creo que la ruta del objeto padre es una propiedad que tienen todos los objetos en flah, no hecia falta que lo repitieras.

  3. Juan dice:

    retiro lo dicho, ahora lo he visto bien

  4. Ingrid dice:

    Este post me aclaró unas cuantas cosas. Gracias!

  5. Castillo dice:

    Hola a todos, tengo una clase cronometro.as que deseo se ejecute en el fotograma 5 pero me envia error, cuando coloco en fotograma 1 me va de marravilla pero necesito ejecutarlo en fotograma 5 del .fla,

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