Creación de Aplicaciones Con ActionScript 3.0

El proceso de escritura de ActionScript para crear una aplicación implica algo más que el simple conocimiento de la sintaxis y los nombres de las clases que se van a utilizar. Si bien la mayor parte de la información de este manual está enfocada hacia esos dos temas (la sintaxis y la utilización de las clases de ActionScript), también es importante saber qué programas se pueden usar para escribir ActionScript, cómo puede organizarse e incluirse el código ActionScript
en una aplicación y qué pasos hay que seguir para desarrollar una aplicación ActionScript.

Opciones para organizar el código:
Se puede utilizar código ActionScript 3.0 para crear desde sencillas animaciones gráficas hasta complejos sistemas de procesamiento de transacciones cliente-servidor. Dependiendo del tipo de aplicación que se cree, se preferirá usar una o varias de las siguientes formas posibles de incluir código ActionScript en un proyecto.

Almacenamiento de código en fotogramas de una línea de tiempo de Flash
En el entorno de edición de Flash, es posible añadir código ActionScript a cualquier fotograma de una línea de tiempo.
Este código se ejecutará mientras se reproduce la película, cuando la cabeza lectora alcance dicho fotograma.

La colocación del código ActionScript en fotogramas es una forma sencilla de añadir comportamientos a las aplicaciones incorporadas en la herramienta de edición de Flash. Se puede añadir código a cualquier fotograma de la línea de tiempo principal o a cualquier fotograma de la línea de tiempo de cualquier símbolo MovieClip. No obstante, esta flexibilidad tiene un coste. Cuando se crean aplicaciones de mayor tamaño, es fácil perder el rastro de los scripts contenidos en cada fotograma. Con el tiempo, esto puede dificultar el mantenimiento de la aplicación.

Muchos desarrolladores, para simplificar la organización de su código ActionScript en el entorno de edición de Flash, incluyen código únicamente en el primer fotograma de una línea de tiempo o en una capa específica del documento de Flash. De esta forma resulta más sencillo localizar y mantener el código en los archivos FLA de Flash. Sin embargo, para utilizar el mismo código en otro proyecto de Flash, es necesario copiar y pegar el código en el nuevo archivo.

Si desea poder reutilizar el código ActionScript en futuros proyectos de Flash, es recomendable almacenar el código en archivos de ActionScript externos (archivos de texto con la extensión .as).

Almacenamiento de código en archivos de ActionScript:
Si el proyecto contiene una cantidad importante de código ActionScript, la mejor forma de organizar el código es en archivos de código fuente ActionScript independientes (archivos de texto con la extensión .as). Un archivo de ActionScript puede estructurarse de una o dos formas, dependiendo del uso que se le quiera dar en la aplicación.

• Código ActionScript no estructurado: líneas de código ActionScript, incluidas sentencias o definiciones de funciones, escritas como si se introdujeran directamente en un script de la línea de tiempo, un archivo MXML, etc.
  
  Para acceder al código ActionScript escrito de este modo, es preciso utilizar la sentencia include en ActionScript o la etiqueta <mx:Script> en Adobe MXML de Flex. La sentencia include de ActionScript hace que el contenido de un archivo de ActionScript externo se inserte en una ubicación específica y en un ámbito determinado de un script, como si se introdujera allí directamente. En el lenguaje MXML de Flex, la etiqueta <mx:Script> permite especificar un atributo de origen que identifica un archivo de ActionScript externo que se cargará en ese punto de la aplicación. Por ejemplo, la siguiente etiqueta cargará un archivo de ActionScript externo denominado Box.as:
  
  <mx:Script source="Box.as" />
  
• Definición de clase de ActionScript: definición de una clase de ActionScript, incluidas sus definiciones de métodos y propiedades.
  
  Cuando se define una clase, para obtener acceso al código ActionScript de la clase, se puede crear una instancia de la clase y utilizar sus propiedades, métodos y eventos, tal y como se haría con cualquiera de las clases de ActionScript incorporadas. Esto se realiza en dos partes:
  
  
  • Utilizar la sentencia import para especificar el nombre completo de la clase, de modo que el compilador de ActionScript sepa dónde encontrarlo. Por ejemplo, si se desea utilizar la clase MovieClip en ActionScript, primero se debe importar esa clase con su nombre completo, incluido el paquete y la clase:
    
    import flash.display.MovieClip;
    
    Como alternativa, se puede importar el paquete que contiene la clase MovieClip, que equivale a escribir sentencias import independientes para cada clase del paquete:
    
    import flash.display.*;
    
    Las únicas excepciones a la regla que dicta que una clase debe importarse si se hace referencia a ella en el código son las clases de nivel superior, que no se definen en un paquete.
    
    Nota: en Flash, las clases incorporadas (en los paquetes flash.*) se importan automáticamente en los scripts adjuntos a fotogramas de la línea de tiempo. Sin embargo, cuando se escriben clases propias o si se trabaja con los componentes de edición de Flash (los paquetes fl.*) o se trabaja en Flex, será necesario importar de forma explícita cualquier clase para poder escribir código que cree instancias de dicha clase.
    
  • Escribir código referido específicamente al nombre de clase (normalmente declarando una variable con esa clase como tipo de datos y creando una instancia de la clase para almacenarla en la variable). Al hacer referencia a otro nombre de clase en el código ActionScript, se indica al compilador que cargue la definición de dicha clase. Si se toma como ejemplo una clase externa denominada Box, esta sentencia provoca la creación de una nueva instancia de la clase Box:
    
    var smallBox:Box = new Box(10,20);
    
    Cuando el compilador se encuentra con la referencia a la clase Box por primera vez, busca el código fuente cargado para localizar la definición de la clase Box.

Selección de la herramienta adecuada:
En función de las necesidades del proyecto y de los recursos disponibles, se puede utilizar una de las herramientas (o varias herramientas conjuntas) para escribir y editar el código ActionScript.

Herramienta de edición de Flash Además de las capacidades de creación de animación y gráficos, Adobe Flash CS4 Professional incluye herramientas para trabajar con código ActionScript, ya sea asociado a los elementos de un archivo FLA como a archivos externos
que sólo contienen código ActionScript. La herramienta de edición de Flash es ideal para los proyectos que contienen una cantidad importante de animación o vídeo, o los proyectos donde el usuario desea crear la mayoría de los activos gráficos, concretamente los proyectos con una mínima interacción del usuario o funcionalidad que requiera ActionScript. Otro motivo para elegir la herramienta de edición de Flash para desarrollar los proyectos de ActionScript es que se prefiera crear activos visuales y escribir código en la misma aplicación. Quizá también se prefiera usar la
herramienta de edición de Flash si se van a utilizar componentes de interfaz de usuario creados previamente, pero las
prioridades básicas del proyecto sean reducir el tamaño de los archivos SWF o facilitar la aplicación de aspectos
visuales.
Adobe Flash CS4 Professional incluye dos herramientas para escribir código ActionScript:

• Panel Acciones: este panel, disponible cuando se trabaja en un archivo FLA, permite escribir código ActionScript asociado a los fotogramas de una línea de tiempo.

• Ventana Script: la ventana Script es un editor de texto dedicado para trabajar con archivos de código ActionScript (.as). 

Flex Builder:
Adobe Flex Builder es la principal herramienta para crear proyectos con la arquitectura Flex. Además de sus herramientas de edición de MXML y diseño visual, Flex Builder incluye un editor de ActionScript completo, de modo que puede usarse para crear proyectos de Flex o sólo de ActionScript. Las aplicaciones Flex presentan varias ventajas, como un amplio conjunto de controles de interfaz de usuario predefinidos, controles de diseño dinámicos y flexibles, y mecanismos incorporados para trabajar con orígenes de datos externos y vincular datos externos con elementos de interfaz de usuario. Sin embargo, debido al código adicional necesario para proporcionar estas funciones, las aplicaciones Flex pueden tener un tamaño de archivo SWF más grande y presentan una mayor dificultad que sus equivalentes de Flash a la hora de cambiar completamente los aspectos aplicados.

Se recomienda usar Flex Builder para crear con Flex complejas y completas aplicaciones para Internet basadas en datos, y para editar código ActionScript, editar código MXML y diseñar visualmente la aplicación con una sola herramienta.

Editor de ActionScript de terceros:
Dado que los archivos ActionScript (.as) se almacenan como archivos de texto sencillo, cualquier programa que sea capaz de editar archivos de texto simple se puede usar para escribir archivos ActionScript. Además de los productos ActionScript de Adobe, se han creado varios programas de edición de texto de terceros con funciones específicas de ActionScript. Se pueden escribir archivos MXML o clases de ActionScript con cualquier programa editor de texto. A partir de estos archivos, se puede crear una aplicación SWF (ya sea una aplicación Flex o sólo de ActionScript) con la ayuda del SDK de Flex, que incluye las clases de la arquitectura Flex además del compilador Flex. Como alternativa, muchos desarrolladores utilizan un editor de ActionScript de terceros para escribir las clases de ActionScript y la
herramienta de edición de Flash para crear el contenido gráfico.

El usuario puede optar por utilizar un editor de ActionScript de terceros si:

• Prefiere escribir código ActionScript en un programa independiente y diseñar los elementos visuales en Flash.

• Utiliza una aplicación para programar con un lenguaje distinto de ActionScript (por ejemplo, para crear páginas HTML o aplicaciones en otro lenguaje de programación) y desea usar la misma aplicación para el código ActionScript.

• Desea crear proyectos de Flex o sólo de ActionScript con el SDK de Flex, sin tener que utilizar Flash o Flex Builder.

Entre los editores de código que proporcionan funciones específicas de ActionScript, cabe destacar:

• Adobe Dreamweaver® CS4
• ASDT
• FDT
• FlashDevelop
• PrimalScript
• SE|PY

Proceso de desarrollo de ActionScript:
Independientemente del tamaño del proyecto de ActionScript, la utilización de un proceso para diseñar y desarrollar la aplicación permitirá trabajar con mayor eficacia. En los siguientes pasos se describe un proceso de desarrollo básico para crear una aplicación con ActionScript 3.0:

1. Diseñe la aplicación.
   Debe describir la aplicación de alguna forma antes de empezar a crearla.
   
2. Escriba el código ActionScript 3.0.
   Puede crear código ActionScript con Flash, Flex Builder, Dreamweaver o un editor de texto.
   
3. Cree un archivo de aplicación Flash o Flex para ejecutar el código.
   En la herramienta de edición de Flash, esto implica crear un nuevo archivo FLA, establecer la configuración de publicación, añadir componentes de interfaz de usuario a la aplicación y hacer referencia al código ActionScript.
   En el entorno de desarrollo de Flex, la creación de un nuevo archivo de aplicación implica definir la aplicación, añadir componentes de interfaz de usuario con MXML y hacer referencia al código ActionScript.
   
4. Publique y pruebe la aplicación ActionScript.
   Esto implica ejecutar la aplicación desde la herramienta de edición de Flash o el entorno de desarrollo de Flex, y comprobar que realiza todo lo previsto.

Debe tenerse en cuenta que estos pasos no tienen por qué seguir este orden necesariamente y que tampoco es necesario finalizar completamente uno de los pasos antes de poder trabajar en otro. Por ejemplo, se puede diseñar una pantalla de la aplicación (paso 1) y luego crear los gráficos, botones y otros elementos (paso 2) antes de escribir el código ActionScript (paso 3) y probarlo (paso 4). O bien, se puede realizar parte del diseño y luego añadir un botón o elemento de interfaz en un momento dado, escribir código ActionScript para cada uno de estos elementos y probarlos. Aunque resulta útil recordar estas cuatro fases del proceso de desarrollo, en una situación real suele ser más eficaz ir pasando de una fase a otra según convenga.

Ejemplo: Sitio De Muestras De Animación (Action Script 3.0)

Este ejemplo se ha diseñado para ofrecer una primera oportunidad de consultar cómo se pueden juntar fragmentos de ActionScript para crear una aplicación completa llena de código ActionScript. El ejemplo del sitio de muestras de animación es un ejemplo de cómo se puede partir de una animación lineal (por ejemplo, un trabajo creado para un cliente) y añadir algunos elementos interactivos secundarios adecuados para incorporar la animación en un sitio de
muestras en línea. El comportamiento interactivo que añadiremos a la animación incluirá dos botones en los que el espectador podrá hacer clic: uno para iniciar la animación y otro para navegar a un URL diferente (como el menú del sitio o la página principal del autor).

El proceso de crear este trabajo puede dividirse en las siguientes partes principales:

1. Preparar el archivo FLA para añadir código ActionScript y elementos interactivos.
2. Crear y añadir los botones.
3. Escribir el código ActionScript.
4. Probar la aplicación.

Preparación de la animación para añadirle interactividad:

Para poder añadir elementos interactivos a la animación, es útil configurar el archivo FLA creando algunos lugares para añadir el contenido nuevo. Esto incluye la creación en el escenario del espacio en el que se colocarán los botones y la creación de "espacio" en el archivo FLA para mantener separados los distintos elementos.

Para preparar el archivo FLA para añadir elementos interactivos:

1. Si no dispone de una animación lineal a la que añadir interactividad, cree un nuevo archivo FLA con una animación sencilla, como una interpolación de movimiento o de forma individual. Si no, abra el archivo FLA que contiene la animación que va a exhibir en el proyecto y guárdela con un nuevo nombre para crear un nuevo archivo de trabajo.
   
2. Decida en qué parte de la pantalla van a aparecer los dos botones (uno para iniciar la animación y otro vinculado al sitio de muestras o a la página principal del autor). Si es necesario, borre o añada espacio en el escenario para el nuevo contenido. Si la animación no incluye una pantalla de bienvenida, puede que desee crear una en el primer fotograma (probablemente tenga que desplazar la animación de forma que empiece en el Fotograma 2 o en un fotograma posterior).
   
3. Añada una nueva capa sobre las otras capas de la línea de tiempo y asigne el nombre botones. Ésta será la capa a la que añadirá los botones.
   
4. Añada otra capa sobre la capa botones y asígnele el nombre accion. Ésta será la capa en la que añadirá el código ActionScript para la aplicación.

 Crear y añadir botones:
A continuación hay que crear y colocar los botones que forman el centro de la aplicación interactiva.

Para crear y añadir botones al archivo FLA:

1. Utilice las herramientas de dibujo para crear el aspecto visual del primer botón (el botón "play") en la capa botones.
   Por ejemplo, puede dibujar un óvalo horizontal con texto encima.
   
2. Con la herramienta Selección, seleccione todos los elementos gráficos del botón individual.
   
3. En el menú principal, elija Modificar > Convertir en símbolo.
   
4. En el cuadro de diálogo, elija Botón como tipo de símbolo, asigne un nombre al símbolo y haga clic en Aceptar.
   
5. Con el botón seleccionado, asigne al botón el nombre de instancia botonPlay en el inspector de propiedades.
   
6. Repita los pasos 1 a 5 para crear el botón que llevará al usuario a la página principal del autor. Asigne a este botón el nombre botonWeb.

Escritura del código:
El código ActionScript para esta aplicación puede dividirse en tres grupos de funcionalidad, aunque se escribirá todo en el mismo lugar. Las tres tareas que el código debe realizar son:

• Detener la cabeza lectora en cuanto se cargue el archivo SWF (cuando la cabeza lectora llegue al Fotograma 1).
  
• Detectar un evento para iniciar la reproducción del archivo SWF cuando el usuario haga clic en el botón play.
  
• Detectar un evento para enviar el navegador al URL apropiado cuando el usuario haga clic en el botón vinculado a la página de inicio del autor.

Para crear el código necesario para detener la cabeza lectora cuando llegue al Fotograma 1:

1. Seleccione el fotograma clave en el Fotograma 1 de la capa actions.
   
2. Para abrir el panel Acciones, en el menú principal, elija Ventana > Acciones.
   
3. En el panel Script, escriba el código siguiente:
   stop();

Para escribir código para iniciar la animación cuando se haga clic en el botón play:

1. Al final del código escrito en los pasos anteriores, añada dos líneas vacías.
   
2. Escriba el código siguiente al final del script:
   function Iniciar(event:MouseEvent):void
   {
   this.play();
   }Este código define una función denominada Iniciar(). Cuando se llama a startMovie(), hace que se inicie la reproducción de la línea de tiempo principal.
   
3. En la línea que sigue al código añadido en el paso anterior, escriba esta línea de código:
   botonPlay.addEventListener(MouseEvent.CLICK, Iniciar);
   Esta línea de código registra la función Iniciar() como un detector del evento click de botonPlay. Es decir, hace que siempre que se haga clic en el botón botonPlay, se llame a la función Iniciar().

Para escribir código que envíe el navegador a una dirección URL cuando se haga clic en el botón vinculado a la página principal:

1. Al final del código escrito en los pasos anteriores, añada dos líneas vacías.
   
2. Escriba el código siguiente al final del script:
   function IniciarWeb(event:MouseEvent):void
   {
   var targetURL:URLRequest = new URLRequest("http://example.com/");
   navigateToURL(targetURL);
   }
   Este código define una función denominada IniciarWeb(). Esta función crea primero una instancia de URLRequest que representa el URL http://example.com/ y, a continuación, pasa el URL a la función navigateToURL(), lo que hace que el navegador del usuario abra dicho URL.
   
3. En la línea que sigue al código añadido en el paso anterior, escriba esta línea de código:
   
   botonWeb.addEventListener(MouseEvent.CLICK, IniciarWeb);
   Esta línea de código registra la función IniciarWeb() como un detector del evento click de botonWeb. Es decir, hace que siempre que se haga clic en el botón botonWeb, se llame a la función IniciarWeb().

Probar la aplicación:
Al llegar a este punto, la aplicación ya debe ser completamente funcional. Pruébela.

Para probar la aplicación:

1. En el menú principal, elija Control > Probar película. Flash crea el archivo SWF y lo abre en una ventana de Flash Player.
   
2.  Pruebe ambos botones para asegurarse de que funcionan correctamente.
    
3. Si los botones no funcionan, puede comprobar lo siguiente:
   
   
   • ¿Tienen los botones nombres de instancia distintos?
   • ¿Las llamadas al método addEventListener() utilizan los mismos nombres que los nombres de instancia de los botones?
   • ¿Se utilizan los nombres de evento correctos en las llamadas al método addEventListener()?
   • ¿Se ha especificado el parámetro correcto para cada una de las funciones? (Ambos deben tener un solo parámetro con el tipo de datos MouseEvent.)
     
   Estos errores, y otros errores posibles, deben producir un mensaje de error cuando se elija el comando Probar película o cuando se haga clic en el botón. Vea si hay errores de compilador en el panel Errores del compilador (los que se producen al elegir Probar película) y si hay errores de tiempo de ejecución en el panel Salida (errores que se producen durante la reproducción del archivo SWF, como al hacer clic en un botón).