to get the file

Systemy multimedialne
Instrukcja 2
Komponenty do tworzenia
interfejsu użytkownika
w środowisku Flash
Opracował: mgr inż. Karol Wieczorek
1. Wprowadzenie
Środowisko Flasha oprócz przybornika z narzędziami udostępnia wiele gotowych do
wykorzystania komponentów, które programista może wykorzystać przy tworzeniu interfejsu
użytkownika. Postaram się omówić kilka z nich.
Aby otworzyć zakładkę z komponentami, musimy w menu wybrać opcje:
Window->Components, lub użyć skrótu klawiszowego Ctrl+F7. Do zarządzania parametrami
komponentu warto korzystać z tzw. Inspektora komponentów. Uaktywniamy go przez
wybranie: Window -> Component Inspektor, lub skrót Alt+F7. Mamy do wyboru kilka
pakietów z komponentami, ale nas będzie najbardziej interesował pakiet User Interface.
Kiedy rozwiniemy listę widzimy następujące pole:
Z tej zakładki możemy już metodą Drag&Drop tworzyć elementy na scenie. Każdej
instancji komponentu należy nadać odrębną nazwę (zakładka Properties, pole Instance
Name), aby móc ją później oprogramować w języku Action Script.
2. Słów kilka o najważniejszych komponentach
a) Button
Jest to komponent spełniający rolę przycisku. Jego głównym zadaniem jest reagować
na wciśnięcie go. Wtedy ten komponent generuje zdarzenie on_Press. Wiedząc o tym
możemy odpowiednio zaprogramować generowane zdarzenie przycisku. Zdarzeń na które
reaguje Button jest więcej (puszczenie przycisku, przeciąganie, zdarzenie kiedy kursor jest
nad przyciskiem itd.), ale można o nich poczytać w dokumentacji lub w zakładce Help.
Najważniejszym z parametrów, jakie można nadać temu komponentowi jest etykieta,
którą pojawia się na danym przycisku. Daną etykietę można programowo zmieniać, co
pokaże przykład podany w dalszej części instrukcji.
b) CheckBox
Ten komponent również generuje zdarzenia, które można oprogramować, ale jego
główną funkcją jest umożliwianie użytkownikowi dokonywania tzw. wielokrotnego wyboru.
Sprawdzanie pól które zostały wybrane może być wykonane po np.: wciśnięciu jakiegoś
przycisku. W parametrach możemy ustawić: etykietę, umiejscowienie etykiety względem
pola, oraz domyślny stan komponentu (pole selected). Sprawdzanie dokonujemy za pomocą
następującej instrukcji:
if (nazwa.selected==true){
Instrukcje;
}
c) RadioButton
Komponent ten jest odpowiednikiem pola jednokrotnego wyboru. Posiada następujące
parametry:
 Data – wartość, jaką zwraca parametr RadioGroup, po wybraniu danego pola,
 groupName – nazwa grupy, do której dane pole należy
 kolejne są analogiczne do pól CheckBox
Przy sprawdzaniu można szukać które pole jest wciśnięte, albo badać dane, jakie zwraca
grupa zrzeszająca dane pola RadioButton:
nazwaGrupy.selectedData;
d) ComboBox
Komponent ten jest listą rozwijalną. Korzystamy z niego w taki sposób, że w
parametrze data wprowadzamy dane, jakie będą zwracane po wybraniu z listy odpowiedniej
etykiety label, które również należy wprowadzić. Najwygodniej uczynić to za pomocą
inspektora komponentów. Aby sprawdzić programowo które dane zostaną zwrócone po
wyborze użytkownika, używamy instrukcji:
nazwa.value;
Pozostałe parametry to opcja editable, która pozwala użytkownikowi wpisywać dane
do listy, lub tego zabrania. Ostatni z parametrów to rowCount, który określa ile max wierszy
ma być widoczne po rozwinięciu listy.
e) Label
Komponent ten jest etykietą, którą można edytować programowo w różnych
sytuacjach. Jako parametry możemy włączyć lub wyłączyć obsługę znaczników HTML,
wpisać domyślny napis, oraz włączyć lub wyłączyć opcję automatycznego doboru rozmiaru.
f) TextInput
Jest to pole tekstowe z ramką, służące do pobierania danych od użytkownika, lub do
wyświetlania tekstów1. W parametrach dostępne są opcje włączenia lub wyłączenia edycji
pola przez użytkownika, wybór tekstu, czy ma być wyświetlany jawnie, czy tez ma być to
pole tajne z hasłem (zamiast liter mamy gwiazdki), oraz możemy wpisać domyślnie
wyświetlany tekst. Pobieranie danych z pola realizuje instrukcja:
nazwa.text;
g) TextArea
Jest to „większy” brat komponentu TextInput, z tą różnicą, że może przyjmować wiele
linijek tekstu (opcja ustawiana w parametrach), oraz może wyświetlać tekst formatowany za
pomocą znaczników HTML co również można włączyć, bądź wyłączyć.
3. Podstawy języka ActionScript
W niniejszym podpunkcie opiszę wyłącznie potrzebne konstrukcje i wskazówki, aby
móc wykonać zadanie zawarte w niniejszej instrukcji.
Kod języka Action Script wpisujemy najlepiej w osobnej, pustej wartwie na listwie
czasowej, która jest umieszczona najwyżej. Kod wpisujemy zaznaczając pustą klatkę na
podanej warstwie w zakładce Actions.
Aby oprogramować zdarzenie generowane przez komponent, należy skorzystać z
następującego wzoru:
Nazwa.onEvent = function(){
kod instrukcji;
}
1
Można do tego celu również wykorzystać pole tekstowe dostępne w przyborniku
Gdzie nazwa jest nazwą instancji obiektu, a onEvent jest zdarzeniem, które chcemy
oprogramować np.: onPress, czy onChange. Listę obsługiwanych zdarzeń, metod, oraz
parametrów można znaleźć w dokumentacji danego komponentu w zakładce Actions.
Instrukcje warunkowe, pętle itp. wyglądają podobnie jak w języku C.
Do pól obiektów odwołujemy się za pomocą operatora: „.” (kropki).
Przykładowy kod w języku Action Script może wyglądać tak:
guzik_btn.onRelease = function(){
if(check_chb.selected==true){
guzik_btn.label=pole_txt.text;
} else {
guzik_btn.label=”Nie wybrano”;
}
}
Aby zobaczyć działanie powyższego kodu należy:
Na scenie utworzyć instancje komponentów Button oraz CheckBox, oraz TextInput.
Następnie należy nadać instancjom nazwy (zakładka Properties) odpowiednio guzik_btn, oraz
check_chb i pole_txt. Następnie dodajemy na listwie czasowej nową warstwę i nadajemy jej
nazwę np.: Action. Należy się upewnić, że dana warstwa jest na samej górze! Następnie
zaznaczamy 1 klatkę warstwy Action, i w zakładce Actions wpisujemy powyższy kod.
Możemy już uruchomić plik swf, poprzez skrót Ctrl+Enter i cieszyć się z działania programu
;) .
4. Zadania samodzielne
a) Należy wykonać interfejs pobierający od użytkownika dane osobowe, a następnie
po zatwierdzeniu danych przyciskiem, wyświetlimy je w komponencie TextArea.
Założenia:
 Imię, nazwisko, datę urodzenia pobieramy za pomocą komponentów TextInput,
 Płeć użytkownik wybiera za pomocą komponentów RadioButton,
 Zainteresowania użytkownik wybiera za pomocą pól CheckBox,
 Zawód użytkownik wybiera spośród elementów listy ComboBox,
 Dane użytkownik zatwierdza przyciskiem, a następnie dane te pojawiają się wewnątrz
komponentu TextArea.
b) Należy zmodyfikować poprzedni projekt, aby zatwierdzanie danych było
automatyczne (poprzez zdarzenia komponentów), a przez to dane w komponencie TextArea
powinny być uzupełniane „na bieżąco”.