ActionScript 3.0 Para Bobos!

Hola! Hoy estoy dispuesto a escribir una serie de posts que resuman en pocas palabras todo lo que puede hacer ActionScript 3.0 (AS3) por ustedes, sean o no sean programadores.

Empecemos ya!

Hay varias formas de programar con ActionScript 3.0:

• Desarrollando aplicaciones con Adobe Flex Builder.
• El compilador oficial de ActionScript 3.0 que es gratuito!!
• O usando el entorno original que le dio vida al ActionScript, el Flash, en su versión 9, mejor conocida como Adobe Flash CS3 Professional. Este es mi método preferido!! Flash aún es flexible con algunos detalles de la sintaxis. Es importante resaltar que las versiones anteriores de Flash no soportan ActionScript 3.0.

¿Cómo hacer una aplicación con ActionScript 3.0 con el compilador gratuito? Para los pobres como yo.

Primero debes conseguir el Flex SDK 2 (38MB) en la siguiente liga:

http://www.adobe.com/products/flex/downloads/

O si eres más desesperado, el Flex SDK 3 (76.2MB):

http://labs.adobe.com/downloads/

Lo instalas.

Copia el siguiente código y guardalo en un archivo que se llame HolaMundo.as:

package {
	import flash.display.Shape;
	import flash.display.SimpleButton;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.text.TextFieldAutoSize;
	
	public class HolaMundo extends Sprite {
		protected var _balloon:Shape;
		protected var _button:SimpleButton;
		
		public function HolaMundo() {
			drawBalloon();
			drawHello();
			drawButton();
			
			x = (500 - width) / 2;
			y = (300 - height) / 2;
			alpha = 0;
			addEventListener(Event.ENTER_FRAME,upAlpha);
		}
		
		private function getANewTextFormat(color:uint):TextFormat {
			var format:TextFormat = new TextFormat();
			format.font = "Trebuchet MS,Arial";
			format.align = TextFormatAlign.CENTER;
			format.bold = true;
			format.color = color;
			format.letterSpacing = -4;
			format.size = 50;
			return format;
		}
		
		private function getANewRect(width:uint,height:uint,color:uint=0):Shape {
			var rect:Shape = new Shape();
			rect.graphics.beginFill(color);
			rect.graphics.drawRect(0,0,width,height);
			rect.graphics.endFill();
			return rect;
		}
		
		private function drawBalloon():void {
			_balloon = new Shape();
			_balloon.graphics.beginFill(0x0099CC);
			_balloon.graphics.drawRoundRect(0,0,200,150,100);
			_balloon.graphics.moveTo(150,150);
			_balloon.graphics.lineTo(150,200);
			_balloon.graphics.lineTo(100,150);
			_balloon.graphics.endFill();
			addChild(_balloon);
		}
		
		private function drawHello():void {
			var hello:TextField = new TextField();
			hello.autoSize = TextFieldAutoSize.CENTER;
			hello.defaultTextFormat = getANewTextFormat(0xFFFFFF);
			hello.text = "Hola\nMundo!";
			hello.x = 20;
			hello.y = 10;
			addChild(hello);
		}		
		
		private function drawButton():void {
			_button = new SimpleButton();
			_button.hitTestState = _balloon;
			_button.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
			_button.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
			_button.addEventListener(MouseEvent.ROLL_OVER,onRollOver);
			_button.addEventListener(MouseEvent.ROLL_OUT,onRollOut);
			addChild(_button);
		}
		
		private function upAlpha(event:Event):void {
			if (alpha < 1)
				alpha += .1
		}

		private function downAlpha(event:Event):void {
			if (alpha > .4)
				alpha -= .1
		}
		
		private function onRollOver(event:MouseEvent):void {
			removeEventListener(Event.ENTER_FRAME,upAlpha);
			addEventListener(Event.ENTER_FRAME,downAlpha);
		}
		
		private function onRollOut(event:MouseEvent):void {
			removeEventListener(Event.ENTER_FRAME,downAlpha);
			addEventListener(Event.ENTER_FRAME,upAlpha);
		}
		
		private function onMouseDown(event:MouseEvent):void {
			startDrag();
		}

		private function onMouseUp(event:MouseEvent):void {
			stopDrag();
		}
	}
}

Ejecuta Adobe Flex 2 SDK Command Prompt, para ello debes hacer click en el Menú Inició » Programas » Adobe » Adobe Flex 2 SDK Command Prompt. Se abrirá una ventana del Símbolo del Sistema de Windows, con el classpath ya modificado para encontrar los compiladores y librerias de ActionScript.


Usando el Símbolo de Sistema, muévete al directorio donde guardaste el archivo HolaMundo.as y compilalo así:

mxmlc.exe HolaMundo.as

O con un tamaño personalizado:

mxmlc.exe -default-size 500 300 HolaMundo.as

Y listo! Ahora tienes un archivo HolaMundo.swf en el mismo directorio. Tal vez algunas rutas sean diferentes, pero el archivo mxmlc.exe es el compilador de ActionScript 3.

¿Cómo hacer una aplicación con ActionScript 3.0 usando Adobe Flash CS3 Professional?

Uy! Hay un montón de formas de programar, pero la que yo recomiendo ampliamente es usando una Document Class. Una Document Class es un archivo AS que esta ligado a un archivo FLA. Entonces puedes hacer lo que quieras en tu documento FLA como siempre lo has hecho con Flash, poner dibujitos, sonidos, películas y fotos, pero todo el código lo pones en uno o varios archivos AS.

Para que funcione, es importante que escribas el nombre de la clase principal en el cuadrito Document Class que aparece en el panel Properties cuando haces click sobre el escenario. Obviamente es importante guardar todos los archivos en el mismo directorio (o si tú ya entiendes paquetes, entonces esto no es necesario).


Al probar la película (CTRL + ENTER), se ejecuta el constructor de la clase principal.

Puedes probar el código de arriba. Guárdalo en un archivo que se llame HolaMundo.as. Abre el Flash CS3 y crea un nuevo documento File » New... » Flash File (ActionScript 3.0) » Aceptar y escribe HolaMundo en el cuadrito Document Class. Presiona CTRL + ENTER para correr la película.

¿Cómo hacer una aplicación con ActionScript 3.0 usando Adobe Flex Builder 2?

Ok, tienes una versión de prueba de Adobe Flex Builder 2. Puedes hacer legal tu copia solicitando un número de serie gratis para estudiantes en la siguiente liga:

http://www.flexregistration.com/

Si ya tienes el Flex, debes crear un nuevo proyecto haciendo click en File » New » ActionScript Project, escribes un nombre para el proyecto, en el ejemplo será HolaMundo y después haces click en Finish.


Entonces, se abre el archivo HolaMundo.as en el panel central. Borra todo el código existente y pégale el código de arriba. Guarda los cambios y presiona CTRL + F11 para correr tu proyecto. Entonces estarás enfrente de tu primera aplicación con Adobe Flex Builder!

Entonces ¿Cuál Usar?

Ok, ya probamos los tres métodos, ¿cuáles son las ventajas y desventajas de cada uno? Yo sigo siendo novato en estas tecnologías, y desconozco si se pueden configurar algunos detalles en cada uno, pero por mi experiencia podría enumerar las siguientes características.

	Flex SDK (Compilador mxmlc.exe)	Flash CS3 Professional	Flex Builder 2
Lista de métodos, propiedades y paquetes al codificar.	No tiene esto.	Flash te ayuda con los nombres de propiedades y métodos cuando él quiere (no funciona en todas las situaciones).	Flex siempre te muestra una lista de métodos y propiedades.
Genera archivos SWF.	Sip.	Claro.	También.
Genera archivos SWF con tamaño fijo (sin ayuda de un HTML o XHTML).	Sip, si usas las opciones -default-size 800 600 a la hora de compilar, donde 800 es el ancho y 600 es el alto.	Sí, las dimensiones son las mismas que se han definido en el archivo FLA.	Sí, Flex Builder tiene valores predeterminados de 500x375, pero estos valores se pueden modificar si se hace click con el botón derecho sobre el nombre del proyecto en el panel Navigator y se selecciona Properties » ActionScript Compiler y en el cuadro de texto Aditional compiler arguments: se escribe -default-size 800 600.
Componentes	Sí, están incluidos en el SDK, pero al compilar se debe agregar esos directorios al classpath.	Sí, en el menú Window » Components se abre un panel con TextInput, CheckBox, ComboBox, FLVPlayback .. entre otros componentes. Si los componentes se colocan sobre el escenario, Flash relaciona estás clases automáticamente (modifica el classpath automáticamente). Sino se arrastran sobre el escenario, habrá que localizar el directorio de estas clases y agregarlos al classpath manualmente en Edit » Preferences » ActionScript » ActionScript 3.0 Settings.	Oops, pues están incluidos en el SDK, pero son fáciles de arrastrar sólo cuando se trabaja con MXML y no en proyecto ActionScript, de otra forma habrá que agregar los directorios al classpath.
Ayuda y documentación.	No tiene, pero incluye algunos ejemplos.	Sí, tiene ayuda y es muy buena. Escribe algo mientras programas, colócate encima y presiona F1. Al instante tendrás lo que buscas.	Sí tiene, pero es muy lenta y no es tan intuitiva.
Opciones para debuguear.	Sí, al compilar deberas usar -debug para mostrar información adicional.	Sí, presiona CTRL + SHIFT + ENTER para debuguear la película. (Sólo así funcionan los breakpoints.)	Sí, presiona F11 para debuguear. Los mensajes de trace() los podrás ver en el panel Console.
La mejor ventaja que tiene.	Es gratis.	Puedes hacer un dibujo usando las herramientas de dibujo, lo seleccionas y lo conviertes en MovieClip presionando la tecla F8. Esto te ahorrara algunos lineTo(), drawCircle(), beginFill() y lineStyle().	Flex Builder está completamente orientado a la creación de RIAs. Es compatible con muchos otros lenguajes de programación, servidores y frameworks.

Conclusiones

Ok! Si llegaste hasta aquí, es momento de comenzar a programar con ActionScript 3.0. Digo, son vacaciones y tú estás leyendo el blog de Stan!!! Seguro te sobra algo de tiempo. :P

Algunos tips para migrar de ActionScript 2 a ActionScript 3, escritos por la líder (MUJER!!) del proyecto Adobe Flash Player, los pueden encontrar en:

http://www.adobe.com/devnet/actionscript/articles/actionscript_tips.html

Y para entender la nueva estructura de los archivos SWF, les recomiendo:

http://www.adobe.com/newsletters/edge/may2007/articles/article6/index.html?trackingid=ZCEF

Si algo no se entiende bien, puedes dejar los comentarios que quieras a continuación y trataré de ayudarte.

Feliz año 2008!!