Una aplicación sencilla

Seleccione Archivo > Nuevo.

En el cuadro de diálogo Nuevo documento, seleccione Archivo de Flash (ActionScript 3.0) y haga clic en Aceptar.

Se abre una nueva ventana de Flash.

Seleccione Archivo > Guardar, asigne al archivo de Flash el nombre Greetings.fla y haga clic en el botón Guardar.

En el panel Componentes de Flash, seleccione un componente TextArea y arrástrelo al escenario.

En la ventana Propiedades, con el componente TextArea seleccionado en el escenario, escriba aTa como nombre de instancia e introduzca la siguiente información:

• Introduzca 230 en el valor An. (anchura).

• Introduzca 44 en el valor Al. (altura).

• Introduzca 165 en el valor X (posición horizontal).

• Introduzca 57 en el valor Y (posición vertical).

• Introduzca Hello World! en el parámetro de texto, en la ficha Parámetros.

Arrastre un componente ColorPicker al escenario, colóquelo a la izquierda del componente TextArea y asígnele el nombre de instancia txtCp. Introduzca la siguiente información en el inspector de propiedades:

• Introduzca 96 en el valor X.

• Introduzca 72 en el valor Y.

Arrastre tres componentes RadioButton al escenario, de forma consecutiva, y asígneles los nombres de instancia smallRb , largerRb y largestRb . Introduzca la siguiente información para dichos componentes en el inspector de propiedades:

• Introduzca 100 en el valor de anchura y 22 en el valor de altura en cada uno de ellos.

• Introduzca 155 en el valor X.

• Introduzca 120 en el valor Y de smallRb, 148 en el de largerRb y 175 en el de largestRb.

• Introduzca fontRbGrp en el parámetro groupName de cada uno de ellos.

• Introduzca etiquetas en la ficha Parámetros de Small , Larger , Largest .

Arrastre un componente ComboBox al escenario y asígnele el nombre de instancia msgCb . Introduzca la siguiente información para dicho componente en el inspector de propiedades:

• Introduzca 130 en el valor de anchura.

• Introduzca 265 en el valor X.

• Introduzca 120 en el valor Y.

• En la ficha Parámetros, introduzca Greetings en el parámetro prompt.

• Haga doble clic en el campo de texto del parámetro dataProvider para abrir el cuadro de diálogo Valores.

• Haga clic en el signo más y reemplace el valor de la etiqueta con Hello World!

• Repita el paso anterior para añadir los valores de etiqueta Have a nice day! y Top of the Morning!

• Haga clic en Aceptar para cerrar el cuadro de diálogo Valores.

Guarde el archivo.

Si aún no está abierto, abra el panel Acciones presionando F9 o seleccionando Acciones en el menú Ventana. Haga clic en el primer fotograma de la línea de tiempo principal y añada el siguiente código al panel Acciones:

import flash.events.Event; 
import fl.events.ComponentEvent; 
import fl.events.ColorPickerEvent; 
import fl.controls.RadioButtonGroup; 
 
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp"); 
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
msgCb.addEventListener(Event.CHANGE, cbHandler);

Las primeras tres líneas importan las clases de eventos que utiliza la aplicación. Un evento se produce cuando un usuario interactúa con uno de los componentes. Las siguientes cinco líneas registran controladores de eventos para los eventos que la aplicación desea detectar. Un evento click se produce en un componente RadioButton cuando un usuario hace clic en él. Un evento change se produce cuando un usuario selecciona un color distinto en el componente ColorPicker. Un evento change se produce en el componente ComboBox cuando un usuario elige otro saludo de la lista desplegable.

La cuarta línea importa la clase RadioButtonGroup para que la aplicación pueda asignar un detector de eventos en el grupo de componentes RadioButton en lugar de asignar el detector a cada botón de forma individual.

Añada la siguiente línea de código al panel Acciones para crear el objeto TextFormat tf que la aplicación utiliza para cambiar las propiedades de estilo size y color del texto en el componente TextArea.

var tf:TextFormat = new TextFormat();

Añada el siguiente código para crear la función de gestión de eventos rbHandler. Esta función gestiona un evento click cuando un usuario hace clic en uno de los componentes RadioButton.

function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
        } 
        aTa.setStyle("textFormat", tf); 
}

Esta función utiliza una sentencia switch para examinar la propiedad target del objeto event con el fin de determinar cuál de los componentes RadioButton activó el evento. La propiedad currentTarget contiene el nombre del objeto que activó el evento. Según cuál sea el componente RadioButton en el que haya hecho clic el usuario, la aplicación cambia el tamaño del texto en el componente TextArea a 14, 18 ó 24 puntos.

Añada el siguiente código para implementar la función cpHandler() , que gestiona un cambio en el valor de ColorPicker:

function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
}

Esta función establece la propiedad color del objeto TextFormat tf en el color seleccionado en ColorPicker y luego llama a setStyle() para aplicarlo al texto en la instancia aTa de TextArea.

Añada el siguiente código para implementar la función cbHandler() , que gestiona un cambio en la selección de ComboBox:

function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.label; 
}

Esta función simplemente reemplaza el texto de TextArea con el texto seleccionado en ComboBox, event.target.selectedItem.label .

Seleccione Control > Probar película o presione Control+Intro para compilar el código y probar la aplicación Greetings.

En la siguiente sección se muestra cómo generar la misma aplicación con una clase ActionScript externa y un archivo FLA que sólo contiene los componentes necesarios en la biblioteca.

Seleccione Archivo > Nuevo.

En el cuadro de diálogo Nuevo documento, seleccione Archivo de Flash (ActionScript 3.0) y haga clic en Aceptar.

Se abre una nueva ventana de Flash.

Seleccione Archivo > Guardar, asigne al archivo de Flash el nombre Greetings2.fla y haga clic en el botón Guardar.

Arrastre cada uno de los componentes siguientes del panel Componentes a la biblioteca:

• ColorPicker

• ComboBox

• RadioButton

• TextArea

  El archivo SWF compilado utilizará todos estos activos, de forma que hay que añadirlos a la biblioteca. Arrastre los componentes a la parte inferior del panel Biblioteca. A medida que añada estos componentes a la biblioteca, se añadirán automáticamente otros activos (como List, TextInput y UIScrollBox).

En la ventana Propiedades, escriba Greetings2 en Clase de documento.

Si Flash muestra una advertencia indicando que "no se pudo encontrar una definición para la clase del documento", páselo por alto. Definirá la clase Greetings2 en los siguientes pasos. Esta clase define la funcionalidad principal de la aplicación.

Guarde el archivo Greetings2.fla.

Seleccione Archivo > Nuevo.

En el cuadro de diálogo Nuevo documento, seleccione Archivo ActionScript y haga clic en Aceptar.

Se abre una nueva ventana Script.

Añada el siguiente código a la ventana Script:

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import flash.text.TextFormat; 
    import fl.events.ComponentEvent; 
    import fl.events.ColorPickerEvent; 
    import fl.controls.ColorPicker; 
    import fl.controls.ComboBox; 
    import fl.controls.RadioButtonGroup; 
    import fl.controls.RadioButton; 
    import fl.controls.TextArea; 
    public class Greetings2 extends Sprite { 
        private var aTa:TextArea; 
        private var msgCb:ComboBox; 
        private var smallRb:RadioButton; 
        private var largerRb:RadioButton; 
        private var largestRb:RadioButton; 
        private var rbGrp:RadioButtonGroup; 
        private var txtCp:ColorPicker; 
        private var tf:TextFormat = new TextFormat(); 
        public function Greetings2() {    

El script define una clase de ActionScript 3.0 denominada Greetings2. El script realiza lo siguiente:

• Importa las clases que se utilizarán en el archivo. Normalmente, estas sentencias import se añadirían a medida que se hace referencia a las distintas clases en el código pero, para ser breves, en este ejemplo se importan todas en un solo paso.

• Declara variables que representan los distintos tipos de objetos de componente que se añadirán al código. Otra variable crea el objeto TextFormat tf .

• Define una función constructora, Greetings2() , para la clase. En los siguientes pasos se añadirán líneas a esta función y otros métodos a la clase.

Seleccione Archivo > Guardar, asigne al archivo el nombre Greetings2.as y haga clic en el botón Guardar.

Añada las siguientes líneas de código a la función Greeting2() :

    createUI(); 
    setUpHandlers(); 
}

La función debería tener el siguiente aspecto:

public function Greetings2() { 
    createUI(); 
    setUpHandlers(); 
}

Añada las siguientes líneas de código después de la llave de cierre del método Greeting2() :

private function createUI() { 
    bldTxtArea(); 
    bldColorPicker(); 
    bldComboBox(); 
    bldRadioButtons(); 
} 
private function bldTxtArea() { 
    aTa = new TextArea(); 
    aTa.setSize(230, 44); 
    aTa.text = "Hello World!"; 
    aTa.move(165, 57); 
    addChild(aTa); 
} 
private function bldColorPicker() { 
    txtCp = new ColorPicker(); 
    txtCp.move(96, 72); 
    addChild(txtCp); 
} 
private function bldComboBox() { 
    msgCb = new ComboBox(); 
    msgCb.width = 130; 
    msgCb.move(265, 120); 
    msgCb.prompt = "Greetings"; 
    msgCb.addItem({data:"Hello.", label:"English"});             
    msgCb.addItem({data:"Bonjour.", label:"Français"});             
    msgCb.addItem({data:"¡Hola!", label:"Español"});             
    addChild(msgCb); 
} 
private function bldRadioButtons() { 
    rbGrp = new RadioButtonGroup("fontRbGrp"); 
    smallRb = new RadioButton(); 
    smallRb.setSize(100, 22); 
    smallRb.move(155, 120); 
    smallRb.group = rbGrp; //"fontRbGrp"; 
    smallRb.label = "Small"; 
    smallRb.name = "smallRb"; 
    addChild(smallRb); 
    largerRb = new RadioButton(); 
    largerRb.setSize(100, 22); 
    largerRb.move(155, 148); 
    largerRb.group = rbGrp; 
    largerRb.label = "Larger"; 
    largerRb.name = "largerRb"; 
    addChild(largerRb); 
    largestRb = new RadioButton(); 
    largestRb.setSize(100, 22); 
    largestRb.move(155, 175); 
    largestRb.group = rbGrp; 
    largestRb.label = "Largest"; 
    largestRb.name = "largestRb"; 
    addChild(largestRb); 
}

Estas líneas realizan lo siguiente:

• Crean instancias de los componentes que se utilizan en la aplicación.

• Definen el tamaño, la posición y las propiedades de cada componente.

• Añaden cada componente al escenario, a través del método addChild() .

Después de la llave de cierre del método bldRadioButtons() , añada el siguiente código para el método setUpHandlers() :

private function setUpHandlers():void { 
    rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
    txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
    msgCb.addEventListener(Event.CHANGE, cbHandler); 
} 
private function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
    } 
    aTa.setStyle("textFormat", tf); 
} 
private function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
} 
private function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.data; 
} 
} 
}

Estas funciones definen los detectores de eventos de los componentes.

Seleccione Archivo > Guardar para guardar el archivo.

Seleccione Control > Probar película o presione Control+Intro para compilar el código y probar la aplicación Greetings2.