Actionscript3.0, Flash

octubre 2008

Utilizar clases con Actionscript 3.0: Parte II

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:

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:

Flash: Exportar en primer fotograma

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:

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

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

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:

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:

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

esedeerre says:

El post tenia color cuando lo hice, pero algunos meses después tuve que hacer remodelación en la página y algunos ejemplos perdieron el formato

Gracias por comentar y avisar, ya está arreglado

X4 says:

tu explicación es muy buena gracias por el tutorial. Sinembargo tu tuto me ha dejado con unas nuevas dudas como: ¿y qué hago si tengo una clase con la que quiero manipular varios movieclips situaos en el stage? … solo consigo hacer eso pero utilizando el “document class” de la peli princiopal.. pero quisiera hacerlo declarando la clase .. solo he obtenido errores seguramente de concepto …

X4 says:

tu explicación es muy buena gracias por el tutorial. Sinembargo tu tuto me ha dejado con unas nuevas dudas como: ¿y qué hago si tengo una clase con la que quiero manipular varios movieclips situaos en el stage? … solo consigo hacer eso pero utilizando el “document class” de la peli princiopal.. pero quisiera hacerlo declarando la clase .. solo he obtenido errores seguramente de concepto …

Fell26256 says:

Mui bueno el tuto…esta y la primera parte…..pero le hace falta colo al documento…ver esto es como ver texto plano(txt) algo de colo en el codigo estaria mucho mejor.

Hernan says:

Hola, antes que nada muchas gracias por tua explicaciones mas de una vez me han sacado de un apuro!!.
Te queria preguntar lo siguiente, yo hago muchas clases, pero mi problema es que al cargar el main no tengo otra alternativa que importar todas ellas para que estas funcionen, por lo que por ejemplo emplieza un sitio y en la carga inicial me carga la galeria de fotos.
tengo alguna solucion viable con este tipo de problemas?????????
Muchas gracias

Caro says:

Buen tutorial!!!! me sirvio mucho gracias C=

Alberto says:

Saludos! Puede alguien ayudarme en este caso?
El ejemplo funciona, pero la pelota no se mueve con normalidad, va dando tirones y no da ningún tipo de error, además no respeta el “if”, sale del escenario y no vuelve a la posición x=0.

Si uso el ejemplo de este post sale perfectamente, el problema está al usar el “tween”.

Qué he hecho mal?

Gracias!

//código

import fl.transitions.Tween;
import fl.transitions.easing.*;

var animar:MovieClip=new pelota();
addChild(animar);
animar.x=100;
animar.y=100;
animar.alpha=.5;
addEventListener(Event.ENTER_FRAME,mover);
function mover(e:Event){

var moverx:Tween=new Tween(animar, “x”, Strong.easeOut, animar.x, animar.x+10, 5, true);

if(animar.x > 900){
animar.x = 0;
}
}

Hernán says:

Muy bueno los dos tutoriales, ya que ilustran de manera fácil como relacionar la programación orientada a objetos con los objetos flash. Saludos!

Samuel says:

Gracias, muy buen material

Leandro says:

Tengo una consulta; imaginate que tengo la clase Main como clase principal de un archivo FLA. Por que no puedo crear una instancia de esa clase desde el fla?
Por ejemplo, mi clase Main dibuja cuadrados quizás, y tiene propiedades publicas como “color”. Por que no puedo desde el FLA hacer “var cuadrado:Main = new Main();” como sí sé que se puede hacer desde el fla “var cuadrado:MovieClip = new MovieClip();”, obviamente importando antes la clase.

Saludos!

ESTEBAN says:

Están muy bien las explicaciones. ¿Existe alguna continuación de lo que explicais en estas dos primeras clases, que haga más comprensible as3?

Gracias por adelantado.

Ajd says:

Muy buen aporte muchas Gracias!!!! 100% util…