Cómo usar MovieClips en ActionScript 3

Este tip es muy sencillo, pero trae de cabeza a la gente que empieza con ActionScript 3, Flash CS3, Flex, etc. Intentaré aclarar un poco cómo añadir MovieClips a nuestra película que estén situados dentro de nuestra biblioteca y empezar a montar nuestra película.

Como ya se dijo en otro tip, el sistema de añadir elementos de la biblioteca a cambiado en AS3. Ahora attachMovie no funciona, añadimos los clips con addChild y para realizar este proceso hemos de crear una clase para cada clip que queramos añadir.

Este es el proceso a seguir:

Primero crearemos el MovieClip y lo tendremos en la biblioteca.

Abriremos las propiedades del MovieClip y en las opciones de linkage seleccionaremos "exportar para actionscrip" y le daremos un nombre para la clase.



Como podemos ver, ahora en AS3 hemos de vincular el MovieClip a una clase, NO darle un nombre de identificador como hacíamos en AS2.

NOTA: Si intentásemos añadir un nombre de identificador al MovieClip no aparecería una advertencia indicándonos que ese proceso solo es para AS2 y nos preguntara si queremos cambiar las opciones de publicación.



Ahora para añadir este MovieClip a nuestra película hemos de crear una instancia de esa clase

Código :

var clip1:clipA = new clipA();

Y la situaremos en el stage con addChild

Código :

var clip1:clipA = new clipA();
clip1.x = 100;
clip1.y = 100;
addChild(clip1);

Y listo!



Ahora si quisiésemos añadirle algún tipo de interactividad a este MovieClip, como por ejemplo añadirle un evento de click, no colocaríamos el código en el .fla cómo haríamos en AS1 o AS2 sino que crearemos un archivo .as con el nombre de la clase que le indicamos al MovieClip y ahí escribiremos todo el código necesario para manejar este MovieClip.

Código :

package 
{
   import flash.display.MovieClip;
   import flash.events.MouseEvent;
   //
   public class clipA extends MovieClip
   {
      public function clipA()
      {
         addEventListener(MouseEvent.MOUSE_DOWN, mouse_down);
      }
      private function mouse_down(event:MouseEvent):void
      {
         trace("CLICK!");
      }
   }
}

En AS3 es recomendable trabajar con clases y colocar el menos código posible sobre la línea de tiempo con lo que este código lo podíamos meter dentro de una clase Main.as

Código :

package 
{
   import flash.display.MovieClip;
   //
   public class Main extends MovieClip
   {
      private var _root:MovieClip;
      private var clip1:clipA = new clipA();
      //
      public function Main(ruta:MovieClip)
      {
         _root = ruta;
         //
         clip1.x = 100;
         clip1.y = 100;
         _root.addChild(clip1);
      }
   }
}

Al constructor de la clase le pasaremos como parámetro la ruta de la línea de tiempo principal (el _root).

Este sería el único código de nuestro .fla

Código :

var _root:Main = new Main(this);

Esta clase Main también la podíamos haber instanciado desde el panel de propiedades de la película



De esta manera no es necesario introducir ningún código dentro de nuestro .fla, y tampoco es necesario pararle ningún parámetro ya que en este caso el this ya hace referencia a la línea de tiempo principal, con lo que la clase Main quedaría así:

Código :

package 
{
   import flash.display.MovieClip;
   //
   public class Main extends MovieClip
   {
      private var _root:MovieClip;
      private var clip1:clipA = new clipA();
      //
      public function Main()
      {
         _root = this;
         //
         clip1.x = 100;
         clip1.y = 100;
         _root.addChild(clip1);
      }
   }
}

A partir de aquí iremos ampliando la clase Main y iremos añadiendo más clases y subclases para construir nuestra película.

Espero haber aclarado alguna duda

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.