Utilizar clases con Actionscript 3.0: Parte I

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:

  1.  
  2. on(release){  
  3. 	trace("Me has pulsado");    
  4. }
  5.  

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:

Propiedades Escenario

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:

  1.  
  2. package {
  3.  
  4. 	import flash.display.MovieClip;
  5.  
  6. 	public class Main extends MovieClip {
  7.  
  8. 		import flash.text.TextField;
  9.  
  10. 		public function Main():void {
  11.  
  12. 			Texto_txt.text = "Texto con clase";
  13.  
  14. 		}
  15. 	}
  16. }
  17.  

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:

  1.  
  2.   public class Main extends MovieClip {
  3.  

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:

  1.  
  2. import flash.text.TextField;
  3.  

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

  1.  
  2. public function Main():void {
  3.  

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.

Descargar archivos

Comentarios
    • Autor
    • Christian
    Hola
    Tengo una duda, ya que estoy migrando a AS3 de una buena vez y... estuve leyendo 
    mucho por la red hasta que di con tu web.
    
    Bueno mi duda es sobre El Constructor de tu codigo:
    
    public function Main():void
    {
       Texto_txt.text = "Texto con clase";
    }
    
    Me parecio algo rapido el codigo porque muchos ponen El Constructor sin Tipo y nada
     de Public, Private, etc.
    
    algo asi:
    
    function Main()
    {
    }
    
    public function Texto():void
    {
    Texto_txt.text = "Texto con clase";
    }
    
    Como vez El Constructor es una funcion sin Tipo (void) y no es
     necesario pornerle Public o Private.
    
    Despues crean otra funcion donde ya va void y public, etc
    
    Pero como recien estoy en esto AS3 tu tienes la ultima palabra para
     despejar dudas sobre esto amigo.
    
    Un abrazo.
    
    • Autor
    • macroweb digital
    muy buen articulo para inicar con esto de las clases para AS3 ya que con el tiempo no quedara otra que utilizar las clases y llamarlas desde nuestras peliculas de la forma expuesta gracias por el conocimiento.
    • Autor
    • daniel h olivau
    Hola a todos. AS3 es realmente un dolor de cabeza y de más abajo del cuerpo también. Han complicado innecesariamente lo que era fácil (aunque ya había costado trabajo de entender). Alejaron a la mayoría de los diseñadores de Flash, que no tienen, (y no tienen obligación de tener) conocimientos de programación. Comprendo la estrategía de Adobe de intentar tener un lenguaje multiplataforma que pueda competir, sobre todo, con Java. Pero se fueron al carajo. Ahora hay que escribir más código para hacer una simple llamada a un botón, y no quieran poner un movieclip dentro de un botón, o intenten poner un texto dinámico sobre un botón y después me cuentan. Se fueron al carajo Adobe. Y carajo no es una grosería, busquen en el diccionario.
    • Autor
    • pulg0s0
    Hola! Ante todo gracias por compartir con todos tus ejercicios. Esto de pasarse a AS3 es más complicado de lo que yo pensé.. He intentado hacer este mismo ejercicio pero desde una subclase que se encuentra en la ruta com/proyecto/Subclase.as pero al compilar en el panel de salida me pone el siguiente error "TypeError: Error #1009: No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo". Si lo hago desde la clase principal (documento de clase, va perfecto), ¿podrías echarme una mano por favor? Llevo tiempo intentando comprender la mecánica de las herencias de clases y subclases así como su relación con el escenario. Gracias!!
    • Autor
    • Developer
    El AS3 a mi parecer es mejor, se puede organizar mejor el código y mas aún con las clases se puede reutilizar mucho codigo, haciendo el trabajo mas rapido y sencillo.
    • Autor
    • Skant
    Porfin!!!!! Muchas gracias!!!!! Porfin algo claro!!!!!! jeje muchas gracias por este sencillo, práctico e ilustrativo tutorial ;)
    • Autor
    • PEDRO LUNA
    Diseño y programo en flash hace tiempo, en verdad el cambio de la estructura de AS a llegado a representar una carga para todos nosotros pues la costumbre y los vicios adquiridos durante el tiempo que hemos programado en AS2 son muchos, sin embargo, basándome en experiencia propia ahora en AS3 se optimizo mucho los swf y algunas funciones son mas fáciles de usar, caso contrario muchas otras (Ej. los botones) son mas tardadas y requieren mas código. Con todas las mejoras y todo aquello que se convirtió en una carga, AS3 viene a mejorar la forma de crear aplicaciones.
    • Autor
    • 012tu
    Horas, me a quedado mas claro lo de los paquetes, no tengo formacion de programador, pero esto de obligar a realizar acciones mediante ActionScript se me hace un super avance, ya no hay q crear una super linea de tiempo de casi 3000 frames, para 2 minutos de animaciòn, para la misma pista de audio, se crean los movieclips a usar y en codigo se les incluye facilmente al escenario, digamos q son miles de horas menos de trabajo y sin tanto rollo, espero q sigas incluyendo ams tutos para los q no sabemos, Grax
    • Autor
    • Ricardo Martín Pizarro
    Acabo de tomar la desición de pasarme de AS2 a AS3, no creo que los de ADOBE hayan perdido el GRAN CRITERIO QUE LOS CARACTERIZO durante esta última década, transformando a Flash en lo que hoy es. Seguramente que voy a tener que quemarme las pestañas a cada minuto, al momento de entrar en una etapa de transicón desde un lenguaje al otro. No lo iba a hacer, pero decidí confiar, en ADOBE, en AS3 y en mi. Desde hace tiempo este vínculo no hace mas que darme satisfacciones, espero pronto sentirme comodo en AS3, como me he sentido en el GLORIOSO AS2!!. Saludos y GRACIAS POR SACARNOS LAS DUDAS.
    • Autor
    • Ironkiken
    Buenas, perdona.Intento resumir mi duda... He creado una serie de movieclips que quiero que al pinchar un botón se vayan ejecutando uno tras otro (como diapositivas) y hay otro botón que te hace saltar la finaliza la presentación. La presentación la he creado con un archivo de clase (como el de las imágenes rotativas del ejemplo que enseñais en esta web)... En la línea de tiempo, tengo cada movieclip en una capa con una mascara sobre ellos y en la 1ª capa empezando por arriba tengo un fotograma con código. Mi intención es que al epinchar en el botón inicir se ejecute el archivo de clase ¿cómo se hace porque eso no lo entiendo en este post? gracias
    • Autor
    • c3tz
    AS3 es estructura,flexibilidad, me gusta y Ud. lo hace más fácil. Gracias };
    • Autor
    • Misato
    Exelente tutorial. Simple y se entiende bastante bien. ¡Muchas gracias!
    • Autor
    • chester
    Hola, mi gran duda y creo q la de muchos... se puede cargar un codigo externo con la opcion include pero que yo modifique el codigo y que el swf me tome los cambios sin tener que publicar de nuevo la pelicula? Gracias...
Dejar un comentario
Tu nombre (obligatorio):

E-mail (obligatorio, no se mostrará):

Web:

Comentario: