Na wygląd składnika składają się elementy graficzne takie, jak obrys, wypełnienie kolorem, ikony, a także inne składniki. ComboBox na przykład zawiera składnik List, a składnik List zawiera ScrollBar. Razem elementy graficzne składają się na wygląd ComboBox. Jednak wygląd składnika zmienia się w oparciu o jego bieżący stan. Na przykład, CheckBox bez etykiety wygląda w aplikacji użytkownika mniej więcej tak:
CheckBox w normalnym stanie up
Jeśli użytkownik kliknie i przytrzyma przycisk myszy na składniku CheckBox, jego wygląd zmieni się na następujący:
CheckBox w stanie down
Po zwolnieniu przycisku myszy CheckBox powróci do pierwotnego wyglądu; będzie miał on jednak symbol zaznaczenia wskazujący, że został wybrany.
CheckBox w stanie selected
Ogólnie ikony reprezentujące składnik i jego różne stany nazywane są jego
karnacjami
. Wygląd składnika można zmienić w dowolnym lub we wszystkich jego stanach, edytując jego karnacje w programie Flash tak, jak wszystkie pozostałe symbole Flash. Dostęp do karnacji składnika można uzyskać na dwa sposoby. Najprostszym sposobem jest przeciągnięcie składnika na stół montażowy i dwukrotne jego kliknięcie. Powoduje to otwarcie palety karnacji składnika, która dla składnika CheckBox wygląda następująco.
Karnacje składnika CheckBox
Oddzielny dostęp do karnacji składnika można uzyskać także w panelu Biblioteka. Podczas przeciągania składnika na stół montażowy jest on również kopiowany do biblioteki razem z folderem jego zasobów oraz wszystkimi pozostałymi zawartymi w nim składnikami. Na przykład, jeśli ComboBox przeciągnięte zostanie na stół montażowy, panel Biblioteka będzie zawierał także składniki List, ScrollBar i TextInput, które wbudowane są w ComboBox, oraz folder karnacji dla każdego z tych składników i folder Shared Assets, który zawiera elementy współdzielone przez składniki. Karnację dla dowolnego z tych składników można edytować, otwierając folder karnacji danego składnika (ComboBoxSkins, ListSkins, ScrollBarSkins lub TextInputSkins) i dwukrotnie klikając ikonę karnacji, która ma zostać poddana edycji. Dwukrotne kliknięcie np. ComboBox_downSkin powoduje otwarcie karnacji w trybie edycji symbolu tak, jak przedstawione to zostało na poniższej ilustracji:
ComboBox_downSkin
Tworzenie nowej karnacji
Jeśli dla składnika dokumentu utworzony ma zostać nowy wygląd, należy dokonać edycji karnacji składnika w celu zmiany ich sposobu wyświetlania. Aby uzyskać dostęp do karnacji składnika, należy dwukrotnie kliknąć składnik na stole montażowym w celu otwarcia palety jego karnacji. Następnie należy dwukrotnie kliknąć karnację do edycji w celu otwarcia jej w trybie edycji symbolu. Na przykład, dwukrotne kliknięcie na stole montażowym składnika TextArea powoduje otwarcie jego zasobów w trybie edycji symbolu. Aby zmienić wygląd symbolu, należy ustawić element sterujący powiększenia na wartość 400% lub większą i dokonać edycji symbolu. Po zakończeniu zmiana zostanie wprowadzona we wszystkich instancjach składnika w dokumencie. Alternatywnym sposobem jest dwukrotne kliknięcie konkretnej karnacji w panelu Biblioteka w celu otwarcia jej na stole montażowym w trybie edycji symbolu.
Modyfikacji karnacji składnika można dokonać w następujący sposób:
Tworzenie karnacji dla wszystkich instancji
Podczas edycji karnacji składnika domyślnie zmieniany jest wygląd składnika dla wszystkich jej instancji w dokumencie. Jeśli dla tego samego składnika utworzone mają zostać różne wyglądy, należy powielić karnacje do zmiany, nadać im różne nazwy, dokonać ich edycji, a następnie ustawić odpowiednie style w celu ich zastosowania. Więcej informacji zawiera sekcja
Tworzenie karnacji dla wybranych instancji
.
W tym rozdziale opisane zostały sposoby zmiany co najmniej jednej karnacji dla każdego ze składników interfejsu użytkownika. Jeśli w celu zmiany co najmniej jednej z karnacji składnika interfejsu użytkownika wykonana zostanie jedna z tych z procedur, karnacja zostanie zmieniona dla wszystkich instancji w dokumencie.
Tworzenie karnacji dla wybranych instancji
Karnację dla wybranych instancji składnika można utworzyć za pomocą następującej procedury ogólnej:
-
Wybierz karnację w folderze Zasoby składnika w panelu Biblioteka.
-
Powiel karnację i przypisz do niej unikalną nazwę klasy.
-
Dokonaj edycji karnacji w celu nadania jej pożądanego wyglądu.
-
Wywołaj dla instancji składnika metodę
setStyle()
, aby przypisać nową karnację do stylu karnacji.
Poniższa procedura tworzy nową karnację selectedDownSkin dla jednej z dwóch instancji Button.
-
Utwórz nowy plik z dokumentem Flash (ActionScript 3.0).
-
Przeciągnij dwa składniki Button z panelu Składniki na stół montażowy i nadaj im nazwy instancji
aButton
i
bButton
.
-
Otwórz panel Biblioteka, a następnie wewnątrz niego foldery Zasoby składników i ButtonSkins.
-
Kliknij karnację selectedDownSkin, aby ją wybrać.
-
Kliknij prawym klawiszem myszy, aby otworzyć menu kontekstowe i wybierz opcję Powiel.
-
W oknie dialogowym Powiel symbol nadaj nowej karnacji unikalną nazwę, na przykład
Button_mySelectedDownSkin
. Kliknij OK.
-
W folderze Biblioteka > Zasoby składników > ButtonSkins wybierz karnację Button_mySelectedDownSkin i kliknij prawym przyciskiem myszy, aby otworzyć menu kontekstowe. Wybierz opcję Połączenie, aby otworzyć okno dialogowe Właściwości połączenia.
-
Kliknij pole wyboru Eksportuj do ActionScript. Pozostaw zaznaczone pole wyboru Eksport w pierwszej klatce i upewnij się, że nazwa instancji jest unikalna. Kliknij przycisk OK, a następnie ponowienie OK w odpowiedzi na ostrzeżenie, informujące o tym, że definicja klasy nie została odnaleziona i zostanie ona utworzona.
-
W panelu Biblioteka dwukrotnie kliknij karnację Button_mySelectedDownSkin, aby otworzyć ją w trybie edycji symbolu.
-
Klikaj niebieskie wypełnienie na środku karnacji do momentu pojawienia się koloru w wybieraku Koloru wypełnienia w Inspektorze właściwości. Kliknij wybierak koloru i wybierz dla wypełnienia karnacji kolor #00CC00.
-
Kliknij przycisk Wstecz po lewej stronie paska edycji nad stołem montażowym, aby powrócić do trybu edycji dokumentu.
-
W Inspektorze właściwości dla każdego przycisku kliknij kartę Parametry i ustaw parametr toggle na wartość
true
.
-
Dodaj poniższy kod do panelu Operacje w klatce nr 1 na osi czasu.
bButton.setStyle("selectedDownSkin", Button_mySelectedDownSkin);
bButton.setStyle("downSkin", Button_mySelectedDownSkin);
-
Wybierz polecenie Sterowanie > Film tekstowy.
-
Kliknij każdy przycisk. Należy zauważyć, że karnacja dla stanu down (zaznaczony i niezaznaczony) obiektu bButton używa nowego symbolu karnacji.
