Tutorial de ActionScript 2.0 en Flash

Introducción

Macromedia creo Flash 3, y con el introdujo un, hasta entonces, desconocido concepto en el mundo Flash, la programación. Primitivos play, stop y gotoAndPlay poblaron entonces el diccionario de ActionScript de la epoca. Vino Flash 4 luego, acompañado de las estructuras de programación; fue entonces cuando los ciclos y las condiciones se mostraron al universo Flash.
Flash 5, en convenio con un poderoso aliado (ECMA) dio vida a una nueva visión de ActionScript, convirtiendose en la sintaxis ECMA, elegida desde tiempos inmemoriales por su hermano JavaScript y engendrada de C, unico lenguaje original.
XML, LoadVars, OOP y muchos mas conceptos desfilaban uno a uno hacia ActionScript, pero ningun suceso marcaria tanto la mente de los flasheros como ahora, en MX 2004; ActionScript 2.0

Dejando un poco la introducción cyberpunk, ActionScript 2.0 realmente es un increible avance, volviendose totalmente estandar, totalmente orientado a objetos y con muchisimas novedades, Flash MX 2004 trae este nuevo lenguaje (La segunda versión de ActionScript) a un nivel mas alla de las aplicaciones ricas en medios orientadas a la web.

Este tutorial pretende ser una guia de migración desde Flash 5 y MX hacia MX 2004, en lo referente a su lenguaje de programación y un poco de su modelo de componentes; NO PRETENDE ser una guia basica de programación ni un tutorial de ActionScript desde cero
Se espera que el lector tenga las nociones basicas de programación, que haya manejado antes un poco de ActionScript y que use actualmente Flash MX 2004 (Que es lo que dice el titulo, no? :D )

Indice

Variables en Flash MX 2004; Strong Data Typing
Imagenes en campos de texto
Cascade Style Sheeting, CSS en campos de texto
Personalizando los componentes MX 2004 con CSS
Nuevo modelo de eventos en los componentes V2
Clases y programación orientada a objetos

Variables en Flash MX 2004; Strong Data Typing

Existen varios lenguajes que nos acostumbran a malas mañas, como no tener la necesidad de declarar las variables antes de usarlas o no asignarles un tipo de datos (Lease Visual Basic, aunque PHP [la versión anterior] tiene algo de eso).
Desgraciadamente, Flash tiene un poco de todo, en Flash no hay necesidad de declarar variables para usarlas y una variable puede ser "multi" tipo de datos, por ejemplo, si asigno primero a una variable un String y luego un numero, no habria problema; asi:

variable = "Patito";
trace(variable);
variable = 1337;
trace(variable);
//Esto mostrara en pantalla primero "Patito" y luego "1337"
//Sin ningun error de compilación

Esto, aunque parezca una ventaja, es un grave error de codificación que genera "malas practicas de programación".
Pues hay buenas noticias, para todos los puristas de la programación y para los novatos que inician con Flash; ActionScript 2.0 incluye la declaración de tipo de datos en una variable (Strong Data Typing), es decir, si declaras una variable de tipo numero y le asignas un String, Flash te mostrara un error y tu usaras solo los tipos de dato que deben ser usados; ejemplo:

var miNumero:Number;
miNumero = 31337;
trace(miNumero);
miNumero = "Cristalab";
trace(miNumero);

Que generara esta salida en la ventana OutPut:

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Type mismatch
in assignment statement: found String where Number is required.
    miNumero = "Cristalab";
Total ActionScript Errors: 1 Reported Errors: 1

Veamos entonces la estructura de la declaración de variables:

var nombreDeVariable:TipoDeDato;

Aqui cambia que siempre vamos a declarar la variablepara ponerle el tipo de dato, asi, todas las declaraciones inician con la palabra clave var, ademas, despues del nombre de la variable pondremos el signo de dos puntos seguido por el tipo de dato; si quieres una lista de los tipos de datos disponibles, escribe el signo de dos puntos y una lista aparecera ante ti, aqui un ejemplo.

Lista de tipos de datos

No solo eso, ahora tambien detectara mayusculas y minusculas, es decir, una variable llamada miClab sera dintitna a MiClab, la M mayuscula la hace completamente diferente, asi que ha tener cuidado con el "case sensitive" de Flash MX 2004.
Como nota final, todas las clases inherentes y objetos internos de Flash pueden ser declarados com oobjetos (Por ejemplo, XML)

Imagenes en campos de texto

Asi es, ahora podemos introducir imagenes externas JPG dentro de los campos de texto de Flash por medio del soporte HTML en los campos de texto, asi que si tengo un campo de texto al que le asigno el siguiente codigo HTML:

<p align='center'><font color='#990000'>Prueba de HTML en Flash MX 2004</font></p>
<img src='Foto.jpg' />Esto es una <b>prueba</b> de como <i>Flash MX 2004</i> soporta HTML e imagenes
incrustadas en sus campos de texto<br />Mucho mas poderoso que <u>Flash MX</u>

La apariencia de ese campo de texto, tomando como base que existe el archivo Foto.jpg en la misma carpeta; seria:

Imagen de un SWF con un campo de texto con contenido HTML

Esto nos da muchisima mas flexibilidad en cuanto a manejo de datos dinamicos en nuestras interfaces de Flash; ademas, no solo nos deja cargar imagenes externas; si yo creo un MovieClip cuyo punto de registro (Es decir el centro de la figura) sea la esquina superior izquierda y lo exporte para ActionScript con un nombre, tambien podre incluirlo dentro de Flash, no importa si es estatico o animado; por ejemplo, si creamos un MovieClip de una figura cualquiera y al crear el MovieClip colocamos esto:

Cuadro de dialogo "Convertir a Simbolo"

Y en el codigo HTML, en la etiqueta IMG, cambio el "Foto.jpg" por el nombre que le di para ActionScript (En este caso "Clab"); el campo se podria ver asi:

La imagen es creada con Flash y esta dentro de un Movie Clip

Cascade Style Sheeting, CSS en campos de texto

En pro de los estandares de la web, Macromedia incluyo soporte a hojas de estilo en cascada dentro de Flash MX 2004, asi que podemos crear todos nuestros estilos de manera externa y luego incluirlos dentro de los campos de texto para asi hacer mas facil y logico el proceso de información+diseño.

Por ejemplo, crearemos un archivo "estilo.css" con este contenido:

titulo {
	font:"Times New Roman", Times, serif;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	color:#003399;
}
subtitulo {
	text-align:right;
	color:#999999;
	font-size:9px;
}
contenido {
	margin-left:5px;
	font:Arial, Helvetica, sans-serif;
	color:#000000;
	text-align:left;
}

Crearemos un campo de texto dinamico, de nombre "campo_txt"; luego, colocamos este codigo en el primer keyFrame de la pelicula:

//Creo un objeto de tipo Hoja de Estilo
var miEstilo:TextField.StyleSheet = new TextField.StyleSheet();
//Cargo dentro de el, el archivo CSS externo
miEstilo.load("estilo.css");
//Se lo asigno al campo de texto
campo_txt.styleSheet = miEstilo;
//De acuerdo a las etiquetas personalizadas dentro del CSS, creo el contenido
var texto:String = "<titulo>Cristalab, website dedicado a Flash MX 2004</titulo>\n";
texto += "<subtitulo>Lleno de tutoriales, ejemplos y hasta un comic</subtitulo>";
texto += "<contenido>Este website, encontrado por casualidad en los perdidos rincones de Google ";
texto += "da una visión profesional de las nuevas herramientas de desarrollo en contenidos ";
texto += "dinamicos para la web, especializandose en Macromedia Flash MX 2004</contenido>";
//Se lo asigno al campo de texto
campo_txt.htmlText = texto;

El bonito resultado, seria este:

Campo de texto con el contenido HTML parseado por medio de CSS

Ahora bueno, al igual que Flash no soporta todo el HTML, tampoco soporta todo el CSS, pero digamos que soporta el "justo y necesario" para lo que necesites; por favor, refierete a la ayuda de Flash (Tecla F1) para mas información detallada

Personalizando los componentes MX 2004 con CSS

Esto da para un tutorial completo (El "skineo" de componentes es todo un arte), pero solo mostrare lo mas importante, usar CSS para personalizar componentes.
Este ejemplo sencillo modificara de manera global los componentes CheckBox, RadioButton, List, Button, TextArea y NumericStepper

/*Creamos una variable que modificara los estilos globalmente, asignandole cada uno
  de los estilos de componente a modificar */
var estiloGlobal = _global.styles.Button=_global.styles.CheckBox=
    _global.styles.TextArea=_global.styles.RadioButton=_global.styles.List
    =_global.styles.NumericStepper = new mx.styles.CSSStyleDeclaration();
//Le asignamos a la variable distintos tipos de estilo compatibles con el estandar CSS
estiloGlobal.backgroundColor = 0xEFF3F7;
estiloGlobal.color=0x666666;
estiloGlobal.fontFamily = "Verdana";
estiloGlobal.shadowColor=0xFFFFFF;

Y no solo eso, tambien podemos hacer "temas" para los componentes, es decir, crear cada uno de sus elementos (Barras de scroll, fondos, bordes) para personalizar aun mas nuestra interfaz.
Un ejemplo de como quedaria seria algo asi:

Apariencia de los componentes despues de "skinnear" y aplicarles CSS

Nuevo modelo de eventos en los componentes V2

Estrenamos un nuevo modelo de eventos tambien en esta versión de Flash, ahora, podemos eventar los componentes directamente como haciamos con un boton y no por medio de funciones, listeners y demas; un punto mas en pro de la usabilidad; para el ejemplo, arrastraremos el componente "Button" al escenario y manteniendolo seleccionado desplegamos el panel de ActionScript, donde , si escribimos on( se desplegaran los eventos asociados a este componente como en la grafica:

Eventos del componente Button

Asi que si colocamos el siguiente codigo:

on (click) {
	trace("No me presiones :(");
}

Obtendremos al clickear el boton, la siguiente salida:

Pero hagamoslo mas interesante, creemos un campo de texto dinamico en el escenario, le ponemos de nombre de instancia campo_txt y en el code del boton ponemos:

on (click) {
	_parent.campo_txt.text="No me presiones :@";
}

Y el texto aparecera en el campo de texto :D

¿ Por que _parent ?
En los componentes, todo componente instanciado es, en escencia, un movie clip, asi que todo tipo de codigo que le asocies ira con el "scope" o alcance de variables del movie clip que lo compone; como el campo de texto estaba un nivel arriba del MovieClip que compone al boton, existe la necesidad de usar _parent, aunque _root funcionaria igual.

Muchos otros componentes funcionan asi, asi que no duden en oprimir F1 ante cualquier duda (O contarnos en los foros de Cristalab).

Clases y programación orientada a objetos

Este punto seria tema para todo un tutorial completo, pero intentare abarcar una visión general de la OOP.
Flash ahora incluye programación orientada a objetos real, es decir, para los que han sido programadores, herencia, polimorfismo, interfaces, vamos, como Java (Solo que no hay sobrecarga de metodos[info solo para programadores] )

La tecnica tambien es similar a Java, creas un archivo externo con extensión .as que tenga el mismo nombre que la clase que viene escrita en el y luego lo importas a Flash, para tener mas claro esto; vamos a crear una clase "cuadrado" que nos dibuje ¬_¬ un cuadrado en donde le digamos (Y en nuestro ejemplo, le diremos que lo haga en _root, es decir, en la linea de tiempo principal de la pelicula).

En Flash vamos al menu File -> New y en la lista desplegada elegimos ActionScript File.
Guardamos el archivo con el nombre Cuadrado.as y escribimos este codigo en el:

//Declaración de la clase
class Cuadrado{
	/*Variable privada (Es decir, solo puede ser vista y modificada por un metodo
	  de la clase; esta nos servira para saber donde vamos a dibujar */
	private var elLugar:MovieClip;
	/*Constructor, esta es la función que se ejecutara
	  al crear una instancia de la clase, como cuando hago
	  var cosa = new String("Hola");, algo por el estilo ;) */
	//Lo olvidaba, para que sea constructora debe tener el mismo
	//nombre de la clase
	function Cuadrado (lugar:MovieClip) {
		//Asignamos a la variable privada de la clase la variable que llega por parametro
		this.elLugar = lugar;
	}
	//Función publica (Accesible desde el nombre de instancia de la clase) que nos servira
	//Para dibujar el cuadrado
	public function drawCuadrado () {
		var X:Number,Y:Number;
		this.elLugar.createEmptyMovieClip("cuadro",1);
		this.elLugar.beginFill(0xFF0000,90);
		X=(this.elLugar._width/2)+100;
		Y=(this.elLugar._height/2)+100;
		this.elLugar.moveTo(X,Y);
		X+=100;
		this.elLugar.lineTo(X,Y);
		Y+=100;
		this.elLugar.lineTo(X,Y);
		X-=100;
		this.elLugar.lineTo(X,Y);
		Y-=100;
		this.elLugar.lineTo(X,Y);
		this.elLugar.endFill();
	}
}

Y en una pelicula cualquiera colocamos solamente este codigo en el primer keyFrame:

//Trae nuestro archivo Cuadrado.as, no podemos colocar codigo de clases
//Dentro de una pelicula, debe ser en un archivo externo
import Cuadrado;
//Creamos una nueva variable de tipo "Cuadrado", es decir, nuestra clase
//Ahm!, pasandole como parametro al constructor _root, lugar donde dibujara
var test:Cuadrado = new Cuadrado(_root);
//Invocamos al función publica drawCuadrado de nuestra clase
test.drawCuadrado();

Y veremos dibujado un lindo cuadrado en nuestro escenario :D

Conclusiones

Migrar de ActionScript 1.0 a 2.0 trae muchisimas ventajas, elimina muchas "malas mañas" de programación y crea una nueva plataforma de desarrollo de RIAs (Rich Internet Applications) y contenidos interactivos para la web de alto impacto y rapido desarrollo, tu solo debes dar el primer paso :D
Ahora claro, muchas cosas quedaron por fuera, pero son cosas mas puntuales y de los que hay tutoriales completos en Cristalab, como el objeto PrintJob, MovieClipLoader, los nuevos componentes como el Acorddion, metodos de ordenación de Arrays muy complejos, mantenimiento de proyectos con Flash Project y posible integración con CVSs y mucho mas!, ahora a experimentar.
emm, una recomendación final (Y antes de ponerme pesado), los archvios de ejemplo estan disponibles para descarga, pero seria recomendable que ustedes mismos hicieran los ejemplos a partir del tutorial y solo los usaran en caso de alguna falla y como dije anteriormente, nuestros foros siempre estaran abiertos a sus preguntas

Freddie® Cristalab
[email protected]

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo