Een eenvoudige toepassing

Selecteer Bestand > Nieuw.

Selecteer in het dialoogvenster Nieuw document het type Flash-bestand (ActionScript 3.0) en klik op OK.

Er wordt een nieuw Flash-venster geopend.

Selecteer Bestand > Opslaan, geef het Flash-bestand de naam Greetings.fla en klik op Opslaan.

Selecteer in het deelvenster Componenten van Flash een component TextArea en sleep deze naar het werkgebied.

Selecteer de TextArea in het werkgebied en typ in het venster Eigenschappen aTa voor de instantienaam en voer de volgende informatie in:

• Voer 230 in voor de waarde B (breedte).

• Voer 44 in voor de waarde H (hoogte).

• Voer 165 in voor de waarde X (horizontale positie).

• Voer 57 in voor de waarde Y (verticale positie).

• Voer Hallo wereld! in voor de parameter text op het tabblad Parameters.

Sleep een component ColorPicker naar het werkgebied, plaats het links van de TextArea en geef de component de instantienaam txtCp. . Voer de volgende informatie in Eigenschapcontrole in:

• Voer 96 in voor de waarde X.

• Voer 72 in voor de waarde Y.

Sleep drie componenten RadioButton naar het werkgebied en geef ze de instantienamen smallRb , largerRb en largestRb . Voer in Eigenschapcontrole de volgende informatie voor de componenten in:

• Voer 100 voor de waarde B en 22 voor de waarde H in.

• Voer 155 in voor de waarde X.

• Voer 120 voor de waarde Y voor smallRb, 148 voor largerRb en 175 voor largestRb in.

• Voer fontRbGrp voor de parameter groupName van elke component in.

• Voer labels in voor elke waarde op het tabblad Parameters voor Klein , Groter , Grootst .

Sleep een ComboBox naar het werkgebied en geef deze de instantienaam msgCb . Voer in Eigenschapcontrole de volgende informatie in:

• Voer 130 in voor de waarde B.

• Voer 265 in voor de waarde X.

• Voer 120 in voor de waarde Y.

• Voer op het tabblad Parameters Begroetingen in voor de parameter prompt.

• Dubbelklik op het tekstveld voor de parameter dataProvider om het dialoogvenster Waarden te openen.

• Klik op het plusteken en vervang de labelwaarde door Hallo wereld!

• Herhaal de vorige stap om de labelwaarden Prettige dag! en Goedemorgen! toe te voegen.

• Klik op OK om het dialoogvenster Waarden te sluiten.

Sla het bestand op.

Open het deelvenster Handelingen, indien dit nog niet het geval is, met F9 of door Handelingen in het menu Venster te selecteren. Klik op frame 1 van de hoofdtijdlijn en voer de volgende code in het deelvenster Handelingen in:

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

Met de eerste drie regels worden de gebeurtenisklassen die de toepassing gebruikt geïmporteerd. Een gebeurtenis vindt plaats wanneer de gebruiker een van de componenten gebruikt. In de volgende vijf regels worden gebeurtenishandlers geregistreerd voor de gebeurtenissen waarnaar de toepassing wil luisteren. Er vindt een gebeurtenis click voor een RadioButton plaats wanneer de gebruiker erop klikt. De gebeurtenis change vindt plaats wanneer de gebruiker een andere kleur in de ColorPicker selecteert. De gebeurtenis change vindt plaats op de ComboBox wanneer de gebruiker een andere begroeting in de vervolgkeuzelijst kiest.

In de vierde regel wordt de klasse RadioButtonGroup geïmporteerd zodat de toepassing een gebeurtenislistener kan toewijzen aan de groep RadioButtons in plaats van de listener aan elke knop afzonderlijk toe te wijzen.

Voeg de volgende coderegel toe aan het deelvenster Handelingen om het TextFormat-object tf te maken dat door de toepassing wordt gebruikt om de stijleigenschappen size en color van de tekst in de TextArea te wijzigen.

var tf:TextFormat = new TextFormat();

Voeg de volgende code toe om de gebeurtenisafhandelingsfunctie rbHandler te maken. Deze functie handelt de gebeurtenis click af wanneer de gebruiker op een van de componenten RadioButton klikt.

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

Deze functie gebruikt een instructie switch om de eigenschap target van het object event te controleren om te bepalen welke RadioButton de gebeurtenis heeft geactiveerd. De eigenschap currentTarget bevat de naam van het object dat de gebeurtenis heeft geactiveerd. Afhankelijk van de RadioButton waarop de gebruiker heeft geklikt, wijzigt de toepassing de tekengrootte van de tekst in de TextArea in 14, 18 of 24 punten.

Voeg de volgende code toe om de functie cpHandler() die een wijziging in de waarde in de ColorPicker afhandelt, te implementeren:

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

Deze functie stelt de eigenschap color van het TextFormat-object tf in op de kleur die in de ColorPicker is geselecteerd en roept vervolgens setStyle() aan om dit toe te passen op de tekst in de TextArea-instantie aTa .

Voeg de volgende code toe om de functie cbHandler() die een wijziging in de selectie in de ComboBox afhandelt, te implementeren:

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

Deze functie vervangt de tekst in de TextArea door de geselecteerde tekst in de ComboBox, event.target.selectedItem.label .

Selecteer Besturing > Film testen of druk op Ctrl+Enter om de code te compileren en de toepassing Greetings te testen.

In de volgende sectie wordt getoond hoe u dezelfde toepassing kunt bouwen met een externe ActionScript-klasse en een FLA-bestand met alleen de vereiste componenten in de bibliotheek.

Selecteer Bestand > Nieuw.

Selecteer in het dialoogvenster Nieuw document het type Flash-bestand (ActionScript 3.0) en klik op OK.

Er wordt een nieuw Flash-venster geopend.

Selecteer Bestand > Opslaan, geef het Flash-bestand de naam Greetings2.fla en klik op Opslaan.

Sleep de volgende componenten van het deelvenster Componenten naar de bibliotheek:

• ColorPicker

• ComboBox

• RadioButton

• TextArea

  Het gecompileerde SWF-bestand gebruikt al deze elementen, dus u moet ze aan de bibliotheek toevoegen. Sleep de componenten naar de onderzijde van het deelvenster Bibliotheek. Wanneer u deze componenten aan de bibliotheek toevoegt, worden andere elementen (zoals List, TextInput en UIScrollBox) automatisch toegevoegd.

Typ in het deelvenster Eigenschappen bij Documentklasse Greetings2 .

Wanneer Flash een waarschuwing geeft met de tekst ‘Kan geen definitie voor de documentklasse vinden’, kunt u deze negeren. U definieert de klasse Greetings2 in de volgende stappen. Deze klasse definieert de hoofdfunctionaliteit voor de toepassing.

Sla het bestand Greetings2.fla op.

Selecteer Bestand > Nieuw.

Selecteer ActionScript-bestand in het dialoogvenster Nieuw document en klik op OK.

Er wordt een nieuw Script-venster geopend.

Voeg de volgende code aan het Script-venster toe:

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

In het script wordt een ActionScript 3.0-klasse met de naam Greetings2 gedefinieerd. Het script doet het volgende:

• Er worden klassen geïmporteerd die we in het bestand gaan gebruiken. Meestal voegt u deze import instructies toe wanneer u in de code naar verschillende klassen verwijst, maar om het kort te houden worden ze in dit voorbeeld in één stap geïmporteerd.

• Er worden variabelen gedeclareerd. Deze staan voor verschillende soorten componentobjecten die we aan de code toevoegen. Een andere variabele maakt het TextFormat-object tf .

• Er wordt een constructorfunctie met de naam Greetings2() voor de klasse gedefinieerd. We voegen regels aan deze functie toe en voegen vervolgens in de volgende stappen andere methoden aan de klasse toe.

Selecteer Bestand > Opslaan, geef het bestand de naam Greetings2.as en klik op Opslaan.

Voeg de volgende regels code toe aan de functie Greetings2() .

    createUI(); 
    setUpHandlers(); 
}

De functie moet er nu als volgt uitzien:

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

Voeg de volgende coderegels toe na de accolade sluiten van de methode 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); 
}

Deze regels doen het volgende:

• Maken een instantie van de componenten die in de toepassing worden gebruikt.

• Stellen de grootte, positie en eigenschappen van elke component in.

• Voeg elke component aan het werkgebied toe met de methode addChild() .

Voeg na de accolade sluiten van de methode bldRadioButtons() de volgende code voor de methode setUpHandlers() toe:

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

Deze functies definiëren gebeurtenislisteners voor de componenten.

Selecteer Bestand > Opslaan om het bestand op te slaan.

Selecteer Besturing > Film testen of druk op Ctrl+Enter om de code te compileren en de toepassing Greetings2 te testen.