Una semplice applicazione

Selezionate File > Nuovo.

Nella finestra di dialogo Nuovo documento, selezionate File Flash (ActionScript 3.0) e fate clic su OK.

Viene aperta una nuova finestra di Flash.

Selezionate File > Salva, assegnate al file Flash il nome Greetings.fla , quindi fate clic sul pulsante Salva.

Nel pannello Componenti di Flash, selezionate un componente TextArea e trascinatelo nello stage.

Nella finestra Proprietà, con il componente TextArea selezionato nello stage, digitate aTa come nome di istanza e inserite le seguenti informazioni:

• Inserite 230 per il valore W (larghezza).

• Inserite 44 per il valore H (altezza).

• Inserite 165 per il valore X (posizione orizzontale).

• Inserite 57 per il valore Y (posizione verticale).

• Digitate Hello World! per il parametro text nella scheda Parametri.

Trascinate un componente ColorPicker nello stage, posizionatelo a sinistra di TextArea e assegnategli il nome di istanza txtCp. Immettete le seguenti informazioni nella finestra di ispezione Proprietà:

• Inserite 96 per il valore X.

• Inserite 72 per il valore Y.

Trascinate tre componenti RadioButton nello stage, uno alla volta, e assegnate loro i nomi di istanza smallRb , largerRb e largestRb . Immettete le seguenti informazioni per tali componenti nella finestra di ispezione Proprietà:

• Inserite 100 per il valore W e 22 per il valore H per ognuno di essi.

• Inserite 155 per il valore X.

• Inserite 120 per il valore Y per smallRb, 148 per largerRb e 175 per largestRb.

• Inserite fontRbGrp per il parametro groupName per ognuno di essi.

• Inserite le relative etichette nella scheda Parametri di Small , Larger , Largest .

Trascinate un componente ComboBox nello stage e assegnategli il nome di istanza msgCb . Immettete le seguenti informazioni per tale istanza nella finestra di ispezione Proprietà:

• Inserite 130 per il valore W.

• Inserite 265 per il valore X.

• Inserite 120 per il valore Y.

• Nella scheda Parametri, immettete Greetings per il parametro prompt.

• Fate doppio clic sul campo di testo del parametro dataProvider per aprire la finestra di dialogo Valori.

• Fate clic sul segno più e sostituite il valore dell'etichetta con Hello World!

• Ripetete il punto precedente per aggiungere i valori delle etichette Have a nice day! e Top of the Morning!

• Fate clic su OK per chiudere la finestra di dialogo Valori.

Salvate il file.

Se non è già aperto, aprite il pannello Azioni premendo F9 o scegliete Azioni dal menu Finestra. Fate clic sul fotogramma 1 della linea temporale principale e immettete il codice seguente nel pannello Azioni:

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);

Con le prime tre righe vengono importate le classi di eventi utilizzate dall'applicazione. Si verifica un evento quando un utente interagisce con uno dei componenti. Nelle cinque righe successive vengono registrati i gestori di eventi relativi agli eventi che l'applicazione dovrà ascoltare. Quando un utente fa clic su un componente RadioButton, si verifica un evento click . Quando un utente seleziona un colore diverso nel componente ColorPicker, si verifica un evento change . Quando un utente sceglie un saluto diverso dall'elenco a discesa, nel componente ComboBox si verifica un evento change .

Con la quarta riga viene importata la classe RadioButtonGroup per consentire all'applicazione di assegnare un listener di eventi al gruppo di componenti RadioButton, anziché assegnare il listener a ogni singolo pulsante.

Aggiungete la seguente riga di codice al pannello Azioni per creare l'oggetto TextFormat tf , che viene utilizzato dall'applicazione per modificare le proprietà di stile size e color del testo nel componente TextArea.

var tf:TextFormat = new TextFormat();

Aggiungete il codice seguente per creare la funzione di gestione degli eventi rbHandler . Questa funzione viene utilizzata per gestire un evento click quando un utente fa clic su uno dei componenti 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); 
}

Questa funzione utilizza un'istruzione switch per esaminare la proprietà target dell'oggetto event e determinare quale componente RadioButton ha attivato l'evento. Il nome dell'oggetto che ha attivato l'evento è contenuto nella proprietà currentTarget . A seconda del componente RadioButton su cui l'utente ha fatto clic, le dimensioni del testo nel componente TextArea vengono modificate dall'applicazione in 14, 18 o 24 punti.

Aggiungete il codice seguente per implementare la funzione cpHandler() che gestisce la modifica del valore nel componente ColorPicker:

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

Questa funzione imposta la proprietà color dell'oggetto TextFormat tf sul colore selezionato in ColorPicker, quindi chiama setStyle() per applicare il colore al testo nell'istanza TextArea aTa .

Aggiungete il codice seguente per implementare la funzione cbHandler() , che gestisce la modifica della selezione nel componente ComboBox:

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

Questa funzione sostituisce semplicemente il testo in TextArea con il testo selezionato in ComboBox, event.target.selectedItem.label .

Selezionate Controllo > Prova filmato o premete Ctrl+Invio per compilare il codice e provare l'applicazione Greetings.

Nella seguente sezione viene illustrato come creare la stessa applicazione con una classe ActionScript esterna e un file FLA che include solo i componenti necessari nella libreria.

Selezionate File > Nuovo.

Nella finestra di dialogo Nuovo documento, selezionate File Flash (ActionScript 3.0) e fate clic su OK.

Viene aperta una nuova finestra di Flash.

Selezionate File > Salva, assegnate al file Flash il nome Greetings2.fla , quindi fate clic sul pulsante Salva.

Trascinate ognuno dei seguenti componenti dal pannello Componenti alla libreria:

• ColorPicker

• ComboBox

• RadioButton

• TextArea

  Poiché nel file SWF compilato verrà utilizzata ognuna di queste risorse, dovete aggiungerle alla libreria. Trascinate i componenti nella parte inferiore del pannello Libreria. Mentre aggiungete questi componenti alla libreria, vengono aggiunti automaticamente altri componenti (ad esempio List, TextInput e UIScrollBox).

Nella finestra Proprietà, digitate Greetings2 per la classe del documento.

Se viene visualizzato un avviso in cui è specificato che è impossibile trovare una definizione per la classe del documento, ignoratelo. La classe Greetings2, che sarà definita nella procedura seguente, specifica la funzionalità principale dell'applicazione.

Salvate il file Greetings2.fla.

Selezionate File > Nuovo.

Nella finestra di dialogo Nuovo documento, selezionate File ActionScript e fate clic su OK.

Viene aperta una nuova finestra Script.

Aggiungete il codice seguente nella finestra 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() {    

Lo script definisce una classe ActionScript 3.0 di nome Greetings2 ed esegue le seguenti operazioni:

• Importa le classi che saranno utilizzate nel file. Generalmente queste istruzioni di importazione vengono aggiunte mentre si fa riferimento a diverse classi nel codice; tuttavia, per brevità, in questo esempio vengono importate tutte in un solo passaggio.

• Dichiara le variabili che rappresentano i diversi tipi di oggetti componente che saranno aggiunti al codice. Un'altra variabile crea l'oggetto TextFormat tf .

• Definisce una funzione di costruzione, Greetings2() , per la classe. Nella procedura seguente verranno aggiunte delle righe a questa funzione e altri metodi alla classe.

Selezionate File > Salva, assegnate al file il nome Greetings2.as , quindi fate clic sul pulsante Salva.

Aggiungete le seguenti righe di codice alla funzione Greeting2() :

    createUI(); 
    setUpHandlers(); 
}

La funzione dovrebbe avere un aspetto analogo al seguente:

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

Aggiungete le seguenti righe di codice dopo la parentesi graffa di chiusura del metodo 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); 
}

Queste righe di codice eseguono le seguenti operazioni:

• Creano istanze dei componenti utilizzati nell'applicazione.

• Impostano la dimensione, la posizione e le proprietà di ciascun componente.

• Aggiungono ogni componente sullo stage utilizzando il metodo addChild() .

Dopo la parentesi graffa di chiusura del metodo bldRadioButtons() , aggiungete il codice seguente per il metodo 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; 
} 
} 
}

Queste funzioni definiscono i listener di eventi per i componenti.

Selezionate File > Salva per salvare il file.

Selezionate Controllo > Prova filmato o premete Ctrl+Invio per compilare il codice e provare l'applicazione Greetings2.