Actionscript3.0, Flash

septiembre 2008

Utilizar clases con Actionscript 3.0: Parte I

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:

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:

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:

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:

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

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.

macroweb digital says:

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.

Christian says:

daniel h olivau says:

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.

pulg0s0 says:

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!!

Developer says:

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.

Skant says:

Porfin!!!!!
Muchas gracias!!!!!
Porfin algo claro!!!!!!

jeje muchas gracias por este sencillo, práctico e ilustrativo tutorial ;)

PEDRO LUNA says:

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.

012tu says:

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

Ricardo Martín Pizarro says:

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.

Ironkiken says:

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

c3tz says:

AS3 es estructura,flexibilidad, me gusta y Ud. lo hace más fácil. Gracias
};

Misato says:

Exelente tutorial. Simple y se entiende bastante bien. ¡Muchas gracias!

chester says:

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…