UI komponenty
Co je to komponent?
Komponent, někdy také zvaný
SmartClip je MovieClip, který je naprogramovaný pro určitý účel, z
něhož jsou na povrch "vyvedeny" některé proměnné, které
jsou důležité pro chod komponentu. Tyto proměnné pak může animátor
editovat. Komponent si lze představit jako zamčenou černou skříňku
s ovládacím panelem (který však vidí jen animátor). Komponent
ze strany uživatele vypadá jako obyčejný MovieClip.
UI znamená zřejmě User Interface. Komponenty jako takové existují
už od verze 5, ale UI komponenty používají nové funkce ActionScriptu,
takže ve verzi 5 nefungují.
Instanci UI komponentu umístíte na scénu jeho přetažením z okna "Components" (Window -> Components)
Jen doplním, že všechny příkazy ovlivňující UI komponenty naleznete
v sekci "Flash UI Components"
Druhy komponentů
Druhy UI komponentů prakticky vychází z formulářů v jazyce HTML.
- PushButton (tlačítko)
- ComboBox (roletové menu)
- ListBox (roletové menu - trvale otevřené)
- CheckBox (zaškrtávací pole)
- RadioButton (výběrové pole)
- Scrollbar (posuvník)
- SrollPane (něco jako frame - umožňuje zobrazovat MovieClip)
1. Push button
První a nejjednodušší z rodiny UI Komponetů. Jedná se o klasické
tlačítko
Pokud ho přetáhnete na scénu, zobrazí se na panelu "Properties"
okno s názvem "Parameters":
Právě v tomto okně jsou vyvedeny ony editovatelné proměnné. V tomto
případě jen 2.
Metody objektu PushButton:
| getEnabled |
Vrací hodnotu true/false jestli je komponent
zablokovaný |
| getLabel |
Vrací hodnotu popisku |
| setClickHandel |
Nastavuje funkci, která bude volána po kliknutí |
| setEnabled |
Umožňuje zablokovat/odblokovat komponent |
| setLabel |
Nastavuje popisek |
| setSize |
Nastavuje rozměry (W, H) |
2. Combo Box
Volný překlad by byl nejspíš "roletové menu".
Combo Box obsahuje několik položek, ze kterých je možno jednu zvolit.
- Editable (true/false)
Pokud zvolíte "true", půjde, kromě volby jedné možnosti, napsat vlastní
hodnota
- Labels (popisky)
Pokud klepnete na lupu vpravo, otevře se okno, kde je možné definovat
popisky možností
- Data
Zde přiřadíte možnostem hodnoty, které budou nastavovat
- Row Count (číslo)
Počet řádků, které mají být viditelné při rozbalení
- Change Handler (funkce)
Funkce, která má být volána při zvolení položky
function akce() {
gotoAndStop(_root.roletka1.getValue());
}
Zde je použita metoda objektu ComboBox getValue() udávající
hodnotu "Data" vybrané položky. Je samozřejmě nutné instanci komponentu
pojmenovat (roletka1). Pokud teď vybereme napřklad položku "hrušky",
přejde animace na snímek 2.
Metody objektu ComboBox:
| addItem |
Přidá položku: addItem("popisek", data) |
| addItemAt |
Přidá položku na určené místo (index) |
| getItemAt |
Vrací popisek: getItemAt(4).label nebo data:
...(4).data |
| getLength |
Vrací počet položek |
| getRowCount |
Vrací počet řádků při rozbalení |
| getScrollPosition |
Vrací index položky zobrazené nejvýše v seznamu |
| getSelectedIndex |
Vrací index vybrané položky |
| getSelectedItem |
Vrací popisek/data vybrané položky (viz getItemAt) |
| getValue |
Vrací data vybrané položky |
| removeAll |
Odstraní všechny položky |
| removeItemAt |
Odstranění určité položky (index) |
| replaceItemAt |
Přepsat položku: replaceItemAt(4, "novynazev",
data) |
| setChangeHandler |
nastavení funkce, která má být volána při zvolení položky |
| setDataProvider |
Nastaví hodnotu dat položek podle pole Array() |
| setEditable |
viz Editable |
| setItemSymbol |
Zobrazení symbolu v rozbalovacím seznamu |
| setRowCount |
Nastaví počet řádků při rozbalení |
| setSelectedIndex |
Nastaví index vybrané položky |
| setValue |
Nastaví hodnotu editovatelné položky (viz Editable) |
| SortItemsBy |
Seřadí položky buď podle popisku nebo podle dat |
| ...ostatní viz dříve |
|
3. List Box
Pracuje na stejném principu jako Combo Box (v kódu HTML tyto 2
objekty dokonce reprezentuje jeden tag). Jedná se o trvale
rozbalené menu Jediná odlišnost je v možnosti vybrat více
položek najednou (Select Multiple) Metody objektu ListBox:
| getSelectedIndices |
Vrací indexy vybraných prvků zapsané do pole Array |
| getSelectedItems |
Vrací popisky/data vybraných prvků zapsané do pole
Array (syntaxe viz getItemAt) |
| getSelectMultiple |
Sděluje jestli jsou povoleny vícenásobné volby |
| setAutoHideScrollBar |
Nastavuje zobrazení posuvníku (true/false) |
| setSelectedIndices |
Nastavuje vybrané prvky podle indexů zapsaných v poli
Array |
| setSelectMultiple |
Povoluje nebo zakazuje vícenásobné volby |
| ...ostatní viz dříve |
|
4. Check Box
Zašktrávací pole. Nabývá jen 2 hodnot: označeno/neoznačeno (true/false)
- Label
viz dříve
- Initial value (true/false)
Počáteční hodnota
- Label Placement (left/right)
Pozice popisku
- Change Handler
viz dříve
Metody objektu CheckBox:
| getValue |
Získání hodnoty pole (true/false) |
| setValue |
Nastavení hodnoty pole (true/false) |
| setLabelPlacement |
Nastavení pozice popisku ("left"/"right") |
| ...ostatní viz dříve |
|
5. Radio Button
Podobná funkce jako v předchozím případě s tím rozdílem, že Radio Buttonů
musí být 2 a více v jedné skupině a je možné vybrat vždy jen jednu z
možností v jedné skupině.
- Label
viz dříve
- Initial State
viz dříve
- Group Name (název skupiny)
Název skupiny musí být samozřejmě u všech prvků skupiny stejný
- Data
Data přidělená položce
- Label Placement
viz dříve
- Change Handler
viz dříve
Metody objektu RadioButton:
| getGroupName |
Získání názvu skupiny |
| setGroupName |
Nastavení názvu skupiny |
| getState |
Získání stavu (true/false) |
| setState |
Nastavení stavu (true/false) |
| ...ostatní viz dříve |
|
6. Scrollbar
Posuvník, který je možno připojit k textovému poli typu "Multiline".
Pokud scrollbar přesunete "dovnitř" textového pole, automaticky se přichytí
a nastaví se target.
- Target TextField (jméno instance - nikoliv zobrazované
proměnné)
Ovládané textové pole
- Horizontal (true/false)
Pokud zvolíte true, bude posuvník vodorovný
Metody objektu ScrollBar:
| getScrollPosition |
Udává číslo řádku zobrazeného nejvýše |
| setHorizontal |
vodorovný (true) nebo normální (false) posuvník |
| setLargeScroll |
Nastavuje posuv (řádky) v případě kliknutí do dráhy |
| setScrollPosition |
Nastavuje pozici posuvníku (číslo nejvyššího řádku) |
| setScrollProperties |
setScrollProperties(celk. počet řádků,
č. řádku v nejvyšší pozici jezdce, č. řádku v nejnižší
pozici jezdce) |
| setScrollTarget |
Nastaví jméno ovládané instance textového pole |
| setSize |
Nastavuje délku posuvníku v pixelech |
| setSmallScroll |
Nastavuje posuv (řádky) při kliknutí na šipku |
| ...ostatní viz dříve |
|
7. Scroll Pane
Poslední z rodiny UI komponentů. Tento element se tak trochu podobá in
line frame z HTML. Je to okno, které umí uvnitř zobrazovat MovieClipy.
Pokud je MC větší, než okno, zobrazí se patřičný posuvník.
- Scroll Content (Jméno MovieClipu)
Zobrazovaný obsah
- Horizontal Scroll (auto/true/false)
Vodorovný posuvník
- Verical Scroll (auto/true/false)
Svislý posuvník
- Drag Content (true/false)
Povolit/zakázat možnost uchopení MC
Metody objektu ScrollPane:
| getPaneHeight |
Udává šířku pole |
| getPaneWidth |
Udává výšku pole |
| getScrollContent |
Udává název zobrazovaného MovieClipu |
| getScrollPosition |
pozice MC (za příkaz je nutno přidat .x nebo
.y) |
| loadScrollContent |
Načte do pole externí SWF nebo JPEG (URL, [funkce
zavolaná po načtení], [pozice funkce]) |
| refreshPane |
znovunačtení obsahu (např. po změně jeho vlastností) |
| setDragContent |
Povolit/zakázat možnost uchopení MC |
| setHScroll |
Zobrazení vodorovného posuvníku (auto/true/false) |
| setVScroll |
Zobrazení svislého posuvníku (auto/true/false) |
| setScrollContent |
Nastavení zobrazovaného MC |
| setScrollPosition |
Nastavení pozice MC (viz getScrollPosition) |
| setSize(š, v) |
Nastavení velikosti pole |
| ...ostatní viz dříve |
|
Stylování UI komponentů
Stylování komponentů považuji za jejich nejsilnější zbraň. Žel bohu se
jedná převážně jen o změnu barvy toho kterého prvku. Existuje několik
možností stylování 1. Globální
Týká se veškerých komponentů v animaci. Používá se objektu
globalStyleFormat. Malý příklad:
globalStyleFormat.arrow = 0xFF0000;
globalStyleFormat.applyChanges();
V prvním řádku je definována vlastnost objektu globalStyleFormat "arrow" jako
hexadecimální barevná hodnota (v našem případě červená) Následuje
metoda applyChanges(), která aplikuje změny. Důsledek bude takový, že
veškeré šipky (ComboBox, ScrollBar, ...) budou obarveny na červeno.
Povšimněte si, že objekt globalStyleFormat nepotřebuje konstruktor (viz
Objekty). 2.
Skupinové
Jak již víte, objekt globalStyleFormat ovlivňuje všechny instance
komponentů na scéně. My si ale teď vytvoříme vlastní objekt, který
bude ovlivňovat jen určitou skupinu komponentů.
skupina1 = new FStyleFormat();
skupina1.addListener(radio1);
skupina1.addListener(radio2);
skupina1.radioDot = 0xFF0000;
skupina1.applyChanges();
Zde již musíme použít konstruktor "new" pro vytvoření svého objektu. Dále musíme nastavit, kterých
instancí se bude formátování týkat addListener(nazev instance).
Přirozeně je nutné instance pojmenovat. Opačný efekt má metoda
removeListener(název instance). Ve 4. řádku pak definujeme
vlastnost radioDot jako opět červenou barvu. Nakonec musíme opět
aplikovat změny. Konečný efekt bude obarvení teček RadioButtonů "radio1"
a "radio2" 3. Přímé
Třetí možnost je přímé adresování vlastnosti danému komponentu:
názevInstance.setStyleProperty("vlastnost", hodnota);
Myslím, že je to víc než jasné. Jen nezapomeňte uzavřít název vlastnosti do
uvozovek, aby nebyl chápán jako proměnná.
Malá ukázka:
seznam1.setStyleProperty("arrow", 0xFF0000);
Tento příkaz tedy obarví na červeno šipku v instanci komponentu "seznam1
Seznam vlastností:
| arrow |
Barva šipky |
| background |
Barva pozadí |
| backgroundDisabled |
Barva pozadí u neaktivního komponentu |
| check |
Barva "fajfky" [√] u CheckBox |
| darkshadow |
Barva tmavého stínu |
| embedFonts [true/false] |
Použití přibaleného fontu (font musí být již přibalen do
některého textového pole, nebo musí být umístěn v knihovně a musí být
definován font komponentu pomocí textFont) |
| face |
Barva pozadí tlačítek a vnitřních ploch scrollbarů |
| fadeRate |
Postupné rozsvícení (ms) vybrané položky u Combo a ListBox |
| PopUpFade |
Postupné objevení (ms) seznamu u ComboBox |
| foregroundDisabled |
Obarvení šipek neaktivního komponentu |
| highlight |
Obarvení plochy "highlight" |
| highlight3D |
Obarvení plochy "highlight 3D" |
| radioDot |
Barva tečky RadioButton komponentu |
| scrollTrack |
Barva dráhy posuvníku |
| selection |
barva výběru u ComboBox a ListBox |
| selectionDisabled |
Barva vybrané položky u neaktivního komponentu ListBox |
| selectionUnfocused |
Barva vybrané položky ListBox, který není právě editován |
| shadow |
Barva stínu |
| textAlign |
Zarovnání textu ("left" / "right") |
| textBold |
Tučný text (true/false) |
| textColor |
Barva textu |
| textDisabled |
Barva textu neaktivního komponentu |
| textFont |
Použitý font ("Arial" / "Verdana" /...) |
| textIndent |
Levé odsazení textu (px) |
| textItalic |
Kurzíva (true/false) |
| textLeftMargin |
Levý okraj textu (px) |
| textRightMargin |
Pravý okraj textu (px) |
| textSelected |
Text vybrané položky u ComboBox a ListBox |
| textSize |
Velikost textu (px) |
| textUnderline |
Podtržený text (true/false) |
Obrázek některých nejasných ploch:
|
