Trabajo con objetos

ActionScript es lo que se denomina un lenguaje de programación orientado a objetos. La programación orientada a objetos es simplemente un enfoque de la programación. Se trata de una forma de organizar el código en un programa mediante objetos.

Anteriormente el término “programa informático” se ha definido como una serie de pasos o instrucciones que lleva a cabo el equipo. Por lo tanto, conceptualmente un programa informático se puede imaginar simplemente como una larga lista de instrucciones. Sin embargo, en la programación orientada a objetos, las instrucciones del programa se dividen entre distintos objetos. El código se agrupa en segmentos de funcionalidad, de modo que los tipos de funcionalidad relacionados o los elementos de información relacionados se agrupan en un contenedor.

Adobe Flash Professional

Si ha trabajado con símbolos en Flash Professional, estará acostumbrado a trabajar con objetos. Supongamos que se ha definido un símbolo de clip de película (por ejemplo, el dibujo de un rectángulo) y se ha colocado una copia del mismo en el escenario. Dicho símbolo de clip de película también es (literalmente) un objeto en ActionScript; es una instancia de la clase MovieClip.

Es posible modificar algunas de las características del clip de película. Cuando se selecciona, se pueden cambiar valores en el inspector de propiedades como su coordenada x o su anchura. También se puede realizar distintos ajustes de color como, por ejemplo, cambiar su valor alfa (transparencia) o aplicarle un filtro de sombra. Otras herramientas de Flash Professional permiten realizar más cambios, como utilizar la herramienta Transformación libre para girar el rectángulo. Todas estas formas de modificación de un símbolo de clip de película en Flash Professional también están disponibles en ActionScript. En ActionScript el clip de película se modifica cambiando los elementos de datos que se agrupan en un único paquete denominado objeto MovieClip.

En la programación orientada a objetos de ActionScript, hay tres tipos de características que puede contener cualquier clase:

  • Propiedades

  • Métodos

  • Eventos

Estos elementos se utilizan para administrar los elementos de datos que utiliza el programa y para decidir qué acciones deben llevarse a cabo y en qué orden.

Propiedades

Una propiedad representa uno de los elementos de datos que se empaquetan en un objeto. Por ejemplo, un objeto Song (canción) puede tener propiedades denominadas artist (artista) y title (título); la clase MovieClip tiene propiedades como rotation (rotación), x , width (anchura) y alpha (alfa). Con las propiedades se trabaja del mismo modo que con las variables individuales. De hecho, las propiedades se puede considerar simplemente como las variables “secundarias” contenidas en un objeto.

A continuación se muestran algunos ejemplos de código ActionScript que utiliza propiedades. Esta línea de código mueve el objeto MovieClip denominado square a la coordenada x = 100 píxeles:

square.x = 100;

Este código utiliza la propiedad rotation para que el MovieClip square gire de forma correspondiente a la rotación del MovieClip triangle :

square.rotation = triangle.rotation;

Este código altera la escala horizontal del MovieClip square para hacerlo 1,5 veces más ancho:

square.scaleX = 1.5;

Fíjese en la estructura común: se utiliza una variable ( square , triangle ) como nombre del objeto, seguida de un punto ( . ) y, a continuación, el nombre de la propiedad ( x , rotation , scaleX ). El punto, denominado operador de punto , se utiliza para indicar el acceso a uno de los elementos secundarios de un objeto. El conjunto de la estructura (nombre de variable-punto-nombre de propiedad) se utiliza como una sola variable, como un nombre de un solo valor en la memoria del equipo.

Métodos

Un método es una acción que puede realizar un objeto. Por ejemplo, supongamos que se ha creado un símbolo de clip de pelí­cula en Flash con varios fotogramas clave y animación en la línea de tiempo. El clip de pelí­cula puede reproducirse, detenerse o recibir instrucciones para mover la cabeza lectora a un determinado fotograma.

Este código indica al objeto MovieClip denominado shortFilm que inicie su reproducción:

shortFilm.play();

Esta línea hace que el MovieClip denominado shortFilm deje de reproducirse (la cabeza lectora se detiene como si se hiciera una pausa en un vídeo):

shortFilm.stop();

Este código hace que un MovieClip denominado shortFilm mueva su cabeza lectora al fotograma 1 y deje de reproducirse (como si se rebobinara un vídeo):

shortFilm.gotoAndStop(1);

Para acceder a los métodos se debe escribir el nombre del objeto (una variable), un punto y el nombre del método seguido de un paréntesis, siguiendo la misma estructura que para las propiedades. El paréntesis es una forma de indicar que se está llamando al método, es decir, indicando al objeto que realice esa acción. Algunos valores (o variables) se incluyen dentro del paréntesis para pasar información adicional necesaria para llevar a cabo la acción. Estos valores se denominan parámetros del método. Por ejemplo, el método gotoAndStop() necesita saber cuál es el fotograma al que debe dirigirse, de modo que requiere un solo parámetro en el paréntesis. Otros métodos como play() y stop() no requieren información adicional porque son descriptivos por sí mismos. Sin embargo, también se escriben con paréntesis.

A diferencia de las propiedades (y las variables), los métodos no se usan como identificadores de valores. No obstante, algunos métodos pueden realizar cálculos y devolver un resultado que puede usarse como una variable. Por ejemplo, el método toString() de la clase Number convierte el valor numérico en su representación de texto:

var numericData:Number = 9; 
var textData:String = numericData.toString();

Por ejemplo, se usaría el método toString() para mostrar el valor de una variable Number en un campo de texto de la pantalla. La propiedad text de la clase TextField se define como String, por lo que sólo puede contener valores de texto. (La propiedad de texto representa el contenido de texto real que se muestra en pantalla). Esta línea de código convierte el valor numérico de la variable numericData a texto. Por lo tanto, hace que el valor se muestre en pantalla en el objeto TextField denominado calculatorDisplay :

calculatorDisplay.text = numericData.toString();

Eventos

Un programa informático consta de una serie de instrucciones que el ordenador lleva a cabo paso a paso. Algunos programas informáticos sencillos no son más que eso: unos cuantos pasos que el ordenador ejecuta, tras los cuales finaliza el programa. Sin embargo, los programas de ActionScript se han diseñado para continuar ejecutándose, esperando los datos introducidos por el usuario u otras acciones. Los eventos son los mecanismos que determinan qué instrucciones lleva a cabo el ordenador y cuándo las realiza.

Básicamente, los eventos son acciones que ActionScript conoce y a las que puede responder. Muchos eventos se relacionan con la interacción del usuario como, por ejemplo, hacer clic en un botón o presionar una tecla del teclado. También existen otros tipos de eventos. Por ejemplo, si se usa ActionScript para cargar una imagen externa, existe un evento que puede indicar al usuario cuándo finaliza la carga de la imagen. Cuando se está ejecutando un programa de ActionScript, conceptualmente éste espera a que ocurran determinadas acciones. Cuando suceden se ejecuta el código ActionScript que se haya especificado para tales eventos.

Gestión básica de eventos

La técnica para especificar determinadas acciones que deben realizarse como respuesta a eventos concretos se denomina gestión de eventos . Cuando se escribe código ActionScript para llevar a cabo la gestión de eventos, se deben identificar tres elementos importantes:

  • El origen del evento: ¿en qué objeto va a repercutir el evento? Por ejemplo, ¿en qué botón se hará clic o qué objeto Loader está cargando la imagen? El origen del evento también se denomina objetivo del evento . Este nombre se debe a que es el objeto al que el ordenador destina el evento (es decir, el lugar donde el evento tiene lugar realmente).

  • El evento: ¿qué va a suceder, a qué se va a responder? Es importante identificar el evento específico, ya que muchos objetos activan varios eventos.

  • La respuesta: ¿qué pasos hay que llevar a cabo cuando ocurra el evento?

Siempre que se escriba código ActionScript para gestionar eventos, el código debe incluir estos tres elementos. El código debe seguir esta estructura básica (los elementos en negrita son marcadores de posición que se deben completar en cada caso concreto).

function eventResponse(eventObject:EventType):void 
{ 
    // Actions performed in response to the event go here. 
} 
  
eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);

Este código realiza dos operaciones. En primer lugar, define una función, que es la forma de especificar las acciones que desean realizarse como respuesta al evento. Posteriormente, llama al método addEventListener() del objeto origen. Al llamar a addEventListener() básicamente se “suscribe” la función al evento especificado. Cuando ocurra el evento, se llevan a cabo las acciones de la función. Cada una de estas partes se tratará con mayor detalle.

Una función proporciona un modo de agrupar acciones con un único nombre que viene a ser un nombre de método abreviado para llevar a cabo las acciones. Una función es idéntica a un método, excepto en que no está necesariamente asociada con una clase específica. (De hecho, el término “método” se puede definir como una función asociada a una clase determinada). Cuando se crea una función para la gestión de eventos, se debe elegir el nombre de la función (denominada eventResponse en este caso). También se especifica un parámetro (llamado eventObject en este ejemplo). Especificar un parámetro de una función equivale a declarar una variable, de modo que también hay que indicar el tipo de datos del parámetro. (En este ejemplo, el tipo de datos del parámetro es EventType .)

Cada tipo de evento que se desee detectar tiene asociada una clase de ActionScript. El tipo de datos especificado para el parámetro de función es siempre la clase asociada del evento concreto al que se desea responder. Por ejemplo, un evento click (el cual se activa al hacer clic en un elemento con el ratón) se asocia a la clase MouseEvent. Cuando se vaya a escribir una función de detector para un evento click , ésta se debe definir con un parámetro con el tipo de datos MouseEvent. Por último, entre los paréntesis de apertura y cierre ( { ... } ), se escriben las instrucciones que debe llevar a cabo el equipo cuando ocurra el evento.

Se escribe la función de gestión de eventos. Posteriormente se indica al objeto de origen del evento (el objeto en el que se produce el evento, por ejemplo, el botón) que se desea llamar a la función cuando ocurra el evento. La función se registra con el objeto de origen del evento llamando al método addEventListener() de ese objeto (todos los objetos que tienen eventos también disponen de un método addEventListener() ). El método addEventListener() utiliza dos parámetros:

  • En primer lugar, el nombre del evento específico al que se desea responder. Cada evento se asocia a una clase específica. Todas las clases de evento tienen, a su vez, un valor especial (como un nombre exclusivo) definido para cada uno de sus eventos. Este valor se utiliza para el primer parámetro.

  • En segundo lugar, el nombre de la función de respuesta al evento. Hay que tener en cuenta que el nombre de una función debe escribirse sin paréntesis cuando se pasa como un parámetro.

El proceso de control de eventos

A continuación se ofrece una descripción paso a paso del proceso que tiene lugar cuando se crea un detector de eventos. En este caso, es un ejemplo de creación de función de detector a la que se llama cuando se hace clic en un objeto denominado myButton .

El código escrito por el programador es el siguiente:

function eventResponse(event:MouseEvent):void 
{ 
    // Actions performed in response to the event go here. 
} 
 
myButton.addEventListener(MouseEvent.CLICK, eventResponse);

Al ejecutarse, el código funcionaría de la manera siguiente:

  1. Cuando se carga el archivo SWF, el equipo detecta que existe una función denominada eventResponse() .

  2. A continuación, el equipo ejecuta el código (concretamente las líneas de código que no están en una función). En este caso se trata de una sola línea de código: para llamar al método addEventListener() en el objeto de origen del evento (denominado myButton ) y pasar la función eventResponse como parámetro.

    Internamente, myButton conserva una lista de funciones que detectan cada uno de sus eventos. Cuando se llama a su método addEventListener() , myButton almacena la función eventResponse() en su lista de detectores de eventos.

  3. Cuando el usuario hace clic en el objeto myButton , se activa el evento click (identificado como MouseEvent.CLICK en el código).

    En este punto ocurre lo siguiente:

    1. Se crea un objeto que es una instancia de la clase asociada con el evento en cuestión (MouseEvent en este ejemplo). Para diversos eventos, este objeto es una instancia de la clase Event. Para los eventos de ratón es una instancia de MouseEvent. Para otros eventos, se trata de una instancia de la clase que está asociada con ese evento. Este objeto creado se conoce como el objeto de evento y contiene información específica sobre el evento que se ha producido: el tipo de evento, el momento en que ha ocurrido y otros datos relacionados con el evento, si procede.

    2. A continuación, el equipo busca en la lista de detectores de eventos almacenada en myButton . Recorre estas funciones de una en una, llamando a cada función y pasando el objeto de evento a la función como parámetro. Como la función eventResponse() es uno de los detectores de myButton , como parte de este proceso el equipo llama a la función eventResponse() .

    3. Cuando se llama a la función eventResponse() , se ejecuta el código de la función para realizar las acciones especificadas.

Ejemplos de gestión de eventos

A continuación se incluyen algunos ejemplos más concretos de código de gestión de eventos. Con estos ejemplos se pretende proporcionar una idea de algunos de los elementos comunes de los eventos y de las posibles variaciones disponibles cuando se escribe código de gestión de eventos:

  • Hacer clic en un botón para iniciar la reproducción del clip de película actual. En el siguiente ejemplo, playButton es el nombre de instancia del botón y this es el nombre especial, que significa “el objeto actual”:

    this.stop(); 
     
    function playMovie(event:MouseEvent):void 
    { 
        this.play(); 
    } 
     
    playButton.addEventListener(MouseEvent.CLICK, playMovie);
  • Detectar si se ha escrito algo en un campo de texto. En este ejemplo, entryText es un campo de introducción de texto y outputText es un campo de texto dinámico:

    function updateOutput(event:TextEvent):void 
    { 
        var pressedKey:String = event.text; 
        outputText.text = "You typed: " + pressedKey; 
    } 
     
    entryText.addEventListener(TextEvent.TEXT_INPUT, updateOutput);
  • Hacer clic en un botón para navegar a un URL. En este caso, linkButton es el nombre de instancia del botón:

    function gotoAdobeSite(event:MouseEvent):void 
    { 
        var adobeURL:URLRequest = new URLRequest("http://www.adobe.com/"); 
        navigateToURL(adobeURL); 
    } 
     
    linkButton.addEventListener(MouseEvent.CLICK, gotoAdobeSite);

Creación de instancias de objetos

Antes de poder utilizar un objeto en ActionScript, éste debe existir. Una parte de la creación de un objeto es la declaración de una variable; sin embargo, declarar una variable sólo crea un espacio vacío en la memoria del equipo. Es necesario asignar siempre un valor real a la variable, es decir, crear un objeto y almacenarlo en la variable, antes de intentar usarla o manipularla. El proceso de creación de un objeto se denomina creación de una instancia del objeto. Es decir, se crea una instancia de una clase concreta.

Hay una forma sencilla de crear una instancia de objeto en la que no se utiliza ActionScript en absoluto. En Flash Professional sitúe un símbolo de clip de película, símbolo de botón o campo de texto en el escenario y asígnele un nombre de instancia. Flash Professional declara automáticamente una variable con ese nombre de instancia, crea una instancia de objeto y almacena ese objeto en la variable. Del mismo modo, en Flex se crea un componente en MXML, codificando una etiqueta MXML o situando el componente en el editor en modo de diseño de Flash Builder. Cuando se asigna un ID a ese componente, este ID se convierte en el nombre de una variable de ActionScript que contiene la instancia de ese componente.

Sin embargo, no siempre se desea crear un objeto visualmente y para los objetos no visuales no se puede realizar esta operación. Existen varias formas adicionales de crear instancias de objetos utilizando exclusivamente ActionScript.

Con varios tipos de datos de ActionScript es posible crear una instancia con una expresión literal , es decir, un valor escrito directamente en el código ActionScript. A continuación se muestran algunos ejemplos:

  • Valor numérico literal (introducir el número directamente):

    var someNumber:Number = 17.239; 
    var someNegativeInteger:int = -53; 
    var someUint:uint = 22;
  • Valor de cadena literal (poner el texto entre comillas dobles):

    var firstName:String = "George"; 
    var soliloquy:String = "To be or not to be, that is the question...";
  • Valor booleano literal (usar los valores literales true o false ):

    var niceWeather:Boolean = true; 
    var playingOutside:Boolean = false;
  • Valor de conjunto literal (cerrar entre corchetes una lista de valores separados por coma):

    var seasons:Array = ["spring", "summer", "autumn", "winter"];
  • Valor XML literal (introducir los datos XML directamente):

    var employee:XML = <employee> 
            <firstName>Harold</firstName> 
            <lastName>Webster</lastName> 
        </employee>;

ActionScript también define expresiones literales para los tipos de datos Array, RegExp, Object y Function.

La forma más común de crear una instancia para cualquier tipo de datos consiste en utilizar el operador new con el nombre de clase, tal y como se muestra a continuación:

var raceCar:MovieClip = new MovieClip(); 
var birthday:Date = new Date(2006, 7, 9);

La creación de un objeto con el operador new se suele describir como “llamar al constructor de la clase”. Un constructor es un método especial al que se llama como parte del proceso de creación de una instancia de una clase. Se debe tener en cuenta que, cuando se crea una instancia de este modo, se incluyen paréntesis después del nombre de la clase. En ocasiones se especifican los valores del parámetro en los paréntesis. Existen dos aspectos que también se llevan a cabo al llamar a un método.

Incluso en los tipos de datos que permiten crear instancias con una expresión literal, se puede utilizar el operador new para crear una instancia de objeto. Por ejemplo, las siguientes dos líneas de código realizan lo mismo:

var someNumber:Number = 6.33; 
var someNumber:Number = new Number(6.33);

Es importante familiarizarse con la creación de objetos mediante new ClassName () . Muchos tipos de datos de ActionScript no disponen de una representación visual. Por lo tanto, no se pueden crear situando un elemento en el escenario de Flash Professional o en el modo de diseño del editor MXML de Flash Builder. Únicamente se puede crear una instancia de cualquiera de estos tipos de datos en ActionScript utilizando el operador new .

Adobe Flash Professional

En Flash Professional, el operador new también se puede usar para crear una instancia de un símbolo de clip de película que esté definido en la biblioteca pero no esté colocado en el escenario.