2.I. Concepto de Clase. Clases en ActionScript 3

Esta entrada pertenece a ActionScript 3 - Guía para Principiantes.


Concepto de clase. Clases en ActionScript 3


Un mundo lleno de objetos...

Si conoces los conceptos de programación de objetos, puedes saltarte estos puntos hasta llegar a la última parte del capítulo.


Son muchos y variados los tipos de programación que existen actualmente. Programación estrucuturada, orientada a objetos, lógica, funcional... Cada una con sus pros y sus contras y un sistema propio de funcionaminento.


El principio básico de la Programación Orientada a Objetos es que todo aquello que necesitamos para representar nuestros programas son objetos. Y si lo piensas, razón no le falta. En nuestro Pong vamos a necesitar diferentes objetos para jugar: una bola, los Pong contra las que va a rebotar la bola, unos marcadores para llevar la puntuación... Todos ellos objetos.


(Anotación informática carente de interés: Bueno, siendo estrictos, no todo en la POO son objetos estrictamente... Debate intenso a la vez que inútil que mantienen defensores de la programación funcional pura frente a los que defienden la orientación a objetos...)


Es obvio que no todos los objetos son iguales. Un jarrón no es lo mismo que una pelota, pero un jarrón verde tampoco es exactamente igual a un jarrón rojo. Aquí es dónde interviene, por fin, el concepto de clase.


Concepto de Clase

Vamos a pasar un poco rápido sobre la teoría, porque cuándo realicemos el ejemplo en ActionScript se verá mucho más claro.


En POO, una clase es un tipo de objeto. Todas las pelotas del mundo pertenecen a la clase pelota, y todos los jarrones del mundo a la clase jarrón. Además, cada tipo de objeto tiene unas acciones asociadas (métodos) y unas características propias (atributos).


¿Qué es un atributo?

Un atributo es una característica del tipo de objeto.


En el caso del jarrón, posibles atributos serían: color (así podemos distinguar el jarrón rojo del verde), volumen, contenido...


Y en el caso de la pelota: tamaño, velocidad, dirección...


¿Qué es un método?

Un método es una acción que el tipo de objeto puede realizar.


Para el jarrón, posibles métodos serían: rellenar, romper...


Para la pelota: golpear, parar, pinchar...


¿Cuál es la diferencia entre Clase y Objeto?

Una objeto es una instanciación de una clase. En cristiano, cuándo Dios creó el mundo, lo primero que se hizo fue un molde con forma humana. Ese molde era la clase. La clase humano. Y cuándo creó a Adán utilizando ese molde, creó un objeto de la clase humano. Adán es el objeto, humano la clase. Adán lo concreto, humano lo abstracto.


Clases en ActionScript 3

Vamos a crear nuestra primera (segunda, si contamos el Main.as) clase en ActionScript. Y para empezar, vamos a pensar en uno de los tipos de objeto que vamos a necesitar para nuestro Pong: efectivamente, un Pong. La barrita-mini-pared que subirá y bájara evitando que la pelota sobrepase los límites de nuestro campo.


Con el proyecto Pong abierto en FlashDevelop, vamos a crear unas carpetas para organizar nuestro trabajo mejor: click derecho sobre la raíz del proyecto Pong (AS3) -> Add -> New Folder... y lo llamos "mi", y sobre esta nueva carpeta, misma operación y añadimos una subcarpeta llamada "pong". Y sobre esta carpeta, misma operación, pero en vez de New Folder seleccionamos New Class y la llamamos Pong.as.


Por convención, los nombres de las clases se escriben con mayúsculas, mientras que los de las carpetas (paquetes) con minúscula. Ahora ya es un buen momento para explicar el código que aparece.


package mi.pong
{

/**
* ...
* @author ASL
*/
public class Pong
{

public function Pong()
{

}

}

}

- package mi.pong: Es el paquete (jerarquía de carpetas) en el que se encuentra la clase alojada (el archivo .as). Es decir, dentro de la carpeta "mi", en la carpeta "pong". Es importante que el package esté bien especificado para evitar problemas en la compilación.


- public class Pong: Definición de la clase Pong.


- public function Pong(): Constructor de la clase Pong.


Ya han aparecido bastantes cosas nuevas, así que sinteticemos:


Definición de paquetes

package carpeta_raiz.subcarpeta1.subcarpeta2.(...)
{
// Definición de clases del paquete
}

Definición de clases

public class MiClase
{
// Lista de atributos

public function MiClase()
{
// Definición del constructor
}

// Lista de métodos
}

¿Y el public qué significa? De momento quédate con la idea de que todo aquello que sea public puede ser referenciado por otros archivos .as.


Añadiendo atributos y métodos a nuestra clase Pong

Sin más, añadamos caracterísiticas a nuestra clase Pong para convertirla en una clase útil. ¿Qué atributos y métodos podemos añadir a nuestro pong?


- Velocidad: atributo para predecir su localización. Además, el pong sólo se mueve verticalmente, así que sólo necesitaremos saber la velocidad en el eje de la y.


-Mover: método para poder desplazar el Pong por la pantalla.


Definición de variables

var nombre_variable:tipo_variable [= valor_inicial];

Los atributos son variables que tienen una visbilidad especificada y que se declaran en el cuerpo de la clase, fuera de todo tipo de función.


Visibilidad de atributos y funciones


Los tres tipos de visibilidad para atributos y funciones son:


- public: Cualquier clase externa puede acceder a ellos.


- private: Sólo clases internas pueden acceder a ella.


- protected: Sólo clases hijas pueden acceder a ellas. Las clases hijas se explicarán más adelante.


Definición de atributos

visibilidad var nombre_atributo:tipo_atributo [= valor_inicial];

Definición de funciones

visibilidad function nombre_atributo([parámteros...]):tipo_devolución
{
// Cuerpo de la función
}

El constructor de la clase

Consideramos el constructor de clase a aquella función que tiene el mismo nombre que la clase. Cuándo creemos un objeto, el constructor de clase será la primera función en ejecutarse.


Pues ahora que sabemos todo esto, vamos a añadir a nuestra clase Pong el atributo velocidad y el método mover.


package mi.pong
{

/**
* ...
* @author ASL
*/
public class Pong
{
private var vy:Number;

public function Pong()
{
trace("¡Objeto de la clase Pong creado!");
}

public function mover():void
{
// Vacío. Aún no sabemos cómo vamos a mover nuestro Pong
}

}

}

- private var vy:int : Especifica que el atributo "vy" es del tipo entero (un número redondo negativo o positivo) y además privado. Sólo puede ser visto dentro de la clase Pong.


- public function mover():void : Una función pública llamada mover; void es un tipo especial, que indica que la función no devuelve nada.


Creando un objeto de la clase Pong

Cómo habrás notado, hemos añadido un trace("¡Objeto de la clase pong creado!"); en el constructor de clase. Este mensaje nos servirá para constatar (a falta aún de una representación gráfica para el pong) que el objeto ha sido creado.


Abrimos Main.as y modificamos el código que teníamos por lo siguiente:


package
{
import flash.display.MovieClip;
import mi.pong.Pong;

/**
* ...
* @author ASL
*/
public class Main extends MovieClip
{

public function Main()
{
var miPong:Pong = new Pong();
}

}

}

- import mi.pong.Pong: Si queremos crear un objeto de tipo de Pong, lo primero que hemos de hacer es importar la clase, especificando delante del nombre el paquete en el que está. Si no la importáramos, obtendríamos un error.


- var miPong:Pong = new Pong(): new seguido de un constructor nos devuelve un objeto de la clase especificada. Ese objeto se almacena en la variable miPong, que ha sido especificado del tipo Pong. Observa que esto es una variable dentro la función, no un atributo de la clase, y que por eso no se especifica ninguna visibilidad.


Ctrl+Enter para probar la película, F2 para ver la salida y ahí estará la prueba viviente de que creamos nuestro objeto de la clase Pong. Algo soso, sí. En el siguiente capítulo mostaremos nuestro pong dentro de la ventana Flash.








Anterior Índice Siguiente

1.II.La clase del Documento

Esta entrada pertenece a ActionScript 3 - Guía para Principiantes.


La clase del Documento


¿Qué es la clase del Documento?

Una política que vamos a seguir durante toda esta guía será que siempre que podamos controlar cualquier funcionalidad u objeto desde ActionScript (aunque pudiera realizarse desde Flash de manera más sencilla) lo controlaremos con ActionScript. En algunas ocasiones quizá pueda resultar rebuscado, pero veremos que, a la larga, será mucho más beneficioso.


Y para empezar a aplicar esta política vamos a crear la clase del Documento.


Resultará contradictorio para el lector novel, pero "la clase del Documento" en verdad tiene poco que ver con el concepto de clase de la Programación Orientada a Objetos, que explicaremos más adelante.


Para simplificar (y porque de momento no necesitas saberlo) vamos a considerar a la clase del Documento como el archivo ActionScript en el que inicilizaremos todas los componentes de nuestro juego.


Creando la clase del documento

Como hemos dicho, la clase del documento es un archivo de ActionScript, así que eso es lo que necesitamos.


Con el proyecto Pong que creamos en FlashDevelop abierto, click derecho en la raíz del proyecto, Pong (AS3) -> Add... -> New Class. Llamaremos a la clase Main.as. Aceptamos ¡y ya tenemos nuestra clase Main! Sin saber ActionScript ni nada... El código que obtenemos es el siguiente:


package 
{

/**
* ...
* @author ASL
*/
public class Main
{

public function Main()
{
// Aquí, el código de inicialización
}

}

}

En @author aparecerá el nombre que especificaste al instalar FlashDevelop. El "// Aquí, el código de inicialización" es un comentario.


Comentarios

Los comentarios son texto que no se tendrán en cuenta a la hora de ejecutar nuestra aplicación. Sirven para explicar código y hacer anotaciones. En ActionScript (y en Java, y en C, y en C++, y en otros lenguajes...) se pueden realizar comentarios de dos maneras:


a) Comentarios en única línea:


// Comentario en una línea

b) Comentarios en varias líneas:


/* Comentario en
varias líneas */

Va a ser mucha la sintaxis ("cómo se escriben las cosas") que va a aparecer, y puede que al cabo del tiempo hayas olvidado la mitad. Cuándo aprendo un lenguaje nuevo, suelo ir anotando en una lista, en papel, toda la sintaxis que voy aprendiendo, para que luego sea más rápido consultar cualquier duda. Te recomiendo que lo hagas, porque también te será útil cuándo, después de un tiempo sin utilizar un lenguaje, quieras volver a retomarlo.


Bien, volviendo a nuestra clase Main: De momento no nos interesa saber todos los pormenores de su sintaxis, sólo que function Main es una función (una serie de órdenes que se ejecutarán al iniciar nuestro Flash) y que únicamente hay que sustituir "// Aquí, el código de inicialización" por el código ActionScript que queramos que se ejecute.


Para empezar, vamos borrar el comentario y lo vamos a sustituir por:


trace("Pong");

trace es una función que recibe una variable y la imprime por la consola Flash. En este caso, le enviamos un String (una serie de caracteres entrecomillados). Puede ser muy útil a la hora de depurar nuestro código (ver dónde y por qué está fallando).


Apuntamos trace en nuestra lista de funciones importantes, y guardamos Main.as.


Otro detalle importante es añadir "import flash.display.MovieClip;" y "extends MovieClip" al código como sigue:


package
{
import flash.display.MovieClip;

/**
* ...
* @author ASL
*/
public class Main extends MovieClip
{

public function Main()
{
trace("Pong");
}

}

}

De momento, siguen si preocuparnos el por qué de esto. Ya hablaremos de ello más adelante.


Conectando nuestro Flash con Main.as

Ahora, ¿qué tenemos? Un archivo Main.as y un archivo pong.fla, que sí, están en la misma carpeta, pero que no guardan ninguna otra relación. ¿Cómo le decimos a pong.fla que Main.as es la clase de su documento?


En Flash, clickamos en el documento (el rectangulito blanco, el lienzo) y nos aparecerán sus propiedades en la ventana Propiedades (haz click en el menú Ventana -> Propiedades o pulsa Ctrl+F3 si no la encuentras). Y en el apartado Publicar, en el campo Clase escribimos Main, el nombre de nuestra clase para el documento. Así haremos referencia al archivo Main.as.



Y ahora previsualizamos la película (menú Control -> Probar película o Ctrl+Enter). ¿Ya la has probado? ¿No hay nada? Pulsa F2 para ver la consola de salida de Flash. ¡Sí, pone Pong! La función trace lo puso ahí. Vale, venga, no es gran cosa. Pero hay que tener paciencia. Ya hemos logrado conectar Main.as con pong.fla, paso clave para continuar con el desarrollo de nuestro juego.


Para no dejar con mal sabor de boca al lector al final de este capítulo, y para comprobar que realmente podemos manejar Flash a nuestro antojo desde ActionScript, y no sólo la consola de salida, vamos a cambiar nuestra clase Main por el siguiente código:


package
{
import flash.display.MovieClip;

/**
* ...
* @author ASL
*/
public class Main extends MovieClip
{

public function Main()
{
graphics.beginFill(0x000000);
graphics.drawRect(stage.stageWidth / 2, stage.stageHeight / 2, 50, 50);
graphics.endFill();
}

}

}

Probamos la película y... ahí está: un cuadrado negro en el centro. Menos es nada.








Anterior Índice Siguiente

1.I. Lo primero, organización

Esta entrada pertenece a ActionScript 3 - Guía para Principiantes.


Lo primero, organización


Introducción

Una de las cosas más importantes para el desarrollo de cualquier proyecto software (y para cualquier proyecto en general) es una buena organización. A organizar se aprende con experiencia, tras escarmentar después de cientos de horas de mala programación que, a la hora de hacer algún cambio en nuestro código para añadir una nueva funcionalidad, derivaron en otros tantos cientos de horas de reorganización y reescritura.


La organización es práctica y está llena de beneficios pero, sinceramente, al principio es un coñazo. Normalmente, uno lo que quiere es tirar líneas de código de manera salvaje para ver resultados lo antes posible. Para proyectos pequeños puede ser una vía satisfactoria (de hecho se hace ahí fuera en aplicaciones por las que luego cobran un pastón), pero si aspiramos a que nuestro proyecto sea de verdad una obra de ingeniería, una buena organización es clave para no perdernos entre la multitud de archivos y código que vamos a crear.


FlashDevelop: organizando nuestros archivos .as

Aunque Flash CS4 nos permite trabajar con los archivos de ActionScript, para el desarrollo de nuestro código vamos a trabajar con una aplicación externa: FlashDevelop, un entorno de programación gratuito que no sólo nos va a ayudar a mantener nuestros archivos de ActionScript organizados, sino que además nos echará una mano con atajos de código y otras herramientas automáticas de las que el editor de Flash CS4 carece.


Una vez instalado FlashDevelop, empezamos, ahora sí, con nuestro proyecto.


Jerarquía de carpetas

Creamos una carpeta llamada "Pong" y dentro de ésta, una subcarpeta llamada "src".


Lo siguiente es crear el eje central de nuestro proyecto: el archivo Flash.


Abrimos Adobe Flash, y creamos un nuevo Archivo de Flash (AS 3.0) y lo guardamos en la subcarpeta "src".


Ahora es el momento de ejecutar FlashDevelop. Creamos un nuevo proyecto para nuestro Pong: Menú Project -> New project... y seleccionamos Flash IDE Project. Abajo, en Name escribimos "Pong" y en Location seleccionamos la carpeta "src" dentro de Pong que creamos anteriormente.


En síntesis, nuestra situación actual es la siguiente:


  • Por un lado tenemos Adobe Flash, con nuestro "pong.fla" abierto. En él realizaremos toda la parte gráfica de nuestro juego.

  • Y por otro, FlashDevelop, con el proyecto "Pong" en el que desarrollaremos todo el código ActionScript.








Anterior Índice Siguiente