|
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:
-
Wybierz polecenie Plik > Nowy.
-
W oknie dialogowym Nowy dokument wybierz typ Plik Flash (ActionScript 3.0), a następnie kliknij przycisk OK.
Zostanie otwarte nowe okno.
-
Wybierz opcje Plik > Zapisz, nadaj plikowi Flash nazwę
Greetings.fla
, a następnie kliknij przycisk Zapisz.
-
Na panelu Składniki Flash wybierz składnik TextArea i przeciągnij go na stół montażowy.
-
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.
-
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:
-
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
.
-
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.
-
Zapisz plik.
-
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.
-
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();
-
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.
-
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.
-
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
.
-
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:
-
Wybierz polecenie Plik > Nowy.
-
W oknie dialogowym Nowy dokument wybierz typ Plik Flash (ActionScript 3.0), a następnie kliknij przycisk OK.
Zostanie otwarte nowe okno.
-
Wybierz opcje Plik > Zapisz, nadaj plikowi Flash nazwę
Greetings2.fla
, a następnie kliknij przycisk Zapisz.
-
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.
-
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.
-
Zapisz plik Greetings2.fla.
-
Wybierz polecenie Plik > Nowy.
-
W oknie dialogowym Nowy dokument wybierz typ Plik ActionScript, a następnie kliknij przycisk OK.
Zostanie otwarte nowe okno skryptu.
-
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.
-
Wybierz opcje Plik > Zapisz, nadaj plikowi nazwę
Greetings2.as
, a następnie kliknij przycisk Zapisz.
-
Dodaj poniższe wiersze kodu, do funkcji
Greeting2()
:
createUI();
setUpHandlers();
}
Funkcja powinna mieć teraz następującą postać:
public function Greetings2() {
createUI();
setUpHandlers();
}
-
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()
.
-
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.
-
Wybierz opcje Plik > Zapisz, aby zapisać plik.
-
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.
|
|
|