Tutorial FLASH - Pasando de ActionScript 2.0 a ActionScript 3.0, guía rápida.

Versión Flash: CS3 y superiores   |   Compatible con ActionScript 2.0 y 3.0   |   Nivel: Medio   |   Hits: 80716

Con éste tutorial vamos a tratar de explicar de modo claro y sencillo la migración de código ActionScript 2.0 a código ActionScript 3.0. Esta serie va dirigida principalmente a aquellos usuarios de Flash que, estando familiarizados con AS 2.0, no han dado el salto todavía a AS 3.0.

Este recurso no pretende ser un extenso compendio que recoja absolutamente todas las diferencias entre las dos versiones del lenguaje, sino, simplemente un repaso de las funcionalidades más frecuentes a la hora de programar una película Flash, una guía rápida.

Aspectos contenidos en este tutorial:

- Ubicación del código ActionScript.
- Sprites.
- Lista de Visualización.
- Gestión de Eventos.
- Propiedades de objetos.
- Carga de datos externos (datos y media).

UBICACIÓN DEL CÓDIGO ACTIONSCRIPT.
Cuando trabajamos en AS 2.0 podemos colocar el código en cuatro lugares diferentes: en un archivo externo, en un fotograma de la línea de tiempo, asociado a un movieclip (incluyendo componentes) o asociado a un botón. En cambio, en AS 3.0 sólo podemos insertar código en un archivo externo y en los fotogramas de la línea de tiempo, desaparece la posibilidad de hacerlo asociado ningún objeto. Aunque este cambio puede incomodar un poco si estamos acostumbrados a asociar acciones directamente a botones y movieclips, en realidad nos va servir para tener el código de nuestra película más ordenado y accesible.

SPRITES.
Los sprites son un nuevo tipo de objeto gráfico. Sólo podemos crearlos con código ActionScript, y en esencia, se trata de movieclips sin línea de tiempo, como si sólo tuvieran un único fotograma. En ActionScript 3.0 le ha quitado el protagonismo al movieclip, quedando prácticamente relegado su uso a la línea de tiempo.

LISTA DE VISUALIZACIÓN.
A la hora de trabajar con AS 3.0 aparece este concepto inexistente en AS 2.0. Se trata de una colección que contiene todos los objetos visibles en el escenario. Todos los objectos con representación gráfica, ya sean botones, movieclips, componentes, bitmaps, vídeos o sprites creados con programación deben añadirse a la lista para pasar a ser visibles.

Emplearemos los métodos addChild(miObjeto) y removeChild(miObjeto) para las operaciones básicas de añadir/borrar un objeto de la lista de visualización. Los elementos creados en Flash dispuestos en la línea de tiempo se añaden automáticamente a la Lista de Visualización por lo que no es necesario añadirlos con addChild() para que sean visibles.

// ejemplo: crear un sprite en AS 3.0
var miSprite:Sprite=new Sprite();
// creamos el Sprite, pero todavía no es visible
//añadimos el objeto a la lista de visualización en el nivel más alto
// y se visualiza encima de los existentes (si hubiera)
addChild(miSprite);

Dentro de la lista se pueden establecer jerarquías, es decir, dentro de un elemento podemos meter otro u otros, y dentro de estos, otros y así hasta que nos aburramos...

// añadimos otro Sprite dentro del que acabamos de crear
var miSpriteHijo:Sprite=new Sprite();
miSprite.addChild(miSpriteHijo);

En estos ejemplos hemos añadido los sprites con el método addChild que posiciona el elemento en el nivel más alto. Ésto es similar al uso en AS 2.0 de getNextHighestDepth, sin embargo, en AS 3.0 se gestionan los niveles de profundidad de un modo diferente. Mientras que en AS 2.0 se modificaba el nivel de un clip con swapDepths y podía darse la existencia de niveles vacíos, en AS 3.0 ésto no es posible, si eliminamos de la lista un elemento, se reorganizarán los elementos automáticamente.

GESTIÓN DE EVENTOS.
El modo de manejar los eventos es una de las cosas que más quebraderos de cabeza da al migrar de AS 2.0 a AS 3.0. Una sencilla combinación de on(release)...getURL("..."); en AS 3.0 requiere unas cuantas líneas de código adicionales.

Ejemplo de un link en un banner, la url de destino está definida en la variable clickTag:

// código AS 2.0 en el botón del banner
on(release){
  getURL(clickTag, "_blank");
}

// código AS 3.0 en la línea de tiempo
banner_btn.addEventListener(MouseEvent.CLICK, visitarLink);
function visitarLink(e:MouseEvent):void {
  navigateToURL(new URLRequest(clickTag), "_blank");
}

Tomad nota del método addEventListener ya que va a ser fundamental para trabajar en ActionScript 3.0, a partir de ahora será vuestro amigo inseparable. El método addEventListener ya estaba disponible en AS 2.0 para asignar comportamientos a componentes. Para emplearlo en AS 3.0 le pasamos dos parámetros. El primero define el evento que vamos a capturar y el segundo es la funcíon o método que se va ejecutar cuando se detecta el evento.

PROPIEDADES DE OBJETOS.
En ActionScript 3.0 desaparece el símbolo _ de la primera posición en el nombre de las propiedades, ahora la propiedad que define el nivel de transparencia de un objeto se llama alpha y no _alpha, como en ActionScript 1.0 y 2.0. Además de ésto, algunas propiedades han cambiado su nombre y su posible rango de valores. Lo mejor es que repaséis la documentación de Flash (en el epígrafe de la clase DisplayObject) para ver las novedades, sin embargo os comentamos un par de casos con los que os vais a encontrar seguro:

-_yscale y _xscale pasan a llamarse scaleY y scaleX respectivamente. Además se ha modificado la escala de valores, un valor de 1 muestra la dimensión en su tamaño real, lo que equivale al antiguo valor 100.

- Con la propiedad alpha ocurre lo mismo en la escala de valores que con scaleY y scaleX. El valor 1 indica opacidad total y el valor 0 transparencia total.

CARGA DE DATOS EXTERNOS (DATOS Y MEDIA).
En ActionScript 3.0 cambia de modo considerable el proceso de la carga de datos externos. En ActionScript 2.0 teníamos una clase específica para cada tipo de datos (XML, LoadVars, MovieClipLoader, Sound,...), y ella misma se encargaba de cargar el contenido externo con un método propio (XML.load, LoadVars.load, MovieClipLoader.loadClip, Sound.loadSound,...). En AS 3.0 la función de la carga de datos va separada de estas clases específicas, que siguen existiendo en su mayoría, y se concentra en dos clases nuevas: Loader y URLLoader. Con estas dos clases "cargadoras" vamos a realizar todas las operaciones de carga de datos externa, sean del tipo que sean.

La clase Loader se emplea para cargar contenidos de medios, ya sean swf, imágenes bitmap, audio y vídeo (seguro que se nos olvida alguno). La clase URLLoader se emplea para cargar datos de servidor, ya sea en formato XML, texto plano, etc. En ambos casos es necesario emplear una tercera clase, la clase URLRequest, que es imprescindible para hacer una petición a una url.

Para finalizar esta guía vamos a ver dos ejemplos de uso:

// ejemplo de carga de elementos media
// con la clase Loader en AS 3.0
// creamos el objeto Loader
var cargador:Loader=new Loader();
// asignamos el evento de carga
cargador.contentLoaderInfo.addEventListener(Event.INIT, img_cargada);
// cargamos el archivo swf, jpg, png, gif, mp3
cargador.load(new URLRequest("miArchivoMedia.swf"));
// función que se ejecuta al completar la carga
function img_cargada(myEvent:Event):void {
  // añadimos el contenido a la lista
  // de visualización
  addChild(myEvent.target.content);
}

// ejemplo de carga de datos XML
// con la clase URLLoader en AS 3.0
// creamos el objeto URLLoader
var xmlLoader:URLLoader = new URLLoader();
// asignamos el evento de carga
xmlLoader.addEventListener(Event.COMPLETE, xmlCargado);
// cargamos el archivo xml, txt, csv
xmlLoader.load(new URLRequest("miDireccion.xml"));
// función que se ejecuta al completar la carga
function xmlCargado(e:Event):void {
  // creamos un objeto XML con
  // el contenido de la carga
  var productosXML:XML = = XML(e.target.data);
}