Utilizaremos Flash CS 3 para nuestros ejemplos. Flash CS4 trae nuevos features, pero aún no está muy extendido y para lo que realizaremos, con cs3 estaremos perfectos. No usen ninguna versión anterior, dado que están basadas en ActionScript 2 y el lenguaje cambia bastante.
Como ya dije en mi anterior nota, voy a asumir que tenés bases de ActionScript y de Flash. Daré muchas cosas por entendidas. No obstante, intentaré intercarlar links con tutoriales y, por supuesto, pueden preguntarme lo que deseen que será respondido ni bien se pueda.
Por otro lado, la referencia del lenguaje que viene con el Flash es bastante completita. Realmente se aprende muchísimo con ella. Para acceder, simplemente tocamos F1 en Flash.
Flash nos trae un propio editor de texto para el código actionscript, pero es realmente bastante precario y muy molesto tenerlo mezclado con frames, movieclips, etc. Mejor opción es utilizar algún IDE copado. Mi recomendación, el que yo uso cuando desarrollo para as3 y en que estarán basados los tutoriales, es el siguiente:
http://www.flashdevelop.org
Este IDE es realmente bastante completo y cómodo. Tengan en cuenta que no trae compilador as3, así que deberán tener abierto paralelamente el flash CS3 con el .fla en cuestión. Cada vez que deseemos compilar nuestro código desde FlashDevelop, éste compilará usando el fla que esté activo en Flash. Por cierto, si tenemos dos monitores, el laburo se hace comodísimo.
Bien, como dije, Flash Develop utiliza el compilador de flash, así que, antes que nada, debemos decirle dónde se encuentra este compilador. Por supuesto me refiero al flash en sí mismo. Así que vamos a (Tools->Preferences) y en la pestaña ASCompletion, en donde pide el Path del Flash Ide, ponemos la ruta donde tenemos instalado el flash cs3. Con esto bastará.
Armando una estructura de trabajo
Vamos a crear una carpeta, en la cual estarán todas nuestras librerías de trabajo. Tengan en cuenta que esta carpeta será compartida por todos los proyectos. De más está decir que si trabajan varias personas juntas, esta carpeta va de una a svn.
Ejemplo de librerías que iran acá son las de manejo de física, o algunas para transiciones como Caurina (ya lo veremos), indispensable para facilitarnos el trabajo.
Crearemos la carpeta, en el lugar que deseen, y le pondremos como nombre AS3.
A continuación, creamos una carpeta más y la llamaremos GameFramework. Esta será nuestra libería propia. Aquí crearemos nuestras clases con la que desarrollaremos todos los juegos. Obvio que el nombre puede ser diferente, GameEngine, MiEmpresa, etc.
Abrimos el Flash CS3 y creamos un nuevo archivo flash as3. Le ponemos el tamaño que deseemos. Yo voy a usar un 600 x 400. Sencillamante porque sí.
Vamos a Publish Setting, y en las opciones que marqué en la imagen, agregamos la dirección en la que se encuentra nuestra carpeta que creamos anteriormente. Yo lo tengo en C:\programming\as3 , ustedes pongan su path.
Esto permitirá que importemos clases de esta librería sin necesidad de poner paths absolutos. De es ta manera, podemos hacer algo como
import GameFramework.*;
Acordate que esto lo usaremos en cada proyecto, así que, tenelo en cuenta cada vez que crees un nuevo flash.
La estructura del código
Bien, por fín. Como todo programador sabe, cada programa posee un módulo principal que es invocado por el sistema operativo o por quien corresponda al iniciar el programa. Es es famoso main(). En lenguajes orientados a objetos, como el que nos toca, el programa es considerado un objeto en sí mismo. Nuestra clase principal es lo que en flash se llama Document Class.
A la hora de compilar, flash busca la definición de la clase que le es pecifiquemos y la asocia directamente con nuestro MovieClip (recordemos que MovieClip es una clase Action Scrip y que el "programa" entero es en sí un MovieClip).
De esta manera, al ejecutarse nuestro movieclip, se invocará automáticamente el constructor de la document class y se ejecutará el código correspondiente. En otras palabras, sería el main().
Elegiremos un nombre para nuestra document class, y este será bastante representativo. La llamaremos: Game.
El nombre va a elección, pero es buena costumbre que sea el mismo nombre que el juego
que estás desarrollando, o algo bien respresentativo. También podemos usar una clase
llamada Main, si esto nos hace sentir más C++ o Javacero.
Probablemente no salga una advertencia informándonos que flash no logró encontrar la definición de esta clase, es decir, un archivo action script que contenga el código. Le damos aceptar, ya que la crearemos prontamente.
Abrimos el Flash Development (oh yeah), y creamos un nuevo proyecto
(Project->New Project).
Elegimos AS3 Project. Le ponemos el nombre que queramos, y lo guardamos en la
carpeta que queramos.
Ya tenemos nuestro projecto FlashDevelop armado. Como verás, se generó automáticamente
una estructura de carpetas, cuya funcionalidad te explicaré a continuación.
- bin: en esta carpeta guardaremos el archivo build del proyecto, es decir la versión compilada. Como estamos hablando de flash, nos referimos a un archivo swf.
- lib: en esta carpeta guardaremos recursos como las imágenes, sonidos, etc y, principalmente, el .fla del juego. Así que, vamos a nuestro fla creado anteriormente y lo guardamos en esta carpeta.
- src: aquí irá a parar todo el código actionscript del proyecto. Dado que este lenguaje es orientado a objetos, cada archivo .as que creemos será una clase o package, aunque una buena práctica es tener una clase por archivo.
- main.as: este archivo generado automáticamente es el que será usado como document class por nuestro fla. Dado que nosotros le habíamos puesto Game, hacemos click sobre el archivo , presionamos F2 para renombrar, y lo llamamos: Game.as
Ahora que creamos nuestro proyecto y, además, pusimos dentro el archivo flash del mismo, necesitamos configurar en este último el path en el cual irá a parar el archivo compilado. Para eso, en nuestro flash vamos nuevamente a publish setting, y en la pestaña Formats, tildamos únicamente Flash (swf), y le ponemos el path relativo que necesitamos,tal como vemos en la siguiente imagen:
Guardamos los cambios y, de esta manera, cada vez que compilemos, el archivo resultante irá a parar a la carpeta bin del proyecto flash develop, tal como dijimos antes.
Por último, solo nos queda decir que, además de nuestra carpeta de librerías, nuestro fla incluya los códigos actionscript propios de este proyecto. Por lo tanto, al igual que como hicimos antes, vamos a publish settings, etc etc y agregamos una nueva class path, y le pondremos
../src
De esta manera, todos los actionscript de la carpeta src de nuestro proyecto se incluirán automáticamente.
Codeando la Document Class
Ya tenemos armada la estructura del proyecto, configurado el fla, y creado el archivo de la document class. Es hora de meter por fin algo de código.
Le damos doble click al Game.as y veremos algo así (fíjense que en lo que muestro, reemplace cada Main por Game):
package
{
import flash.display.Sprite;
import flash.events.Event;
/**
* ...
* @author Abstract Man
*/
public class Game extends Sprite
{
public function Game():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
}
}
}
Vemos un constructor típico de Poo y un típico método Init. Si observamos, el
constructor hace lo siguiente:
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
Esto básicamente significa, que si el stage ya fue cargado, invoca al método init
para que, valga la redundancia, inicialice todos los datos de nuestro programa.
En cambio, si aún no lo fue, agrega un listener que espera a que se cargue y al hacerlo
invoca al init. El metodo init, lo primero que hace, es remover este listener. Y luego
sí.. a inicializar!
Bárbaro. Hagamos un sencillo "hola mundo" para asegurarnos que todo va bien. Luego de la
linea que remueve el listener, agregamos lo siguiente
trace("Yeah Babe! Hola mi fuckin mundo!!");
Ahora, si estamos en flash develop, le damos al F6 o Ctrl + Enter (esto mismo si
estamos en flash, pero ojo, no toques F6 en flash porque es el hotkey para crear un
nuevo Key Frame) y compilamos.
Walá!! Nos abrirá nuestro swf en blanco y en la pestañita Output de la consola del
Flash, saldrá nuestro mensaje del trace. Flash Develop tiene su propia ventana de
outputs, investiguen.
Bien, hasta aquí llegamos por ahora. Nos vemos la próx!!!
No hay comentarios:
Publicar un comentario