Es posible crear archivos de código fuente ActionScript externos con una extensión .as utilizando Flash, Flex Builder, Dreamweaver o cualquier editor de texto.
ActionScript 3.0 puede utilizarse en varios entornos de desarrollo de aplicaciones, como las herramientas de edición de Flash y Flex Builder.
En esta sección se indican los pasos necesarios para crear y mejorar una sencilla aplicación ActionScript 3.0 con la herramienta de edición de Flash o con Flex Builder. La aplicación que se va a crear presenta un patrón sencillo de utilización de archivos de clases de ActionScript 3.0 externos en aplicaciones Flash y Flex. Dicho patrón se utilizará en todas las demás aplicaciones de ejemplo de este Tutorial.
Diseño de una aplicación ActionScript:
Debería tener alguna idea de la aplicación que desea crear antes de empezar a crearla.
La representación del diseño puede ser tan sencilla como el nombre de la aplicación y una breve declaración del propósito de la misma o tan complicada como un conjunto de documentos de requisitos con numerosos diagramas de Lenguaje de modelado unificado (UML). Aunque este Tutorial no trata con detalle el tema del diseño de software, es
importante recordar que el diseño de la aplicación es un paso fundamental del desarrollo de las aplicaciones ActionScript.
El primer ejemplo de una aplicación ActionScript es una aplicación "Hola Mundo" estándar, de modo que su diseño es muy sencillo:
- La aplicación se denominará HolaMundo.
- Mostrará un solo campo de texto con las palabras "Hola Mundo!".
- Para poder reutilizarla fácilmente, utilizará una sola clase orientada a objetos, denominada Greeter, que puede usarse desde un documento de Flash o una aplicación Flex.
- Después de crear una versión básica de la aplicación, deberá añadir funcionalidad para que haga que el usuario introduzca un nombre de usuario y que la aplicación compruebe el nombre en una lista de usuarios conocidos.
Teniendo en cuenta esta definición concisa, ya puede empezar a crear la aplicación.
Creación del proyecto HolaMundo y de la clase Greeter:
Según el propósito del diseño de la aplicación Hola Mundo, el código debería poder reutilizarse fácilmente. Teniendo esto en cuenta, la aplicación utiliza una sola clase orientada a objetos, denominada Greeter, que se usa desde una aplicación creada en Flex Builder o la herramienta de edición de Flash.
Para crear la clase Greeter en la herramienta de edición de Flash:
- En la herramienta de edición de Flash, seleccione Archivo > Nuevo.
- En el cuadro de diálogo Nuevo documento, seleccione Archivo ActionScript y haga clic en Aceptar.
Aparecerá una nueva ventana de edición de ActionScript.
- Seleccione Archivo > Guardar. Seleccione la carpeta en la que desea almacenar la aplicación, asigne el nombre Greeter.as al archivo ActionScript y haga clic en Aceptar.
La clase Greeter define un objeto, Greeter, que podrá utilizar en la aplicación HolaMundo.
Para añadir código a la clase Greeter:
- Introduzca el código siguiente en el nuevo archivo:
package
{
public class Greeter
{
public function Mostrar():String
{
var saludo:String;
saludo= "Hola Mundo!";
return saludo;
}
}
}
La clase Greeter incluye un único método Mostrar(), el cual devuelve una cadena con el texto "Hola Mundo!".
- Seleccione Archivo > Guardar para guardar este archivo de ActionScript.
Creación de una aplicación que utilice el código ActionScript:
La clase Greeter que ha creado define un conjunto de funciones de software con contenido propio, pero no representa una aplicación completa. Para utilizar la clase, necesita crear un documento de Flash o una aplicación Flex.
La aplicación HolaMundo crea una nueva instancia de la clase Greeter. A continuación se explica cómo asociar la clase Greeter a la aplicación.
Para crear una aplicación ActionScript mediante la herramienta de edición de Flash:
- Seleccione Archivo > Nuevo.
- En el cuadro de diálogo Nuevo documento, seleccione Documento de Flash y haga clic en Aceptar.
Aparece una nueva ventana de Flash.
- Seleccione Archivo > Guardar. Seleccione la misma carpeta que contiene el archivo de clase Greeter.as, asigne al documento de Flash el nombre HolaMundo.fla y haga clic en Aceptar.
- En la paleta Herramientas de Flash, seleccione la herramienta Texto y arrastre el cursor por el escenario para definir un nuevo campo de texto, con una anchura de aproximadamente 300 píxeles y una altura de unos 100 píxeles.
- En el panel Propiedades, con el campo de texto todavía seleccionado en el escenario, establezca "Texto dinámico" como tipo de texto y escriba mainText como nombre de instancia del campo de texto.
- Haga clic en el primer fotograma de la línea de tiempo principal.
- En el panel Acciones, escriba el siguiente script:
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.Saludo();
- Guarde el archivo.
El desarrollo de software es un proceso repetitivo. Se escribe código, se intenta compilar y se edita hasta que se compile sin problemas. Se ejecuta la aplicación compilada, se prueba para ver si cumple con el diseño previsto y, si no es así, se edita de nuevo el código hasta que lo cumple. Los entornos de desarrollo de Flash y Flex Builder ofrecen diversas formas de publicar, probar y depurar las aplicaciones.
A continuación se explican los pasos básicos para probar la aplicación HolaMundo en cada entorno.
Para publicar y probar una aplicación ActionScript mediante la herramienta de edición de Flash:
- Publique la aplicación y vea si aparecen errores de compilación. En la herramienta de edición de Flash, seleccione Control > Probar película para compilar el código ActionScript y ejecutar la aplicación HolaMundo.
- Si aparecen errores o advertencias en la ventana Salida al probar la aplicación, corrija las causas de estos errores en el archivo HolaMundo.fla o HolaMundo.as y pruebe de nuevo la aplicación.
- Si no se producen errores de compilación, verá una ventana de Flash Player en la que se mostrará la aplicación HolaMundo.
Para hacer la aplicación un poco más interesante, hará que pida y valide un nombre de usuario en una lista predefinida de nombres.
En primer lugar, deberá actualizar la clase Greeter para añadir funcionalidad nueva. A continuación, actualizará la aplicación para utilizar la nueva funcionalidad.
Para actualizar el archivo Greeter.as:
- Abra el archivo Greeter.as.
- Cambie el contenido del archivo por lo siguiente (las líneas nuevas y cambiadas se muestran en cursiva y resaltados):
package
{
public class Greeter
{
/* Define los nombres para el saludo.*/
public static var ValidaNombres:Array = ["Sammy", "Josh", "Jake"];
/* Genera una Cadena de Saludo con el nombre incluido.*/
public function Mostrar(NomUsuario:String = ""):String
{
var Saludo:String;
if (NomUsuario == "")
{
Saludo = "Ingrese nombre de usuario";
}
else if (ValidaNombre(NomUsuario))
{
Saludo = "Hola, " + NomUsuario + ".";
}
else
{
Saludo = "Perdón " + NomUsuario + ", no te encuentras en la lista.";
}
return Saludo;
}
/* Comprueba si el nombre esta en la lista */
public static function ValidaNombre(inNombre:String = ""):Boolean
{
if (ValidaNombres.indexOf(inNombre) > -1)
{
return true;
}
else
{
return false;
}
}
}
}
La clase Greeter tiene ahora varias funciones nuevas:
- El conjunto ValidaNombres enumera los nombres de usuario válidos. El conjunto se inicializa como una lista de tres nombres cuando se carga la clase Greeter.
- El método Mostrar() acepta ahora un nombre de usuario y cambia el saludo en función de algunas condiciones.
Si NomUsuario es una cadena vacía (""), la propiedad Saludo se define de forma que pida un nombre al usuario.
Si el nombre de usuario es válido, el saludo se convierte en "Hola, NomUsuario". Finalmente, si no se cumple alguna de estas dos condiciones, la variable Saludo se define como "Perdón, NomUsuario, no te encuentras en la lista".
- El método ValidaNombre() devuelve true si inNombre se encuentra en el conjunto ValidaNombres y false si no se encuentra. La sentencia ValidaNombres.indexOf(inNombre) comprueba cada una de las cadenas del conjunto ValidaNombres con respecto a la cadena inNombre. El método Array.indexOf() devuelve la posición de índice de la primera instancia de un objeto en un conjunto o el valor -1 si el objeto no se encuentra en el conjunto.
A continuación editará el archivo de Flash o Flex que hace referencia a esta clase de ActionScript.
Para modificar la aplicación ActionScript mediante la herramienta de edición de Flash:
- Abra el archivo HolaMundo.fla.
- Modifique el script en el Fotograma 1 de forma que se pase una cadena vacía ("") al método Mostrar() de la clase Greeter:
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.Mostrar("");
- Seleccione la herramienta Texto en la paleta Herramientas y cree dos nuevos campos de texto en el escenario, uno
junto al otro, y debajo del campo de texto mainText existente.
- En el primer campo de texto nuevo, escriba Nombre de Usuario: como etiqueta.
- Seleccione el otro campo de texto nuevo y, en el inspector de propiedades, seleccione InputText como tipo del campo de texto. Seleccione Línea única como tipo de línea. Escriba TextIn como nombre de instancia.
- Haga clic en el primer fotograma de la línea de tiempo principal.
- En el panel Acciones, añada las líneas siguientes al final del script existente:
mainText.border = true;
TextIn.border = true;
TextIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
function keyPressed(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.ENTER)
{
mainText.text = myGreeter.Mostrar(TextIn.text);
}
}
El código nuevo añade la siguiente funcionalidad:
- Las dos primeras líneas sólo definen los bordes de dos campos de texto.
- Un campo de texto de entrada, como el campo TextIn, tiene un conjunto de eventos que puede distribuir. El método addEventListener() permite definir una función que se ejecuta cuando se produce un tipo de evento.
En este caso, el evento es presionar una tecla del teclado. - La función personalizada keyPressed() comprueba si la tecla presionada es la tecla Intro. De ser así, llama al método Mostrar() del objeto myGreeter y le pasa el texto del campo de texto textIn como parámetro. El método devuelve una cadena de saludo basada en el valor pasado. Después se asigna la cadena devuelta a la propiedad text del campo de texto mainText.
A continuación se muestra el script completo para el Fotograma 1:
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.Mostrar("");
mainText.border = true;
TextIn.border = true;
TextIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
function keyPressed(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.ENTER)
{
mainText.text = myGreeter.Mostrar(TextIn.text);
}
}
- Guarde el archivo.
- Seleccione Control > Probar película para ejecutar la aplicación.
Cuando ejecute la aplicación se le pedirá que escriba un nombre de usuario. Si es válido (Sammy, Josh o Jake), la aplicación mostrará el mensaje de confirmación "Hola".
No hay comentarios:
Publicar un comentario