Einfache Anwendung

Wählen Sie „Datei“ > „Neu“.

Wählen Sie im Dialogfeld „Neues Dokument“ die Option „Flash-Datei (ActionScript 3.0)“ aus und klicken Sie dann auf „OK“.

Ein neues Flash-Fenster wird geöffnet.

Wählen Sie „Datei“ > „Speichern“, nennen Sie die Flash-Datei Greetings.fla und klicken Sie auf „Speichern“.

Wählen Sie im Flash-Bedienfeld „Komponenten“ eine TextArea-Komponente aus und ziehen Sie sie auf die Bühne.

Wählen Sie die TextArea-Komponente auf der Bühne aus und geben Sie dann im Fenster „Eigenschaften“ den Instanznamen aTa sowie die folgenden Informationen ein:

• 230 für den Wert „B“ (Breite).

• 44 für den Wert „H“ (Höhe).

• 165 für den Wert „X“ (horizontale Position).

• 57 für den Wert „Y“ (vertikale Position).

• Geben Sie auf der Registerkarte „Parameter“ als Textparameter Hello World! ein.

Ziehen Sie eine ColorPicker-Komponente auf die Bühne, platzieren Sie sie links von der TextArea-Komponente und geben Sie ihr den Instanznamen txtCp. Geben Sie im Eigenschafteninspektor die folgenden Informationen ein:

• 96 für den Wert „X“.

• 72 für den Wert „Y“.

Ziehen Sie nacheinander drei RadioButton-Komponenten auf die Bühne und geben Sie ihnen die Instanznamen smallRb , largerRb und largestRb . Geben Sie im Eigenschafteninspektor die folgenden Informationen ein:

• Jeweils 100 für den Wert „B“ und 22 für den Wert „H“.

• 155 für den Wert „X“.

• 120 für den Wert „Y“ von smallRb, 148 für largerRb und 175 für largestRb.

• Jeweils fontRbGrp für den groupName-Parameter.

• Geben Sie auf der Registerkarte „Parameter“ die Bezeichnungen Small , Larger , Largest ein.

Ziehen Sie eine ComboBox-Komponente auf die Bühne und geben Sie ihr den Instanznamen msgCb . Geben Sie im Eigenschafteninspektor die folgenden Informationen ein:

• 130 für den Wert „B“.

• 265 für den Wert „X“.

• 120 für den Wert „Y“.

• Geben Sie auf der Registerkarte „Parameter“ als prompt-Parameter Greetings ein.

• Doppelklicken Sie auf das Textfeld für den dataProvider-Parameter, um das Dialogfeld „Werte“ zu öffnen.

• Klicken Sie auf das Pluszeichen und ersetzen Sie den label-Wert durch Hello World!

• Wiederholen Sie den vorigen Schritt und fügen Sie diese Bezeichnungen hinzu: Have a nice day! und Top of the Morning!

• Klicken Sie auf „OK“, um das Dialogfeld „Werte“ zu schließen.

Speichern Sie die Datei.

Falls das Bedienfeld „Aktionen“ noch nicht angezeigt wird, öffnen Sie es, indem Sie F9 drücken oder „Fenster“ > „Aktionen“ wählen. Klicken Sie auf Bild 1 der Hauptzeitleiste und geben Sie im Bedienfeld „Aktionen“ den folgenden Code ein:

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

Mit den ersten drei Zeilen werden die von der Anwendung verwendeten Ereignisklassen importiert. Ein Ereignis tritt bei einer Benutzerinteraktion mit einer der Komponenten auf. Mit den nächsten fünf Zeilen werden die Ereignisprozeduren für die Ereignisse registriert, auf die die Anwendung wartet. Ein click -Ereignis für eine RadioButton-Komponente tritt auf, wenn der Benutzer auf die Komponente klickt. Ein change -Ereignis tritt auf, wenn der Benutzer eine andere Farbe in der ColorPicker-Komponente auswählt. Ein change -Ereignis für eine ComboBox-Komponente tritt auf, wenn der Benutzer eine andere Begrüßung in der Dropdownliste auswählt.

Mit der vierten Zeile wird die RadioButtonGroup-Klasse importiert, damit die Anwendung die Ereignisprozedur einer RadioButton-Gruppe anstatt den einzelnen Optionsfeldern zuweisen kann.

Fügen Sie dem Bedienfeld „Aktionen“ die folgende Codezeile hinzu, um das TextFormat-Objekt tf zu erstellen, das die Anwendung verwendet, um die Stileigenschaften size und color für den Text der TextArea-Komponente zu ändern.

var tf:TextFormat = new TextFormat();

Fügen Sie den folgenden Code hinzu, um die rbHandler -Ereignisverarbeitungsfunktion zu erstellen. Diese Funktion verarbeitet ein click -Ereignis, wenn der Benutzer auf eine der RadioButton-Komponenten klickt.

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

Die Funktion überprüft über eine switch -Anweisung die target -Eigenschaft des event -Objekts, um festzustellen, welche RadioButton-Komponente das Ereignis ausgelöst hat. Die currentTarget -Eigenschaft enthält den Namen des Objekts, das das Ereignis ausgelöst hat. Je nachdem, auf welches Optionsfeld der Benutzer geklickt hat, wird die Größe des Textes in der TextArea-Komponente in 14, 18 oder 24 Punkt geändert.

Fügen Sie den folgenden Code ein, um die cpHandler() -Funktion zu implementieren, die eine Änderung des Wertes in der ColorPicker-Komponente verarbeitet:

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

Diese Funktion setzt die color -Eigenschaft des TextFormat-Objekts tf auf die in der ColorPicker-Komponente ausgewählte Farbe und ruft dann setStyle() auf, um die Farbe auf den Text in der TextArea-Instanz aTa anzuwenden.

Fügen Sie den folgenden Code ein, um die cbHandler() -Funktion zu implementieren, die eine Änderung der Auswahl in der ComboBox-Komponente verarbeitet:

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

Diese Funktion ersetzt den Text in der TextArea-Komponente durch den ausgewählten Text in der ComboBox-Komponente, event.target.selectedItem.label .

Wählen Sie „Steuerung“ > „Film testen“ oder drücken Sie Strg+Eingabe, um den Code zu kompilieren und die Greetings-Anwendung zu testen.

Im folgenden Abschnitt wird beschrieben, wie Sie dieselbe Anwendung mit einer externen ActionScript-Klasse und einer FLA-Datei erstellen, die nur über die erforderlichen Komponenten in der Bibliothek verfügt.

Wählen Sie „Datei“ > „Neu“.

Wählen Sie im Dialogfeld „Neues Dokument“ die Option „Flash-Datei (ActionScript 3.0)“ aus und klicken Sie dann auf „OK“.

Ein neues Flash-Fenster wird geöffnet.

Wählen Sie „Datei“ > „Speichern“, nennen Sie die Flash-Datei Greetings2.fla und klicken Sie auf „Speichern“.

Ziehen Sie jede der folgenden Komponenten aus dem Bedienfeld „Komponenten“ in die Bibliothek:

• ColorPicker

• ComboBox

• RadioButton

• TextArea

  Die kompilierte SWF-Datei verwendet jedes dieser Elemente, deshalb müssen Sie sie der Bibliothek hinzufügen. Ziehen Sie die Komponenten in den unteren Bereich des Bedienfelds „Bibliothek“. Wenn Sie diese Komponenten der Bibliothek hinzufügen, werden andere Elemente (wie List, TextInput und UIScrollBox) automatisch hinzugefügt.

Geben Sie im Fenster „Eigenschaften“ für die Dokumentklasse Greetings2 ein.

Wenn Flash eine Warnung anzeigt, dass für die Dokumentklasse keine Definition gefunden wurde, ignorieren Sie sie. Sie definieren die Greetings2-Klasse in den folgenden Schritten. Diese Klasse definiert die Hauptfunktionalität für die Anwendung.

Speichern Sie die Datei „Greetings2.fla“.

Wählen Sie „Datei“ > „Neu“.

Wählen Sie im Dialogfeld „Neues Dokument“ die Option „ActionScript-Datei“ aus und klicken Sie dann auf „OK“.

Ein neues Skriptfenster wird geöffnet.

Fügen Sie den folgenden Code im Skriptfenster hinzu:

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() {    

Das Skript definiert eine ActionScript 3.0-Klasse namens „Greetings2“. Das Skript führt folgende Aufgaben aus:

• Es importiert Klassen, die in der Datei verwendet werden. Normalerweise fügen Sie diese Import -Anweisungen beim Verweis auf unterschiedliche Klassen im Code hinzu, in diesem Beispiel werden sie jedoch der Einfachheit halber in einem Schritt importiert.

• Es deklariert Variablen für die verschiedenen Arten von Komponentenobjekten, die Sie dem Code hinzufügen werden. Eine andere Variable erstellt das TextFormat-Objekt tf .

• Es definiert die Konstruktorfunktion Greetings2() für die Klasse. In den folgenden Schritten fügen Sie dieser Funktion Zeilen hinzu. Außerdem fügen Sie der Klasse weitere Methoden hinzu.

Wählen Sie „Datei“ > „Speichern“, nennen Sie die Datei Greetings2.as und klicken Sie auf „Speichern“.

Fügen Sie der Funktion Greeting2() die folgenden Codezeilen hinzu:

    createUI(); 
    setUpHandlers(); 
}

Die Funktion sollte nun folgendermaßen aussehen:

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

Fügen Sie hinter der schließenden Klammer der Methode Greeting2() die folgenden Codezeilen hinzu:

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

Diese Zeilen haben folgende Wirkung:

• Die in der Anwendung verwendeten Komponenten werden instanziiert.

• Größe, Position und Eigenschaften der einzelnen Komponenten werden eingestellt.

• Jede Komponente wird mithilfe der addChild() -Methode der Bühne hinzugefügt.

Fügen Sie nach der schließenden Klammer der bldRadioButtons() -Methode den folgenden Code für die setUpHandlers() -Methode hinzu:

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

Diese Funktionen definieren Ereignis-Listener für die Komponenten.

Wählen Sie „Datei“ > „Speichern“, um die Datei zu speichern.

Wählen Sie „Steuerung“ > „Film testen“ oder drücken Sie Strg+Eingabe, um den Code zu kompilieren und die Anwendung „Greetings2“ zu testen.