Utilizar clases con Actionscript 3.0: Parte II

Etiquetas: package import addEventListener

En este anterior post, mostraba como empezar a trabajar con clases en AS3. En este segundo tutorial, mostraré como podemos enlazar nuestros elementos de la biblioteca con sus clases correspondientes, y como insertar estos objetos en el escenario (haciendo algo "parecido" a lo que se hacía en AS2 con attachMovie.

Lo primero que voy a intentar explicar es como se "suelen" organizar las clases. Normalmente la clase principal (la que se asocia al documento, como vimos en el anterior tutorial) se deja en la misma carpeta que el .fla principal, y el resto de clases secundarias se ordenan en una serie de subcarpetas siguiendo esta estructura:

-Nombre del dominio invertido de la persona o empresa que crea el programa. Por ejemplo en mi caso tengo las clases en com/esedeerre/.. es decir, que siempre creo una carpeta com, que tiene dentro una carpeta esedeerre, que tiene dentro una serie de carpetas con los nombres de los paquetes (ahora veremos lo que es un paquete): "utilidades", "precargas", "sonido", etc...

Esta forma de nombrar las clases, garantiza que los nombres de paquete sean únicos. Por ejemplo si en una aplicación Flash usamos clases de Papervision, de Ape, propias y de Flash, y todas estuvieran nombradas de la misma manera, Flash tendría problemas para buscarlas. Utilizando esta estructura nos aseguramos que nuestras clases no se van "a pegar" con las de otros paquetes de clases.

Ahora que hemos visto como se suelen organizar las clases, vamos a ver como acceder a esas clases que están "escondidas" en carpetas. Si tenemos una clase en com/esedeerre/Bola.as, para acceder a ella tendremos que hacer:

 
import com.esedeerre.Bola
 

Dicho esto, creamos un documento nuevo de Flash(Actionscript 3.0) , y asociamos el escenario a la clase Main. Ahora vamos a crear un círculo, click encima, botón derecho, convertir en símbolo, y dejamos la pantalla como esta:

Lo que estamos haciendo es crear un clip de película con nombre de instancia Bola_mc. Lo asociamos a la clase com.esedeerre.Bola (que vamos a crear después), y le decimos a Flash que lo exporte en el primer fotograma y lo exporte para Actionscript.

Ahora que tenemos el clip de la clase "Bola", vamos a su archivo de clase. Creamos un nuevo Archivo de Actionscript y lo guardamos en una carpeta llamada esedeerre, que esté dentro de una carpera com, con el nombre de Bola.as.

En este archivo escribimos:

 
package com.esedeerre{
	import flash.display.MovieClip;
	public class Bola extends MovieClip {
		import flash.events.*;
		public function Bola():void {
			addEventListener(Event.ENTER_FRAME,mover);
		}
		private function mover(e:Event) {
			x+=5;
			if (x > 300) {
				x = 0;
			}
		}
	}
}
 

Lo que estamos haciendo es crear una clase Bola, que hereda de MovieClip. En la primera linea ponemos

package com.esedeerre{

porque hemos guardado el archivo Bola.as en com/esedeerre/. Si lo hubieramos guardado en la misma carpera que el fla, sólo tendríamos que poner package. Es decir. que le estamos indicando a Flash la ruta hasta el archivo Bola.as. El resto de lineas siguen la estructura que ya vimos en el primer tutorial. En este caso en la función constructora

 
public function Bola():void {
 

hemos añadido un evento enterframe para el objeto, asociado a la función mover. Esta función mueve 5 px hacia la derecha el objeto, y cuando llega a x=300 lo vuelve a colocar en 0.

Ahora que tenemos la clase Bola, vamos a crear la clase Main. Creamos un nuevo archivo de Actionscript, y escribimos:

 
package {
 
	import flash.display.MovieClip;
 
	public class Main extends MovieClip {
 
		import flash.text.TextField;
		import com.esedeerre.Bola;
 
		public function Main():void {
 
			var bola:Bola = new Bola();
			addChild(bola);
 
		}
	}
}
 

Como vemos, hemos tenido que importar la clase Bola para poder utilizarla. En la función constructora Main, creamos una nueva Bola y la añadimos al escenario:

 
var bola:Bola = new Bola();
addChild(bola);
 

Guardamos los dos archivos .as, publicamos el fla, y deberiamos nuestra bola moviéndose de izquierda a derecha.

Utilizar clases con Actionscript 3.0: Parte I

Etiquetas: class import extends MovieClip TextField

Ha pasado año y medio desde que salió Flash CS3 con el "nuevo" Actionscript 3.0, el 1 de Noviembre sale CS4 con algunas nuevas clases del lenguaje, y todavía muchos diseñadores (y algunos desarrolladores) se muestran reacios a dar el salto a AS3.

Personalmente creo que ese "miedo" al AS3 se perdería con un par de charlas sobre el lenguaje, y dando pistas sobre como se hacen los "basicos" (programar un botón, una carga externa, etc). Luego ya es cuestión de trastear y ver como un poco de organización en los desarrollos (que antes era "optativa", pero ahora está casi impuesta) puede ahorrarnos horas de correcciones y muchos quebraderos de cabeza.

Este tutorial va a ser el primero de una serie en la que intentaré explicar como se hacen los "básicos" en AS3.

En Actionscript 3.0 no podemos programar "encima de los objetos" como hacíamos en Actionscript 2.0. Es decir, que ya no existe eso de crear un botón y poner encima:

 
on(release){  
	trace("Me has pulsado");    
}
 

Ahora tenemos que crear el botón, ponerle un nombre en el panel de propiedades, y añadirle los eventos desde la linea de tiempo o desde un fichero .as externo.
La opción recomendada es trabajar con clases, asi que en este tutorial muestro como asociar un documento .fla con una clase principal.
Lo primero es crear un archivo Flash (Actionscript 3.0). Ahora tenemos que asociar el documento a la clase que haremos luego. En este caso la he llamado "Main". Este nombre tenemos que ponerlo en el campo "Clase de documento" del panel de propiedades:

Después creamos un campo de texto en el escenario y le ponemos el nombre "Texto_txt". Es este ejemplo vamos a hacer que desde la clase Main se ponga un texto en ese campo. Una vez que tenemos el fla preparado, lo guardamos en una carpeta.

Ahora vamos a crear la clase Main. Creamos un Archivo de Actionscript, y lo guardamos con el nombre "Main.as" en la misma carpeta que el fla. Es importante saber que le nombre del archivo tiene que ser el mismo que el nombre de la clase. En el fichero tenemos que escribir este código:

 
package {
 
	import flash.display.MovieClip;
 
	public class Main extends MovieClip {
 
		import flash.text.TextField;
 
		public function Main():void {
 
			Texto_txt.text = "Texto con clase";
 
		}
	}
}
 

La palabra package es la que abre siempre los documentos de clase. Puede ir seguido de la ruta hasta el archivo, pero eso ya lo veremos otro día. En la segunda linea vemos un import de la clase MovieClip. La clase asociada al stage, hereda las propiedades de la clase MovieClip, por lo que tenemos que importar esta clase antes de usarla en la tercera linea:

 
  public class Main extends MovieClip {
 

En esta linea estamos diciendo que vamos a crear la clase Main (que es el nombre que hemos puesto al archivo y en el panel de propiedades) , y que para esta clase vamos a utilizar como base la clase MovieClip. La siguiente linea:

 
import flash.text.TextField;
 

importa la clase TextField. En este ejemplo vamos a utilizar un campo de texto, por lo que antes de usarlo debemos "explicarle" a flash qué es un campo de texto importando la clase correspondiente (que es lo mismo que hacemos en la segunda linea con el MovieClip).

La siguiente linea

 
public function Main():void {
 

es la que crea la llamada función constructora de la clase. Esta función tiene que existir siempre, y tener el mismo nombre que la clase. La función constructora se ejecuta siempre que creamos un nuevo objeto de esa clase. Puede recibir parámetros, pero eso ya lo veremos más adelante. La última linea no tiene misterio, le decimos que ponga un texto en el campo que habíamos creado.

En resumen, hemos creado una clase asociada al escenario, que tiene que extender la clase MovieClip. Además la clase, la función constructora, y el archivo .as tienen que llamarse igual.

Ahora sólo falta publicar el fla para ver el campo con el texto.

Para cualquier duda podéis utilizar el formulario de contacto.