Comunidad de diseño web y desarrollo en internet

Comunicación entre películas usando clases en AS3

He visto en muchos casos y por experiencia personal, que el manejo de niveles y la carga de archivos externos en AS2 era súper sencillo, y esto ahora se complica un poco al cambiar a AS3, pero no es nada para preocuparse, en este tutorial les explicaré como deben hacer para llamar funciones usando clases en todas las películas del proyecto flash, modificando o llamando desde la película principal a una función en una película cargada dentro de ella o viceversa. No voy a entrar en detalles de cómo funcionan las clases en AS3, para eso ya hay suficiente información en la red.

En este ejemplo voy a tener dos archivos .fla, cada uno con su propia clase (.as). El primero se llama base.fla y el segundo se llama peli.fla (el nombre de las clases es igual al nombre de cada archivo).

En mi base.fla, en la línea de tiempo principal, sólo tengo un movieclip con un campo de texto dentro de él para posteriormente poder cambiarle el nombre, y como nombre de instancia le puse load_btn.



Ahora creamos la clase para base.fla:



...le colocamos como nombre "Base" para crear la clase



Luego damos ok y guardamos en el mismo directorio que el base.fla. Lo siguiente es usar la clase en nuestro archivo flash, para ello nos vamos a Actionscript Settings:



Luego escribimos el nombre de nuestra clase y damos ok.



Ahora vamos a hacer exactamente lo mismo con nuestro archivo peli el cual debe tener una clase que se llama Peli.as. Teniendo esto empezamos con lo importante.

Vamos a irnos a nuestro archivo Base.as. Si algún curioso exportó la película, seguramente habrá visto que sale un error en el compilador de flash, esto es porque primero debemos importar otra clase en la línea 3 de nuestro Base.as donde dice "public class Base" agregaremos "extends MovieClip".

Debe quedarnos algo como esto:



Este paso debe hacerse igual con la clase Peli.as. Lo que queremos conseguir es cargar la película "peli.swf", dentro de nuestra película "base.swf", pero además vamos a llamar una función contenida dentro de "peli.swf" con el botón "load_btn" que tenemos en nuestra línea de tiempo principal y luego, cuando termine la acción que ejecutamos, activaremos un botón en peli.swf para descargarse a sí mismo.

Coloco primero todo el código de Base.as y lo explicaré por partes:

Código :

package  {
   import flash.display.MovieClip;
   import flash.display.Loader;
   import flash.net.URLRequest;
   import flash.events.MouseEvent;
   import flash.events.Event;
   
   public class Base extends MovieClip{
      public var cargador:Loader;
      public var req:URLRequest;
      public var pelicula:Object;

      public function Base() {
         // constructor code
         //asignamos a memoria la variable que cargara el archivo
         cargador = new Loader() as Loader;
         //asignamos la direccion del archivo que se va a cargar
         req = new URLRequest("peli.swf");
         //colocamos un nombre a load_btn y asignamos un listener para que cargue el archivo al darle click
         load_btn.text_btn.text = "cargar";
         load_btn.addEventListener(MouseEvent.CLICK, cargar);
         
      }
      function cargar(event:MouseEvent):void{
         //cargamos el archivo
         cargador.load(req);
         //agregamos un listener que espere a que la carga este completa, si esta completa llamara la funcion "fincarga"
         cargador.contentLoaderInfo.addEventListener(Event.COMPLETE, fincarga);
      }
      function fincarga(e:Event){
         pelicula = e.currentTarget.content;
         //agregamos cargador al escenario para poder visualizar el contenido de peli.swf
         addChild(cargador);
         //agregamos el listener que llamara a la funcion de peli a load_btn;
         load_btn.addEventListener(MouseEvent.CLICK, llamarfuncionpeli);
         load_btn.text_btn.text = "mover";
      }
      //funcion que descarga "peli.swf"
      function descargar(){
         //descargamos peli.swf
         cargador.unload();
         //removemos a cargador del escenario
         removeChild(cargador);
      }
      //funcion que llama la funcion dentro de "peli.swf"
      function llamarfuncondepeli(event:MouseEvent):void{
         //llamamos la funcion dentro de "peli.swf"
         pelicula.mover();
      }

   }
   
}

Primero importamos las clases necesarias:

Código :

package  {
   import flash.display.MovieClip;
   import flash.display.Loader;
   import flash.net.URLRequest;
   import flash.events.MouseEvent;
   import flash.events.Event;

Declaramos la variables que necesitaremos, son 3 para este ejemplo. En la función principal de la clase asignamos sus valores. La primera será la encargada de permitir que flash cargue el archivo "peli.swf", la segunda contendrá el nombre o la dirección del archivo que queremos cargar como un valor string, y por último necesitamos una variable que llamaremos "pelicula" en la cual estará todo el contenido del "peli.swf" luego de que sea cargado.

Código :

public class Base extends MovieClip{
      public var cargador:Loader;
      public var req:URLRequest;
      public var pelicula:Object;

      public function Base() {
         // constructor code
         //asignamos a memoria la variable que cargará el archivo
         cargador = new Loader() as Loader;
         //asignamos la direccion del archivo que se va a cargar
         req = new URLRequest("peli.swf");
         //colocamos un nombre a load_btn y asignamos un listener para que cargue el archivo al darle click
         load_btn.text_btn.text = "cargar";
         load_btn.addEventListener(MouseEvent.CLICK, cargar);   
      }

Ahora creamos la función que llamará el botón al darle click y la cual tendrá que cargar el archivo "peli.swf". Además, agregamos un listener que esperará a que la carga esté completa para que en ese momento llame a otra función que se encargará de asignarle el contenido cargado a la variable "pelicula":

Código :

function cargar(event:MouseEvent):void{
         //cargamos el archivo
         cargador.load(req);
         //agregamos un listener que espere a que la carga este completa, si esta completa llamara la funcion "fincarga"
         cargador.contentLoaderInfo.addEventListener(Event.COMPLETE, fincarga);
      }
      function fincarga(e:Event){
                        //asignamos el contenido del swf cargado a la variable tipo objeto
         pelicula = e.currentTarget.content;
         //agregamos cargador al escenario para poder visualizar el contenido de peli.swf
         addChild(cargador);
         //agregamos el listener que llamara a la funcion de peli a load_btn;
         load_btn.addEventListener(MouseEvent.CLICK, llamarfuncionpeli);
         load_btn.text_btn.text = "mover";
      }

Aclaro que para poder visualizar peli.swf es necesario agregar al escenario a "cargador" con el método addChild(), mientras que la variable película la estamos usando sólo como referencia para poder llamar las funciones dentro de "peli.swf". Además de asignarle el contenido a la variable "pelicula" también asignamos un nuevo listener a "load_btn" para que llame la función dentro peli.swf.

Ahora en peli.fla tengo lo siguiente:



Solamente es un movie clip que se llama "bola_mc" y otro movie clip que funcionará como botón y lo llamaremos "unload_btn".
Ahora publico todo el código de Peli.as con una breve explicación:

Código :

package  {
   import fl.transitions.Tween;
   import fl.transitions.easing.*;
   import fl.transitions.TweenEvent;
   import flash.events.MouseEvent;
   import flash.display.Loader;
   import flash.display.MovieClip;
   
   public class Peli extends MovieClip{
      var animar:Tween;

      public function Peli() {
         // ocultamos el boton del escenario
         unload_btn.visible = false;
      }//funcion para animar la bola
      public function mover(){
         animar = new Tween(bola_mc, "x", Strong.easeOut, 58, 400, 1, true);
         //listener para mostrar el boton en el escenario cuando termine la animacion
         animar.addEventListener(TweenEvent.MOTION_FINISH, fin);
      }
      private function fin(event:TweenEvent){
         //agragamos el listner al boton en el escenario que llamara la funcion en "base.swf"
         unload_btn.addEventListener(MouseEvent.CLICK, descargame);
         unload_btn.text_btn.text = "descargar";
         unload_btn.visible = true;
      }
      public function descargame(event:MouseEvent):void{
         //llamamos la funcion en base.swf
         (root.loaderInfo.loader.root as Object).descargar();
      }

   }
   
}

Importo las clases necesarias y declaro variables:

Código :

package  {
   import fl.transitions.Tween;
   import fl.transitions.easing.*;
   import fl.transitions.TweenEvent;
   import flash.events.MouseEvent;
   import flash.display.Loader;
   import flash.display.MovieClip;
   
   public class Peli extends MovieClip{
      var animar:Tween;


Estoy usando la clase tween para animar por medio de actionscript, por eso la única variable que hay se llama animar. En la función principal de la clase, oculto el botón que descargará la película del escenario:

Código :

      public function Peli() {
         // ocultamos el boton del escenario
         unload_btn.visible = false;
      }

Ahora, ésta es la función que se llama desde "base.swf" y anima a "bola_mc" de un lado a otro:

Código :

                public function mover(){
         animar = new Tween(bola_mc, "x", Strong.easeOut, 58, 400, 1, true);
         //listener para mostrar el boton en el escenario cuando termine la animacion
         animar.addEventListener(TweenEvent.MOTION_FINISH, fin);
      }

La siguiente función espera que termine la animación y muestra el botón que permitirá descargar a peli.swf:

Código :

                private function fin(event:TweenEvent){
         //agragamos el listner al boton en el escenario que llamara la funcion en "base.swf"
         unload_btn.addEventListener(MouseEvent.CLICK, descargame);
         unload_btn.text_btn.text = "descargar";
         unload_btn.visible = true;
      }

Y finalmente la función que se usará para llamar a la función que descarga a "peli.swf" y que se encuentra en la línea de tiempo principal, es decir, base.swf.

Código :

                public function descargame(event:MouseEvent):void{
         //llamamos la funcion en base.swf
         (root.loaderInfo.loader.root as Object).descargar();
      }

Esta línea…

Código :

(root.loaderInfo.loader.root as Object).descargar();

…es la que se encarga de navegar a través de la jerarquía de flash y encuentra la función en la película principal. A veces, es posible que, además del código que está en la clase, estén usando otro código aparte en el .fla, por esta razón es posible que tengan que navegar un nivel más abajo para encontrar el swf cargador. Para eso, la línea quedaría así:

Código :

(root.loaderInfo.loader.root.loaderInfo.root as Object).descargar();


Por ahora dejaré hasta aquí el tutorial, pero esta es la base para la comunicación entre películas swf usando clases. Por último les dejo los archivos del tutorial aqui
Espero les sirva de algo, sobre todo a los que están empezando con AS3...
Saludos.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate