Ett enkelt program

I det här avsnittet beskrivs de olika stegen som du utför för att skapa ett enkelt ActionScript 3.0-program med Flash-komponenter och utvecklingsverktyget i Flash. Exemplet finns både som en FLA-fil med ActionScript-koden på tidslinjen, och som en extern ActionScript-klassfil med en FLA-fil som enbart innehåller komponenterna i biblioteket. Vanligtvis använder du externa klassfiler när du utvecklar större program så att du kan dela koden mellan klasser och program, och så att du kan göra programmen enklare att underhålla. Mer information om programmering med ActionScript 3.0 finns i Programmering med ActionScript 3.0 .

Utforma programmet

Vårt första exempel på ett program med ActionScript-komponenter är en variant av programmet ”Hello World”-programmet, så utformningen är ganska enkel:

  • Programmet kallas Greetings.

  • Det använder en TextArea för att visa en hälsning som initialt är Hello World.

  • Det använder en ColorPicker som gör att du kan ändra textens färg.

  • Det använder tre RadioButtons som gör att du kan ställa in textens storlek till liten, större och störst.

  • Det använder en ComboBox som gör att du kan välja en annan hälsning i en listruta.

  • Programmet använder komponenter från panelen Komponenter och skapar också programelement med ActionScript-kod.

    Med hjälp av den här definitionen kan du börja skapa programmet.

Skapa programmet Greetings

Följ stegen nedan för att skapa programmet Greetings genom att använda utvecklingsverktyget i Flash till att skapa en FLA-fil, placera komponenter på scenen och lägga till ActionScript-kod på tidslinjen.

Skapa programmet Greetings i en FLA-fil:

  1. Välj Arkiv > Nytt.

  2. I dialogrutan Nytt dokument väljer du Flash-fil (ActionScript 3.0) och klickar på OK.

    Ett nytt Flash-fönster öppnas.

  3. Välj Arkiv > Spara, döp Flash-filen till Greetings.fla och klicka på knappen Spara.

  4. I panelen Komponenter i Flash väljer du en TextArea-komponent och drar den till scenen.

  5. I fönstret Egenskaper, med TextArea markerat på scenen, skriver du aTa som namn på instansen och anger följande information:

    • Ange 230 som W-värde (bredd).

    • Ange 44 som H-värde (höjd).

    • Ange 165 som X-värde (vågrät position).

    • Ange 57 som Y-värde (lodrät position).

    • Ange Hello World! som textparameter på fliken Parametrar.

  6. Dra en ColorPicker-komponent till scenen, placera den till vänster om TextArea och ge den instansnamnet txtCp. Ange följande information i egenskapsinspektören:

    • Ange 96 som X-värde.

    • Ange 72 som Y-värde.

  7. Dra tre RadioButton-komponenter till scenen, en i taget, och ge dem instansnamnen smallRb , largerRb och largestRb . Ange följande information för dem i egenskapsinspektören:

    • Ange 100 som W-värde och 22 som H-värde för var och en av dem.

    • Ange 155 som X-värde.

    • Ange 120 som Y-värde för smallRb, 148 för largerRb och 175 för largestRb.

    • Ange fontRbGrp som groupName-parameter för var och en av dem.

    • Ange etiketter för dem på fliken Parametrar, med texten Liten , Större , Störst .

  8. Dra en ComboBox till scenen och ge den instansnamnet msgCb . Ange följande information för den i egenskapsinspektören:

    • Ange 130 som W-värde.

    • Ange 265 som X-värde.

    • Ange 120 som Y-värde.

    • På fliken Parametrar anger du Greetings som promptparameter.

    • Dubbelklicka på textfältet så att parametern dataProvider öppnar dialogrutan Värden.

    • Klicka på plustecknet och byt ut etikettens värde mot Hello World!

    • Upprepa det föregående steget för att lägga till etikettsvärdena Ha en bra dag! och Härlig morgon!

    • Klicka på OK för att stänga dialogrutan Värden.

  9. Spara filen.

  10. Om den inte redan är öppen, öppnar du åtgärdspanelen genom att trycka på F9 eller välja Åtgärder på menyn Fönster. Klicka på bildruta 1 på huvudtidslinjen och ange följande kod i panelen Åtgärder:

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

    De tre första raderna importerar händelseklasserna som programmet använder. En händelse inträffar när en användare interagerar med en av komponenterna. De följande fem raderna registrerar händelsehanterare för händelserna som programmet vill avlyssna. En click -händelse inträffar för en RadioButton när en användare klickar på den. En change -händelse inträffar när en användare väljer en annan färg i ColorPicker. En change -händelse inträffar för en ComboBox när en användare väljer en annan hälsning i listrutan.

    Den fjärde raden importerar klassen RadioButtonGroup så att programmet kan tilldela en händelseavlyssnare till gruppen med RadioButtons, i stället för att tilldela avlyssnaren till varje enskild knapp.

  11. Lägg till följande rad med kod i åtgärdspanelen för att skapa TextFormat-objektet tf , som programmet använder för att ändra textens formategenskaper för storlek och färg i TextArea.

    var tf:TextFormat = new TextFormat();
  12. Lägg till följande kod för att skapa händelsehanteringsfunktionen rbHandler . Den här funktionen hanterar en click -händelse när en användare klickar på en av RadioButton-komponenterna.

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

    Den här funktionen använder en switch -sats för att undersöka egenskapen target i event -objektet för att avgöra vilken RadioButton som utlöste händelsen. Egenskapen currentTarget innehåller namnet på objektet som utlöste händelsen. Beroende på vilken RadioButton som användaren klickade på ändrar programmet storleken på texten i TextArea till 14, 18 eller 24 punkter.

  13. Lägg till följande kod för att implementera funktionen cpHandler() som hanterar en ändring av värdet i ColorPicker:

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

    Den här funktionen ställer in den färg som valdes i färgväljaren för egenskapen color för TextFormat-objektet tf , och sedan anropar den setStyle() för att använda den på texten i TextArea-instansen aTa .

  14. Lägg till följande kod för att implementera funktionen cbHandler() som hanterar en ändring av urvalet i ComboBox:

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

    Den här funktionen byter helt enkelt ut texten i TextArea mot den valda texten i ComboBox, event.target.selectedItem.label .

  15. Välj Kontroll > Testa filmen eller tryck på Control+Enter om du vill kompilera koden och testa programmet Greetings.

    I följande avsnitt visas hur du skapar samma program med en extern ActionScript-klass och en FLA-fil som enbart har de komponenter som krävs i biblioteket.

Skapa programmet Greetings2 med en extern klassfil:

  1. Välj Arkiv > Nytt.

  2. I dialogrutan Nytt dokument väljer du Flash-fil (ActionScript 3.0) och klickar på OK.

    Ett nytt Flash-fönster öppnas.

  3. Välj Arkiv > Spara, döp Flash-filen till Greetings2.fla och klicka på knappen Spara.

  4. Dra alla komponenter nedan från panelen Komponenter till biblioteket:

    • ColorPicker

    • ComboBox

    • RadioButton

    • TextArea

      Den kompilerade SWF-filen använder alla dessa resurser, så du måste lägga till dem i biblioteket. Dra komponenterna från den nedersta delen av bibliotekpanelen. När du lägger till de här komponenterna i biblioteket läggs andra resurser (till exempel List, TextInput, och UIScrollBox) till automatiskt.

  5. I fönstret Egenskaper för dokumentklassen skriver du Greetings2 .

    Om Flash visar varningsmeddelandet ”ingen definition för dokumentklassen hittades” ignorerar du det. I följande steg definierar du Greetings2-klassen. Den här klassen definierar programmets huvudfunktioner.

  6. Spara filen Greetings2.fla.

  7. Välj Arkiv > Nytt.

  8. I dialogrutan Nytt dokument väljer du ActionScript-fil och klickar på OK.

    Ett nytt skriptfönster öppnas.

  9. Lägg till följande kod i skriptfönstret:

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

    Skriptet definierar en ActionScript 3.0-klass med namnet Greetings2. Skriptet fungerar på följande sätt:

    • Det importerar klasser som vi ska använda i filen. Vanligtvis lägger du till de här import -satserna när du refererar till olika klasser i koden, men i det här exemplet importeras alla i ett steg.

    • Det deklarerar variabler som representerar de olika typerna av komponentobjekt som vi ska lägga till i koden. En annan variabel skapar TextFormat-objektet tf .

    • Den definierar en konstruktorfunktion, Greetings2() , för klassen. Vi ska lägga till rader i den här funktionen, och lägga till andra metoder till klassen i följande steg.

  10. Välj Arkiv > Spara, döp Flash-filen till Greetings2.as och klicka på knappen Spara.

  11. Lägg till följande rader med kod i funktionen Greeting2() :

        createUI(); 
        setUpHandlers(); 
    }

    Nu ska funktionen se ut så här:

    public function Greetings2() { 
        createUI(); 
        setUpHandlers(); 
    }
  12. Lägg till följande rader med kod efter högerparentesen i metoden 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); 
    }

    De här raderna gör följande:

    • Skapar instanser av komponenterna i programmet.

    • Anger varje komponents storlek, position och egenskaper.

    • Lägger till varje komponent till scenen med metoden addChild() .

  13. Lägg till följande kod för metoden setUpHandlers() efter högerparentesen i metoden bldRadioButtons() :

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

    De här funktionerna definierar händelseavlyssnare för komponenterna.

  14. Välj Arkiv > Spara för att spara filen.

  15. Välj Kontroll > Testa filmen eller tryck på Control+Enter om du vill kompilera koden och testa programmet Greetings2.

Utveckla och kör efterföljande exempel

När du har utvecklat och kört programmet Greetings bör du ha den grundläggande kunskap du behöver för att köra de andra kodexemplen som beskrivs i den här boken. Den relevanta ActionScript 3.0-koden i varje exempel markeras och diskuteras, och du kan klipppa ut och klistra in varje exempel i boken i en FLA-fil, kompilera och köra den.