9) Entradas 2da Parte (Teclado - Definiciones) ...

Vamos a empezar creando una nueva clase en FlashDevelop. Para ello, luego de crear un nuevo proyecto del tipo Flex3 que llamaremos EventosDelTeclado. Si tenemos abiertos archivos de otros proyectos, conviene que hagamos File-Close All para limpiar el escritorio.
Ahora vamos a agregarle una carpeta. Para ello, en la vista del proyeto (View-Project), hacemos botón derecho del mouse sobre la carpeta src, luego Add-New Folder ... y escribimos MisClases (este será el nombre de nuestro package de clases).
Ahora agregamos una clase haciendo botón derecho sobre misClases Add-New Class ... y elegimos KeyManager.as. Verás que ya quedó armado el esqueleto de tu nueva clase. Para los que saben java, verán que todo se ve bastante similar.
Listo, ya tenemos nuestra clase lista para incluirle todo el código.
Pero... todavía no definimos qué queremos hacer con los objetos de nuestra clase, por eso definiremos los objetivos:
Necesitamos un objeto al que pueda interrogar en cualquier momento y me diga en que estado están ciertas teclas que consideramos importantes de acuerdo al siguiente detalle:

• Cada tecla será una propiedad del objeto que definiremos como verdadera si está presionada y falsa si no lo está (tipo Boolean con default false).
• Los eventos del teclado serán para un contenedor determinado (que lo podemos llamar Parent), que podrá ser cualquier UIComponent.
• Como lo que nos interesa por ahora es hacer juegos, lo que queremos es tener disponible el estado de las siguientes teclas: Arriba - Abajo - Derecha - Izquierda - Espacio - Z - X - C (estas tres últimas sin importar si son mayúsculas o minúsculas).

Bueno, ya tenemos definida nuestra clase. Luego seguiremos con la implementación.

8) Entradas 1ra Parte (Mouse) ...

Vamos a ver entonces, a modo de ejemplo los eventos del mouse que presentamos a continuación:

• mouseDown
• mouseUp
• mouseOver
• mouseOut
  
• mouseMove
• click
• doubleClick

Para ver el ejemplo, deberás hacer click aquí.

Para ello, creamos dentro de una ventana que nos permite incluir el título (titleWindow) en la barra superior. Dentro de la ventana, construimos un VBox (vertical Box) que hace que todo lo que se incluya se ordene verticalmente.

El Box rojo permite mostrar cómo se detectan en él los eventos mouseDown y mouseUp.

El Box azul permite mostrar cómo se detectan en él los eventos mouseOver y mouseOut.

El Box fucsia permite mostrar cómo se detecta en él el evento mouseMove, y de paso lo aprovechamos para usar las propiedades localX y localY que tiene el evento para indicar la posición del cursor dentro del Box.

El Box amarillo permite mostrar cómo se detecta en él un simple click.

El Box verde claro permite mostrar cómo se detecta en él un doubleClick.

En estos últimos 2 casos, Incluimos el archivo con código as3 que nos va a permitir importar el código para usar la función show del objeto Alert (objeto que se instancia una sola vez en forma automática, vendría a ser como global para todo el programa).

Para que se compile el archivo MainCode.as y usarlo desde Main.mxml, se agregó la siguiente línea de código:

<mx:Script source="MainCode.as"/>

El contenido de MainCode.as en este caso, simplemente es:

// importamos librerías necesarias
import mx.controls.Alert;

Esto es todo respecto del mouse, imprescindible para muchos tipos de juegos, aunque si lo tuyo son los arcades tradicionales, en la próxima entrega sabrás algo más sobre los eventos del teclado y las clases en as3.

7) Hay que organizarse...

Bueno, llegó el momento de empezar a programar nuestros juegos.

Pero... no nos apresuremos. Cuanto más organizados empecemos, mejor será el resultado (y más rápido).

A mi me gusta ver al software como un sistema con sus Entradas que Procesamos y convertimos en Salidas.

En las próximas entregas analizaremos las entradas, que podrán utilizarse en los distintos tipos de juegos, a saber:

• De selección por click del Mouse (por ejemplo, de memoria tipo memo-test)
  
• De arrastrar y soltar con el Mouse (por ejemplo, vistiendo al personaje)
• De movimiento del personaje con Teclado (por ejemplo, cualquier arcade)
• De movimiento de la paleta con Teclado (por ejemplo, el viejo pong)

Claro que nuestor juego contará con varios de ellos y nos prepararemos para utilizarlos.

6) ¿Qué es Flex?

Vamos a poner un par de links que nos permitan saber algo más sobre Flex en español:

Imprescindible:

¿Qué es Flex?

Complementario:

Flex Básico

Por otra parte, nos queda pendiente el tema de cómo solucionar los dolores de cabeza que nos provocan lo acentos la ñ y demás delicias de nuestro idioma.

Muy simple:

Desde FlashDevelop, editando el archivo mxml correspondiente, hacemos File - Encoding - UTF-8 y ello permitirá el soporte a caracteres extendidos.

Si hacemos ello, podremos usar ahora ¡Hola Mundo! en nuestro ejemplo en lugar de usar -Hola Mundo!. Pueden probar también con acentos y va a ver que si el encoding está en 8 bits el programa no va a compilar.

En la próximo nos vamos a organizar para desarrollar el juego.

5) Hola Mundo ...

Llegó la hora. Vamos a crear nuestro primer programa en Flex3, que no podía llamarse de otra forma que Hola Mundo.
Para eso vamos a hacer lo siguiente:

• Iniciamos FlashDevelop
• Hacemos Project, New Project
  
• Ahora marcamos dentro de la lista de Action Script 3, Flex 3 Project
  
• En Name escribimos HolaMundo
• En location, con Browse elejimos una carpeta adecuada para nuestros proyectos. Por ejemplo, podemos hacer una carpeta nueva debajo de C:\Flex3 que se llame Proyectos con lo que nuestra entrada location quedará: C:\Flex3\Proyectos
• Marcamos ahora el tilde en Create directory for project
• Pulsamos OK
• A la derecha veremos la ventana denominada Project Manager (si no se ve, podemos ir al menú y elegimos dicha opción).
• Ahí nos aparecen 2 carpetas: bin y src. Debajo de src (a modo de rama dentro del árbol) tenemos Main.mxml (ya se hablará de mxml y xml brevemente más adelante) que es archivo en el cual vamos a escribir nuestro código, que de entrada se verá así:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Application>

• Bueno, vamos a darle un poco de vida a nuestra primer aplicación en Flex agregando entre las marcas mx:Application nuestro código que será simplemente:

<mx:Label text="Hola Mundo!" />

• Antes de seguir adelante, vamos a asegurarnos de no estar en modo debug. Para ello, si en la lista de selección que aparece en la barra de herramientas superior (bien a la derecha), si leemos Debug, cambiemos la opción por Release.
• Ahora compilamos el programa pulsando F8
• Si todo funcionó adecuadamente, el archivo HolaMundo.swf se habrá creado en la carpeta bin que aparece en el Project Manager
• Para probar nuestro primer programa abrimos un explorador de windows en C:\Flex3\Proyectos\HolaMundo\bin y con botón derecho sobre HolaMundo.swf hacemos abrir con y elegimos nuestro Browser preferido (Internet Explorer, Firefox, etc.). Si nos aparece algún cartel de seguridad, deberán permitir ver la página.

¡Felicitaciones!, ya logramos nuestro primer programa. Un escalón pequeño, pero ABSOLUTAMENTE NECESARIO.Puedes ver el programa compilado y descargar el código fuente haciendo click aquí.
En nuestra próxima etapa veremos un poco los problemas que trae aparejado nuestro querido idioma Español y cómo solucionarlos.

4) Instalando el entorno (2da. Parte : FlashDevelop) ...

FlashDevelop se puede descargar desde aquí.
Su instalación es simple, pero cuidado existe un bug que hace que no pueda instalarse de cualquier modo. Cuando llegues a la siguiente ventana, marca la opción Standalone Mode. Si la dejas sin marcar, nada va a funcionar. Salvando eso y que es Windows dependiente, el resto, son todas buenas noticias, resultando una muy interesante IDE para nuestros desarrollos.
Ahora solo resta configurar la carpeta dónde se instaló Flex3. Para eso, pulsamos la tecla F10, marcamos AS3Context en la lista de la izquierda (la segunda entrada) y en la lista de la derecha, donde dice Flex SDK Location escribimos la carpeta de instalación del compilador, en nuestro caso C:\Flex3.
Acá terminamos la instalación de nuestro entorno. Seguiremos con nuestro original "Hola Mundo" en la próxima.

3) Instalando el entorno (1ra. Parte : Flex3) ...

Primero vamos a instalar Flex3. Para ello vamos a descargarlo de aquí.
Vamos a elegir la opción Open Source Flex SDK, sin embargo, tu puedes elegir la versión completa (no nos pensamos meter con AIR por ahora).
Luego lo instalaremos simplemente descomprimiendo el .zip en una carpeta C:\Flex3 (si lo instalas en otra carpeta, tendrás que recordarlo luego cuando hagamos referencias a la misma, así lo adaptas a tu instalación).
Ahora vamos a ver si quedó bien instalado, compilando alguna de las aplicaciones de demostración.

• Abrimos una consola (Inicio - Ejecutar, Escribimos cmd y hacemos Aceptar).
• Luego, en la consola nos movemos al disco de instalación de Flex3 haciendo c:
  
• Nos movemos a la carpeta de flex3 haciendo cd c:\Flex3\samples\explorer
• Allí se encuentra el archivo build.bat que ejecutaremos para probar si el entorno de compilación funciona. Si es así, se irán generando una serie de archivos swf que luego podrán servirnos de ejemplo para programar en Flex. Este proceso es m u y, p e r o, m u y leeeeeennnntooooo. Paciencia (o a comprar procesador nuevo y un par de Gigas de Ram).
  

Bien, hasta aquí comprobamos que nuestro compilador funciona, pero para verlo necesitamos Flash Player 9 debugger que puedes descargar de aquí, eligiendo el apropiado para tu navegador. Luego lo instalas.

Ahora, podrás hacer abrir la página C:\Flex3\samples\explorer\explorer.html

Si hasta acá todo anda, podemos quedarnos tranquilos que vamos por el buen camino. Ya falta menos para poder empezar a programar....

2) Prerequisitos ...

Antes de referirnos a los pre-requisitos, vale la aclaración que lo que se verá acá es para entorno Windows. Sin embargo, el compilador Flex3, también es posible descargarlo para otras plataformas. El editor, también podrá ser otro elegido. Con lo cual, si tu eres uno de dichos usuarios, puedes volver por acá cuando termines de instalar y compilar tus primeros programas.

Bueno, ahora van los pre-requisitos:

1. Descarga e instala Java (será necesario para compilar las aplicaciones con Flex3).
2. Descarga e instala .NET 2.0 framework (necesario para poder luego instalar FlashDevelop v.3)

Sugerencias:

• Ni lo intentes con menos de 512 Mb de Ram. Sufrirás ataques de aburrimiento insospechados.

1) Para empezar ...

He tratado de hacer un juego en AS3 con Flex3 y FlashDevelop y me ha costado mucho encontrar algún tutorial o libro que me ayude.
Si es de Flex3 (compilador Open Source para programas Flash), en general están orientados a las aplicaciones comerciales haciendo uso de Web 2.0.
Si es de Juegos, me encuentro con referencias a los conocidos .fla, el uso del TimeLine y del Stage, cosas que casi nunca aparecen como en ayudas de Flex3.
Como supongo que no soy el único con ese inconveniente en la web es que se me ocurrió lanzar este Blog para que podamos ir armando un entorno de trabajo útil y si es posible, unas buenas librerías de classes.
Trataremos de facilitar los caminos que llevan a poder publicar un juego en MochiAdds u otras páginas que vayan surgiendo y de esa forma poder ganar algún dinero extra.