Prosta aplikacja

W niniejszej sekcji przedstawiono czynności, jakie należy wykonać w celu utworzenia prostej aplikacji ActionScript 3.0 z wykorzystaniem składników Flash i narzędzia do tworzenia treści Flash. Przykład został przedstawiony jako plik FLA w kodzie ActionScript wprowadzonym na osi czasu, a także jako zewnętrzny plik klasy ActionScript z plikiem FLA, który zawiera tylko składniki w bibliotece. Zwykle tworzone są większe aplikacje z wykorzystaniem zewnętrznych plików klas, dzięki czemu możliwe jest współużytkowanie kodu przez klasy i aplikacje, co umożliwia łatwiejsze zarządzanie aplikacjami. Więcej informacji na temat programowania w języku ActionScript 3.0 zawiera sekcja Programowanie w języku ActionScript 3.0 .

Projekt aplikacji

Pierwszy przykład aplikacji ze składnikiem ActionScript to odmiana standardowej aplikacji „Hello World” — jej projekt jest dość prosty:

  • Aplikacja ma nazwę Greetings.

  • Korzysta ze składnika TextArea w celu wyświetlenia powitania, które na początku brzmi Hello World.

  • Korzysta ze składnika ColorPicker, który umożliwia zmianę koloru tekstu.

  • Korzysta z trzech składników RadioButton, które umożliwiają ustawienie małego, większego i największego rozmiaru tekstu.

  • Korzysta ze składnika ComboBox, który umożliwia wybór innego powitania z listy rozwijanej.

  • Aplikacja korzysta ze składników z panelu Składniki, a ponadto tworzy elementy aplikacji za pomocą kodu ActionScript.

    Po określeniu tej definicji można rozpocząć tworzenie aplikacji.

Tworzenie aplikacji Greetings

Poniższej kroki dotyczą tworzenia aplikacji Greetings za pomocą narzędzia do tworzenia treści Flash używanego w celu utworzenia pliku FLA, umieszczenia komponentów na stole montażowym oraz w celu dodania kodu ActionScript do osi czasu.

Tworzenie aplikacji Greetings w pliku FLA:

  1. Wybierz polecenie Plik > Nowy.

  2. W oknie dialogowym Nowy dokument wybierz typ Plik Flash (ActionScript 3.0), a następnie kliknij przycisk OK.

    Zostanie otwarte nowe okno.

  3. Wybierz opcje Plik > Zapisz, nadaj plikowi Flash nazwę Greetings.fla , a następnie kliknij przycisk Zapisz.

  4. Na panelu Składniki Flash wybierz składnik TextArea i przeciągnij go na stół montażowy.

  5. W oknie Właściwości, ze składnikiem TextArea wybranym na stole montażowym, wpisz aTa jako nazwę instancji i wprowadź następujące informacje:

    • Wprowadź 230 dla wartości Sz (szerokość).

    • Wprowadź 44 dla wartości W (wysokość).

    • Wprowadź 165 dla wartości X (położenie w poziomie).

    • Wprowadź 57 dla wartości Y (położenie w pionie).

    • Wprowadź tekst Hello World! dla parametru tekstu na karcie Parametry.

  6. Przeciągnij składnik ColorPicker na stół montażowy, umieść go po lewej stronie obszaru TextArea, a następnie nadaj mu nazwę txtCp. Wprowadź następujące informacje do Inspektora właściwości:

    • Wprowadź 96 dla wartości X.

    • Wprowadź 72 dla wartości Y.

  7. Przeciągnij pojedynczo trzy składniki RadioButton do stołu montażowego i nadaj im nazwy: smallRb , largerRb oraz largestRb . Do Inspektora właściwości wprowadź następujące informacje dotyczące tych składników:

    • Wprowadź 100 dla wartości Sz i 22 dla wartości W każdego z tych składników.

    • Wprowadź 155 dla wartości X.

    • Wprowadź 120 dla wartości Y dla smallRb, 148 dla largerRb oraz 175 dla largestRb.

    • Wprowadź fontRbGrp dla parametru groupName każdego z tych składników.

    • Na karcie Parametry wprowadź dla składników etykiety: Small , Larger i Largest .

  8. Przeciągnij składnik ComboBox na stół montażowy i nadaj mu nazwę msgCb . Do Inspektora właściwości wprowadź następujące informacje dotyczące tego składnika:

    • Wprowadź 130 dla wartości Sz (szerokość).

    • Wprowadź 265 dla wartości X.

    • Wprowadź 120 dla wartości Y.

    • Na karcie Parametry wprowadź Greetings dla parametru wywołania.

    • Kliknij dwukrotnie pole tekstowe dla parametru dataProvider, aby otworzyć okno dialogowe Wartości.

    • Kliknij znak plus i zastąp wartość etykiety ciągiem znaków Hello World!

    • Powtórz poprzedni krok, aby dodać wartości etykiet Have a nice day! i Top of the Morning!

    • Kliknij przycisk OK, aby zamknąć okno dialogowe Wartości.

  9. Zapisz plik.

  10. Jeśli panel Operacje nie jest jeszcze otwarty, otwórz go, naciskając klawisz F9 lub wybierając przycisk Operacje w menu Okno. Kliknij 1. klatkę na głównej osi czasu, a następnie wprowadź następujący kod do panelu Operacje:

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

    Pierwsze trzy wiersze powodują import klas zdarzeń, z których korzysta aplikacja. Gdy użytkownik wchodzi w interakcje z jednym z tych trzech składników, dochodzi do zdarzenia. Następne pięć wierszy rejestruje programy obsługi zdarzeń dla zdarzeń, których aplikacja będzie nasłuchiwać. Zdarzenie click występuje dla składnika RadioButton, gdy użytkownik go kliknie. Zdarzenie change występuje, gdy użytkownik wybierze inny kolor w składniku ColorPicker. Zdarzenie change występuje dla pola ComboBox, gdy użytkownik wybierze inne powitanie z listy rozwijanej.

    Czwarty wiersz importuje klasę RadioButtonGroup, dzięki czemu aplikacja może przypisać program nasłuchiwania zdarzeń do grupy składników RadioButton - nie ma konieczności przypisywania programu nasłuchiwania do każdego przycisku osobno.

  11. Dodaj poniższy wiersz kodu do panelu Operacje, aby utworzyć obiekt tf TextFormat, z którego korzysta aplikacja w celu zmiany właściwości size i color stylu tekstu w obszarze TextArea.

    var tf:TextFormat = new TextFormat();
  12. Dodaj poniższy kod w celu utworzenia funkcji obsługi zdarzeń rbHandler . Ta funkcja obsługuje zdarzenie click , gdy użytkownik kliknie jeden ze składników 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); 
    }

    Ta funkcja korzysta z instrukcji switch w celu sprawdzenia właściwości target obiektu event w celu ustalenia składnika RadioButton, który jest aktywowany przez zdarzenie. Właściwość currentTarget zawiera nazwę obiektu, który wywołał zdarzenie. W zależności od tego, który składnik RadioButton kliknął użytkownik, aplikacja zmienia wielkość czcionki w obszarze TextArea na 14, 18 lub 24 punkty.

  13. Dodaj poniższy kod w celu zaimplementowania funkcji cpHandler() , która będzie obsługiwała zmianę wartości w składniku ColorPicker:

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

    Funkcja ustawia właściwość color obiektu tf TextFormat na kolor wybrany w składniku ColorPicker, a następnie wywołuje metodę setStyle() w celu zastosowania tego koloru dla tekstu w instancji aTa TextArea.

  14. Dodaj poniższy kod w celu zaimplementowania funkcji cbHandler() , która będzie obsługiwała zmianę opcji wybranej w składniku ComboBox:

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

    Ta funkcja po prostu zastępuje tekst w obszarze TextArea tekstem wybranym w składniku ComboBox, event.target.selectedItem.label .

  15. Wybierz opcje Sterowanie > Testuj film albo naciśnij klawisze Control+Enter, aby skompilować kod i przetestować aplikację Greetings.

    W poniższej sekcji przedstawiono sposób tworzenia tej samej aplikacji za pomocą zewnętrznej klasy ActionScript oraz pliku FLA, który zawiera tylko wymagane składniki w bibliotece.

Tworzenie aplikacji Greetings2 za pomocą zewnętrznego pliku klasy:

  1. Wybierz polecenie Plik > Nowy.

  2. W oknie dialogowym Nowy dokument wybierz typ Plik Flash (ActionScript 3.0), a następnie kliknij przycisk OK.

    Zostanie otwarte nowe okno.

  3. Wybierz opcje Plik > Zapisz, nadaj plikowi Flash nazwę Greetings2.fla , a następnie kliknij przycisk Zapisz.

  4. Przeciągnij każdy z poniższych składników z panelu Składniki do biblioteki:

    • ColorPicker

    • ComboBox

    • RadioButton:

    • TextArea

      W skompilowanym pliku SWF wykorzystywany będzie każdy z tych zasobów, dlatego wymagane jest dodanie ich do biblioteki. Przeciągnij składniki na dół panelu Biblioteka. W miarę dodawania tych składników do biblioteki inne zasoby (takie jak List, TextInput i UIScrollBox) są dodawane automatycznie.

  5. W oknie Właściwości, dla klasy Document Class, wpisz Greetings2 .

    Jeśli program Flash wyświetli ostrzeżenie z informacją o tym, że definicja klasy dokumentu nie została znaleziona, zignoruj to ostrzeżenie. Klasa Greetings2 zostanie zdefiniowana w kolejnych krokach. Ta klasa definiuje główną funkcję dla aplikacji.

  6. Zapisz plik Greetings2.fla.

  7. Wybierz polecenie Plik > Nowy.

  8. W oknie dialogowym Nowy dokument wybierz typ Plik ActionScript, a następnie kliknij przycisk OK.

    Zostanie otwarte nowe okno skryptu.

  9. Wprowadź poniższy kod do okna skryptu:

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

    Skrypt definiuje klasę ActionScript 3.0 o nazwie Greetings2. Skrypt wykonuje następujące czynności:

    • Importuje klasy, które będą używane w pliku. Zwykle te instrukcje importu są dodawane w przypadku odwoływania się do innych klas w kodzie, ale w celu skrócenia zapisu w tym przykładzie przedstawiono import wszystkich w jednym kroku.

    • Deklaruje zmienne, które reprezentują różne typy obiektów składników, które będą dodawane do kodu. Inna zmienna tworzy obiekt tf TextFormat.

    • Definiuje funkcję konstruktora Greetings2() dla klasy. W poniższych krokach do tej funkcji będą dodawane wiersze, a do klasy będą dodawane inne metody.

  10. Wybierz opcje Plik > Zapisz, nadaj plikowi nazwę Greetings2.as , a następnie kliknij przycisk Zapisz.

  11. Dodaj poniższe wiersze kodu, do funkcji Greeting2() :

        createUI(); 
        setUpHandlers(); 
    }

    Funkcja powinna mieć teraz następującą postać:

    public function Greetings2() { 
        createUI(); 
        setUpHandlers(); 
    }
  12. Dodaj poniższe wiersze kodu za nawiasem zamykającym metody 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); 
    }

    Te wiersze wykonują następujące czynności:

    • Inicjują składniki używane w aplikacji.

    • Ustawiają wielkość, pozycję i właściwości każdego składnika.

    • Dodają każdy składnik do stołu montażowego, korzystając z metody addChild() .

  13. Za nawiasem zamykającym metody bldRadioButtons() dodaj poniższy kod dla metody 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; 
    } 
    } 
    }

    Te funkcje definiują programy nasłuchiwania zdarzeń dla składników.

  14. Wybierz opcje Plik > Zapisz, aby zapisać plik.

  15. Wybierz opcje Sterowanie > Testuj film albo naciśnij klawisze Control+Enter, aby skompilować kod i przetestować aplikację Greetings2.

Programowanie i uruchamianie kolejnych przykładów

Po zaprogramowaniu i uruchomieniu aplikacji Greetings użytkownik posiada już podstawową wiedzę, jaka jest wymagana do uruchamiania innych przykładów kodu, jakie zostały przedstawione w niniejszej publikacji. Istotny kod ActionScript 3.0 w każdym przykładzie będzie wyróżniony i omówiony, a użytkownik powinien kopiować poszczególne przykłady z tej publikacji do pliku FLA, a następnie kompilować i uruchamiać plik.