Zobrazit nápovědu v souboru

Transkript

Používání komponent jazyka
ACTIONSCRIPT® 3.0
Právní upozornění
Právní upozornění
Právní upozornění viz http://help.adobe.com/cs_CZ/legalnotices/index.html.
Poslední aktualizace 13.5.2011
iii
Obsah
Kapitola 1: Úvod
Cílová skupina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Systémové požadavky
................................................................................................. 1
O této dokumentaci
................................................................................................... 1
Typografické zásady
................................................................................................... 2
Termíny používané v této příručce
Další zdroje informací
..................................................................................... 2
................................................................................................. 2
Kapitola 2: O komponentách jazyka ActionScript 3.0
Výhody používání komponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Typy komponent
...................................................................................................... 4
Přidání do dokumentu a odstranění z dokumentu
Zjištění verze komponenty
............................................................................................ 8
Model zpracování událostí jazyka ActionScript 3.0
Jednoduchá aplikace
...................................................................... 6
...................................................................... 9
.................................................................................................. 9
Kapitola 3: Práce s komponentami
Architektura komponenty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Práce se soubory komponenty
Ladění aplikací komponenty
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Nastavení parametrů a vlastností
Knihovna
Změna velikosti komponent
Živý náhled
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Zpracování událostí
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Práce se seznamem zobrazení
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Práce s instancí FocusManager
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Práce s komponentami na bázi seznamu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Práce s objektem DataProvider
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Práce s objektem CellRenderer
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Usnadnění přístupu ke komponentám
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Kapitola 4: Používání komponent uživatelského rozhraní
Použití komponenty Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Použití komponenty CheckBox
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Použití komponenty ColorPicker
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Používání komponenty ComboBox
Používání komponenty DataGrid
Používání komponenty Label
Použití komponenty List
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Používání komponenty NumericStepper
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Používání komponenty ProgressBar
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Používání komponenty RadioButton
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
iv
POUŽÍVÁNÍ KOMPONENT JAZYKA ACTIONSCRIPT 3.0
Obsah
Používání komponenty ScrollIPane
Používání komponenty Slider
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Používání komponenty TextArea
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Používání komponenty TextInput
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Používání komponenty TileList
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Používání komponenty UILoader
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Používání komponenty UIScrollBar
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Kapitola 5: Přizpůsobení komponent uživatelského rozhraní
Co je přizpůsobení komponent uživatelského rozhraní . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Nastavení stylů
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Co jsou vzhledy
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Přizpůsobení komponenty Button
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Přizpůsobení komponenty CheckBox
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Přizpůsobení komponenty ColorPicker
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Přizpůsobení komponenty ComboBox
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Přizpůsobení komponenty DataGrid
Přizpůsobení komponenty Label
Přizpůsobení komponenty List
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Přizpůsobení komponenty NumericStepper
Přizpůsobení komponenty ProgressBar
Přizpůsobení komponenty RadioButton
Přizpůsobení komponenty ScrollPane
Přizpůsobení komponenty Slider
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Přizpůsobení komponenty TextArea
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Přizpůsobení komponenty TextInput
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Přizpůsobení komponenty TileList
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Přizpůsobení komponenty UILoader
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Přizpůsobení komponenty UIScrollBar
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Kapitola 6: Použití komponenty FLVPlayback
Použití komponenty FLVPlayback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Přizpůsobení komponenty FLVPlayback
Použití souboru SMIL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Kapitola 7: Používání komponenty titulkování FLVPlayback
Používání komponenty FLVPlaybackCaptioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Používání titulků Timed Text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Používání startovacích bodů s titulkováním
Přehrávání více souborů FLV s titulky
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Přizpůsobení komponenty FLVPlaybackCaptioning
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
1
Kapitola 1: Úvod
Software Adobe®Flash® CS5 Professional je standardním vývojářským nástrojem pro vytváření oslnivých zážitků na
webu. Komponenty jsou stavebními bloky pro bohaté internetové aplikace, které tyto zážitky nabízejí. Komponenta je
filmový klip s parametry umožňujícími upravit komponentu metodami, vlastnostmi a událostmi jazyka Adobe®
ActionScript® během vývoje v aplikaci Flash nebo za běhu. Komponenty jsou navrhnuty tak, aby vývojářům umožnily
opětovné používání a sdílení kódů, a aby došlo ke zjednodušení složité funkčnosti, kterou by návrháři mohli používat
a upravovat bez použití jazyka ActionScript.
Komponenty umožňují snadné a rychlé vytváření robustních aplikací s konzistentním vzhledem a chováním. Tato
příručka popisuje tvorbu aplikací pomocí komponent jazyka Adobe ActionScript 3.0. Referenční příručka jazyka
Adobe® ActionScript® 3.0 a jeho komponent popisuje aplikační programové rozhraní (API) každé komponenty.
Lze používat komponenty vytvořené společností Adobe®, stahovat komponenty vytvořené jinými vývojáři či vytvářet
vlastní.
Cílová skupina
Tato příručka je určena pro vývojáře vytvářející Flash aplikace, kteří chtějí používáním komponent urychlit vývoj. Měli
byste již mít zkušenosti s vývojem aplikací ve formátu Flash a psaním skriptu v jazyce ActionScript.
Pokud máte se psaním skriptu jazyka ActionScript méně zkušeností, můžete přidat komponenty do dokumentu,
nastavit jejich parametry v inspektoru vlastností nebo inspektoru komponent a jejich události zpracovat pomocí
panelu Chování. Můžete například připojit ke komponentě Button chování Jít na webovou stránku, které při klepnutí
na tlačítko otevře URL ve webovém prohlížeči, aniž by bylo potřeba vytvářet kód jazyka ActionScript.
Pokud jste programátor a chcete vytvářet náročnější aplikace, můžete komponenty vytvářet dynamicky. Nastavte
vlastnosti pomocí skriptu jazyka ActionScript, vyvolejte metody za běhu a události zpracujte pomocí posluchače
událostí.
Další informace viz „Práce s komponentami“ na stránce 17.
Systémové požadavky
Komponenty Flash nemají systémové požadavky překračující požadavky pro aplikaci Flash.
Jakýkoli soubor SWF využívající komponenty programu Flash CS3 nebo novější, je nutné prohlížet pomocí programu
Adobe® Flash® Player 9.0.28.0. či novějším a musí být publikován pro jazyk ActionScript 3.0 (lze to zjistit na kartě Flash,
pomocí příkazů Soubor > Nastavení publikování).
O této dokumentaci
Tento dokument vysvětluje podrobnosti používání komponent při vývoji aplikací Flash. Předpokládá se vaše obecná
znalost programu Flash a jazyka ActionScript 3.0. Dokumentace o programu Flash a s ním spojených produktech jsou
dostupné samostatně.
Úvod
Tento dokument je dostupný ve formátu PDF a jako online nápověda. Chcete-li zobrazit nápovědu online, spusťte
program Flash a vyberte možnosti Nápověda > Nápověda programu Flash > Používání komponent jazyka Adobe
ActionScript 3.0.
Více informací o programu Flash naleznete v následujících dokumentech:
• Používání aplikace Flash
• Příručka pro vývojáře v jazyce ActionScript 3.0
• Referenční příručka jazyka ActionScript 3.0 aplikace Flash Professional
Typografické zásady
V příručce jsou použity následující typografické zásady:
• Kurzíva označuje hodnotu, která by měla být nahrazena (například v cestě ke složce).
•
Kód označuje kód jazyka ActionScript včetně způsobu a názvů vlastností.
• Kód kurzívou označuje položku kódu, kterou je třeba nahradit (např. parametry jazyka ActionScript).
• Tučné písmo označuje hodnotu, kterou jste zadali.
Termíny používané v této příručce
V příručce jsou použity následující termíny:
při spuštění Běží-li kód v programu Flash Player.
během vytváření Při práci ve vývojovém prostředí programu Flash.
Další zdroje informací
Kromě obsahu uvedeného v těchto příručkách poskytuje společnost Adobe pravidelně aktualizované články, nápady
pro vývoj a příklad prostřednictvím vývojového centra Adobe Developer Center a návrhářského centra Adobe Design
Center.
Další ukázky komponent naleznete na adrese www.adobe.com/go/learn_fl_samples_cz.
Adobe Developer Center
Vývojové centrum Adobe Developer Center je zdrojem nejnovějších informací o jazyce ActionScript, článků o
vyvinutých aplikacích z reálného světa a informací o důležitých objevujících se problémech. Navštivte vývojové
centrum Adobe na adrese www.adobe.com/go/flash_devcenter_cz.
Adobe Design Center
Poznejte novinky digitálního designu a pohyblivé grafiky. Procházejte práce známých umělců, objevujte nové
návrhářské trendy a zdokonalujte své dovednosti pomocí výukových programů, klíčových pracovních postupů a
pokročilých technik. Dvakrát měsíčně si můžete prohlédnout nejnovější výukové programy a články a inspirující
exponáty galerií. Navštivte návrhářské centrum Adobe na adrese www.adobe.com/go/fl_designcenter_cz.
2
3
Kapitola 2: O komponentách jazyka
ActionScript 3.0
Komponenty aplikace Adobe® Flash® Professional CS5 jsou filmové klipy s parametry, které vám umožňují měnit
jejich vzhled a chování. Komponenta může být jednoduchý ovladač uživatelského rozhraní, např. RadioButton nebo
CheckBox, nebo může obsahovat nějaký obsah, např. List nebo DataGrid.
Komponenty umožňují snadnou a rychlou tvorbu robustních aplikací Flash s konzistentním chováním a vzhledem.
Místo vytváření vlastních tlačítek, kombinovaných polí a seznamů můžete použít komponenty programu Flash, které
tyto ovládací prvky implementují. Jednoduše je přetáhněte z panelu Komponenty do dokumentu vaší aplikace. Můžete
také snadno přizpůsobit vzhled a styl těchto komponent, aby vyhovovaly designu vašich aplikací.
I když toto vše můžete zvládnout bez pokročilých znalostí jazyka ActionScript, pomocí jazyka ActionScript 3.0 můžete
také pozměnit chování komponenty nebo implementovat zcela nové chování. Každá komponenta má jedinečnou sadu
metod, vlastností a událostí jazyka ActionScript, které tvoří její aplikační programovací rozhraní (API). API umožňuje
vytvářet komponenty a manipulovat s nimi za běhu aplikace.
API také umožňuje vytvářet vaše vlastní, nové komponenty. Ze serveru Adobe Exchange si na adrese
www.adobe.com/go/flash_exchange_cz můžete stáhnout komponenty, které vytvořili členové komunity Flash.
Informace o vytváření komponent najdete na adrese http://www.adobe.com/go/learn_fl_creating_components_cz.
Architektura komponent jazyka ActionScript 3.0 zahrnuje třídy, na kterých jsou všechny komponenty založeny,
vzhledy a styly, které umožňují přizpůsobení vzhledu, model zpracovávání událostí, správu aktivace pro vstup,
rozhraní usnadnění přístupu a další.
Poznámka: Aplikace Flash CS5 zahrnuje komponenty jazyka ActionScript 2.0 i komponenty jazyka ActionScript 3.0.
Tyto dvě sady komponent nelze kombinovat. Pro danou aplikaci musíte nastavit jednu sadu nebo druhou. Program Flash
CS5 předkládá komponenty jazyka ActionScript 2.0 nebo komponenty jazyka ActionScript 3.0, podle toho, jestli otevřete
soubor jazyka ActionScript 2.0 nebo ActionScript 3.0. Při vytváření nového dokumentu Flash musíte zadat buď Soubor
Flash (ActionScript 3.0) nebo Soubor Flash (ActionScript 2.0). Když otevřete existující dokument, program Flash ověří
nastavení pro publikování a určí, kterou sadu komponent použít. Informace o komponentách jazyka ActionScript 2.0
najdete v části Používání komponent jazyka Adobe® ActionScript® 2.0.
Kompletní seznam komponent jazyka ActionScript 3.0 programu Flash viz „Typy komponent“ na stránce 4.
Výhody používání komponent
Komponenty umožňují oddělit proces navrhování vaší aplikace od procesu kódování. Umožňují vývojovým
pracovníkům vytvářet funkce, které mohou designéři použít v aplikacích. Vývojoví pracovníci mohou zapouzdřit
často používané funkce do komponent a designéři mohou přizpůsobit velikost, umístění a chování komponent
změnou jejich parametrů. Mohou také změnit vzhled komponenty úpravou jejích grafických prvků, neboli vzhledů.
Komponenty sdílejí podstatné funkce jako styly, vzhledy a správu aktivace. Když přidáte do aplikace první
komponentu, zaberou tyto podstatné funkce přibližně 20 kilobytů velikosti souboru. Když přidáte další komponenty,
budou sdílet toto počáteční přidělení paměti, a tím sníží nárůst velikosti vaší aplikace.
O komponentách jazyka ActionScript 3.0
V této části jsou nastíněny některé výhody komponent jazyka ActionScript 3.0.
Výkon jazyka ActionScript 3.0 poskytuje výkonný, objektově orientovaný programovací jazyk, který je významným
krokem ve vývoji schopností aplikace Flash Player. Tento jazyk je určen k tvorbě výkonných internetových aplikací
založených na opakovaně použitelném kódu. Jazyk ActionScript 3.0 je založen na mezinárodně standardizovaném
skriptovacím jazyku ECMAScript a je v souladu se specifikacemi třetího vydání jazyka ECMAScript (ECMA-262).
Podrobný úvod do jazyka ActionScript 3.0 naleznete v Průvodci programátora jazyka ActionScript 3.0. Referenční
informace o jazyce naleznete v Referenční příručce jazyka ActionScript 3.0.
Komponenty uživatelského rozhraní na bázi FLA poskytují snadný přístup ke vzhledům pro jednoduché přizpůsobení
při vyvíjení. Tyto komponenty poskytují také styly, včetně stylů vzhledů, které umožňují přizpůsobit aspekty vzhledu
komponent a načítat vzhledy při běhu. Další informace naleznete v části „Přizpůsobení komponent uživatelského
rozhraní“ na stránce 99 a v Referenční příručce jazyka ActionScript 3.0.
Nová komponenta FVLPlayback dodá komponentu FLVPlaybackCaptioning spolu s podporou celé obrazovky,
zlepšeným živým náhledem, vzhledy, které umožňují přidávat barvy a nastavení hodnoty alpha, a zlepšené stahování
souborů FLV a funkce rozvržení.
Inspektor vlastnosti a Inspektor komponenty umožňují měnit parametry komponenty během vyvíjení v programu
Flash. Další informace viz „Práce se soubory komponenty“ na stránce 19 a „Nastavení parametrů a vlastností“ na
stránce 21.
Dialogové okno Nová kolekce Komponenty ComboBox, List a TileList umožňují zaplnit svou vlastnost
dataProvider prostřednictvím uživatelského rozhraní. Další informace viz „Vytvoření objektu DataProvider“ na
stránce 30.
Model událostí jazyka ActionScript 3.0 umožňuje vaší aplikaci poslouchat události a vyvolávat manipulační programy
událostí, které budou reagovat. Další informace viz „Model zpracování událostí jazyka ActionScript 3.0“ na stránce 9
a „Zpracování událostí“ na stránce 24.
Třídy Správce poskytují snadný způsob ovládání aktivace pro vstup a správy stylů v aplikaci. Další informace
naleznete v Referenční příručce jazyka ActionScript 3.0.
Základní třída UIComponent poskytuje základní metody, vlastnosti a události komponentám, které ji rozšiřují.
Všechna uživatelská rozhraní jazyka ActionScript 3.0 dědí ze třídy UIComponent. Další informace naleznete pod
třídou UIComponent v Referenční příručce jazyka ActionScript 3.0.
Používání souborů SWC v komponentách uživatelského rozhraní založených na formátu FLA poskytují definice
jazyka ActionScript jako datový zdroj uvnitř časové osy komponenty pro urychlení kompilace.
Snadno rozšířitelná hierarchie třídy umožňuje pomocí jazyka ActionScript 3.0 vytvářet jedinečné jmenné prostory,
importovat třídy podle potřeby a snadno vytvářet podtřídy pro rozšíření komponent.
Další informace naleznete v Referenční příručce jazyka ActionScript 3.0.
Poznámka: Program Flash CS5 podporuje komponenty na bázi FLA i SWC. Další informace viz „Architektura
komponenty“ na stránce 17.
Typy komponent
Komponenty Flash se instalují spolu s programem Flash CS5.
Komponenty jazyka ActionScript 3.0 zahrnují následující komponenty uživatelského rozhraní:
4
5
Button
Seznam
TextArea
CheckBox
NumericStepper
TextInput
ColorPicker
RadioButton
TileList
ComboBox
ProgressBar
UILoader
DataGrid
ScrollPane
UIScrollBar
Label
Jezdec
Kromě komponent uživatelského rozhraní patří mezi komponenty jazyka ActionScript 3.0 následující komponenty a
podpůrné třídy:
• Komponenta FLVPlayback (fl.video.FLVPlayback), která je komponentou na bázi SWC.
Komponenta FLVPlayback umožňuje pohotově vložit do vaší aplikace Flash přehrávač videa k přehrávání
postupného streamingu videa přes protokol HTTP, ze služby Adobe® Flash® Video Streaming Service (FVSS) nebo
ze serveru Adobe Macromedia® Flash® Media Server (FMS). Další informace viz „Použití komponenty
FLVPlayback“ na stránce 136.
• Vlastní komponenty uživatelského rozhraní FLVPlayback, které jsou na bázi FLA a fungují s verzí jazyka
ActionScript 2.0 i ActionScript 3.0 komponenty FLVPlayback. Další informace viz „Použití komponenty
FLVPlayback“ na stránce 136.
• Komponenta Captioning FLVPlayback, která poskytuje uzavřené titulkování pro třídu FLVPlayback. Viz
„Používání komponenty titulkování FLVPlayback“ na stránce 173.
Úplný seznam komponent jazyka ActionScript 3.0 a jejich podpůrných tříd naleznete v Referenční příručce jazyka
ActionScript 3.0.
Zobrazení komponent Flash:
Můžete zobrazit komponenty Flash jazyka ActionScript 3.0 v panelu Komponenty pomocí následujících kroků.
1 Spusťte program Flash.
2 Vytvořte nový soubor Flash (ActionScript 3.0) nebo otevřete stávající dokument Flash, v jehož nastavení
Publikování je nastavena volba jazyka ActionScript 3.0.
3 Chcete-li otevřít panel Komponenty, zvolte příkaz Okno > Komponenty, pokud již není otevřený.
Panel Komponenty s komponenty uživatelského rozhraní
Můžete si také ze serveru Adobe Exchange na adrese http://www.adobe.com/go/flash_exchange_cz stáhnout další
komponenty. Chcete-li instalovat komponenty stažené ze serveru Exchange, stáhněte si a instalujte nástroj Adobe®
Extension Manager z adresy http://www.adobe.com/go/exchange_cz. Klepněte na odkaz Adobe Exchange a
vyhledejte odkaz Extension Manager.
Každá komponenta se může objevit v panelu Komponenty v aplikaci Flash. K instalaci komponent v počítači se
systémem Windows ® nebo Macintosh® použijte následující postup.
Instalace komponent v počítači se systémem Windows nebo Macintosh:
1 Ukončete aplikaci Flash.
2 Soubor SWC nebo FLA obsahující danou komponentu umístěte do následující složky na pevném disku:
• Windows:
C:\Program Files\Adobe\Adobe Flash CS5\jazyk\Configuration\Components
• Macintosh:
HD Macintosh:Aplikace:Adobe Flash CS5:Konfigurace:Komponenty
3 Spusťte program Flash.
4 Chcete-li zobrazit komponentu v panelu Komponenty, pokud již není otevřený, zvolte příkaz Okno >
Komponenty.
Další informace o souborech s komponentami viz „Práce se soubory komponenty“ na stránce 19
Přidání do dokumentu a odstranění z dokumentu
Když přetáhnete z panelu Komponenty do vymezené plochy komponentu na bázi FLA, program Flash importuje do
knihovny upravitelný filmový klip. Když přetáhnete do vymezené plochy komponentu na bázi SWC, program Flash
importuje do knihovny sestavený klip. Jakmile byla komponenta importována do knihovny, můžete do vymezené
plochy přetáhnout její instance, buď z panelu Knihovna nebo z panelu Komponenty.
6
Přidávání komponent během vytváření
Komponentu přidáte do dokumentu tak, že ji přetáhnete z panelu Komponenty. U každé instance komponenty
můžete nastavit vlastnosti v Inspektoru vlastností nebo na kartě Parametry v Inspektoru komponenty.
1 Zvolte příkaz Okno > Komponenty.
2 Buď poklepejte na komponentu v panelu Komponenty nebo ji přetáhněte do vymezené plochy.
3 Ve vymezené ploše vyberte komponentu.
4 Pokud není inspektor Vlastnosti vidět, zvolte Okna > Vlastnosti > Vlastnosti.
5 V Inspektoru vlastností zadejte u instance komponenty název instance.
6 Zvolte příkaz Okno > Inspektor komponenty a zvolte kartu Parametry, kde můžete určit parametry dané instance.
Další informace viz „Nastavení parametrů a vlastností“ na stránce 21.
7 Komponentu můžete podle potřeby změnit úpravou hodnot její šířky (W:) a výšky (H:).
Další informace o změně velikosti určitých typů komponent viz „Přizpůsobení komponent uživatelského rozhraní“
na stránce 99.
8 Chcete-li sestavit dokument a vidět výsledky vašich nastavení, zvolte příkaz Ovládání > Testovat film nebo stiskněte
kombinaci kláves Ctrl+Enter.
Můžete změnit i barvu a formátování textu komponenty nastavením jejích vlastností stylu nebo přizpůsobením
jejího vzhledu úpravou vzhledů komponenty. Další informace o těchto tématech viz „Přizpůsobení komponent
uživatelského rozhraní“ na stránce 99.
Přetáhnete-li komponentu do vymezené plochy během vyvíjení, můžete se na ni odkazovat pomocí názvu instance
(např. myButton).
Přidávání komponent pomocí jazyka ActionScript za běhu
Chcete-li přidat komponentu do dokumentu za běhu pomocí jazyka ActionScript, musí být komponenta nejprve v
knihovně aplikace (Okno > Knihovna), když je sestavován soubor SWF. Chcete-li přidat komponentu do knihovny,
přetáhněte ji z panelu Komponenty do panelu Knihovna. Další informace o knihovně viz „Knihovna“ na stránce 23.
Chcete-li zpřístupnit API komponenty vaší aplikaci, musíte také importovat soubor třídy této komponenty. Soubory
třídy komponenty jsou instalovány v balíčcích, které obsahují jednu nebo více tříd. Chcete-li importovat třídu
komponenty, použijte příkaz importovat a určete název balíčku a název třídy. Například třídu Button můžete
importovat pomocí následujícího příkazu importovat:
import fl.controls.Button;
Informace o tom, ve kterém balíčku se komponenta nachází, naleznete v Referenční příručce jazyka ActionScript 3.0.
Informace o umístění zdrojových souborů komponenty viz „Práce se soubory komponenty“ na stránce 19.
Chcete-li vytvořit instanci komponenty, musíte vyvolat metodu konstruktoru jazyka ActionScript dané komponenty.
Například následující příklad vytvoří instanci Button nazvanou aButton:
var aButton:Button = new Button();
Posledním krokem je vyvolání statické metody addChild() k přidání instance komponenty do vymezené plochy nebo
kontejneru aplikace. Například následující příkaz přidá instanci aButton:
addChild(aButton);
7
V tomto bodě můžete pomocí API komponenty dynamicky určit velikost komponenty a její polohu ve vymezené
ploše, poslouchat události a nastavit vlastnosti pro úpravu jejího chování. Další informace týkající se rozhraní API pro
určitou komponentu nalezete v Referenční příručce jazyka ActionScript 3.0.
Další informace o metodě addChild() viz „Práce se seznamem zobrazení“ na stránce 25.
Odstranění komponenty
Chcete-li odstranit určitou instanci komponenty z vymezené plochy během vyvíjení, prostě ji vyberte a stiskněte
klávesu Delete. Tím bude daná instance odstraněna z vymezené plochy, ale nedojde k odstranění komponenty z vaší
aplikace.
Chcete-li odstranit komponentu z vašeho dokumentu Flash poté, co jste ji umístili do vymezené plochy nebo do
knihovny, musíte odstranit komponentu i její přidružené datové zdroje z knihovny. Nestačí jen odstranit komponentu
z vymezené plochy. Pokud ji neodstraníte i z knihovny, bude při kompilaci stále obsažena ve vaší aplikaci.
1 V panelu Knihovna vyberte symbol pro komponentu.
2 Klepněte na tlačítko Delete ve spodní částí panelu Knihovna nebo zvolte příkaz Odstranit z nabídky panelu
Knihovna.
Tento postup opakujte i pro odstranění všech datových zdrojů přidružených k dané komponentě.
Informace o tom, jak odstranit komponentu z jejího kontejneru za běhu aplikace, viz „Odstranění komponenty ze
seznamu zobrazení“ na stránce 27.
Zjištění verze komponenty
Komponenty jazyka ActionScript 3.0 programu Flash mají vlastnost verze, kterou můžete zobrazit, pokud ji
potřebujete poskytnout technické podpoře Adobe nebo když potřebujete vědět, jakou verzi komponenty používáte.
Zobrazení čísla verze komponenty uživatelského rozhraní:
1 Vytvořte nový dokument souboru Flash (ActionScript 3.0).
2 Přetáhněte komponentu do vymezené plochy a přidělte jí název instance. Například přetáhněte komponentu
ComboBox do vymezené plochy a dejte jí název aCb.
3 Chcete-li otevřít panel Akce, stiskněte klávesu F9 nebo zvolte příkaz Okna > Akce.
4 Klepněte na hlavní časové ose na Snímek 1 a na panel Akce přidejte následující kód:
trace(aCb.version);
V panelu Výstup by se mělo objevit číslo verze, podobné číslu na následujícím obrázku.
U komponent FLVPlayback a FLVPlaybackCaptioning se musíte řídit názvem třídy a ne názvem instance, protože
číslo verze je uloženo v konstantě třídy.
Zobrazení čísla verze u komponent FLVPlayback a FLVPlaybackCaptioning:
2 Přetáhněte komponenty FLVPlayback a FLVPlaybackCaptioning do panelu Knihovna.
3 Chcete-li otevřít panel Akce, stiskněte klávesu F9 nebo zvolte příkaz Okna > Akce.
4 Klepněte na hlavní časové ose na Snímek 1 a na panel Akce přidejte následující kód.
8
import fl.video.*;
trace("FLVPlayback.VERSION: " + FLVPlayback.VERSION);
trace("FLVPLaybackCaptioning.VERSION: " + FLVPlaybackCaptioning.VERSION);
Číslo verze se objeví v panelu Výstup.
Model zpracování událostí jazyka ActionScript 3.0
ActionScript 3.0 zavádí jeden model zpracování událostí, který nahrazuje různé mechanismy zpracování událostí,
které existovaly v dřívějších verzích jazyka ActionScript. Nový model událostí je založen na Specifikaci události DOM
(objektového modelu dokumentu) úrovně 3.
Pro vývojáře se zkušeností z používání jazyka ActionScript 2.0 a jeho metody addListener() může být vhodné
poukázat na rozdíly mezi modelem posluchače události ActionScript 2.0 a modelem události ActionScript 3.0. V
následujícím seznamu je přehled několika hlavních rozdílů mezi oběma modely událostí:
• Chcete-li přidat posluchače událostí v jazyce ActionScript 2.0, použijete v některých případech metodu
addListener() a v jiných případech metodu addEventListener(), zatímco v jazyce ActionScript 3.0 použijete
ve všech případech metodu addEventListener().
• V jazyce ActionScript 2.0 není žádný tok událostí, což znamená, že metoda addListener() může být vyvolána
pouze na objektu, který vysílá danou událost, zatímco v jazyce ActionScript 3.0 může být metoda
addEventListener() vyvolána na libovolném objektu, který je součástí toku událostí.
• V jazyce ActionScript 2.0 mohou být posluchače události buď funkcemi, metodami nebo objekty, zatímco v jazyce
ActionScript 3.0 mohou být pouze funkcemi nebo metodami.
• Syntaxe on(událost) již není v jazyce ActionScript 3.0 podporována, takže nemůžete k filmovému klipu připojit
kód události jazyka ActionScript. K přidání posluchače událostí můžete použít pouze metodu
addEventListener().
Na následujícím příkladu, kde je poslouchána událost MouseEvent.CLICK na komponentě Button s názvem
aButton, je objasněn základní model zpracování událostí jazyka ActionScript 3.0:
aButton.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:MouseEvent):void {
trace("clickHandler detected an event of type: " + event.type);
trace("the event occurred on: " + event.target.name);
}
Další informace o zpracování událostí v jazyce ActionScript 3.0 viz Programování v jazyce ActionScript 3.0. Další
informace o zpracování událostí v jazyce ActionScript 3.0 u komponent viz „Zpracování událostí“ na stránce 24.
Jednoduchá aplikace
V této části je vysvětlen postup vytvoření jednoduché aplikace v jazyce ActionScript 3.0 pomocí komponent programu
Flash a vývojového nástroje Flash. Je uveden příklad jak pro soubor FLA s kódem jazyka ActionScript vloženým v
časové ose, tak pro externí soubor třídy jazyka ActionScript se souborem FLA, který obsahuje pouze komponenty v
knihovně. Obvykle budete chtít vyvíjet větší aplikace pomocí externích souborů třídy, abyste mohli sdílet kód mezi
třídami a aplikacemi a aby byla údržba vašich aplikací jednodušší. Další informace o programování jazyka
ActionScript 3.0 viz Programování v jazyce ActionScript 3.0.
9
Návrh aplikací
Náš první příklad aplikace komponenty jazyka ActionScript je variací na standardní aplikaci „Ahoj světe“, takže její
návrh je poměrně jednoduchý:
• Tato aplikace bude nazvána Pozdravy.
• Aplikace používá komponentu TextArea k zobrazení pozdravu, který je na počátku Ahoj světe.
• Používá ovladač ColorPicker umožňující změnu barvy textu.
• Používá tři přepínací tlačítka, která umožňují nastavit velikost textu na malý, větší nebo největší.
• Používá komponentu ComboBox, která umožňuje vybrat různé pozdravy z rozbalovacího seznamu.
• Aplikace používá komponenty z panelu Komponenty a také vytváří prvky aplikace pomocí kódu jazyka
ActionScript.
S touto definicí můžete začít tvořit aplikaci.
Vytvoření aplikace pozdravy
Následuje postup na vytvoření aplikace Pozdravy pomocí vývojového nástroje Flash pro vytvoření souboru FLA,
umístění komponent do vymezené plochy a přidání kódu jazyka ActionScript na časovou osu.
Vytvoření aplikace pozdravy v souboru FLA:
1 Zvolte Soubor > Nový.
2 V dialogovém okně Nový dokument zvolte soubor Flash (ActionScript 3.0) a klepněte na tlačítko OK.
Otevře se nové okno Flash.
3 Zvolte příkaz Soubor > Uložit, soubor Flash pojmenujte Pozdravy.fla a klepněte na tlačítko Uložit.
4 V panelu Komponenty Flash vyberte komponentu TextArea a přetáhněte ji do vymezené plochy.
5 Ve vymezené ploše vyberte komponentu TextArea, v okně Vlastnosti zadejte jako název instance aTa a zadejte
následující informace:
• Jako hodnotu W (šířka) zadejte 230.
• Jako hodnotu H (výška) zadejte 44.
• Jako hodnotu X (vodorovná poloha) zadejte 165.
• Jako hodnotu Y (svislá poloha) zadejte 57.
• Zadejte Ahoj světe! pro parametr text na kartě Parametry.
6 Přetáhněte komponentu ColorPicker do vymezené plochy, umístit ji vlevo od komponenty TextArea a přidělte jí
název instance txtCp. V Inspektoru vlastností zadejte následující informace:
• Jako hodnotu X zadejte 96.
• Jako hodnotu Y zadejte 72.
7 Přetáhněte tři komponenty RadioButton po jedné do vymezené plochy a přidělte jim názvy instancí smallRb,
largerRB a largestRb. V Inspektoru vlastností pro ně zadejte následující informace:
• Jako hodnotu W zadejte 100 a jako hodnotu H 22.
• Jako hodnotu Y pro smallRb zadejte 120, pro largeRb 148 a pro largestRb 175.
• Jako parametr groupName zadejte pro všechny tři komponenty fontRbGrp.
10
• Jako popisy komponent na kartě Parametry zadejte Malé, Větší, Největší.
8 Přetáhněte komponentu ComboBox do vymezené plochy a přidělte jí název instance msgCb. V Inspektoru
vlastností pro ni zadejte následující informace:
• Jako hodnotu W zadejte 130.
• Na kartě Parametry zadejte jako parametr dotaz Pozdravy.
• Poklepejte na textové pole pro parametr dataProvider a otevře se dialogové okno Hodnoty.
• Klepněte na znaménko plus a nahraďte hodnotu popisu textem Ahoj světe!.
• Předchozí krok zopakujte i pro přidání hodnot popisů Hezký den! a Krásné ráno!
• Klepnutím na tlačítko OK zavřete dialogové okno Hodnoty.
9 Uložte soubor.
10 Pokud již není otevřený, otevřete panel Akce. Provedete to stisknutím klávesy F9 nebo volbou příkazu Akce z
nabídky Okno. Klepněte na hlavní časové ose na Snímek 1 a v panelu Akce zadejte následující kód:
import
import
import
import
flash.events.Event;
fl.events.ComponentEvent;
fl.events.ColorPickerEvent;
fl.controls.RadioButtonGroup;
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp");
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler);
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler);
msgCb.addEventListener(Event.CHANGE, cbHandler);
První tři řádky importují třídy událostí, které bude aplikace používat. Událost se vyskytne při interakci uživatele s
jednou z komponent. Následujících pět řádků registruje manipulační programy událostí, které bude aplikace
poslouchat. Událost klepnutí se u komponenty RadioButton vyskytne, když na ni uživatel klepne. Událost zm na
se vyskytne, když uživatel zvolí v ovladači ColorPicker jinou barvu. Událost zm na se vyskytne u komponenty
ComboBox, když uživatel vybere z rozbalovacího seznamu jiný pozdrav.
Čtvrtý řádek importuje třídu RadioButtonGroup, aby mohla aplikace přiřadit posluchač události skupině
komponent RadioButton, místo přiřazování posluchače každému tlačítku zvlášť.
11 Chcete-li vytvořit objekt TextFormat tf, který používá aplikace ke změně vlastností stylu velikost a barva textu
v oblasti TextArea, přidejte následující řádek kódu do panelu Akce.
var tf:TextFormat = new TextFormat();
12 Chcete-li vytvořit funkci zpracování události rbHandler, přidejte následující kód. Tato funkce zpracuje událost
klepnutí, když uživatel klepne na jednu z komponent RadioButton.
11
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);
}
Tato funkce pomocí příkazu p epnout prověří vlastnost cíl objektu událost, aby určila, která komponenta
RadioButton spustila danou událost. Vlastnost currentTarget obsahuje název objektu, který spustil danou
událost. Aplikace změní velikost textu v komponentě TextArea na 14, 18, resp. 24 bodů, podle toho, na kterou
komponentu RadioButton uživatel klepnul.
13 Chcete-li implementovat funkci cpHandler(), která zpracovává změnu v hodnotě v ovladači ColorPicker, přidejte
následující kód:
function cpHandler(event:ColorPickerEvent):void {
tf.color = event.target.selectedColor;
}
Tato funkce nastaví vlastnost barva objektu TextFormat tf na barvu vybranou v ovladači ColorPicker a následně
vyvolá metodu setStyle(), která tuto barvu aplikuje na text v instanci TextArea aTa.
14 Chcete-li implementovat funkci cbHandler(), která zpracovává změnu ve výběru v komponentě ComboBox,
přidejte následující kód:
function cbHandler(event:Event):void {
aTa.text = event.target.selectedItem.label;
}
Tato funkce jen nahradí text v komponentě TextArea textem vybraným v komponentě ComboBox,
event.target.selectedItem.label.
15 Chcete-li sestavit kód a otestovat aplikaci Pozdravy, zvolte příkaz Ovládání > Testovat film nebo stiskněte
kombinaci kláves Control+Enter.
V následující části je znázorněno, jak vytvořit tu stejnou aplikaci s externí třídou jazyka ActionScript a souborem
FLA, který má v knihovně pouze požadované komponenty.
Vytvoření aplikace Pozdravy2 pomocí externího souboru třídy:
2 V dialogovém okně Nový dokument zvolte soubor Flash (ActionScript 3.0) a klepněte na tlačítko OK.
Otevře se nové okno Flash.
3 Zvolte příkaz Soubor > Uložit, soubor Flash pojmenujte Pozdravy2.fla a klepněte na tlačítko Uložit.
4 Přetáhněte každou z následujících komponent z panelu Komponenty do knihovny:
• ColorPicker
• ComboBox
12
• RadioButton
• TextArea
Sestavený soubor SWF bude všechny tyto datové zdroje používat, musíte je tedy přidat do knihovny. Přetáhněte
komponenty do spodní části panelu Knihovna. Jakmile přidáte tyto komponenty do knihovny, ostatní datové
zdroje (např. List, TextInput a UIScrollBox) budou přidány automaticky.
5 V okně Vlastnosti zadejte u Třídy dokumentu název Pozdravy2.
Zobrazí-li se v programu Flash upozornění „nelze najít definici pro třídu dokumentu“, ignorujte jej. Následuje
postup definování třídy Pozdravy2. Tato třída definuje hlavní funkce pro aplikaci.
6 Uložte soubor Pozdravy2.fla.
8 V dialogovém okně Nový dokument zvolte soubor jazyka ActionScript a klepněte na tlačítko OK.
Otevře se nové okno skriptu.
9 Do okna skriptu přidejte následující kód:
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() {
Skript definuje třídu jazyka ActionScript 3.0 s názvem Pozdravy2. Skript provede následující akce:
• Importuje třídy, které budou použity v souboru. Normálně byste tyto příkazy pro import přidali až při
odkazování na různé třídy v kódu, v tomto příkladu jsou ale kvůli stručnosti naimportovány všechny v tomto
jednom kroku.
• Deklaruje proměnné, které představují různé typy objektů komponenty, které budou přidány do kódu. Další
proměnná vytvoří objekt TextFormat tf.
• Definuje funkci konstruktoru, Pozdravy2() pro danou třídu. V následujících krocích přidáme k této funkci pár
řádků a také přidáme další metody k třídě.
10 Zvolte příkaz Soubor > Uložit, pojmenujte soubor Pozdravy2.as a klepněte na tlačítko Uložit.
11 Přidejte k funkci Greeting2() následující řádky kódu:
13
createUI();
setUpHandlers();
}
Příslušná funkce by teď měla vypadat následovně:
public function Greetings2() {
createUI();
setUpHandlers();
}
12 Po zavření závorky metody Greeting2() přidejte následující řádky kódu:
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);
14
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);
}
Uvedené řádky provedou následující akce:
• Konkretizují komponenty použité v aplikaci.
• Nastavte velikost, polohu a vlastnosti jednotlivých komponent.
• Jednotlivé komponenty můžete přidat na vymezenou plochu pomocí metody addChild().
13 Po uzavření závorky metody bldRadioButtons() přidejte následující kód pro metodu 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;
}
}
private function cpHandler(event:ColorPickerEvent):void {
tf.color = event.target.selectedColor;
}
private function cbHandler(event:Event):void {
aTa.text = event.target.selectedItem.data;
}
}
}
15
Uvedené funkce definují posluchače událostí pro dané komponenty.
14 Zvolte příkaz Soubor > Uložit a soubor se uloží.
15 Chcete-li sestavit kód a otestovat aplikaci Pozdravy2, zvolte příkaz Ovládání > Testovat film nebo stiskněte
kombinaci kláves Control+Enter.
Vývoj a spuštění následných příkladů
Jakmile jste vytvořili a spustili aplikaci Pozdravy, měli byste mít potřebné základní vědomosti pro spuštění jiných
příkladů kódu uvedených v této příručce. Příslušný kód jazyka ActionScript 3.0 bude v jednotlivých příkladech
zvýrazněn a probrán, takže byste měli být schopní každý příklad v této příručce vyjmout a vložit do souboru FLA,
sestavit jej a spustit.
16
17
Kapitola 3: Práce s komponentami
Architektura komponenty
Komponenty jazyka Adobe® ActionScript® 3.0 podporuje aplikace Adobe® Flash Player verze 9.0.28.0 nebo novější.
Tyto komponenty nejsou kompatibilní s komponentami vytvořenými před verzí Flash CS4. Informace o používání
komponent jazyka Adobe® ActionScript® 2.0 najdete v části Používání komponent jazyka Adobe® ActionScript® 2.0
a v dokumentu Referenční příručka jazyka Adobe® ActionScript® 2.0 a jeho komponent.
Komponenty uživatelského rozhraní jazyka Adobe ActionScript 3.0 jsou implementovány jako komponenty na bázi
formátu FLA, program Flash CS5 ale podporuje komponenty na bázi formátů SWC i FLA. Komponenty FLVPlayback
a FLVPlaybackCaptioning jsou například komponenty na bázi SWC. Do složky Komponenty můžete umístit kterýkoli
z těchto typů komponent, který se následně zobrazí v panelu Komponenty. Tyto dva druhy komponent jsou vytvořeny
jiným způsobem, proto jsou zde popsány zvlášť.
Komponenty na bázi FLA jazyka ActionScript 3.0
Komponenty uživatelského rozhraní jazyka ActionScript 3.0 jsou soubory na bázi FLA (.fla) s vestavěnými vzhledy,
které lze upravit poklepáním na komponentu na vymezené ploše. Skiny komponenty a jiné datové zdroje jsou na
časové ose umístěny na Snímek 2. Když poklepete na komponentu, Flash automaticky skočí na Snímek 2 a otevře
paletu vzhledů této komponenty. Na následujícím příkladu je znázorněný panel se vzhledy, které se zobrazí u
komponenty Button.
Skiny pro komponentu Button
Další informace o vzhledech komponenty a přizpůsobení komponent najdete v kapitolách „Přizpůsobení komponent
uživatelského rozhraní“ na stránce 99 a „Přizpůsobení komponenty FLVPlayback“ na stránce 154.
Práce s komponentami
Pro urychlení kompilace vašich aplikací a vyhnutí se konfliktům s nastavením jazyka ActionScript 3.0 obsahují
komponenty uživatelského rozhraní programu Flash CS5 na bázi formátu FLA také soubor SWC, který obsahuje již
zkompilovaný kód jazyka ActionScript dané komponenty. Soubor SWC ComponentShim se umístí na vymezené ploše
na Snímek 2 v každé komponentě uživatelského rozhraní, aby se zpřístupnily předem sestavené definice. Aby byla
komponenta dostupná pro jazyk ActionScript, musí být buď na vymezené ploše nebo v knihovně, jež má ve
Vlastnostech navázání zvolenou volbu Exportovat v prvním snímku. Chcete-li vytvořit komponentu v jazyce
ActionScript, musíte také importovat třídu s příkazem Importovat pro její zpřístupnění. Informace o příkazu import
naleznete v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional.
Komponenty na bázi SWC
Komponenty na bázi SWC mají soubor FLA a soubor třídy jazyka ActionScript, ale nebyly sestaveny a exportovány
jako SWC. Soubor SWC je balíček předem sestavených symbolů Flash a kódu jazyka ActionScript, který vám umožní
vyhnout se opakované kompilaci symbolů a kódu, jež se nemění.
Komponenty FLVPlayback a FLVPlaybackCaptioning jsou komponenty na bázi formátu SWC. Místo vestavěných
vzhledů používají častěji externí vzhledy. Komponenta FLVPlayback má výchozí vzhled, který můžete změnit výběrem
jednoho ze sbírky předem navržených vzhledů, přizpůsobením ovládacích prvků z ovládacích prvků uživatelského
rozhraní na panelu Komponenty (BackButton, BufferingBar atd.) nebo vytvořením vlastního vzhledu. Další informace
viz „Přizpůsobení komponenty FLVPlayback“ na stránce 154.
V aplikaci Flash můžete převést filmový klip na sestavený klip následujícím způsobem:
Kompilace filmového klipu
• Klepněte pravým tlačítkem (Windows) nebo klepněte s přidržením klávesy Control (Macintosh) na filmový klip na
panelu Knihovna a zvolte položku Převést na sestavený klip.
Sestavený klip se chová stejně jako filmový klip, ze kterého byl sestaven, ale sestavený klip se zobrazuje a publikuje
mnohem rychleji než obyčejný filmový klip. Sestavené klipy nelze upravovat, ale jejich vlastnosti se mohou objevit
v Inspektoru vlastnosti a Inspektoru komponent.
Komponenty SWC obsahují sestavený klip, definice předem sestaveného jazyka ActionScript a jiné soubory
popisující komponentu. Vytvoříte-li si vlastní komponentu, můžete ji exportovat jako soubor SWC za účelem
jejího rozmístění.
Export souboru SWC
• Vyberte filmový klip na panelu Knihovna a klepněte pravým tlačítkem (Windows) nebo klepněte s klávesou
Control (Macintosh) a pak zvolte příkaz Exportovat soubor SWC.
Poznámka: Formát aplikace Flash CS4 nebo pozdější soubor SWC je kompatibilní s formátem Flex SWC, takže
soubory SWC jsou zaměnitelné mezi těmito dvěma produkty, avšak může to vyžadovat nějaké úpravy.
Informace o vytváření komponent na bázi formátu SWC najdete na adrese
www.adobe.com/go/learn_fl_creating_components_cz.
Komponenty API jazyka ActionScript 3.0
Každá komponenta jazyka ActionScript 3.0 je postavená na třídě jazyka ActionScript 3.0, která je umístěna ve složce
balíčku a má název formátu fl.packagename.classname. Například komponenta Button je instancí třídy Button a má
balíček s názvem fl.controls.Button. Při importování třídy komponenty do vaší aplikace musíte udat odkaz na
tento název balíčku. Třídu Button lze naimportovat následujícím příkazem:
18
Další informace o umístění souborů třídy komponenty jsou uvedeny v kapitole „Práce se soubory komponenty“ na
stránce 19.
Třída komponenty definuje metody, vlastnosti, události a styly, které umožní interakci s touto komponentou ve vaší
aplikaci. Komponenty uživatelského rozhraní jazyka ActionScript 3.0 jsou podtřídami pohyblivého symbolu a tříd
UIComponent a dědí jejich vlastnosti, metody a události. Třída Pohyblivý symbol je základní stavební kámen seznamu
zobrazení a je podobná třídě MovieClip, ale nemá časovou osu. Třída UIComponent je základní třída pro všechny
vizuální komponenty, interaktivní i neinteraktivní. Cesty dědičnosti jednotlivých komponent i jejich vlastnosti,
metody, události a styly jsou popsány v Referenční příručce jazyka Adobe ActionScript 3.0 aplikace Flash Professional.
Všechny komponenty jazyka ActionScript 3.0 používají model zpracování událostí jazyka ActionScript 3.0. Další
informace o zpracování událostí najdete v kapitolách „Zpracování událostí“ na stránce 24 a Programování v jazyce
ActionScript 3.0.
Práce se soubory komponenty
V této části je vysvětleno, kde jsou uloženy soubory komponenty, kde se nacházejí zdrojové soubory jazyka
ActionScript a jak přidávat a odstraňovat komponenty do/z panelu Komponenty.
Místo uložení souborů komponenty
Komponenty Flash jsou uloženy ve složce Konfigurace na úrovni aplikace.
Poznámka: Informace o těchto složkách najdete v části „Konfigurační složky instalované s programem Flash“ v kapitole
Používání programu Flash.
Komponenty jsou instalovány v následujících umístěních:
• Windows 2000 nebo Windows XP: C:\Program Files\Adobe\Adobe Flash
CS5\language\Configuration\Components
• Mac OS X: Macintosh HD:Applications:Adobe Flash CS5:Configuration:Components
Ve složce Komponenty jsou komponenty uživatelského rozhraní v souboru Interface.fla a FLVPlayback
(FLVPlaybackAS3.swc) a komponenty FLVPlaybackCaptioning jsou ve složce Video.
Komponenty můžete uložit také na následující místa podle uživatele:
• Windows 2000 nebo Windows XP: C:\Documents and Settings\username\Local Settings\Application
Data\Adobe\Adobe Flash CS5\en\Configuration\Components
• Windows Vista: C:\Users\username\Local Settings\Application Data\Adobe\Adobe Flash
CS5\en\Configuration\Components
Poznámka: V systému Windows je složka Data implicitně skryta. Chcete-li zobrazit skryté složky a soubory, zvolte
ikonu Tento počítač a v zobrazeném Průzkumníku Windows zvolte příkaz Nástroje > Možnosti složky a následně
zvolte kartu Zobrazení. V tabulce Zobrazení vyberte tlačítko Zobrazit skryté soubory a složky.
• Mac OS X: Macintosh HD:Users:<username>:Library:Application Support:Adobe Flash
CS5:Configuration:Components
19
Místo uložení zdrojových souborů komponenty
Soubory třídy jazyka ActionScript (.as) (nebo zdrojové soubory) jsou pod Windows 2000 nebo Windows XP
instalovány v následujících složkách aplikací:
C:\Program Files\Adobe\Adobe Flash CS5\en\Configuration\Component
Source\ActionScript 3.0\User Interface\fl
Komponenty uživatelského rozhraní
FLVPlayback C:\Program Files\Adobe\Adobe Flash CS5\en\Configuration\Component Source\ActionScript
3.0\FLVPlayback\fl\video
C:\Program Files\Adobe\Adobe Flash CS5\en\Configuration\Component
Source\ActionScript 3.0\FLVPlaybackCaptioning\fl\video
FLVPlaybackCaptioning
V systému Mac OS X se zdrojové soubory komponenty nacházejí zde:
Macintosh HD:Applications:Adobe Flash CS5:Configuration:Component
Source:ActionScript 3.0:User Interface:fl
Komponenty uživatelského rozhraní
FLVPlayback Macintosh HD:Applications:Adobe Flash CS5:Configuration:Component Source:ActionScript
3.0:FLVPlayback:fl:video
FLVPlaybackCaptioning Macintosh HD:Applications:Adobe Flash CS5:Configuration:Component
Source:ActionScript 3.0:FLVPlaybackCaptioning:fl:video
Zdrojové soubory komponenty a cesta pro třídy
Protože komponenty jazyka ActionScript 3.0 mají kód již sestavený, neměli byste zadávat umístění souborů třídy
jazyka ActionScript do vaší proměnné Classpath. Zahrnete-li jejich umístění do proměnné Classpath, prodloužíte
dobu potřebnou na kompilaci vašich aplikací. Pokud však program Flash najde ve vašem nastavení proměnné
Classpath soubory třídy komponenty, soubor třídy bude mít vždy přednost před sestaveným kódem komponenty.
Jeden moment, kdy možná budete chtít přidat umístění zdrojových souborů komponenty do vašeho nastavení
proměnné Classpath, bude při ladění aplikace s komponentami. Další informace viz „Ladění aplikací komponenty“ na
stránce 21.
Změna souborů komponenty
Jestliže aktualizujete, přidáváte nebo odstraňujete komponenty na bázi SWC nebo přidáváte nové komponenty na bázi
FLA v programu Flash, musíte je znovu načíst do panelu Komponenty, aby byly dostupné. Komponenty můžete znovu
načíst buď restartováním aplikace Flash nebo zvolením příkazu Načíst znovu z nabídky panelu Komponenty. Aplikace
Flash tak přibere všechny komponenty, které jste přidali do složky Komponenty.
Nové načtení komponent do panelu Komponenty při běhu programu Flash:
• Zvolte příkaz Načíst znovu v nabídce panelu Komponenty.
Odstranění komponenty z panelu Komponenty:
• Odstraňte soubor FLA, SWC nebo MXP ze složky Komponenty a buď restartujte aplikaci Flash nebo zvolte příkaz
Načíst znovu z nabídky panelu Komponenty. Soubor MXP je soubor komponenty stažený ze serveru Adobe
Exchange.
Komponenty na bázi SWC můžete odstranit a nahradit za běhu programu Flash a po novém načtení budou
zahrnuty změny, ale pokud změníte nebo odstraníte komponenty na bázi FLA, změny se neprojeví, dokud
neukončíte a nerestartujete aplikaci Flash. Komponenty na bázi FLA však můžete přidat a načíst příkazem Načíst
znovu.
20
Společnost Adobe doporučuje nejprve udělat kopii souboru komponenty Flash (.fla nebo .as), který se chystáte
změnit. Později jej pak můžete v případě potřeby obnovit.
Ladění aplikací komponenty
Komponenty jazyka ActionScript 3.0 obsahují celý svůj zdrojový kód, aby se zkrátila doba kompilace při sestavování
vaší aplikace. Debugger Flash však nemůže zkontrolovat kód uvnitř sestavených klipů. Proto chcete-li odladit svou
aplikaci až na zdrojový kód komponenty, musíte přidat zdrojové soubory komponenty do vašeho nastavení proměnné
Classpath.
Umístění složek balíčku Komponenty závisí na umístění zdrojových souborů daného typu komponenty. Chcete-li
uvést odkaz na všechny zdrojové soubory jazyka ActionScript 3.0 pro všechny komponenty uživatelského rozhraní,
přidejte do vaší proměnné Classpath následující umístění pro balíčky uživatelského rozhraní:
• $(AppConfig)/Component Source/ActionScript 3.0/User Interface
Poznámka: To potlačí sestavený kód u všech komponent uživatelského rozhraní a prodlouží dobu kompilace vaší
aplikace. Pokud jste z nějakého důvodu změnili zdrojový soubor komponenty, může daná komponenta v důsledku toho
vykazovat odlišné chování.
Chcete-li nastavit proměnnou Classpath, zvolte v nabídce Úpravy příkaz Předvolby a dále vyberte v seznamu
Kategorie položku ActionScript a klepněte na tlačítko Nastavení jazyka ActionScript 3.0. Chcete-li přidat nový
záznam, klepněte na znaménko plus nad oknem, ve kterém jsou zobrazena aktuální nastavení.
Proměnná $(AppConfig) se vztahuje ke složce Konfigurace Flash CS5 v umístění, kam jste instalovali aplikaci Flash
CS5. Normálně vypadá tato cesta asi takto:
• Windows 2000 nebo Windows XP: C:\Program Files\Adobe\Adobe Flash CS5\language\Configuration\
• Mac OS X: Macintosh HD:Applications:Adobe Flash CS5:Configuration
Poznámka: Musíte-li změnit zdrojový soubor komponenty, velmi doporučujeme, abyste zkopírovali původní zdrojový
soubor na jiné místo a přidali toto umístění do vaší proměnné Classpath.
Další informace o umístění zdrojových souborů komponenty najdete v části „Místo uložení zdrojových souborů
komponenty“ na stránce 20.
Nastavení parametrů a vlastností
Každá komponenta má parametry, jejichž nastavením můžete změnit vzhled a chování komponenty. Parametr je
vlastnost třídy komponenty a objevuje se v Inspektoru vlastností a Inspektoru komponent. Nejčastěji používané
vlastnosti se objevují jako vývojové parametry, jiné musíte nastavit pomocí jazyka ActionScript. Všechny parametry,
které lze nastavit během vyvíjení, lze nastavit i pomocí jazyka ActionScript. Nastavení parametru pomocí jazyka
ActionScript potlačí libovolnou hodnotu nastavenou během vyvíjení.
Většina komponent uživatelského rozhraní jazyka ActionScript 3.0 dědí vlastnosti a metody ze třídy UIComponent i
ze základní třídy. Například, třídy Button a CheckBox dědí vlastnosti ze třídy UIComponent i třídy BaseButton.
Přístupné budou zděděné vlastnosti komponenty i vlastnosti její vlastní třídy. Například komponenta ProgressBar
zdědí vlastnost ProgressBar.enabled ze třídy UIComponent, ale má také svou vlastní vlastnost
ProgressBar.percentComplete. Pro interakci s instancí komponenty ProgressBar máte k dispozici obě tyto
vlastnosti. Další informace týkající se vlastností komponenty naleznete v popisu její třídy v Referenční příručce jazyka
ActionScript 3.0.
21
Parametry pro instanci komponenty můžete nastavit buď pomocí Inspektoru vlastností nebo Inspektoru komponent.
Zadání názvu instance pro komponentu do Inspektoru vlastností:
1 Zvolte Okna > Vlastnosti > Vlastnosti.
2 Vyberte na vymezené ploše instanci komponenty.
3 Zadejte název pro instanci komponenty do pole označeného <Název instance>, které se nachází pod rozbalovacím
seznamem označeným Filmový klip. Nebo klepněte na kartu Parametry a zadejte název do pole pod nápisem
Komponenta. Zadejte hodnoty všech parametrů, které chcete nastavit.
Je dobré přidat k názvu instance příponu pro označení druhu této komponenty. Tak bude snazší číst váš kód jazyka
ActionScript. Například název instance licenseSb udává, že komponenta je posuvník, který posouvá text licenční
smlouvy v textové oblasti licenseTa.
Zadání parametrů pro instanci komponenty pomocí Inspektoru komponent:
1 Vyberte Okna > Inspektor komponenty.
2 Vyberte na vymezené ploše instanci komponenty.
3 Klepněte na kartu Parametry a zadejte hodnoty libovolných uvedených parametrů.
Parametry komponenty v Inspektoru komponent
Nastavte vlastnosti komponenty v jazyce ActionScript
V jazyce ActionScript použijte tečku (.) operátor (tečková syntaxe) k získání přístupu k vlastnostem nebo metodám,
které příslušejí k objektu nebo instanci na vymezené ploše. Výraz využívající tečkovou syntaxi začíná názvem objektu,
po kterém následuje tečka, a končí prvkem, který chcete určit. Například následující kód jazyka ActionScript nastavuje
vlastnost ší ka instance CheckBox aCh na 50 obrazových bodů:
aCh.width = 50;
Následující příkaz if zkontroluje, zda uživatel označil zaškrtávací políčko:
if (aCh.selected == true) {
displayImg(redCar);
}
22
Knihovna
Při prvním přidání komponenty do dokumentu ji Flash importuje na panel Knihovna jako filmový klip. Komponentu
také můžete přetáhnout přímo z panelu Komponenty na panel Knihovna a poté přidat její instanci na vymezenou
plochu. Chcete-li se dostat k prvkům třídy příslušné komponenty, musíte ji v každém případě nejdříve přidat do
knihovny.
Chcete-li přidat komponentu do knihovny a vytvořit z ní instanci pomocí jazyka ActionScript, musíte nejdříve
importovat její třídu pomocí příkazu Importovat. V příkazu Importovat musíte určit název balíčku komponenty i
název její třídy. Například následující příkaz importuje třídu Button:
Když umístíte komponentu do knihovny, aplikace Flash naimportuje také složku jejích datových zdrojů, které
obsahují vzhledy pro různé stavy. Skiny komponenty se skládají z kolekce symbolů, které tvoří její grafické zobrazení
v aplikaci. Jeden vzhled je grafické znázornění, neboli filmový klip, které udává určitý konkrétní stav dané
komponenty.
Obsah složky Datové zdroje komponenty umožňuje měnit vzhledy komponenty podle přání. Další informace viz
„Přizpůsobení komponent uživatelského rozhraní“ na stránce 99.
Jakmile je komponenta v knihovně, můžete do svého dokumentu přidat další její instance přetažením její ikony na
vymezenou plochu buď z panelu Komponenty nebo z panelu Knihovna.
Změna velikosti komponent
Chcete-li změnit velikost instancí komponenty, použijte nástroj Libovolná transformace nebo metodu setSize().
Metodu setSize() můžete vyvolat z libovolné instance komponenty za účelem změny její velikosti (viz
UIComponent.setSize()). Následující kód změní velikost instance komponenty Seznam na šířku 200 obr. bodů a
výšku 300 obr. bodů:
aList.setSize(200, 300);
Komponenta nezmění automaticky velikost, aby se vešla do svého popisu. Není-li komponenta přidaná do dokumentu
dost velká pro zobrazení jejího popisu, bude text popisu ořezán. Chcete-li, aby se komponenta vešla do svého popisu,
musíte změnit její velikost.
Další informace týkající se změny velikosti komponenty naleznete v popisu jednotlivých komponent v Referenční
příručce jazyka ActionScript 3.0 aplikace Flash Professional.
Živý náhled
Funkce Živý náhled, která je implicitně povolená, umožňuje prohlížet komponenty na vymezené ploše tak, jak se
objevují v publikovaném obsahu programu Flash. Komponenty se objevují ve své přibližné velikosti.
Zapnutí a vypnutí Živého náhledu:
• Zvolte Ovládání > Povolit živý náhled. Zaškrtávací znaménko vedle této volby označuje, že je povolená.
Živý náhled odráží různé parametry pro různé komponenty. Informace o tom, které parametry komponenty se v
živém náhledu odrazí, naleznete v popisu jednotlivých komponent v Referenční příručce jazyka ActionScript 3.0
aplikace Flash Professional.
23
Komponenta Button s povoleným Živým náhledem.
Komponenta Button se zakázaným Živým náhledem.
Komponenty v Živém náhledu nejsou funkční. Chcete-li otestovat funkčnost, použijte příkaz Ovládání > Testovat film.
Zpracování událostí
Každá komponenta vysílá při interakci s uživatelem události. Když například uživatel klepne na tlačítko, odešle se
událost MouseEvent.CLICK, a když uživatel zvolí položku v seznamu, seznam odešle událost.Událost CHANGE. Událost
se může také objevit, když se stane něco významného s komponentou, např. když se dokončí načítání obsahu u
instance UILoader, což vygeneruje událost Event.COMPLETE. Chcete-li zpracovat nějakou událost, napište kód jazyka
ActionScript, který se provede při výskytu této události.
Události komponenty zahrnují události libovolné třídy, ze které daná komponenta dědí. To znamená, že všechny
komponenty uživatelského rozhraní jazyka ActionScript 3.0 zdědí události ze třídy UIComponent, protože to je
základní třída pro komponenty uživatelského rozhraní jazyka ActionScript 3.0. Seznam událostí, který určitá
komponenta vysílá, je uveden v části Events popisu třídy dané komponenty v Referenční příručce jazyka ActionScript
3.0 aplikace Flash Professional.
Úplné vysvětlení zpracování událostí v jazyce ActionScript 3.0 najdete v kapitole Programování v jazyce ActionScript 3.0.
O posluchačích událostí
Následující klíčové body platí pro zpracování událostí u komponent jazyka ActionScript 3.0:
• Všechny události vysílá instance třídy komponenty. Instance komponenty je vysílač.
• Posluchač události zaregistrujete vyvoláním metody addEventListener() pro instanci komponenty. Například
následující řádek kódu přidá posluchač pro událost MouseEvent.CLICK do instance Button aButton:
Druhý parametr metody addEventListener() zaregistruje název funkce, clickHandler, pro vyvolání při
výskytu dané události. Tato funkce se také označuje jako zpětně volanáfunkce.
• Do jedné instance komponenty můžete registrovat více posluchačů událostí.
aButton.addEventListener(MouseEvent.CLICK, clickHandler1);
• Do více instancí komponenty můžete registrovat jeden posluchač.
bButton.addEventListener(MouseEvent.CLICK, clickHandler1);
• Funkce posluchač události se předá objektu události, který obsahuje informace o typu události a instanci, která
danou událost vysílá. Více informací najdete v části „O objektu události“ na stránce 25.
• Posluchač zůstane aktivní, dokud se aplikace neukončí nebo dokud jej výslovně neodstraníte pomocí metody
removeEventListener(). Například následující řádek kódu odstraní posluchač události pro událost
MouseEvent.CLICK na instanci aButton:
aButton.removeEventListener(MouseEvent.CLICK, clickHandler);
24
O objektu události
Objekt události dědí z třídy Objekt události a má vlastnosti, které obsahují informace o události, která se vyskytla
včetně vlastností cíl a typ, které poskytují základní informace o dané události:
Vlastnost
Popis
type
Řetězec označující typ události.
target
Odkaz na instanci komponenty vysílající událost.
Pokud má událost další vlastnosti, jsou uvedeny v popisu třídy dané události v Referenční příručce jazyka ActionScript
Objekt události se vygeneruje automaticky a předá se funkci manipulačního programu události při jejím výskytu.
Objekt události můžete použít uvnitř funkce k přístupu k názvu události, která byla vysílána, nebo k názvu instance
komponenty, která danou událost vysílala. Z názvu instance se můžete dostat k dalším vlastnostem komponenty.
Například následující kód používá vlastnost cíl události evtObj k přístupu k vlastnosti popis instance aButton a
jejímu zobrazení v panelu Výstup:
import flash.events.MouseEvent;
aButton.label = "Submit";
addChild(aButton);
function clickHandler(evtObj:MouseEvent){
trace("The " + evtObj.target.label + " button was clicked");
}
Práce se seznamem zobrazení
Všechny komponenty jazyka ActionScript 3.0 dědí z třídy DisplayObject, a proto mají přístup k jejím metodám a
vlastnostem a mohou pracovat s jejím seznamem zobrazení. Seznam zobrazení je hierarchie zobrazených objektů a
viditelných prvků v aplikaci. Tato hierarchie zahrnuje následující prvky:
• Vymezená plocha, která je kontejnerem nejvyšší úrovně
• Objekty zobrazení, kam patří mimo jiné tvary, filmové klipy a textová pole.
• Kontejnery objektů zobrazení, jež jsou zvláštními druhy objektů zobrazení a mohou obsahovat dceřiné objekty
zobrazení.
Pořadí objektů na seznamu zobrazení určuje jejich hloubku v nadřazeném kontejneru. Hloubka objektu se vztahuje k
jeho poloze odshora dolů nebo zepředu dozadu na vymezené ploše nebo v kontejneru zobrazení. Pořadí hloubky je
zřejmé, když se objekty překrývají, ale existuje i v ostatních případech. Každý objekt na seznamu zobrazení má
odpovídající hloubku na vymezené ploše. Chcete-li změnit hloubku objektu tak, že umístíte daný objekt před nebo za
ostatní objekty, musíte změnit jeho umístění na seznamu zobrazení. Výchozí pořadí objektů na seznamu zobrazení je
pořadí, v jakém jsou umístěny na vymezené ploše. Poloha 0 na seznamu zobrazení je poslední objekt v pořadí hloubky.
25
Přidání komponenty do seznamu zobrazení
Chcete-li přidat nějaký objekt do objektu DisplayObjectContainer, vyvolejte metodu kontejneru addChild() nebo
addChildAt(). V případě vymezené plochy můžete do jejího seznamu zobrazení přidat objekt také během jejího
vytváření nebo v případě komponent jeho přetažením myší na vymezenou plochu z panelu Komponenty. Chcete-li
přidat objekt do kontejneru s jazykem ActionScript, vytvořte nejprve jeho instanci vyvoláním jejího konstruktoru
pomocí operátoru nový a dále vyvolejte metodu addChild() nebo addChildAt() pro jeho umístění na vymezenou
plochu a do seznamu zobrazení. Metoda addChild() umístí objekt na následující pozici v seznamu zobrazení, zatímco
metoda addChildAt() určí pozici, na kterou bude objekt přidán. Zadáte-li pozici, která je již obsazená, objekt na této
pozici a objekty na vyšších pozicích se posunou o 1 místo nahoru. Vlastnost numChildren objektu
DisplayObjectContainer obsahuje počet objektů zobrazení, které obsahuje. Určitý objekt můžete vyhledat ze seznamu
zobrazení vyvoláním metody getChildAt() a určením pozice, nebo pokud znáte název objektu, tak vyvoláním
metody getChildByName().
Poznámka: Když přidáváte komponentu s jazykem ActionScript, musíte přiřadit název její vlastnosti názvu, chcete-li k
ní mít přístup přes název v seznamu zobrazení.
V následujícím příkladu jsou zobrazeny názvy a pozice tří komponent na seznamu zobrazení. Nejprve přetáhněte
instance NumericStepper, Button a ComboBox na vymezenou plochu tak, aby se překrývaly jedna přes druhou a
přidělte jim názvy instancí aNs, aButton a aCb. Poté v panelu Akce přidejte na Snímek 1 časové osy následující kód:
var i:int = 0;
while(i < numChildren) {
trace(getChildAt(i).name + " is at position: " + i++);
}
Na panelu Výstup byste měli vidět následující řádky:
aNs is at position: 0
aButton is at position: 1
aCb is at position: 2
Přemístění komponenty v seznamu zobrazení
Pozici určitého objektu v seznamu zobrazení a jeho hloubku zobrazení můžete změnit vyvoláním metody
addChildAt() a poskytnutím názvu objektu a pozice, kam jej chcete umístit, jako parametrů metody. Například
chcete-li umístit instanci NumericStepper nahoru a zopakovat smyčku za účelem zobrazení nových pozic komponenty
v seznamu zobrazení, přidejte do předchozího příkladu následující kód:
this.addChildAt(aNs, numChildren - 1);
i = 0;
while(i < numChildren) {
trace(getChildAt(i).name + " is at position: " + i++);
}
Na panelu Výstup byste měli vidět následující:
Instance NumericStepper by se také měla objevit před ostatními komponentami na obrazovce.
26
Poznámka: vlastnost numChildren je počet objektů (od 1 do n) na seznamu zobrazení, zatímco první pozice v seznamu
je 0. Jsou-li tedy na seznamu tři objekty, pozice indexu třetího objektu bude 2. To znamená, že na poslední pozici
seznamu zobrazení nebo na horní objekt ve smyslu hloubky zobrazení se můžete odvolat pomocí numChildren - 1.
Odstranění komponenty ze seznamu zobrazení
K odstranění komponenty z kontejneru objektu zobrazení a jeho seznamu zobrazení slouží metody removeChild()
a removeChildAt(). V následujícím příkladu jsou umístěny tři komponenty Button jedna před druhou na vymezené
ploše a pro každou z nich je přidán posluchač události. Při klepnutí na každé tlačítko odstraní posluchač události
příslušnou komponentu ze seznamu zobrazení a vymezené plochy.
2 Přetáhněte komponentu Button z panelu Komponenty do panelu Knihovna.
3 Otevřete panel Akce, zvolte Snímek 1 na hlavní časové ose a přidejte následující kód:
var i:int = 0;
while(i++ < 3) {
makeButton(i);
}
function removeButton(event:MouseEvent):void {
removeChildAt(numChildren -1);
}
function makeButton(num) {
aButton.name = "Button" + num;
aButton.label = aButton.name;
aButton.move(200, 200);
addChild(aButton);
aButton.addEventListener(MouseEvent.CLICK, removeButton);
}
Úplné vysvětlení seznamu zobrazení naleznete v části „Programování zobrazení“ příručky Programování v jazyce
ActionScript 3.0.
Práce s instancí FocusManager
Když uživatel stiskne klávesu Tabulátor pro pohyb v rámci aplikace Flash nebo klepne na nějakou aplikaci, třída
FocusManager určí, která komponenta bude nastavena jako aktivní pro vstup. Chcete-li aktivovat instanci
FocusManager, není třeba ji přidávat do aplikace ani psát nějaký kód, kromě případu vytváření komponenty.
Je-li objekt RadioButton nastaven na aktivní pro vstup, FocusManager prověří tento objekt i všechny ostatní objekty
stejnou hodnotou groupName a nastaví aktivaci na objekt s vlastností selected nastavenou na hodnotu true
(pravda).
Každá modální komponenta Window obsahuje instanci třídy FocusManager, takže ovládací prvky tohoto okna se
stanou jejími vlastními nastaveními klávesy Tabulátor. To zabraňuje, aby uživatel pomocí klávesy Tabulátor
neúmyslně přepnul na komponenty v jiných oknech.
27
FocusManager použije úroveň hloubky (neboli pořadí z) prvků v kontejneru jako výchozí navigační schéma
nebolipořadí polí. Uživatel se obvykle pohybuje mezi poli pomocí klávesy Tabulátor, přičemž se aktivace přesouvá od
první aktivní komponenty k poslední a poté znovu zpět na první. Úrovně hloubky jsou nastaveny především pořadím,
v jakém jsou komponenty přetaženy na vymezenou plochu. K určení konečného pořadí z však můžete použít také
příkazy Změnit > Uspořádat > Zcela dopředu//Zcela dozadu. Další informace o úrovních hloubky najdete v části
„Práce se seznamem zobrazení“ na stránce 25.
Chcete-li nastavit určitou instanci komponenty v aplikaci jako aktivní, můžete použít metodu setFocus(). Například
následující příklad vytvoří instanci FocusManager pro aktuální kontejner (this) a nastaví na aktivní instanci Button
aButton.
var fm:FocusManager = new FocusManager(this);
fm.setFocus(aButton);
Která komponenta je aktivní pro vstup, můžete určit vyvoláním metody getFocus() a vyvoláním metody
getNextFocusManagerComponent() zjistíte, která komponenta v pořadí polí bude aktivována jako následující. V
následujícím příkladu jsou na vymezené ploše komponenty CheckBox, RadioButton a Button a každá z nich má
posluchače událostí pro události MouseEvent.CLICK a FocusEvent.MOUSE_FOCUS_CHANGE. Když se objeví událost
MouseEvent.CLICK, protože uživatel klepl na komponentu, funkce showFocus() vyvolá metodu
getNextFocusManagerComponent(), aby určila, která komponenta v pořadí polí bude aktivována pro vstup jako
příští. Poté vyvolá metodu setFocus() pro nastavení dané komponenty na aktivní pro vstup. Když se vyskytne
událost FocusEvent.MOUSE_FOCUS_CHANGE, funkce fc() zobrazí název komponenty, na které se tato událost
vyskytla. Tato událost se spustí, když uživatel klepne na jinou komponentu, než která následuje v pořadí polí.
// This example assumes a CheckBox (aCh), a RadioButton (aRb) and a Button
// (aButton) have been placed on the Stage.
import fl.managers.FocusManager;
import flash.display.InteractiveObject;
aCh.addEventListener(MouseEvent.CLICK, showFocus);
aRb.addEventListener(MouseEvent.CLICK, showFocus);
aButton.addEventListener(MouseEvent.CLICK, showFocus);
aCh.addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, fc);
aRb.addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, fc);
aButton.addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, fc);
function showFocus(event:MouseEvent):void {
var nextComponent:InteractiveObject = fm.getNextFocusManagerComponent();
trace("Next component in tab loop is: " + nextComponent.name);
fm.setFocus(nextComponent);
}
function fc(fe:FocusEvent):void {
trace("Focus Change: " + fe.target.name);
}
Chcete-li vytvořit komponentu Button, která bude nastavena na aktivní pro vstup, když uživatel stiskne klávesu Enter
(Windows) nebo Return (Macintosh), nastavte vlastnost FocusManager.defaultButton na instanci Button, kterou
chcete mít jako výchozí tlačítko, jako v následujícím kódu:
28
import fl.managers.FocusManager;
fm.defaultButton = okButton;
Třída FocusManager potlačí výchozí obdélník aktivace aplikace Flash Player a nakreslí vlastní obdélník aktivace se
zaoblenými rohy.
Další informace týkající se vytvoření schématu aktivace pro vstup v aplikaci SWF naleznete pod třídou FocusManager
v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional. Chcete-li vytvořit vlastního správce aktivace,
musíte vytvořit třídu, která implementuje rozhraní IFocusManager. Další informace naleznete pod rozhraním
IFocusManager v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional.
Práce s komponentami na bázi seznamu
Komponenty List, DataGrid a TileList dědí všechny ze základní třídy SelectableList. Proto jsou tyto komponenty
považovány za komponenty na bázi seznamu. Komponenta ComboBox se skládá z textového pole a seznamu, je tedy
také komponentou na bázi seznamu.
Komponenta List je tvořena řádky. Komponenty DataGrid a TileList jsou tvořeny řádky, které je možné rozdělit na
více sloupců. Buňka je průsečíkem řádku a sloupce. V komponentě List, což je jeden sloupec s více řádky, je buňkou
každý řádek. Buňka má následující dva důležité aspekty:
• Datové hodnoty v jednotlivých buňkách se nazývají položky. Položka je objektem jazyka ActionScript používaným
pro ukládání jednotek informace v seznamu (List). Na Seznam můžeme pohlížet jako na pole, kde každý
indexovaný prostor pole představuje položku. V Seznamu je položka objekt, který má běžně vlastnost popis, která
je zobrazena, a vlastnost data, která se používá k uložení dat. Poskytovatel dat je datový model položek v Seznamu.
Poskytovatel dat umožňuje zaplnit komponentu na bázi seznamu jednoduše tak, že jí přiřadíte vlastnost
dataProvider dané komponenty.
• Buňka může obsahovat různé druhy dat od textu po obrazy, filmové klipy nebo libovolnou třídu, jež vytvoříte. Z
toho důvodu musí být buňka nakreslena nebo vykreslena způsobem vhodným pro její obsah. V důsledku toho mají
komponenty na bázi seznamu objekt pro vykreslení buněk, který vykresluje jejich buňky. V případě komponenty
DataGrid je každý sloupec objektem DataGridColumn, který má také vlastnost cellRenderer, aby mohl být každý
sloupec vykreslen s ohledem na jeho obsah.
Všechny komponenty na bázi seznamu mají vlastnosti cellRenderer a dataProvider, které můžete nastavit tak,
aby byly načteny a vykresleny buňky těchto komponent. Informace o používání těchto vlastností a práci s
komponentami na bázi seznamu jsou uvedeny v částech „Práce s objektem DataProvider“ na stránce 29 a „Práce s
objektem CellRenderer“ na stránce 37.
Práce s objektem DataProvider
DataProvider (Poskytovatel dat) je datový zdroj, který slouží k poskytnutí dat komponentám ComboBox, DataGrid,
List a TileList. Každá z těchto tříd komponent má vlastnost dataProvider, ke které můžete přiřadit objekt
dataProvider za účelem zaplnění buněk dané komponenty daty. Poskytovatel dat je obvykle kolekce dat, např. Pole
nebo objekt XML.
29
Vytvoření objektu DataProvider
Pro komponenty ComboBox, List a TileList můžete vytvořit objekt DataProvider pomocí parametru dataProvider
ve vývojovém prostředí. Komponenta DataGrid nemá v Inspektoru vlastnosti parametr dataProvider, protože může
mít více sloupců a její poskytovatel dat je tím pádem složitější. K vytvoření objektu DataProvider pro tyto komponenty
včetně komponenty DataGrid, můžete použít i jazyk ActionScript.
Použití parametru dataProvider
Jednoduchý poskytovatel dat pro komponenty ComboBox, List a TileList můžete vytvořit klepnutím na parametr
dataProvider na kartě Parametry Inspektoru vlastností nebo Inspektoru komponent.
Jestliže poklepete na buňku pro hodnotu, ve které je původně prázdné Pole, otevře se dialogové okno Hodnoty, které
slouží k zadání více hodnot popisu a datových hodnot a tím k vytvoření poskytovatele dat.
Dialogové okno Hodnoty pro parametr dataProvider
Chcete-li přidat položku do poskytovatele dat, klepněte na znaménko plus. Chcete-li odstranit určitou položku,
klepněte na znaménko mínus. Chcete-li přesunout zvolenou položku v seznamu nahoru, klepněte na šipku nahoru a
pro přesun směrem dolů klepněte na šipku dolů. Na následující ilustraci je zobrazeno dialogové okno Hodnoty, které
slouží k vytvoření seznamu podřazených názvů a údajů o jejich vzniku.
Dialogové okno Hodnoty s daty
Vytvořené Pole obsahuje páry polí popis a hodnota. Pole popisů jsou label a data . Pole hodnot jsou názvy
podřízených položek a jejich vytvoření. Pole popisu udává obsah, který se objeví v Seznamu, který v tomto případě
obsahuje názvy potomků. Výsledná komponenta ComboBox bude vypadat následovně:
30
Komponenta ComboBox zaplněná hodnotami pomocí objektu DataProvider
Jakmile skončíte s přidáváním dat, klepněte na tlačítko OK a dialogové okno se zavře. Pole v parametru dataProvider
je nyní zaplněno položkami, které jste vytvořili.
Parametr dataProvider s daty
Vytvořené hodnoty popisu a dat můžete s pomocí jazyka ActionScript použít k přístupu k vlastnosti dataProvider.
Vytvoření objektu DataProvider pomocí jazyka ActionScript
Objekt DataProvider můžete vytvořit vytvořením dat v Poli nebo objektu XML a poskytnutím tohoto objektu jako
parametr hodnota konstruktoru DataProvider.
Poznámka: V jazyce ActionScript 3.0 nemůžete přiřadit Pole nebo objekt XML přímo vlastnosti dataProvider, protože
vlastnost je definována jako objekt DataProvider a může přijmout pouze objekt typu DataProvider.
V následujícím příkladu je zaplněna komponenta List, která je jeden sloupec s více řádky, s názvy několika potomků
a údaji o jejich vzniku. V tomto příkladu je definován seznam v Poli položky a tento seznam je dodán jako parametr
při vytváření instance DataProvider (nový DataProvider(položky) a je přiřazen vlastnosti dataProvider
komponenty List.
import fl.controls.List;
import fl.data.DataProvider;
var aList:List = new List();
var items:Array = [
{label:"David", data:"11/19/1995"},
{label:"Colleen", data:"4/20/1993"},
{label:"Sharon", data:"9/06/1997"},
{label:"Ronnie", data:"7/6/1993"},
{label:"James", data:"2/15/1994"},
];
aList.dataProvider = new DataProvider(items);
addChild(aList);
aList.move(150,150);
Pole se skládá z párů polí popis a hodnota. Pole popisů jsou label a data. Pole hodnot jsou názvy podřízených položek
a jejich vytvoření. Pole popisu udává obsah, který se objeví v Seznamu, který v tomto případě obsahuje názvy potomků.
Výsledná komponenta List bude vypadat následovně:
Komponenta List zaplněná pomocí objektu DataProvider
31
Hodnota datového pole se zpřístupní, když uživatel zvolí klepnutím nějakou položku v seznamu, což způsobí událost
zm na. V následujícím příkladu je přidán objekt TextArea (aTa) a manipulační program události (changeHandler) k
předchozímu příkladu pro zobrazení údajů o vzniku potomka, když uživatel zvolí název v Seznamu.
import
import
import
import
fl.controls.List;
fl.controls.TextArea;
flash.events.Event;
fl.data.DataProvider;
var aTa:TextArea = new TextArea();
var items:Array = [
{label:"David", data:"1/19/1995"},
{label:"Colleen", data:"4/20/1993"},
{label:"Sharon", data:"9/06/1994"},
{label:"Ronnie", data:"7/6/1993"},
{label:"James", data:"2/15/1994"},
];
aList.dataProvider = new DataProvider(items);
addChild(aList);
addChild(aTa);
aTa.move(150, 260);
aList.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(event:Event):void {
aTa.text = event.target.selectedItem.data;
};
Když teď uživatel zvolí název potomka v Seznamu, zobrazí se v objektu TextArea údaj o vzniku tohoto potomka, jak
můžete vidět na následujícím obrázku. To zajistí funkce changeHandler() při nastavení vlastnosti text objektu
TextArea (aTa.text) na hodnotu datového pole ve zvolené položce (event.target.selectedItem.data).
Vlastnost event.target je objekt, který spustil danou událost, což je v tomto případě Seznam.
Zobrazení datového pole v objektu DataProvider komponenty List
Objekt DataProvider může obsahovat i jiná data než text. V následujícím příkladu jsou do objektu DataProvider
vloženy filmové klipy, které dodají data komponentě TileList. To vytvoří DataProvider vyvoláním metody addItem()
pro přidání jednotlivých položek po vytvoření filmového klipu, barevného políčka.
32
import flash.display.DisplayObject;
var aBox:MovieClip = new MovieClip();
var i:uint = 0;
var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00);
var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July");
var dp:DataProvider = new DataProvider();
for(i=0; i < colors.length; i++) {
drawBox(aBox, colors[i]);// draw box w next color in array
dp.addItem( {label:colorNames[i], source:aBox} );
}
aTl.dataProvider = dp;
aTl.columnWidth = 110;
aTl.rowHeight = 130;
aTl.setSize(280,150);
aTl.move(150, 150);
aTl.setStyle("contentPadding", 5);
function drawBox(box:MovieClip,color:uint):void {
box.graphics.beginFill(color, 1.0);
box.graphics.drawRect(0, 0, 100, 100);
box.graphics.endFill();
K zaplnění objektu DataProvider můžete použít i data XML (místo pole). Například následující kód uloží data do
objektu XML s názvem employeesXML a poté předá tento objekt jako parametr hodnota funkce konstruktoru
DataProvider():
import fl.controls.DataGrid;
var aDg:DataGrid = new DataGrid();
addChild(aDg);
var employeesXML:XML =
<employees>
<employee Name="Edna" ID="22" />
<employee Name="Stu" ID="23" />
</employees>;
var myDP:DataProvider = new DataProvider(employeesXML);
aDg.columns = ["Name", "ID"];
aDg.dataProvider = myDP;
Data můžete dodat jako atributy dat XML, jako v předchozím kódu, nebo jako vlastnosti dat XML, jako v následujícím
kódu:
33
var employeesXML:XML =
<employees>
<employee>
<Name>Edna</Name>
<ID>22</ID>
</employee>
<employee>
<Name>Stu</Name>
<ID>23</ID>
</employee>
</employees>;
DataProvider má také množinu metod a vlastností, které umožňují se k němu dostat a manipulovat s ním. Pomocí API
objektu DataProvider můžete přidávat, odstraňovat, nahrazovat, třídit a slučovat položky v objektu DataProvider.
Manipulace s objektem DataProvider
Chcete-li přidat data do objektu DataProvider, použijte metodu addItem() nebo addItemAt(). V následujícím
příkladu jsou přidány položky, které uživatel zadá do textového pole upravitelné komponenty ComboBox. Zde se
předpokládá, že komponenta ComboBox byla přetažena na vymezenou plochu a pojmenována aCb.
var items:Array = [
{label:"Roger"},
{label:"Carolyn"},
{label:"Darrell"},
{label:"Rebecca"},
{label:"Natalie"},
{label:"Mitchell"},
];
aCb.dataProvider = new DataProvider(items);
aCb.addEventListener(ComponentEvent.ENTER, newItemHandler);
function newItemHandler(event:ComponentEvent):void {
var newRow:int = event.target.length + 1;
event.target.addItemAt({label:event.target.selectedLabel},
event.target.length);
}
Položky v komponentě můžete pomocí jejího objektu DataProvider také nahrazovat nebo odstraňovat. V následujícím
příkladu jsou implementovány dvě samostatné komponenty List, listA a listB, a je poskytnuta komponenta Button
s označením Sync. Jakmile uživatel klepne v tomto příkladu na tlačítko, tak se pomocí metody replaceItemAt()
nahradí položky v komponentě listB položkami v komponentě listA. Je-li komponenta listA delší než listB,
vyvolá se metoda addItem() k přidání dodatečných položek do komponenty listB. Je-li komponenta listB delší než
listA, vyvolá se metoda removeItemAt() k odstranění nadbytečných položek v komponentě listB.
34
// Requires the List and Button components to be in the library
import
import
import
import
fl.controls.List;
fl.controls.Button;
flash.events.Event;
var listA:List = new List();
var listB:List = new List();
var syncButton:Button = new Button();
syncButton.label = "Sync";
var itemsA:Array = [
{label:"David"},
{label:"Colleen"},
{label:"Sharon"},
{label:"Ronnie"},
{label:"James"},
];
var itemsB:Array = [
{label:"Roger"},
{label:"Carolyn"},
{label:"Darrell"},
{label:"Rebecca"},
{label:"Natalie"},
{label:"Mitchell"},
];
listA.dataProvider = new DataProvider(itemsA);
listB.dataProvider = new DataProvider(itemsB);
addChild(listA);
addChild(listB);
addChild(syncButton);
listA.move(100, 100);
listB.move(250, 100);
syncButton.move(175, 220);
syncButton.addEventListener(MouseEvent.CLICK, syncHandler);
function syncHandler(event:MouseEvent):void {
var i:uint = 0;
if(listA.length > listB.length) { //if listA is longer, add items to B
while(i < listB.length) {
listB.dataProvider.replaceItemAt(listA.dataProvider.getItemAt(i), i);
35
++i;
}
while(i < listA.length) {
listB.dataProvider.addItem(listA.dataProvider.getItemAt(i++));
}
} else if(listA.length == listB.length) { //if listA and listB are equal length
++i;
}
} else {
//if listB is longer, remove extra items from B
while(i < listA.length) {
++i;
}
listB.dataProvider.removeItemAt(i++);
}
}
}
Data můžete také s objektem DataProvider slučovat nebo je třídit pomocí metod merge()(, sort() a sortOn(). V
následujícím příkladu se dvě instance DataGrid (aDg a bDg) zaplní částečnými seznamy členů dvou softbalových týmů.
Bude přidána komponenta Button s popisem Merge, a když na ni uživatel klepne, manipulační program události
(mrgHandler) sloučí seznam členů pro bDg se seznamem členů pro aDg a setřídí výslednou komponentu DataGrid
podle sloupce Jméno.
var bDg:DataGrid = new DataGrid();
var mrgButton:Button = new Button();
addChild(aDg);
addChild(bDg);
addChild(mrgButton);
bldRosterGrid(aDg);
bldRosterGrid(bDg);
var aRoster:Array = new Array();
var bRoster:Array = new Array();
aRoster = [
{Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"},
{Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"},
{Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"},
{Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"}
];
bRoster = [
{Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"},
{Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"},
{Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"}
];
aDg.dataProvider = new DataProvider(aRoster);
bDg.dataProvider = new DataProvider(bRoster);
aDg.move(50,50);
aDg.rowCount = aDg.length;
36
bDg.move(50,200);
bDg.rowCount = bDg.length;
mrgButton.label = "Merge";
mrgButton.move(200, 315);
mrgButton.addEventListener(MouseEvent.CLICK, mrgHandler);
function bldRosterGrid(dg:DataGrid){
dg.setSize(400, 300);
dg.columns = ["Name", "Bats", "Throws", "Year", "Home"];
dg.columns[0].width = 120;
};
function mrgHandler(event:MouseEvent):void {
aDg.dataProvider.merge(bDg.dataProvider);
aDg.dataProvider.sortOn("Name");
}
Další informace naleznete pod třídou DataProvider v Referenční příručce jazyka ActionScript 3.0.
Práce s objektem CellRenderer
CellRenderer je třída, kterou používají komponenty na bázi seznamu jako List, DataGrid, TileList a ComboBox k
manipulaci s obsahem vlastních buněk pro jejich řádky a k jeho zobrazení. Přizpůsobená buňka může obsahovat text,
předem vestavěnou komponentu např. CheckBox nebo libovolný objekt zobrazení, který vytvoříte. Chcete-li vykreslit
data pomocí vlastního objektu CellRenderer, můžete buď rozšířit třídu CellRenderer nebo implementovat rozhraní
ICellRenderer pro vytvoření vlastní třídy CellRenderer.
Třídy List, DataGrid, TileList a ComboBox jsou podtřídy třídy SelectableList. Třída SelectableList zahrnuje styl
cellRenderer. Tento styl definuje objekt zobrazení, který příslušná komponenta používá k vykreslování buněk.
Formátování stylů používaných objektem CellRenderer můžete upravit pomocí metody setRendererStyle()
objektu List (viz část „Formátování buněk“ na stránce 37). Nebo můžete definovat vlastní třídu pro použití jako objekt
CellRenderer (viz část „Definování vlastní třídy CellRenderer“ na stránce 38).
Formátování buněk
Třída CellRenderer obsahuje počet stylů, které umožňují ovládání formátu buněk.
Následující styly umožňují definovat vzhledy používané pro různé stavy buňky (disabled, down, over a up):
•
disabledSkin a selectedDisabledSkin
•
downSkin a selectedDownSkin
•
overSkin a selectedOverSkin
•
upSkin a selectedUpSkin
Následující styly se používají k formátování textu:
•
disabledTextFormat
•
textFormat
37
•
textPadding
Tyto styly můžete nastavit vyvoláním metody setRendererStyle() objektu List nebo metody setStyle() objektu
CellRenderer. Tyto styly můžete získat vyvoláním metody getRendererStyle() objektu List nebo metody
getStyle() objektu CellRenderer. K objektu, který definuje všechny styly objektu pro vykreslení (jako pojmenované
vlastnosti toho objektu), se můžete dostat také přes vlastnost rendererStyles objektu List nebo metodu
getStyleDefinition() objektu CellRenderer.
Chcete-li znovu nastavit styl na jeho výchozí hodnotu, vyvolejte metodu clearRendererStyle().
Chcete-li získat nebo nastavit výšku řádků v seznamu, použijte vlastnost rowHeight objektu List.
Definování vlastní třídy CellRenderer
Chcete-li definovat vlastní objekt CellRenderer, vytvořte třídu, která rozšiřuje třídu
CellRenderer.
Například následující kód obsahuje dvě třídy. Třída ListSample konkretizuje komponentu List a používá jinou třídu,
CustomRenderer, k definování objektu pro vykreslení buněk pro použití u komponenty List. Třída CustomRenderer
rozšiřuje třídu CellRenderer.
2 V dialogovém okně Nový dokument, které se zobrazí, zvolte Soubor Flash (ActionScript 3.0) a klepněte na tlačítko OK.
3 Chcete-li zobrazit panel Komponenty, zvolte Okno > Komponenty.
4 Na panelu Komponenty přetáhněte Seznam komponent na vymezenou plochu.
5 Jestliže se v aplikaci Flash nezobrazí Inspektor vlastnosti, zvolte Okno > Vlastnosti > Vlastnosti.
6 Při zvoleném Seznamu komponent nastavte vlastnosti v Inspektoru vlastnosti:
• Název instance: myList
• Š (šířka): 200
• V (výška): 300
• X: 20
• Y: 20
7 Na Časové ose zvolte Snímek 1 a zvolte Okno > Akce.
8 Do panelu Akce napište následující skript:
myList.setStyle("cellRenderer", CustomCellRenderer);
myList.addItem({label:"Burger -- $5.95"});
myList.addItem({label:"Fries -- $1.95"});
9 Vyberte Soubor > Uložit. Pojmenujte soubor a klepněte na tlačítko OK.
11 V dialogovém okně Nový dokument, které se zobrazí, zvolte Soubor ActionScript a klepněte na tlačítko OK.
12 V okně skriptu zadejte následující kód pro definování třídy CustomCellRenderer:
38
package {
import fl.controls.listClasses.CellRenderer;
import flash.filters.BevelFilter;
public class CustomCellRenderer extends CellRenderer {
public function CustomCellRenderer() {
var format:TextFormat = new TextFormat("Verdana", 12);
setStyle("textFormat", format);
this.filters = [new BevelFilter()];
}
}
}
13 Vyberte Soubor > Uložit. Pojmenujte soubor jako CustomCellRenderer.as, umístěte jej do stejného adresáře jako
soubor FLA a klepněte na tlačítko OK.
14 Zvolte Ovládání > Testovat film.
Chcete-li definovat vlastní objekt CellRenderer, použijte třídu, která implementuje rozhraní
ICellRenderer.
Objekt CellRenderer můžete definovat také pomocí libovolné třídy, která dědí třídu DisplayObject a implementuje
rozhraní ICellRenderer. Například následující kód definuje dvě třídy. Třída ListSample2 přidá objekt List do seznamu
zobrazení a definuje jeho objekt CellRenderer pro použití třídy CustomRenderer. Třída CustomRenderer rozšiřuje
třídu CheckBox (která rozšiřuje třídu DisplayObject) a implementuje rozhraní ICellRenderer. Poznámka: třída
CustomRenderer definuje funkce pro získání a nastavení pro vlastnosti data a listData definované v rozhraní
ICellRenderer. Ostatní vlastnosti a metody definované v rozhraní ICellRenderer (vlastnost selected a metoda
setSize()) jsou již ve třídě CheckBox definovány:
• Š (šířka): 100
• V (výška): 300
• X: 20
• Y: 20
myList.setStyle("cellRenderer", CustomCellRenderer);
myList.addItem({name:"Burger", price:"$5.95"});
myList.addItem({name:"Fries", price:"$1.95"});
39
12 V okně skriptu zadejte následující kód pro definování třídy CustomCellRenderer:
package
{
import fl.controls.CheckBox;
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.ListData;
public class CustomCellRenderer extends CheckBox implements ICellRenderer {
private var _listData:ListData;
private var _data:Object;
public function CustomCellRenderer() {
}
public function set data(d:Object):void {
_data = d;
label = d.label;
}
public function get data():Object {
return _data;
}
public function set listData(ld:ListData):void {
_listData = ld;
}
public function get listData():ListData {
return _listData;
}
}
}
13 Vyberte Soubor > Uložit. Pojmenujte soubor jako CustomCellRenderer.as, umístěte jej do stejného adresáře jako
Použití symbolu k definování objektu CellRenderer
K definování objektu CellRenderer můžete použít i symbol v knihovně. Symbol musí být exportován pro jazyk
ActionScript a název třídy pro symbol knihovny musí mít přiřazený soubor třídy, který buď implementuje rozhraní
ICellRenderer nebo rozšiřuje třídu CellRenderer (nebo jednu z jejích podtříd).
V následujícím příkladu se definuje vlastní objekt CellRenderer pomocí symbolu knihovny.
• Š (šířka): 100
• V (výška): 400
• X: 20
• Y: 20
40
7 Klepněte na panel Parametry a poklepejte na druhý sloupec v řádku dataProvider.
8 V dialogovém okně Hodnoty, které se zobrazí, klepněte dvakrát na znaménko plus a přidejte dva datové prvky (s
popisy nastavenými na popis0 a popis1) a poté klepněte na tlačítko OK.
9 Pomocí textového nástroje nakreslete na vymezené ploše textové pole.
10 Při zvoleném textovém poli nastavte vlastnosti v Inspektoru vlastností:
• Typ textu: Dynamický text
• Název instance: textField
• Š (šířka): 100
• Velikost písma: 24
• X: 0
• Y: 0
11 Při zvoleném textovém poli zvolte příkaz Změnit > Převést na symbol.
12 V dialogovém okně Převést na symbol proveďte následující nastavení a poté klepněte na tlačítko OK.
• Název: MyCellRenderer
• Typ: MovieClip
• Exportovat pro jazyk ActionScript: Zvoleno
• Exportovat v prvním snímku: Zvoleno
• Třída: MyCellRenderer
• Základní třída: flash.display.MovieClip
Jestliže se v aplikaci Flash zobrazí Upozornění třídy jazyka ActionScript, klepněte na tlačítko OK v rámečku s
varováním.
13 Odstraňte instanci symbolu nového filmového klipu z vymezené plochy.
myList.setStyle("cellRenderer", MyCellRenderer);
19 V okně skriptu zadejte následující kód pro definování třídy MyCellRenderer:
41
package {
import flash.display.MovieClip;
import flash.filters.GlowFilter;
import flash.text.TextField;
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.ListData;
import flash.utils.setInterval;
public class MyCellRenderer extends MovieClip implements ICellRenderer {
private var _selected:Boolean;
private var glowFilter:GlowFilter;
public function MyCellRenderer() {
glowFilter = new GlowFilter(0xFFFF00);
setInterval(toggleFilter, 200);
}
_data = d;
textField.text = d.label;
}
return _data;
}
_listData = ld;
}
return _listData;
}
public function set selected(s:Boolean):void {
_selected = s;
}
public function get selected():Boolean {
return _selected;
}
public function setSize(width:Number, height:Number):void {
}
public function setStyle(style:String, value:Object):void {
}
public function setMouseState(state:String):void{
}
private function toggleFilter():void {
if (textField.filters.length == 0) {
textField.filters = [glowFilter];
} else {
textField.filters = [];
}
}
}
}
20 Vyberte Soubor > Uložit. Pojmenujte soubor jako MyCellRenderer.as, umístěte jej do stejného adresáře jako
42
Vlastnosti objektu CellRenderer
Vlastnost data je objekt, který obsahuje všechny vlastnosti nastavené pro objekt CellRenderer. Například v následující
třídě, která definuje vlastní objekt CellRenderer, který rozšiřuje třídu CheckBox, předává funkce pro nastavení pro
vlastnost data hodnotu data.label vlastnosti popis, která je zděděná z třídy CheckBox:
public class CustomRenderer extends CheckBox implements ICellRenderer {
public function CustomRenderer() {
}
_data = d;
label = d.label;
}
return _data;
}
_listData = ld;
}
return _listData;
}
}
}
Vlastnost selected definuje, zda je buňka v seznamu zvolená nebo ne.
Použití objektu CellRenderer na sloupec objektu DataGrid
Objekt DataGrid může mít několik sloupců a pro každý z nich lze stanovit jiné objekty pro vykreslení buněk. Každý
sloupec objektu DataGrid je představován objektem DataGridColumn a třída DataGridColumn obsahuje vlastnost
cellRenderer, u které můžete definovat objekt CellRenderer pro daný sloupec.
Definujte objekt CellRenderer pro upravitelnou buňku.
Třída DataGridCellEditor definuje objekt pro vykreslení pro upravitelné buňky v objektu DataGrid. Stane se objektem
pro vykreslení pro buňku, když je vlastnost editable objektu DataGrid nastavena na hodnotu true (pravda) a
uživatel klepne na buňku za účelem úpravy. Chcete-li definovat objekt CellRenderer pro upravitelnou buňku, nastavte
vlastnost itemEditor pro každý prvek pole sloupce objektu DataGrid.
Použijte obraz, soubor SWF nebo filmový klip jako CellRenderer
Třída ImageCell, podtřída třídy CellRenderer, definuje objekt používaný k vykreslení buněk, ve kterých je hlavním
obsahem obraz, soubor SWF nebo filmový klip. Třída ImageCell zahrnuje následující styly pro definování vzhledu
buňky:
•
imagePadding – výplň, která odděluje okraj buňky od okraje obrázku, uváděná v obr. bodech
•
selectedSkin – vzhled, který se používá pro označení vybraného stavu
•
textOverlapAlpha – neprůhlednost překrytí za popisem buňky
•
textPadding – výplň, která odděluje okraj buňky od okraje textu, uváděná v obr. bodech
Třída ImageCell je výchozí třída CellRenderer pro třídu TileList.
43
Usnadnění přístupu ke komponentám
Přístup k viditelnému obsahu ve vašich aplikacích Flash můžete usnadnit pro zrakově postižené uživatele
prostřednictvím programů pro čtení z obrazovky, které poskytují zvukový popis obsahu obrazovky. Informace o tom,
jak zpřístupnit vaše aplikace Flash programům pro čtení z obrazovky jsou uvedeny v kapitole 18, „Vytváření
přístupného obsahu“ v části Používání aplikace Flash.
Chcete-li zpřístupnit komponentu jazyka ActionScript 3.0 programu pro čtení z obrazovky, musíte také importovat
jeho třídu usnadnění přístupu a vyvolat metodu enableAccessibility() této třídy. Programu pro čtení z obrazovky
můžete zpřístupnit následující komponenty jazyka ActionScript 3.0:
Komponenta
Třída Accessibility
Button
ButtonAccImpl
CheckBox
CheckBoxAccImpl
ComboBox
ComboBoxAccImpl
Seznam
ListAccImpl
RadioButton
RadioButtonAccImpl
TileList
TileListAccImpl
Třídy usnadnění komponenty jsou v balíčku fl.accessibility. Chcete-li například zpřístupnit programu pro čtení
z obrazovky komponentu CheckBox, přidáte do vaší aplikace následující příkazy:
import fl.accessibility.CheckBoxAccImpl;
CheckBoxAccImpl.enableAccessibility();
Přístupnost komponenty povolíte jen jednou, bez ohledu na to, kolik instancí vytváříte.
Poznámka: Usnadnění přístupu mírně zvětšuje velikost souboru přidáním požadovaných tříd během kompilace.
Ve většině komponent je také možné se pohybovat pomocí klávesnice. Další informace týkající se povolení
přístupných komponent a navigaci pomocí klávesnice naleznete v oddílech Interakce s uživatelem části „Používání
komponent uživatelského rozhraní“ na stránce 45 a pod třídami usnadnění přístupu v Referenční příručce jazyka
ActionScript 3.0 aplikace Flash Professional.
44
45
Kapitola 4: Používání komponent
uživatelského rozhraní
V této kapitole je vysvětleno jak používat komponenty uživatelského rozhraní jazyka ActionScript 3.0 obsažené v
programu Flash.
Použití komponenty Button
Komponenta Button je nastavitelné obdélníkové tlačítko, jehož stisknutím pomocí tlačítka myši nebo mezerníku může
uživatel zahájit v aplikaci určitou akci. Tlačítku je možné přiřadit i vlastní ikonu. Chování tlačítka lze změnit ze
stisknutí na přepínání. Přepínací tlačítko zůstane po klepnutí myší stisknuté a po dalším klepnutí se vrátí do
původního stavu.
Tlačítko je základní součástí mnoha formulářů a webových aplikací. Tlačítka lze použít vždy, když chcete, aby uživatel
zahájil určitou akci. Například většina formulářů obsahuje tlačítko Potvrdit. Do prezentace také můžete přidat tlačítka
Předchozí a Další.
Interakce uživatele s komponentou Button.
Tlačítko lze v aplikaci povolit nebo zakázat. V zakázaném stavu tlačítko nereaguje na vstupy z myši nebo klávesnice.
Povolené tlačítko se po klepnutí myší nebo stisknutí klávesy aktivuje pro vstup. Je-li instance komponenty Button
aktivní pro vstup, lze k jeho ovládání použít následující klávesy:
Klíč
Popis
Shift+Tabulátor
Přesune aktivaci pro vstup k předchozímu objektu.
Mezerník
Stiskne nebo uvolní tlačítko a spustí tak událost klepnutí.
Tabulátor
Přesune aktivaci pro vstup k dalšímu objektu.
Enter/Return
Přesune aktivaci pro vstup k dalšímu objektu, je-li tlačítko v nástroji FocusManager nastaveno jako
výchozí komponenta Button.
Další informace týkající se nastavení aktivace pro vstup naleznete pod rozhraním IFocusManager a třídou
FocusManager v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional a v části „Práce s instancí
FocusManager“ na stránce 27.
Živý náhled každé instance komponenty Button odráží změny, které byly v parametrech provedeny Inspektorem
vlastností nebo Inspektorem komponenty při vyvíjení.
Poznámka: Pokud je ikona větší než tlačítko, roztáhne se přes okraje tlačítka.
Chcete-li nastavit tlačítko jako výchozí tlačítko v aplikaci (tlačítko, které obdrží akci klepnutí, jakmile uživatel stiskne
Enter), nastavte vlastnost FocusManager.defaultButton. Například následující kód nastaví výchozí tlačítko tak, aby
byla instance komponenty Button nazvána submitButton.
FocusManager.defaultButton = submitButton;
Pokud přiřadíte komponentu Button k nějaké aplikaci, můžete ji přidáním následujících řádek kódu jazyka
ActionScript zpřístupnit programu pro čtení z obrazovky:
Používání komponent uživatelského rozhraní
import fl.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
Povolit přístup komponentě stačí pouze jednou, bez ohledu na to, kolik instancí vytváříte.
Parametry komponenty Button
V Inspektoru vlastností (Okno > Vlastnosti > Vlastnosti) nebo Inspektoru komponent (Okno > Inspektor
komponent) lze u každé instance komponenty Button nastavit následující parametry vyvíjení: emphasized, label,
labelPlacement, selected a toggle. Každý z těchto parametrů má odpovídající vlastnost jazyka ActionScript
stejného názvu. Při přiřazení hodnoty těmto parametrům nastavujete výchozí stav vlastnosti v aplikaci. Nastavení
vlastnosti v jazyce ActionScript přepíše hodnotu, jež byla nastavena v parametru. Informace týkající se možných
hodnot pro tyto parametry naleznete pod třídou Button v Referenční příručce jazyka ActionScript 3.0 aplikace Flash
Professional.
Vytváření aplikací s komponentou Button
Následuje postup přidání komponenty Button do aplikace při vyvíjení. V tomto příkladu změní třída Button po
kliknutí stav komponenty ColorPicker.
1 Vytvořte nový dokument Flash (ActionScript 3.0).
2 Přetáhněte komponentu Button z panelu Komponenty na vymezenou plochu a v Inspektoru vlastností pro ni
zadejte následující hodnoty:
• Zadejte název instance aButton.
• U parametru popisu zadejte Zobrazit.
3 Na vymezenou plochu přidejte ovladač ColorPicker a přidělte mu název instance aCp.
4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a zadejte následující kód jazyka ActionScript:
46
aCp.visible = false;
switch(event.currentTarget.label) {
case "Show":
aCp.visible = true;
aButton.label = "Disable";
break;
case "Disable":
aCp.enabled = false;
aButton.label = "Enable";
break;
case "Enable":
aCp.enabled = true;
aButton.label = "Hide";
break;
case "Hide":
aCp.visible = false;
aButton.label = "Show";
break;
}
}
Druhý řádek kódu registruje funkciclickHandler() jako funkci manipulačního programu události pro událost
MouseEvent.CLICK. Událost se vyskytne, když uživatel klepne na komponentu Button, čímž způsobí, že funkce
clickHandler() provede v závislosti na hodnotě komponenty Button jednu z následujících akcí:
• Volba Zobrazit zobrazí ovladač ColorPicker a změní popis komponenty Button na Zakázat.
• Volba Zakázat zakáže ovladač ColorPicker a změní popis komponenty Button na Povolit.
• Volba Povolit povolí ovladač ColorPicker a změní popis komponenty Button na Skrýt.
• Volba Skrýt skryje ovladač ColorPicker a změní popis komponenty Button na Zobrazit.
5 Zvolte Ovládání > Testovat film a spusťte aplikaci.
Vytváření aplikace s komponentou Button
Následuje postup pro vytvoření přepínacího tlačítka pomocí jazyka ActionScript a pro zobrazení typu události v
panelu Výstup klepnutí na komponentu Button. V tomto příkladu se vytvoří instance Button vyvoláním konstruktoru
třídy a přidá se na vymezenou plochu pomocí metody addChild().
2 Přetáhněte komponentu z panelu Komponenty do panelu Knihovna aktuálního dokumentu.
Tak dojde k přidání komponenty do knihovny, avšak v aplikaci ji nebude vidět.
3 Otevřete panel akce, na hlavní Časové ose vyberte Snímek 1 a vložením následujícího kódu vytvořte instanci
Button:
47
addChild(aButton);
aButton.label = "Click me";
aButton.toggle =true;
aButton.move(50, 50);
Metoda move() umístí tlačítko na vymezenou plochu na souřadnice 50 (na ose x), 50 (na ose y).
4 Nyní vytvořte funkce posluchač události a manipulační program události přidáním následujícího kódu AutoScript:
trace("Event type: " + event.type);
}
5 Zvolte příkaz Ovládání > Testovat film.
Pokud klepnete na tlačítko, zobrazí program Flash v panelu Výstup zprávu „Event type: click“.
Použití komponenty CheckBox
Komponenta CheckBox je čtvercové pole, které lze označit nebo odznačit. Pokud je označeno, objeví se uvnitř pole
značka zaškrtnutí. Komponentě CheckBox lze přiřadit textový popisek a umístit jej vpravo, vlevo, pod ni nebo nad ni.
Pole CheckBox lze využívat ke sbírání množin hodnot true (pravda) nebo false (nepravda), které se vzájemně
nevylučují. Například aplikace, která sbírá informace o tom, jaký typ automobilu si chcete pořídit, může používat
komponenty CheckBox k výběru požadovaných vlastností.
Interakce uživatele s komponentou CheckBox
Pole CheckBox můžete v aplikaci povolit nebo zakázat. Je-li komponenta CheckBox zapnuta a uživatel klepne na ni
nebo na její popisek, bude pole CheckBox nastaveno na aktivní pro vstup a zobrazí se jeho vzhled ve stavu stisknuto.
Jestliže uživatel drží tlačítko myši stisknuté a pohne ukazatelem mimo hranici komponenty CheckBox nebo její popis,
vzhled komponenty se vrátí do původního stavu a zůstane aktivní pro vstup. Stav komponenty CheckBox se nezmění,
dokud není tlačítko myši uvolněno při ukazateli myši umístěném nad komponentou. Komponenta CheckBox má
navíc dva vypnuté stavy, označeno a odznačeno, které používají vlastnosti selectedDisabledSkin, resp.
disabledSkin, jež neumožňují interakci s myší nebo klávesnicí.
Je-li komponenta CheckBox vypnutá, zobrazuje se ve vypnutém stavu bez ohledu na interakci s uživatelem. Ve
vypnutém stavu nepřijímá komponenta CheckBox vstup z myši ani z klávesnice.
Instance komponenty CheckBox se aktivuje pro vstup, pokud na ni uživatel klepne myší nebo přepne klávesou
Tabulátor. Když je instance komponenty CheckBox aktivní pro vstup, můžete ji ovládat následujícími klávesami:
Klíč
Popis
Shift+Tabulátor
Přesune aktivaci pro vstup k předchozímu prvku.
Mezerník
Označí nebo odznačí komponentu a spustí událost zm na.
Tabulátor
Přesune aktivaci pro vstup na další prvek.
48
Další informace týkající se nastavení aktivace pro vstup naleznete v části „Práce s instancí FocusManager“ na
stránce 27 a pod třídou FocusManager v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional.
V živém náhledu každé instance komponenty CheckBox se odráží změny, které byly provedeny Inspektorem
vlastnosti nebo Inspektorem komponenty v parametrech při vyvíjení.
Přidáte-li komponentu CheckBox do aplikace, můžete ji přidáním následujících řádků kódu jazyka ActionScript
usnadnit její přístup pro programy pro čtení z obrazovky:
import fl.accessibility.CheckBoxAccImpl;
CheckBoxAccImpl.enableAccessibility();
Usnadnění přístupu pro komponentu stačí povolit pouze jednou, bez ohledu na to, kolik instancí komponent máte.
Parametry komponenty CheckBox
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty CheckBox nastavit následující
parametry vyvíjení: label, labelPlacement a selected. Každý z těchto parametrů má odpovídající vlastnost jazyka
ActionScript stejného názvu. Informace týkající se možných hodnot pro tyto parametry naleznete pod třídou
CheckBox v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional.
Vytváření aplikace pomocí komponenty CheckBox
Následuje postup pro přidání komponenty CheckBox do aplikace při vyvíjení za pomoci výňatku z formuláře žádosti
o půjčku. Ve formuláři je dotaz, zda je žadatel vlastníkem domu a nabízí uživateli komponentu CheckBox s odpovědí
„ano“. V kladném případě nabídne formulář uživateli dvě přepínací tlačítka, s jejichž pomocí označí přibližnou
hodnotu svého domu.
Vytváření aplikace pomocí komponenty CheckBox
2 Přetáhněte komponentu CheckBox z panelu Komponenty na vymezenou plochu.
3 V Inspektoru vlastnosti proveďte následující:
• Zadejte název instance homeCh.
• Jako hodnotu šířky (W) zadejte 140.
• Zadejte „Jste vlastníkem vašeho domu?“ jako popis parametru.
4 Přetáhněte dvě komponenty RadioButton z panelu Komponenty na plochu a umístěte je vpravo dolů od
komponenty CheckBox. V Instruktoru vlastnosti pro ně zadejte následující hodnoty:
• Jako názvy instancí zadejte underRb a overRb.
• Hodnotu parametru šířky (W) obou komponent RadioButton zadejte 120.
• Zadejte Méně než 500 000 $? jako popis parametru underRb.
• Zadejte Více než 500 000$? jako popis parametru overRb.
• Jako parametr groupName obou komponent RadioButton zadejte valueGrp.
5 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a zadejte následující kód jazyka ActionScript:
49
homeCh.addEventListener(MouseEvent.CLICK, clickHandler);
underRb.enabled = false;
overRb.enabled = false;
underRb.enabled = event.target.selected;
overRb.enabled = event.target.selected;
}
Tento kód vytvoří manipulační program události pro událost CLICK, která povoluje parametry underRb a overRb
komponenty RadioButton v případě, že je vybrán parametr homeCh komponenty CheckBox, a vypíná je, pokud
parametr homeCh vybrán není. Další informace naleznete pod třídou MouseEvent v Referenční příručce jazyka
V následujícím příkladu se opakuje předchozí aplikace, ale s vytvořením komponenty CheckBox a komponent
RadioButton pomocí jazyka ActionScript.
Vytváření komponenty CheckBox pomocí jazyka ActionScript
2 Přetáhněte komponenty CheckBox a RadioButton z panelu Komponenty do panelu Knihovna aktuálního
dokumentu. Není-li panel Knihovna otevřen, otevřete jej stisknutím kombinace kláves Ctrl+L nebo pomocí
příkazu Okno > Knihovna.
Komponenta tak bude dostupná pro vaši aplikaci, ale nebude umístěna na vymezenou plochu.
3 Otevřete panel Akce, na hlavní časové ose vyberte Snímek 1 a zadejte následující kód, který vytvoří instance
komponenty a umístí je na místo:
import fl.controls.CheckBox;
var homeCh:CheckBox = new CheckBox();
var underRb:RadioButton = new RadioButton();
var overRb:RadioButton = new RadioButton();
addChild(homeCh);
addChild(underRb);
addChild(overRb);
underRb.groupName = "valueGrp";
overRb.groupName = "valueGrp";
homeCh.move(200, 100);
homeCh.width = 120;
homeCh.label = "Own your home?";
underRb.move(220, 130);
underRb.enabled = false;
underRb.width = 120;
underRb.label = "Under $500,000?";
overRb.move(220, 150);
overRb.enabled = false;
overRb.width = 120;
overRb.label = "Over $500,000?";
Tento kód pomocí konstruktorů CheckBox() a RadioButton() vytvoří komponenty a využije metodu
addChild() k jejich umístění na vymezenou plochu. Používá metodumove() k umístění komponent na
vymezenou plochu.
50
4 Pomocí následujícího kódu AutoScript nyní vytvořte funkce posluchač události a manipulační program události:
homeCh.addEventListener(MouseEvent.CLICK, clickHandler);
underRb.enabled = event.target.selected;
overRb.enabled = event.target.selected;
}
Tento kód vytvoří manipulační program události pro událost CLICK, která povolí přepínací tlačítka underRb a
overRb, pokud je zvolena vlastnost komponenty CheckBox homeCh, a zakáže je, pokud vlastnost homeCh zvolena
není. Další informace naleznete pod třídou MouseEvent v Referenční příručce jazyka ActionScript 3.0 aplikace Flash
Professional.
Použití komponenty ColorPicker
Komponenta ColorPicker umožňuje uživateli vybírat ze vzorkovníku barev. Výchozí režim komponenty ColorPicker
zobrazuje jednu barvu ve čtvercovém tlačítku. Když uživatel na tlačítko klepne, zobrazí se ve vzorkovníku seznam
dostupných barev společně s textovým polem, ve kterém je zobrazena hexadecimální hodnota aktuálně vybrané barvy.
Barvy objevující se v komponentě ColorPicker lze změnit nastavením vlastnosti colors s hodnotami barev, které
chcete zobrazit.
Interakce uživatele s komponentou ColorPicker
Komponenta ColorPicker umožňuje uživateli vybrat barvu a použít ji na jiný objekt v aplikaci. Chcete-li například
umožnit uživateli, aby si mohl přizpůsobit prvky aplikace, např. barvu pozadí nebo barvu textu, můžete použít
komponentu ColorPicker a použít barvu dle výběru uživatele.
Uživatel si barvu vybere klepnutím na vzorek v panelu nebo zadáním hexadecimální hodnoty do textového pole.
Jakmile si uživatel vybere barvu, můžete použít vlastnost komponenty ColorPicker selectedColor k použití dané
barvy na text nebo jiný objekt v aplikaci.
Jestliže uživatel přejede ukazatelem přes instanci komponenty ColorPicker nebo na ni přepne klávesou Tabulátor,
bude tato instance nastavena jako aktivní pro vstup. Když je vzorkovník komponenty ColorPicker otevřený, můžete
jej ovládat následujícími klávesami:
Klíč
Popis
Home
Přesune výběr na první barvu ve vzorkovníku.
Šipka nahoru
Přesune výběr ve vzorkovníku o jeden řádek nahoru.
Šipka dolů
Přesune výběr ve vzorkovníku o jeden řádek dolů.
Šipka vpravo
Přesune výběr ve vzorkovníku o jednu barvu doprava.
Šipka vlevo
Přesune výběr ve vzorkovníku o jednu barvu doleva.
End
Přesune výběr na poslední barvu ve vzorkovníku.
51
Parametry komponenty ColorPicker
V Inspektoru vlastnosti nebo Inspektoru komponenty můžete nastavit následující parametry vyvíjení pro obě instance
komponenty ColorPicker: selectedColor a showTextField. Každý z těchto parametrů má odpovídající vlastnost
jazyka ActionScript stejného názvu. Informace týkající se možných hodnot pro tyto parametry naleznete pod třídou
ColorPicker v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional.
Vytváření aplikace pomocí komponenty ColorPicker
Následující příklad přidá komponentu ColorPicker do aplikace při vyvíjení. Pokaždé, když v tomto příkladu změníte
v komponentě ColorPicker barvu, funkce changeHandler() vyvolá funkci drawBox(), která vykreslí nové pole v
barvě vybrané pomocí komponenty ColorPicker.
2 Přetáhněte komponentu ColorPicker z panelu Komponenty doprostřed vymezené plochy a přidělte jí název
instance aCp.
3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:
drawBox(aBox, 0xFF0000);//draw a red box
addChild(aBox);
aCp.addEventListener(ColorPickerEvent.CHANGE,changeHandler);
function changeHandler(event:ColorPickerEvent):void {
drawBox(aBox, event.target.selectedColor);
}
box.graphics.beginFill(color, 1);
}
5 Klepněte na komponentu ColorPicker a vyberte barvu pro vybarvení pole.
Vytváření komponenty ColorPicker pomocí jazyka ActionScript
V tomto příkladu je pomocí konstruktoru ColorPicker() a addChild() vytvořena ve vymezené ploše komponenta
ColorPicker. Nastaví vlastnosti colors na hodnoty barev pro červenou (0xFF0000), zelenou (0x00FF00) a modrou
(0x0000FF), a tím určí barvy, které se zobrazí v komponentě ColorPicker. Také vytvoří komponentu TextArea a
pokaždé, když vyberete jinou barvu pomocí funkce ColorPicker, se v tomto příkladu změní barva textu v komponentě
TextArea na odpovídající barvu.
2 Přetáhněte komponentu ColorPicker z panelu Komponenty do panelu Knihovna.
3 Přetáhněte komponentu TextArea z panelu Komponenty do panelu Knihovna.
52
var aCp:ColorPicker = new ColorPicker();
var aTf:TextFormat = new TextFormat();
aCp.move(100, 100);
aCp.colors = [0xff0000, 0x00ff00, 0x0000ff];
aCp.addEventListener(ColorPickerEvent.CHANGE, changeHandler);
aTa.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus quis nisl vel
tortor nonummy vulputate. Quisque sit amet eros sed purus euismod tempor. Morbi tempor. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur
diam. Suspendisse at purus in ipsum volutpat viverra. Nulla pellentesque libero id libero.";
aTa.move(200,100);
addChild(aCp);
addChild(aTa);
function changeHandler(event:ColorPickerEvent):void {
if(TextFormat(aTa.getStyle("textFormat"))){
aTf = TextFormat(aTa.getStyle("textFormat"));
}
aTf.color = event.target.selectedColor;
aTa.setStyle("textFormat", aTf);
}
Používání komponenty ComboBox
Komponenta ComboBox umožňuje uživateli vybrat jednu položku z rozevíracího seznamu. Komponenta ComboBox
může být statická nebo upravitelná. Upravitelná komponenta ComboBox umožňuje uživateli vepsat text přímo do
textového pole na prvním místě v seznamu. Jestliže rozbalovací seznam narazí na spodní část dokumentu, otevře se
směrem vzhůru a ne dolů. Komponenta ComboBox se skládá ze tří podřízených komponent: BaseButton, TextInput
a List.
Je-li použita upravitelná komponenta ComboBox, je oblastí klepnutí pouze tlačítko a ne textové pole. U statické
komponenty ComboBox je oblastí klepnutí jak tlačítko, tak i textové pole. Oblast klepnutí reaguje otevřením nebo
zavřením rozbalovacího seznamu.
Jakmile uživatel provede v seznamu výběr pomocí myši nebo klávesnice, zkopíruje se popis výběru do textového pole
v horní části komponenty ComboBox.
53
Interakce uživatele s komponentou ComboBox
Komponentu ComboBox lze použít v jakémkoli formuláři nebo aplikaci, jež vyžadují výběr jedné položky ze seznamu.
Můžete například použít rozbalovací seznam států ve formuláři adres zákazníků. U složitějších scénářů lze použít
upravitelnou komponentu ComboBox. Například v aplikaci obsahující pokyny k cestě můžete použít upravitelnou
komponentu ComboBox, která uživateli umožní vložit výchozí a cílovou adresu. Rozevírací seznam obsahuje dříve
zadané adresy.
Je-li komponenta ComboBox upravitelná, tzn. vlastnost editable je true (pravda), odeberou následující klávesy z
textového vstupního pole aktivaci pro vstup a zanechají předchozí hodnotu. Výjimkou je klávesa Enter, která při
zadání textu použije nejdříve první hodnotu.
Klíč
Popis
Shift+tabulátor
Přesune aktivaci pro vstup k předchozí položce. Je-li vybrána nová položka, dojde k odeslání události zm na.
Tabulátor
Aktivuje další položku pro vstup. Je-li vybrána nová položka, dojde k odeslání události zm na.
Šipka dolů
Posune výběr o jednu položku dolů.
End
Posune výběr na poslední položku seznamu.
Esc
Zavře rozbalovací seznam a vrátí aktivaci pro vstup zpět komponentě ComboBox.
Enter
Zavře rozbalovací seznam a vrátí aktivaci pro vstup zpět komponentě ComboBox. Je-li komponenta
ComboBox upravitelná a uživatel vloží text, nastaví hodnotu vloženého textu stisknutím klávesy Enter.
Home
Přesune výběr na první položku seznamu.
PageUp
Posune výběr o jednu stránku nahoru.
PageDown
Posune výběr o jednu stránku dolů.
Když přidáte komponentu ComboBox do aplikace, můžete u ní přidáním následujících řádek kódu jazyka
ActionScript nastavit usnadnění přístupu pro program pro čtení z obrazovky:
import fl.accessibility.ComboBoxAccImpl;
ComboBoxAccImpl.enableAccessibility();
Usnadnění přístupu pro komponentu stačí povolit pouze jednou bez ohledu na to, kolik instancí komponent máte.
Parametry komponenty ComboBox
V Inspektoru vlastnosti nebo Inspektoru komponenty lze nastavit následující parametry pro každou instanci
komponenty ComboBox: dataProvider, editable, prompt a rowCount. Každý z těchto parametrů má odpovídající
vlastnost kódu jazyka ActionScript stejného názvu. Informace týkající se možných hodnot pro tyto parametry
naleznete pod třídou ComboBox v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional. Informace
o používání parametru dataProvider naleznete v kapitole „Použití parametru dataProvider“ na stránce 30.
Vytváření aplikací s komponentou ComboBox
Následuje postup přidání komponenty ComboBox do aplikace při vyvíjení. Komponenta ComboBox je upravitelná, a
když napíšete do textového pole text Přidat, přidá se v tomto příkladu položka do rozbalovacího seznamu.
2 Přetáhněte na vymezenou plochu ovladač ComboBox a přidělte mu název instance aCb. Na kartě Parametry
nastavte parametr editable na hodnotu true (pravda).
54
3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód :
var items:Array = [
{label:"screen1", data:"screenData1"},
];
aCb.addEventListener(ComponentEvent.ENTER, onAddItem);
function onAddItem(event:ComponentEvent):void {
var newRow:int = 0;
if (event.target.text == "Add") {
newRow = event.target.length + 1;
event.target.addItemAt({label:"screen" + newRow, data:"screenData" + newRow},
event.target.length);
}
}
Vytváření komponent ComboBox pomocí jazyka ActionScript
V následujícím příkladu je pomocí kódu jazyka ActionScript vytvořena komponenta ComboBox a ta je zaplněna
seznamem univerzit z oblasti San Francisca v Kalifornii. Nastaví vlastnost width komponenty ComboBox tak, aby se
přizpůsobila šířce vloženého textu, a nastaví vlastnost dropdownWidth o kousek širší, aby se přizpůsobila nejdelšímu
názvu univerzity.
V tomto příkladu je vytvořen seznam univerzit v instanci Array, přičemž jsou pomocí vlastnosti label uloženy názvy
škol a pomocí vlastnosti data uloženy adresy URL webových stránek jednotlivých škol. Přiřadí instanci Array ke
komponentě ComboBox nastavením její vlastnosti dataProvider.
Když si uživatel vybere ze seznamu univerzitu, spustí se tím událost.Událost CHANGE a vyvolání funkce
changeHandler(), která načte vlastnost data do žádosti adresy URL o přístup na školní webové stránky.
Poznámka: Poslední řádek kódu nastaví vlastnost instance komponenty ComboBox selectedIndex na hodnotu -1,
díky čemuž je po uzavření seznamu znovu zobrazena výzva. Jinak by byla výzva nahrazena názvem vybrané školy.
2 Přetáhněte komponentu z panelu Komponenty do panelu Knihovna.
55
import flash.net.navigateToURL;
var sfUniversities:Array = new Array(
{label:"University of California, Berkeley",
data:"http://www.berkeley.edu/"},
{label:"University of San Francisco",
data:"http://www.usfca.edu/"},
{label:"San Francisco State University",
data:"http://www.sfsu.edu/"},
{label:"California State University, East Bay",
data:"http://www.csuhayward.edu/"},
{label:"Stanford University", data:"http://www.stanford.edu/"},
{label:"University of Santa Clara", data:"http://www.scu.edu/"},
{label:"San Jose State University", data:"http://www.sjsu.edu/"}
);
var aCb:ComboBox = new ComboBox();
aCb.dropdownWidth = 210;
aCb.width = 200;
aCb.move(150, 50);
aCb.prompt = "San Francisco Area Universities";
aCb.dataProvider = new DataProvider(sfUniversities);
aCb.addEventListener(Event.CHANGE, changeHandler);
addChild(aCb);
var request:URLRequest = new URLRequest();
request.url = ComboBox(event.target).selectedItem.data;
navigateToURL(request);
aCb.selectedIndex = -1;
}
Tento příklad můžete implementovat a spustit ve vývojovém prostředí Flash, ale při pokusu o přístup na webové
stránky univerzity klepnutím na položky v poli ComboBox se bude zobrazovat varovné hlášení. Chcete-li získat plně
funkční komponentu ComboBox na internetu, navštivte následující stránky:
http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html
Používání komponenty DataGrid
Komponenta DataGrid umožňuje zobrazení dat v řádcích a sloupcích tabulky, přičemž data získává z pole nebo z
externího souboru XML, který je možné pro komponentu DataProvider analyzovat do pole. Komponenta DataGrid
umožňuje vertikální i horizontální posun, podporu událostí (včetně podpory upravitelných buněk) a možnosti
uspořádání.
56
V tabulce můžete nastavit rozměr i vlastnosti položek písmo, barva a hranice sloupců. Pro jakýkoli sloupec v tabulce
můžete použít vlastní filmový klip jako vykreslovací modul buňky. (Vykreslovací modul buňky zobrazuje obsah
buňky.) Posuvné lišty můžete vypnout a pro vytvoření zobrazení na stránku můžete použít metody tabulky DataGrid.
Další informace týkající se přizpůsobení naleznete pod třídou DataGridColumn v Referenční příručce jazyka
Další témata nápovědy
Vytvoření, zaplnění a změna velikosti komponenty DataGrid
Přizpůsobení a třídění komponent DataGrid
Filtrování a formátování dat v komponentě DataGrid
Interakce uživatele s komponentou DataGrid
Pro interakci s komponentou DataGrid lze použít jak myš, tak klávesnici.
Má-li vlastnost sortableColumns i vlastnost sloupce sortable hodnotu true (pravda), klepnutím na záhlaví
sloupce uspořádáte data podle hodnot sloupce. Uspořádání můžete u jednotlivých sloupců vypnout nastavením jejich
vlastnosti sortable na hodnotu false (nepravda).
Má-li vlastnost resizableColumns hodnotu true (pravda), je možno měnit rozměr sloupce přetahováním
rozdělovačů sloupců v řádku záhlaví.
Klepnutím na upravitelnou buňku ji nastavíte na aktivní pro vstup, klepnutí na neupravitelnou buňku nemá na
aktivaci pro vstup žádný vliv. Samostatnou buňku lze editovat, pokud obě její vlastnosti DataGrid.editable a
DataGridColumn.editable mají hodnotu true.
Další informace naleznete pod třídami DataGrid a DataGridColumn v Referenční příručce jazyka ActionScript 3.0.
Je-li instance komponenty DataGrid aktivní pro vstup, ať již po klepnutí myší nebo přepnutí pomocí klávesy
Tabulátor, můžete ji ovládat pomocí následujících kláves:
Klíč
Popis
Šipka dolů
Pokud je buňka upravována, posune se kurzor na konec textu dané buňky. Pokud buňku nelze upravit,
ovládá šipka dolů výběr stejně jako komponenta List.
Šipka nahoru
Pokud je buňka upravována, posune se kurzor na začátek textu dané buňky. Pokud buňku nelze upravit,
ovládá šipka nahoru výběr stejně jako komponenta List.
Shift+šipka nahoru/dolů
Jestliže tabulku DataGrid nelze upravovat a vlastnost allowMultipleSelection má hodnotu true,
označí se sousední řádky. Obrácení směru pomocí šipky opačného směru odznačí vybrané řady, dokud
nepřejedete přes počáteční řádek, od kterého byly daným směrem řádky vybrány.
Shift+klepnutí myší
Má-li instance allowMultipleSelection hodnotu true, vybere všechny řádky mezi vybraným
řádkem a aktuální pozicí stříšky (zvýrazněná buňka).
Ctrl+klepnutí myší
Má-li instance allowMultipleSelection hodnotu true, vybere další řádky, které spolu nemusí
sousedit.
Šipka vpravo
Pokud je buňka upravována, posune se kurzor o jeden znak vpravo. Pokud buňku nelze upravovat,
nedělá šipka vpravo nic.
Šipka vlevo
Pokud je buňka upravována, posune se kurzor o jeden znak vlevo. Pokud buňku nelze upravovat,
nedělá šipka vlevo nic.
Home
Vybere první řádek v tabulce DataGrid.
End
Vybere poslední řádek v tabulce DataGrid.
57
Klíč
Popis
PageUp
Vybere první řádek na stránce tabulky DataGrid. Stránka se skládá z více řádků, které může tabulka
DataGrid zobrazit bez nutnosti posunu.
PageDown
Vybere poslední řádek na stránce tabulky DataGrid. Stránka se skládá z více řádků, které může tabulka
DataGrid zobrazit bez nutnosti posunování.
Return/Enter/Shift+Enter
Pokud lze buňku upravovat, provede se změna a kurzor se přesune do buňky na dalším řádku ve
stejném sloupci (dolů nebo nahoru v závislosti na přepínání klávesou Shift).
Shift+Tabulátor/Tabulátor
Pokud lze tabulku DataGrid upravovat, stane se aktivní pro vstup předchozí/následující položka, dokud
není dosaženo konce sloupce, a poté následující/přecházející řádek až do dosažení první nebo poslední
buňky. Je-li vybrána první buňka, přesune stisk kláves Shift+Tabulátor aktivaci pro vstup na
předcházející ovládací prvek. Je-li označena poslední buňka, stiskem klávesy Tabulátor se aktivace pro
vstup přesune na následující ovládací prvek.
Pokud tabulku DataGrid upravovat nelze, přesune se aktivace pro vstup na předcházející/následující
ovládací prvek.
Komponentu DataGrid lze použít jako základ pro mnohé typy aplikací řízené tokem dat. Do tabulek uspořádaná data
lze nejen lehce zobrazit, ale také je možné využívat možností vykreslovacího modulu buňky, čímž lze dosáhnou
propracovanějších a snáze upravitelných prvků uživatelského rozhraní. Praktická použití komponenty DataGrid:
• Klient webové pošty
• Stránky s výsledky vyhledávání
• Aplikace typu tabulkového procesoru, například kalkulátory půjček a aplikace daňových formulářů
Při navrhování aplikace s komponentou DataGrid se hodí znalost navrhování komponenty List, protože třída
DataGrid je rozšířením třídy SelectableList. Další informace týkající se třídy SelectableList a komponenty List
naleznete pod třídami SelectableList a List v Referenční příručce jazyka ActionScript 3.0.
Když přiřadíte komponentu DataGrid k vaší aplikaci, můžete u ní přidáním následujících řádků kódu jazyka
ActionScript nastavit usnadnění přístupu pro programy pro čtení z obrazovky:
import fl.accessibility.DataGridAccImpl;
DataGridAccImpl.enableAccessibility();
Nastavit usnadnění přístupu u komponenty stačí pouze jednou bez ohledu na to, kolik instancí komponenta má. Více
informací naleznete v Kapitole 18 „Vytváření přístupného obsahu“ v příručce Používání programu Flash.
Parametry komponenty DataGrid
V Inspektoru vlastnosti nebo Inspektoru komponenty můžete každé instanci komponenty DataGrid nastavit
následující parametry vyvíjení: allowMultipleSelection, editable, headerHeight,
horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, resizableColumns,
rowHeight, showHeaders, verticalLineScrollSize, verticalPageScrollSize a verticalScrollPolicy.
Každý z těchto parametrů má odpovídající vlastnost jazyka ActionScript stejného názvu. Informace týkající se
možných hodnot pro tyto parametry naleznete pod třídou DataGrid v Referenční příručce jazyka ActionScript 3.0
Vytváření aplikací s komponentou DataGrid
Při vytváření aplikací s komponentou DataGrid musíte nejdříve určit, odkud vaše data budou pocházet. Data většinou
pocházejí z komponenty Array, kterou lze přetáhnout do tabulky nastavením vlastnosti DataProvider. Pro přidání
dat do tabulky můžete také použít metody tříd DataGrid a DataGridColumn.
58
Použití místního poskytovatele dat s komponentou DataGrid:
V tomto příkladě je vytvořena komponenta DataGrid pro zobrazení soupisky softbalového družstva. Ta definuje
soupisku v Poli (aRoster) a přiřadí jí vlastnost dataProvider komponenty DataGrid.
1 V programu Flash použijte příkaz Soubor > Nový a dále zvolte soubor programu Flash (ActionScript 3.0).
2 Přetáhněte komponentu DataGrid z panelu Komponenty na vymezenou plochu.
3 V Inspektoru vlastnosti zadejte název instance aDg.
bldRosterGrid(aDg);
aRoster = [
{Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"},
{Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"},
{Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"},
{Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"},
{Name:"Jennifer Dunbar", Bats:"R", Throws:"R", Year:"Fr", Home: "Seaside, CA"},
{Name:"Patty Crawford", Bats:"L", Throws:"L", Year:"Jr", Home: "Whittier, CA"},
{Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"},
{Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"},
{Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"},
{Name:"Karen Bronson", Bats:"R", Throws:"R", Year: "Sr", Home: "Billings, MO"},
{Name:"Sylvia Munson", Bats:"R", Throws:"R", Year: "Jr", Home: "Pasadena, CA"},
{Name:"Carla Gomez", Bats:"R", Throws:"L", Year: "Sr", Home: "Corona, CA"},
{Name:"Betty Kay", Bats:"R", Throws:"R", Year: "Fr", Home: "Palo Alto, CA"},
];
dg.columns = ["Name", "Bats", "Throws", "Year", "Home"];
dg.move(50,50);
};
Funkce bldRosterGrid() nastavuje velikost komponenty DataGrid a určuje pořadí sloupců a jejich velikost.
U komponenty DataGrid v aplikaci určete sloupce a přidejte uspořádání.
Všimněte si, že můžete klepnout myší na jakékoli záhlaví sloupce, čímž uspořádáte obsah komponenty DataGrid v
sestupném pořadí podle hodnot sloupce.
59
V následujícím příkladu jsou pomocí metody addColumn() přidány instance objektu DataGridColumn do datové
mřížky. Sloupce obsahují jména hráčů a jejich výsledky. V příkladu je také nastavena vlastnost sortOptions, která
každému sloupci určuje možnosti uspořádání: Array.CASEINSENSITIVE pro sloupec Jméno a Array.NUMERIC pro
sloupec Výsledky. Nastaví vhodný rozměr komponenty DataGrid nastavením délky na počet řádků a šířky na 200.
1 V programu Flash použijte příkaz Soubor > Nový a dále zvolte soubor programu Flash (ActionScript 3.0).
2 Přetáhněte komponentu DataGrid z panelu Komponenty na vymezenou plochu.
import fl.controls.dataGridClasses.DataGridColumn;
import fl.events.DataGridEvent;
// Create columns to enable sorting of data.
var nameDGC:DataGridColumn = new DataGridColumn("name");
nameDGC.sortOptions = Array.CASEINSENSITIVE;
var scoreDGC:DataGridColumn = new DataGridColumn("score");
scoreDGC.sortOptions = Array.NUMERIC;
aDg.addColumn(nameDGC);
aDg.addColumn(scoreDGC);
var aDP_array:Array = new Array({name:"clark", score:3135}, {name:"Bruce", score:403},
{name:"Peter", score:25})
aDg.dataProvider = new DataProvider(aDP_array);
aDg.width = 200;
Vytváření instancí komponenty DataGrid pomocí jazyka ActionScript
V tomto příkladu je pomocí kódu jazyka ActionScript vytvořena komponenta DataGrid a ta je zaplněna Polem jmen
hráčů a výsledků.
2 Přetáhněte komponentu DataGrid z panelu Komponenty do panelu Knihovna aktuálního dokumentu.
Tím komponentu přidáte do knihovny, ale v aplikaci nebude vidět.
addChild(aDg);
aDg.columns = [ "Name", "Score" ];
aDg.setSize(140, 100);
aDg.move(10, 40);
Tento kód vytvoří instanci komponenty DataGrid a poté upraví velikost a umístění tabulky.
4 Vytvořte pole, přidejte do něj data a označte ho jako poskytovatele dat tabulky DataGrid:
60
var aDP_array:Array = new Array();
aDP_array.push({Name:"Clark", Score:3135});
aDP_array.push({Name:"Bruce", Score:403});
aDP_array.push({Name:"Peter", Score:25});
aDg.dataProvider = new DataProvider(aDP_array);
Načtení tabulky DataGrid pomocí souboru XML
V následujícím přikladu jsou pomocí třídy DataGridColumn vytvořeny sloupce komponenty DataGrid. Tabulka
DataGrid je zaplněna objektem ve formátu XML jako parametrem hodnota konstruktoru DataProvider().
1 Pomocí textového editoru vytvořte soubor XML s následujícími informacemi a uložte jej pod názvem team.xml
do stejné složky kam uložíte soubor FLA.
<team>
<player name="Player A" avg="0.293" />
<player name="Player B" avg="0.214" />
<player name="Player C" avg="0.317" />
</team>
3 Poklepáním přidáte komponentu DataGrid v panelu Komponenty na vymezenou plochu.
61
import
import
import
import
fl.controls.dataGridClasses.DataGridColumn;
flash.net.*;
flash.events.*;
var request:URLRequest = new URLRequest("team.xml");
var loader:URLLoader = new URLLoader;
loader.load(request);
loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
function loaderCompleteHandler(event:Event):void {
var teamXML:XML = new XML(loader.data);
var nameCol:DataGridColumn = new DataGridColumn("name");
nameCol.headerText = "Name";
nameCol.width = 120;
var avgCol:DataGridColumn = new DataGridColumn("avg");
avgCol.headerText = "Average";
avgCol.width = 60;
var myDP:DataProvider = new DataProvider(teamXML);
aDg.columns = [nameCol, avgCol];
aDg.width = 200;
aDg.dataProvider = myDP;
}
Používání komponenty Label
Komponenta Label zobrazuje jeden řádek textu, obvykle pro označení jiného prvku nebo činnosti na webové stránce.
Můžete určit, zda bude tento popis ve formátu HTML, aby bylo možno využít jeho tagů pro formátování textu. Je také
možné ovládat zarovnání a velikost popisu. Komponenty Label nemají hranice, nelze je aktivovat pro vstup a nevysílají
žádnou událost.
V živém náhledu každé instance komponenty Label se odrážejí změny provedené v parametrech Inspektoru vlastnosti,
resp. Inspektoru komponenty při vyvíjení. Popis nemá okraje, a tak jediným způsobem, jak zobrazit živý náhled, je
nastavit jeho parametr text.
Interakce uživatele s komponentou Label
Komponenta Label slouží k vytvoření textového popisu jiné komponenty ve formuláři, například popis „Jméno:“ vlevo
od pole TextInput, které přijímá jméno uživatele. Je dobré použít komponentu Label místo obyčejného textového pole,
protože můžete využít styly k udržení konzistentního vzhledu a dojmu.
Chcete-li, aby se komponenta Label natáčela, musíte vložit písma, jinak nebudou při testování filmu zobrazeny.
62
Parametry komponenty Label
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty Label nastavit následující
parametry vyvíjení: autoSize, condenseWhite, selectable, text a wordWrap. Každý z těchto parametrů má
odpovídající vlastnost jazyka ActionScript stejného názvu. Informace týkající se možných hodnot pro tyto parametry
naleznete pod třídou Label v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional.
Vytváření aplikací s komponentou Label
Následuje postup přidání komponenty Label do aplikace při vyvíjení. V tomto příkladu se v popisu zobrazí pouze text
„Datum vypršení platnosti“.
2 Přetáhněte komponentu Label z panelu Komponenty na vymezenou plochu a v Inspektoru vlastnosti pro ni zadejte
následující hodnoty:
• Jako název instance zadejte aLabel.
• Hodnotu W zadejte 80.
• Hodnotu X zadejte 100.
• Hodnotu Y zadejte 100.
• Zadejte Datum splatnosti jako parametr text.
3 Přetáhněte komponentu TextArea z panelu Komponenty na vymezenou plochu a v Inspektoru vlastnosti pro ni
• Jako název instance zadejte aTa.
• Hodnotu H zadejte22.
• Hodnotu X zadejte 200.
• Hodnotu Y zadejte 100.
var today:Date = new Date();
var expDate:Date = addDays(today, 14);
aTa.text = expDate.toDateString();
function addDays(date:Date, days:Number):Date {
return addHours(date, days*24);
}
function addHours(date:Date, hrs:Number):Date {
return addMinutes(date, hrs*60);
}
function addMinutes(date:Date, mins:Number):Date {
return addSeconds(date, mins*60);
}
function addSeconds(date:Date, secs:Number):Date {
var mSecs:Number = secs * 1000;
var sum:Number = mSecs + date.getTime();
return new Date(sum);
}
63
Vytváření instancí komponenty pomocí jazyka ActionScript
V následujícím příkladu je pomocí kódu jazyka ActionScript vytvořen parametr Label. Pomocí komponenty Label
označí funkci komponenty ColorPicker a pomocí vlastnosti htmlText použije formátování na text komponenty Label.
2 Přetáhněte komponentu Label z panelu Komponenty do panelu Knihovna aktuálního dokumentu.
3 Přetáhněte komponentu ColorPicker z panelu Komponenty do panelu Knihovna aktuálního dokumentu.
import fl.controls.Label;
var aLabel:Label = new Label();
var aCp:ColorPicker = new ColorPicker();
addChild(aLabel);
addChild(aCp);
aLabel.htmlText = '<font face="Arial" color="#FF0000" size="14">Fill:</font>';
aLabel.x = 200;
aLabel.y = 150;
aLabel.width = 25;
aLabel.height = 22;
aCp.x = 230;
aCp.y = 150;
Použití komponenty List
Komponenta List je posouvatelný seznam s jedním nebo vícenásobným výběrem. Seznam také může zobrazovat
grafiku včetně jiných komponent. Položky zobrazené v seznamu přidáváte pomocí dialogového okna Hodnoty, které
se zobrazí po klepnutí na popisy nebo pole s parametry dat. Pro přidání položek do seznamu také můžete použít
metody List.addItem() a List.addItemAt.
Komponenta List používá indexování vycházející z nuly, kde položka s indexem 0 je položkou zobrazenou na prvním
místě. Při přidávání, odebírání nebo nahrazování položek seznamu pomocí metody třídy List bude možná třeba určit
index položky seznamu.
Interakce uživatele s komponentou List
Seznam lze nastavit tak, aby uživatel mohl označit jednu i více položek. Například uživatel navštěvující webovou
stránku internetového obchodu si potřebuje vybrat položky ke koupi. Seznam obsahuje 30 položek, kterými může
uživatel pomocí posunu procházet. Jednotlivé položky vybírá klepnutím.
Seznam můžete vytvořit také tak, aby používal jako řádky vlastní filmové klipy, takže uživatel uvidí více informací.
Například u e-mailových aplikací může být každá poštovní schránka komponentou List a každý řádek může obsahovat
ikony označující prioritu a stav.
64
Komponenta List bude aktivována pro vstup po klepnutí myší nebo po přepnutí klávesou Tabulátor. Následně ji pak
můžete ovládat těmito klávesami:
Klíč
Popis
Alfanumerické klávesy
Přejděte na další položku, která má jako první znak svého popisu Key.getAscii().
Ctrl
Přepínací klávesa umožňující výběr nebo zrušení výběru více se sebou navzájem nesousedících
položek.
Šipka dolů
Výběr se přesune o jednu položku níže.
Home
Výběr se přesune na první položku seznamu.
PageDown
Výběr se přesune o jednu stránku níže.
PageUp
Výběr se přesune o jednu stránku výše.
Shift
Umožňuje výběr sousedících položek.
Šipka nahoru
Výběr se přesune o jednu položku výše.
Poznámka: Všimněte si, že velikost posunu je uvedena v obrazových bodech a ne v řádcích.
Poznámka: Velikost strany používaná klávesami Page Up a Page Down je o jednu položku menší, než počet položek,
které se na stránku vejdou. Takže například posouvání stránek v rozbalovacím seznamu s 10 položkami pomocí klávesy
Page Up nebo Page Down bude zobrazovat položky 0-9, 9-18, 18-27 atd., takže jedna položka bude na každé stránce
přebývat.
Další informace týkající se nastavení aktivace pro vstup naleznete pod rozhraním IFocusManager interface a třídou
V živém náhledu každé instance komponenty List se odráží změny ve vymezené ploše, které byly v parametrech
provedeny Inspektorem vlastnosti nebo Inspektorem komponenty při vyvíjení.
Když přidáte komponentu List do aplikace, můžete u ní přidáním následujících řádek kódu jazyka ActionScript
nastavit usnadnění přístupu pro program pro čtení z obrazovky:
import fl.accessibility.ListAccImpl;
ListAccImpl.enableAccessibility();
Nastavit usnadnění přístupu u komponenty stačí pouze jednou, bez ohledu na to, kolik instancí komponenta má. Více
informací naleznete v Kapitole 18 „Vytváření přístupného obsahu“ v příručce Používání programu Flash.
Parametry komponenty List
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty List nastavit následující
parametry: allowMultipleSelection, dataProvider, horizontalLineScrollSize,
horizontalPageScrollSize, horizontalScrollPolicy, multipleSelection, verticalLineScrollSize,
verticalPageScrollSize a verticalScrollPolicy. Každý z těchto parametrů má odpovídající vlastnost jazyka
ActionScript stejného názvu. Informace týkající se možných hodnot pro tyto parametry naleznete pod třídou List v
Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional. Informace o použití parametru dataProvider
naleznete v oddíle „Použití parametru dataProvider“ na stránce 30.
Vytváření aplikací s komponentou List
V následujícím příkladu je popsáno, jak při vyvíjení přidat do aplikace komponentu List.
65
Přidání jednoduché komponenty List do aplikace
V tomto příkladu se komponenta List skládá z popisů označujících modely aut a datových polí obsahujících ceny.
2 Přetáhněte komponentu List z panelu Komponenty na vymezenou plochu.
3 V inspektoru vlastnosti proveďte následující:
• Jako název instance zadejte aList.
• Parametru W (šířka) přiřaďte hodnotu 200.
4 Pomocí nástroje Text vytvořte pod instancí aList textové pole a pojmenujte jej názvem instance aTf.
aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;
// Create these items in the Property inspector when data and label
// parameters are available.
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.allowMultipleSelection = true;
aList.addEventListener(Event.CHANGE, showData);
function showData(event:Event) {
aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}
Tento kód používá metodu addItem k zaplnění komponenty aList třemi položkami, přičemž každé z nich přiřadí
hodnotu popis, která se zobrazí v seznamu, a hodnotu data. Vyberete-li položku ze Seznamu, vyvolá posluchač
události funkci showData(), která zobrazí hodnotu data pro danou položku.
6 Chcete-li tuto aplikaci sestavit a spustit, zvolte příkaz Ovládání > Testovat film.
Zaplnění instance komponenty List poskytovatelem dat
V tomto příkladu se vytvoří Seznam modelů aut a jejich cen. K zaplnění komponenty List je však použit poskytovatel
dat a ne metoda addItem.
2 Přetáhněte komponentu List z panelu Komponenty na vymezenou plochu.
3 V inspektoru vlastnosti proveďte následující:
• Parametru W (šířka) přiřaďte hodnotu 200.
4 Pomocí nástroje Text vytvořte pod instancí aList textové pole a pojmenujte jej názvem instance aTf.
66
aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;
var cars:Array = [
{label:"1956 Chevy (Cherry Red)", data:35000},
{label:"1966 Mustang (Classic)", data:27000},
{label:"1976 Volvo (Xcllnt Cond)", data:17000},
];
aList.dataProvider = new DataProvider(cars);
aList.addEventListener(Event.CHANGE, showData);
function showData(event:Event) {
aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}
6 Pomocí příkazu Ovládání > Testovat film si prohlédněte komponentu List s jejími položkami.
Používání komponenty List k ovládání instance komponenty MovieClip
V následujícím příkladu se vytvoří Seznam s názvy barev a po vybrání jedné z nich se daná barva použije na
komponentu MovieClip.
1 Vytvořte dokument Flash (ActionScript 3.0).
2 Přetáhněte komponentu List z panelu Komponenty na vymezenou plochu a v Inspektoru vlastnosti pro ni zadejte
• Jako hodnotu H zadejte 60.
67
aList.addItem({label:"Blue", data:0x0000CC});
aList.addItem({label:"Green", data:0x00CC00});
aList.addItem({label:"Yellow", data:0xFFFF00});
aList.addItem({label:"Orange", data:0xFF6600});
aList.addItem({label:"Black", data:0x000000});
addChild(aBox);
function changeHandler(event:Event) {
drawBox(aBox, event.target.selectedItem.data);
};
}
5 Chcete-li v komponentě MovieClip zobrazit barvy, klepněte na ně v komponentě List.
Vytvoření instance komponenty List pomocí jazyka ActionScript:
Tento příklad vytvoří pomocí jazyka ActionScript jednoduchý seznam a tento seznam zaplní pomocí metody
addItem().
2 Přetáhněte komponentu List z panelu Komponenty do panelu Knihovna.
aList.addItem({label:"One", data:1});
aList.addItem({label:"Two", data:2});
aList.addItem({label:"Three", data:3});
aList.addItem({label:"Four", data:4});
aList.addItem({label:"Five", data:5});
addChild(aList);
trace(event.target.selectedItem.data);
}
68
Používání komponenty NumericStepper
Komponenta NumericStepper umožňuje uživateli procházet seřazenou množinou čísel. Tato komponenta se skládá z
čísel v textových polích zobrazených vedle malých tlačítek s šipkou nahoru a dolů. Stisknutím odpovídajícího tlačítka
se číslo bude zvyšovat nebo snižovat o jednotku definovanou parametrem stepSize, dokud bude uživatel držet
tlačítko stisknuté nebo dokud nebude dosaženo maximální, resp. minimální hodnoty. Text v textovém poli
komponenty NumericStepper lze také upravovat.
V živém náhledu jednotlivých instancí komponenty NumericStepper se odrážejí změny, které byly v parametrech
provedeny Inspektorem vlastnosti nebo Inspektorem komponenty při vyvíjení. V živém náhledu však neexistuje žádná
interakce šipek komponenty NumericStepper s myší nebo klávesnicí.
Interakce uživatele s komponentou NumericStepper
Komponentu NumericStepper můžete použít vždy, když chcete, aby uživatel zadal číselnou hodnotu. Komponentu
NumericStepper lze použít např. ve formuláři k nastavení měsíce, dne a roku vypršení platnosti kreditní karty.
Komponentu NumericStepper lze použít také ke zvětšení nebo zmenšení velikosti písma.
Komponenta NumericStepper dokáže zpracovat pouze číselná data. Během vyvíjení je také nutné změnit rozměr
krokovače, aby dokázal zobrazit více než dvoumístná čísla (např. čísla 5246 nebo 1,34).
Komponentu NumericStepper můžete v aplikaci povolit nebo zakázat. V zakázaném stavu nepřijímá komponenta
NumericStepper vstupy z klávesnice ani myši. Je-li komponenta NumericStepper povolena, bude po klepnutí
tlačítkem myši nebo stisknutí klávesy aktivována pro vstup a její interní aktivace bude nastavena na textové pole. Je-li
komponenta NumericStepper aktivní pro vstup, můžete ji ovládat následujícími klávesami:
Klíč
Popis
Šipka dolů
Hodnoty se mění o jednu jednotku.
Šipka vlevo
Posune kurzor v textovém poli doleva.
Šipka vpravo
Posune kurzor v textovém poli doprava.
Shift+Tabulátor
Přesune aktivaci pro vstup na předcházející objekt.
Tabulátor
Přesune aktivaci pro vstup na následující objekt.
Šipka nahoru
Hodnoty se mění o jednu jednotku.
Další informace týkající se nastavení aktivace pro vstup naleznete pod třídou FocusManager v Referenční příručce
jazyka ActionScript 3.0 aplikace Flash Professional a v části „Práce s instancí FocusManager“ na stránce 27.
Parametry komponenty NumericStepper
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty NumericStepper nastavit
následující parametry: maximum, minimum, stepSize a value. Každý z těchto parametrů má odpovídající vlastnost
jazyka ActionScript stejného názvu. Informace týkající se možných hodnot pro tyto parametry naleznete pod třídou
NumericStepper v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional.
69
Vytváření aplikací pomocí komponenty NumericStepper
Následuje postup přidání komponenty NumericStepper do aplikace při vyvíjení. V příkladu se komponenty
NumericStepper a Label umístí na vymezenou plochu a vytvoří se posluchač pro událost Event.událost CHANGE v
instanci komponenty NumericStepper. Jakmile se hodnota v číselném krokovači změní, v tomto příkladu se zobrazí
nová hodnota ve vlastnosti text instance Label.
1 Přetáhněte komponentu NumericStepper z panelu Komponenty na vymezenou plochu.
2 V Inspektoru vlastnosti zadejte název instance aNs.
3 Přetáhněte komponentu Label z panelu Komponenty na vymezenou plochu.
4 V Inspektoru vlastnosti zadejte jméno instance aLabel.
aLabel.text = "value = " + aNs.value;
aNs.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(event:Event) :void {
aLabel.text = "value = " + event.target.value;
};
V tomto příkladu je nastavena vlastnost text popisu na hodnotu komponenty NumericStepper. Funkce
changeHandler() aktualizuje vlastnost text popisu vždy, když se změní hodnota v instanci komponenty
NumericStepper.
Vytvoření komponenty NumericStepper pomocí jazyka ActionScript:
V tomto příkladu jsou pomocí kódu jazyka ActionScript vytvořeny tři komponenty NumericStepper, přičemž každá
z nich slouží pro zadání měsíce, dne a roku uživatelova narození. Navíc také přidá Popisy dotazu a identifikátorů pro
jednotlivé komponenty NumericStepper.
2 Přetáhněte komponentu Label do panelu Knihovna.
3 Přetáhněte komponentu NumericStepper do panelu Knihovna.
70
import fl.controls.NumericStepper;
var
var
var
var
dobPrompt:Label = new Label();
moPrompt:Label = new Label();
dayPrompt:Label = new Label();
yrPrompt:Label = new Label();
var moNs:NumericStepper = new NumericStepper();
var dayNs:NumericStepper = new NumericStepper();
var yrNs:NumericStepper = new NumericStepper();
addChild(dobPrompt);
addChild(moPrompt);
addChild(dayPrompt);
addChild(yrPrompt);
addChild(moNs);
addChild(dayNs);
addChild(yrNs);
dobPrompt.setSize(65, 22);
dobPrompt.text = "Date of birth:";
dobPrompt.move(80, 150);
moNs.move(150, 150);
moNs.setSize(40, 22);
moNs.minimum = 1;
moNs.maximum = 12;
moNs.stepSize = 1;
moNs.value = 1;
moPrompt.setSize(25, 22);
moPrompt.text = "Mo.";
moPrompt.move(195, 150);
dayNs.move(225, 150);
dayNs.setSize(40, 22);
dayNs.minimum = 1;
dayNs.maximum = 31;
dayNs.stepSize = 1;
dayNs.value = 1;
dayPrompt.setSize(25, 22);
dayPrompt.text = "Day";
dayPrompt.move(270, 150);
yrNs.move(300, 150);
yrNs.setSize(55, 22);
yrNs.minimum = 1900;
yrNs.maximum = 2006;
yrNs.stepSize = 1;
yrNs.value = 1980;
yrPrompt.setSize(30, 22);
yrPrompt.text = "Year";
yrPrompt.move(360, 150);
71
Používání komponenty ProgressBar
Komponenta ProgressBar zobrazuje průběh načítání obsahu a informuje uživatele, má-li obsah velký objem, který by
mohl zpozdit provedení aplikace. Komponenta ProgressBar je užitečná pro zobrazení průběhu načítání obrázků a částí
aplikace. Průběh načítání může být neměnný nebo proměnlivý. Lišta neměnného průběhu načítání je lineární
reprezentací průběhu úlohy v čase a používá se, když je objem načítaného obsahu známý. Lišta proměnlivého průběhu
načítání se používá, když velikost objemu načítaných dat není známa. Lze také přidat komponentu Label, která
zobrazuje průběh načítání v procentech.
Komponenta ProgessBar používá devítistupňové krokování a má vzhled lišty nebo dráhy, nebo má proměnlivý vzhled.
Interakce uživatele s komponentou ProgressBar
Existují tři režimy, ve kterých se komponenta ProgressBar používá. Nejpoužívanějšími režimy jsou režim události a
režim dotazu. Tyto režimy určují proces načítání, který buď vyšle událost progress a complete (režimy události a
dotazu), nebo umožní přístup k vlastnostem bytesLoadeda bytesTotal (režim dotazu). Komponentu ProgressBar
můžete použít také v ručním režimu nastavením vlastností maximum, minimum a value spolu s voláním metody
ProgressBar.setProgress(). Můžete nastavit vlastnost proměnlivý k určení, zda komponenta ProgressBar používá
pruhovanou výplň a zdroj neznámé velikosti (true) nebo plnou výplň a zdroj známé velikosti (false).
Režim komponenty ProgressBar se nastavuje úpravou vlastnosti mode, ať již pomocí parametru mode v okně
inspektoru vlastností nebo inspektoru komponent nebo pomocí kódu jazyka ActionScript.
Použijete-li k zobrazení stavu zpracování, např. k analýze 100 000 položek, které jsou ve smyčce jednoho snímku,
komponentu Progressbar, nebude patrná žádná aktualizace komponenty ProgressBar, protože na obrazovce se nic
nepřekreslí.
Parametry komponenty ProgressBar
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty ProgressBar nastavit
následující parametry: direction, mode a source. Každá z nich má odpovídající vlastnost jazyka ActionScript
stejného názvu.
Pomocí jazyka ActionScript lze ovládat tyto a další možnosti komponenty ProgressBar pomocí jejích vlastností, metod
a událostí. Další informace naleznete pod třídou ProgressBar v Referenční příručce jazyka ActionScript 3.0 aplikace
Flash Professional.
Vytváření aplikací pomocí komponenty ProgressBar
Následuje postup přidání komponenty ProgressBar do aplikace při vyvíjení. V tomto případě používá komponenta
ProgressBar režim události. V režimu události načítaný obsah vyšle události progress a complete, které komponenta
ProgressBar posílá k určení průběhu. V případě výskytu události progress se v tomto příkladu aktualizuje popis, aby
se zobrazilo, kolik procent z daného obsahu již bylo načteno. Vyskytne-li se událost complete, zobrazí se v tomto
příkladu zpráva „Načítání dokončeno“ a hodnota vlastnosti bytesTotal, která vyjadřuje velikost souboru.
2 Přetáhněte komponentu ProgressBar z panelu komponenty na vymezenou plochu.
• V Inspektoru vlastnosti zadejte jako název instance aPb.
72
• V oddíle Parametry zadejte pro hodnotu X 200.
• Pro hodnotu Y zadejte 260.
• Zvolte hodnotu event jako parametr mode.
3 Přetáhněte komponentu Button z panelu Komponenty na vymezenou plochu.
• V Inspektoru vlastnosti zadejte jako název instance loadButton.
• Pro parametr X zadejte hodnotu 220.
• Pro parametr Y zadejte hodnotu 290.
• Zadejte hodnotuLoadSound jako parametr label.
4 Přetáhněte komponentu Label na vymezenou plochu a jako název instance zadejte progLabel.
• V sekci Parametry smažte hodnotu pro parametr text.
5 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a zadejte následující kód jazyka ActionScript, který
načte zvukový soubor mp3:
import fl.controls.ProgressBar;
import flash.events.ProgressEvent;
import flash.events.IOErrorEvent;
var aSound:Sound = new Sound();
aPb.source = aSound;
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
var request:URLRequest = new URLRequest(url);
aPb.addEventListener(ProgressEvent.PROGRESS, progressHandler);
aPb.addEventListener(Event.COMPLETE, completeHandler);
aSound.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
loadButton.addEventListener(MouseEvent.CLICK, clickHandler);
function progressHandler(event:ProgressEvent):void {
progLabel.text = ("Sound loading ... " + aPb.percentComplete);
}
function completeHandler(event:Event):void {
trace("Loading complete");
trace("Size of file: " + aSound.bytesTotal);
aSound.close();
loadButton.enabled = false;
}
function clickHandler(event:MouseEvent) {
aSound.load(request);
}
function ioErrorHandler(event:IOErrorEvent):void {
trace("Load failed due to: " + event.text);
}
73
Vytváření aplikací s komponentou ProgressBar v režimu dotazů
V následujícím příkladu je komponenta Progressbar nastavena do režimu dotazu. V režimu dotazu je průběh určen
posloucháním událostí progress u obsahu, který se načítá a pomocí vlastností bytesLoaded a bytesTotal
vypočítává průběh. V tomto příkladu je načítán objekt Sound, jsou poslouchány jeho události progress a jsou
vypočítávána načtená procenta pomocí vlastností bytesLoaded a bytesTotal. Zobrazí procenta načítání jak v
popisu, tak v panelu Výstup.
2 Přetáhněte komponentu ProgressBar z panelu Komponenty na vymezenou plochu a v Inspektoru vlastností pro ni
• Jako název instance zadejte aPb.
• Jako název instance zadejte progLabel.
• V sekci Parametry smažte hodnotu parametru text.
4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a zadejte následující kód jazyka ActionScript, který
vytvoří objekt Sound (aSound) a vyvolá funkci loadSound() pro načtení zvuku do objektu Sound:
import fl.controls.ProgressBarMode;
import flash.events.ProgressEvent;
import flash.media.Sound;
var aSound:Sound = new Sound();
var url:String = "http://www.helpexamples.com/flash/sound/song1.mp3";
var request:URLRequest = new URLRequest(url);
aPb.mode = ProgressBarMode.POLLED;
aPb.source = aSound;
aSound.addEventListener(ProgressEvent.PROGRESS, loadListener);
aSound.load(request);
function loadListener(event:ProgressEvent) {
var percentLoaded:int = event.target.bytesLoaded / event.target.bytesTotal * 100;
progLabel.text = "Percent loaded: " + percentLoaded + "%";
trace("Percent loaded: " + percentLoaded + "%");
}
74
Vytváření aplikací s komponentou ProgressBar v ručním režimu
V následujícím příkladu je komponenta ProgressBar nastavena do ručního režimu. V manuálním režimu je třeba
nastavit průběh ručně vyvoláním metody setProgress() a poskytnout aktuální a maximální hodnoty k určení
rozsahu průběhu načítání. V ručním režimu se nenastavuje vlastnost source. V tomto příkladu je ke zvyšování
hodnoty komponenty ProgressBar použita komponenta NumericStepper s maximální hodnotou 250. Pokud se
hodnota v komponentě NumericStepper změní a spustí událost CHANGE, ovladač události (nsChangeHandler) vyvolá
metodu setProgress(). Také se zobrazuje průběh načítaní v procentech na základě maximální hodnoty.
2 Přetáhněte komponentu ProgressBar z panelu Komponenty na vymezenou plochu a v Inspektoru vlastnosti ji
• Jako název instance zadejte aPb.
3 Přetáhněte komponentu NumericStepper na vymezenou plochu a v Inspektoru vlastnosti zadejte následující
hodnoty:
• Jako název instance zadejte aNs.
• V sekci Parametry zadejte maximální hodnotu parametru 250, minimální hodnotu parametru 0, zadejte
hodnotu 1 pro parametr stepSize a hodnotu 0 pro parametr value.
4 Přetáhněte komponentu Label na vymezenou plochu a v Inspektoru vlastnosti zadejte následující hodnoty:
• Jako název instance zadejte progLabel.
• Na kartě Parametry smažte v parametru text hodnotu Label.
import fl.controls.ProgressBarDirection;
import fl.controls.ProgressBarMode;
aPb.direction = ProgressBarDirection.RIGHT;
aPb.mode = ProgressBarMode.MANUAL;
aPb.minimum = aNs.minimum;
aPb.maximum = aNs.maximum;
aPb.indeterminate = false;
aNs.addEventListener(Event.CHANGE, nsChangeHandler);
function nsChangeHandler(event:Event):void {
aPb.value = aNs.value;
aPb.setProgress(aPb.value, aPb.maximum);
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%";
}
75
7 Chcete-li posunout průběh na liště ProgressBar, klepněte na komponentě NumericStepper na šipku nahoru.
Vytváření komponenty ProgressBar pomocí jazyka ActionScript
V tomto příkladu je vytvořena komponenta ProgressBar pomocí kódu jazyka ActionScript. Mimoto je zdvojena
funkčnost oproti předchozímu příkladu, kde byla vytvořena komponenta ProgressBar v ručním režimu.
2 Přetáhněte komponentu ProgressBar do panelu Knihovna.
3 Přetáhnete komponentu NumericStepper do panelu Knihovna.
4 Přetáhněte komponentu Label do panelu Knihovna.
import
import
import
import
import
import
fl.controls.ProgressBar;
fl.controls.NumericStepper;
fl.controls.Label;
fl.controls.ProgressBarDirection;
fl.controls.ProgressBarMode;
flash.events.Event;
var aPb:ProgressBar = new ProgressBar();
var aNs:NumericStepper = new NumericStepper();
var progLabel:Label = new Label();
addChild(aPb);
addChild(aNs);
addChild(progLabel);
aPb.move(180,175);
aPb.direction = ProgressBarDirection.RIGHT;
aPb.mode = ProgressBarMode.MANUAL;
progLabel.setSize(150, 22);
progLabel.move(180, 150);
progLabel.text = "";
aNs.move(220, 215);
aNs.maximum = 250;
aNs.minimum = 0;
aNs.stepSize = 1;
aNs.value = 0;
aNs.addEventListener(Event.CHANGE, nsChangeHandler);
function nsChangeHandler(event:Event):void {
aPb.setProgress(aNs.value, aNs.maximum);
progLabel.text = "Percent of progress = " + int(aPb.percentComplete) + "%";
}
7 Chcete-li posunout průběh na liště ProgressBar, klepněte na komponentě NumericStepper na šipku nahoru.
76
Používání komponenty RadioButton
Komponenta RadioButton umožňuje přimět uživatele k výběru pouze jedné volby v rámci množiny voleb. Tato
komponenta musí být použita ve skupině alespoň dvou instancí RadioButton. Najednou lze vybrat pouze jednoho
člena skupiny. Výběr jednoho přepínacího tlačítka ve skupině zruší výběr aktuálně vybraného přepínacího tlačítka v
této skupině. Parametr groupName nastavte tak, aby určoval, ke které skupině přepínací tlačítko náleží.
Přepínací tlačítko je klíčovou částí mnoha aplikací s formulářem na internetu. Přepínací tlačítko můžete použít vždy,
když potřebujete, aby uživatel učinil pouze jednu volbu ze skupiny voleb. Přepínací tlačítka můžete použít např. ve
formuláři s dotazem, který typ kreditní karty chce uživatel použít.
Interakce uživatele s komponentou RadioButton
Přepínací tlačítko může být povolené nebo zakázané. Zakázané přepínací tlačítko nemůže být aktivní pro vstup z myši
ani z klávesnice. Když uživatel klepne nebo tabulátorem přepne skupinu komponenty RadioButton, aktivováno bude
pouze vybrané přepínací tlačítko. Uživatel je pak může ovládat následujícími klávesami:
Klíč
Popis
Šipka nahoru/Šipka vlevo
Výběr se přesune na předcházející přepínací tlačítko v dané skupině přepínacích tlačítek.
Šipka dolů/Šipka vpravo
Výběr se přesune na následující přepínací tlačítko v dané skupině přepínacích tlačítek.
Tabulátor
Přesune aktivaci pro vstup ze skupiny přepínacích tlačítek na následující komponentu.
V živém náhledu jednotlivých instancí komponenty RadioButton ve vymezené ploše se odrážejí změny, které byly
provedeny v parametrech Inspektorem vlastnosti nebo Inspektorem komponenty při vyvíjení. Vzájemné vyloučení
výběru se však v živém náhledu nezobrazuje. Nastavíte-li zvolené parametry na hodnotu true u dvou přepínacích
tlačítek ve stejné skupině, budou se obě jevit jako vybrané, i když se při běhu objeví pouze naposled vytvořená instance.
Více informací viz oddíl „Parametry komponenty RadioButton“ na stránce 77.
Když přidáte komponentu RadioButton do aplikace, můžete u ní přidáním následujících řádek kódu jazyka
ActionScript nastavit usnadnění přístupu pro program pro čtení z obrazovky:
import fl.accessibility.RadioButtonAccImpl;
RadioButtonAccImpl.enableAccessibility();
Usnadnění přístupu pro komponentu stačí povolit pouze jednou, bez ohledu na to, kolik instancí komponent máte.
Více informací naleznete v Kapitole 18 „Vytváření přístupného obsahu“ v příručcePoužívání programu Flash.
Parametry komponenty RadioButton
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty RadioButton nastavit
následující parametry vyvíjení: groupName, label, LabelPlacement, selected a value. Každý z těchto
parametrů má odpovídající vlastnost jazyka ActionScript stejného názvu. Informace týkající se možných hodnot pro
tyto parametry naleznete pod třídou RadioButton v Referenční příručce jazyka ActionScript 3.0 aplikace Flash
Professional.
Můžete vytvořit kód jazyka ActionScript k nastavení dalších možností instancí RadioButton pomocí metod, vlastností
a událostí třídy RadioButton.
77
Vytváření aplikací s komponentou RadioButton
Následuje postup přidání komponenty RadioButton do aplikace při vyvíjení. V tomto příkladu jsou komponenty
RadioButton použity ke kladení otázek typu ano-ne. Data z komponenty RadioButton jsou zobrazena v poli TextArea.
2 Přetáhněte dvě komponenty RadioButton z panelu Komponenty na vymezenou plochu.
3 Vyberte první přepínací tlačítko. V Inspektoru vlastnosti mu udělte název instance yesRba skupinu pojmenujte
rbGroup.
4 Vyberte druhé přepínací tlačítko. V Inspektoru vlastnosti mu udělte název instance noRba skupinu pojmenujte
rbGroup.
5 Přetáhněte komponentu TextArea z panelu Komponenty na vymezenou plochu a pojmenujte ji názvem instance aTa.
yesRb.label = "Yes";
yesRb.value = "For";
noRb.label = "No";
noRb.value = "Against";
yesRb.move(50, 100);
noRb.move(100, 100);
aTa.move(50, 30);
noRb.addEventListener(MouseEvent.CLICK, clickHandler);
yesRb.addEventListener(MouseEvent.CLICK, clickHandler);
aTa.text = event.target.value;
}
Vytvoření komponenty v jazyce ActionScript
V tomto příkladu jsou pomocí kódu jazyka ActionScript vytvořena tři přepínací tlačítka pro tři barvy – červenou,
modrou a zelenou a je nakresleno šedé pole. Vlastnost value jednotlivých komponent RadioButton udává
hexadecimální hodnotu přiřazenou k danému tlačítku. Když uživatel klepne na jednu z komponent RadioButton,
funkce clickHandler() vyvolá metodu drawBox() a předá barvu z vlastnosti value komponenty RadioButton pro
vybarvení pole.
2 Přetáhněte komponentu RadioButton do panelu Knihovna.
78
import fl.controls.RadioButtonGroup;
var
var
var
var
redRb:RadioButton = new RadioButton();
blueRb:RadioButton = new RadioButton();
greenRb:RadioButton = new RadioButton();
rbGrp:RadioButtonGroup = new RadioButtonGroup("colorGrp");
drawBox(aBox, 0xCCCCCC);
addChild(redRb);
addChild(blueRb);
addChild(greenRb);
addChild(aBox);
redRb.label = "Red";
redRb.value = 0xFF0000;
blueRb.label = "Blue";
blueRb.value = 0x0000FF;
greenRb.label = "Green";
greenRb.value = 0x00FF00;
redRb.group = blueRb.group = greenRb.group = rbGrp;
redRb.move(100, 260);
blueRb.move(150, 260);
greenRb.move(200, 260);
rbGrp.addEventListener(MouseEvent.CLICK, clickHandler);
drawBox(aBox, event.target.selection.value);
}
}
Další informace naleznete pod třídou RadioButton v Referenční příručce jazyka ActionScript 3.0 aplikace Flash
Professional.
Používání komponenty ScrollIPane
Komponenta ScrollPane slouží k zobrazení obsahu, který je příliš velký pro oblast, do níž je načítán. Například máteli velký obrázek a v aplikaci je pro něj jen malý prostor, můžete jej načíst do komponenty ScrollIPane. Komponenta
ScrollIPane přijímá pouze soubory ve formátu JPEG, PNG, GIF a SWF.
79
Komponenty jako například ScrollIPane a UILoader mají událosticomplete, které umožňují určit konec načítání
obsahu. Chcete-li nastavit vlastnosti obsahu komponent ScrollPane nebo UILoader, poslouchejte událost complete a
nastavte vlastnost v manipulačním programu události. V následujícím příkladu je vytvořen posluchač této
Události.Událost COMPLETE a manipulační program události nastaví vlastnost alpha obsahu komponenty ScrollIPane
na 0,5:
function spComplete(event:Event):void{
aSp.content.alpha = .5;
}
aSp.addEventListener(Event.COMPLETE, spComplete);
Pokud určíte umístění během načítání obsahu komponenty ScrollIPane, musíte zadat souřadnice (X a Y) tohoto
umístění jako 0, 0. Například následující kód správně načte komponentu ScrollIPane, protože pole je nakresleno na
souřadnicích 0, 0:
var box:MovieClip = new MovieClip();
box.graphics.beginFill(0xFF0000, 1);
aSp.source = box;//load ScrollPane
Další informace naleznete pod třídou ScrollPane v Referenční příručce jazyka ActionScript 3.0 aplikace Flash
Professional.
Interakce uživatele s komponentou ScrollIPane
Komponentu ScrollIPane lze povolit nebo zakázat. Zakázaná komponenta ScrollIPane nepřijímá žádné vstupy z myši
ani z klávesnice. Když je komponenta ScrollIPane aktivní pro vstup, můžete ji ovládat následujícími klávesami:
Klíč
Popis
Šipka dolů
Obsah se posune o jeden svislý posun řádku nahoru.
Šipka nahoru
Obsah se posune o jeden svislý posun řádku dolů.
End
Obsah se posune na konec komponenty ScrollPane.
Šipka vlevo
Obsah se posune o jeden vodorovný posun řádku doprava.
Šipka vpravo
Obsah se posune o jeden vodorovný posun řádku doleva.
Home
Obsah se posune na začátek komponenty ScrollPane.
End
Obsah se posune na konec komponenty ScrollPane.
PageDown
Posune obsah o jeden svislý posun stránky nahoru.
PageUp
Posune obsah o jeden svislý posun stránky dolů.
Interakce s obsahem komponenty ScrollPane i se svislými nebo vodorovnými posuvníky je možná pomocí myši. Myší
může uživatel přetahovat obsah, když je vlastnost scrollDrag nastavena na hodnotu true. Když se ukazatel kurzoru
změní v symbol ruky, znamená to, že můžete obsah přetáhnout. Na rozdíl od většiny ostatních ovládacích prvků zde
akce probíhají, když je tlačítko myši stisknuté, a pokračují až do uvolnění tlačítka. Má-li obsah platné zarážky
tabulátoru, je třeba změnit vlastnost scrollDrag na hodnotu false. Jinak by všechna klepnutí myší vyvolala přetažení
posunu.
80
Parametry komponenty ScrollPane
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty ScrollPane nastavit následující
parametry: horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy,
scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize a verticalScrollPolicy.
Každý z těchto parametrů má odpovídající vlastnost jazyka ActionScript stejného názvu. Informace týkající se
možných hodnot pro tyto parametry naleznete pod třídou ScrollPane v Referenční příručce jazyka ActionScript 3.0
K ovládání těchto a dalších možností komponenty ScrollPane pomocí jejích vlastností, metod a událostí lze použít
jazyk ActionScript.
Vytváření aplikací s komponentou ScrollPane
Následuje postup přidání komponenty ScrollPane do aplikace při vyvíjení. V tomto příkladu načte komponenta
ScrollPane obrázek přímo z určitého umístění určeného vlastností source.
2 Přetáhněte komponentu ScrollPane z panelu Komponenty na vymezenou plochu a pojmenujte ji názvem instance aSp.
import fl.events.ScrollEvent;
aSp.setSize(300, 200);
function scrollListener(event:ScrollEvent):void {
trace("horizontalScPosition: " + aSp.horizontalScrollPosition +
", verticalScrollPosition = " + aSp.verticalScrollPosition);
};
aSp.addEventListener(ScrollEvent.SCROLL, scrollListener);
function completeListener(event:Event):void {
trace(event.target.source + " has completed loading.");
};
// Add listener.
aSp.addEventListener(Event.COMPLETE, completeListener);
aSp.source = "http://www.helpexamples.com/flash/images/image1.jpg";
Vytvoření instance komponenty ScrollPane pomocí jazyka ActionScript
V tomto příkladu je vytvořena komponenta ScrollPane, je nastavena její velikost a obrázek je načten pomocí vlastnosti
source. Také jsou vytvořeny dva posluchače. Prvý poslouchá událost scroll a zobrazuje umístění obrázku, zatímco
jej uživatel vodorovně nebo svisle posouvá. Druhý poslouchá událost complete a zobrazuje zprávu v panelu Výstup
se sdělením, že načítání obrázku bylo dokončeno.
V tomto příkladu je vytvořena komponenta pole ScrollPane pomocí jazyka ActionScript a do té je umístěna
komponenta MovieClip (červené pole) o šířce 150 obrazových bodů a výšce 300 bodů.
2 Přetáhněte komponentu ScrollPane z panelu Komponenty do panelu Knihovna.
3 Přetáhněte komponentu DataGrid z panelu Komponenty do panelu Knihovna.
81
import
import
import
import
fl.containers.ScrollPane;
fl.controls.ScrollPolicy;
fl.controls.DataGrid;
var aSp:ScrollPane = new ScrollPane();
drawBox(aBox, 0xFF0000);//draw a red box
aSp.source = aBox;
aSp.setSize(150, 200);
aSp.move(100, 100);
addChild(aSp);
box.graphics.beginFill(color, 1);
}
Používání komponenty Slider
Komponenta Slider umožňuje uživateli zvolit hodnotu posouváním grafického jezdce mezi koncovými body dráhy
odpovídající rozsahu hodnot. Pomocí jezdce můžete uživateli umožnit vybírat hodnoty jako počet nebo procentuální
podíl. Můžete také použít jazyk ActionScript k tomu, aby hodnota jezdce ovlivňovala chování druhého objektu. Jezdec
tak například můžete přiřadit k obrázku a zvětšovat nebo zmenšovat jej podle jeho relativního umístění, hodnoty nebo
ukazatele jezdce.
Aktuální hodnota komponenty Slider je určena umístěním ukazatele jezdce mezi koncovými body dráhy nebo
minimální a maximální hodnotou komponenty Slider.
Komponenta Slider umožňuje posun v kontinuálním rozsahu hodnot mezi jejími krajními hodnotami, můžete však
také nastavit parametr snapInterval k určení intervalů mezi minimální a maximální hodnotou. Komponenta Slider
může zobrazovat značky, které jsou nezávislé na hodnotách přiřazených jezdci v daných intervalech podél dráhy.
Výchozí pozice jezdce má vodorovnou orientaci, ale můžete jí přiřadit i svislou orientaci nastavením parametru
directionna hodnotu vertical. Dráha jezdce se prostírá od jednoho konce k druhému a značky dílků jsou umisťovány
zleva doprava hned nad dráhu.
Interakce uživatele s komponentou Slider
Je-li instance Slider aktivní pro vstup, můžete ji ovládat následujícími klávesami:
Klíč
Popis
Šipka vpravo
Zvýší hodnotu přiřazenou vodorovnému jezdci.
Šipka nahoru
Zvýší hodnotu přiřazenou svislému jezdci.
Šipka vlevo
Sníží hodnotu přiřazenou vodorovnému jezdci.
82
Klíč
Popis
Šipka dolů
Sníží hodnotu přiřazenou svislému jezdci.
Shift+Tabulátor
Tabulátor
V živém náhledu každé instance komponenty Slider se odrážejí změny provedené v parametrech Inspektoru vlastnosti,
resp. Inspektoru komponenty při vyvíjení.
Parametry komponenty Slider
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty Slider nastavit následující
parametry vyvíjení: direction, liveDragging, maximum, minimum, snapInterval, tickInterval a value. Každý
z těchto parametrů má odpovídající vlastnost jazyka ActionScript stejného názvu. Informace týkající se možných
hodnot pro tyto parametry naleznete pod třídou Slider v Referenční příručce jazyka ActionScript 3.0 aplikace Flash
Professional.
Vytváření aplikací s komponentou Slider
V následujícím příkladu je vytvořena instance komponenty Slider, která umožňuje uživateli vyjádřit jeho míru
spokojenosti s určitou hypotetickou událostí. Uživatel posunuje Jezdcem vpravo nebo vlevo a tím vyjadřuje vyšší nebo
nižší míru spokojenosti.
2 Přetáhněte komponentu Label z panelu Komponenty doprostřed vymezené plochy.
• Pojmenujte ji názvem instance valueLabel.
• Přiřaďte hodnotu 0procent parametru text.
3 Přetáhněte komponentu Slider z panelu Komponenty, umístěte ji doprostřed pod hodnotu value_lbl.
• Pojmenujte ji názvem instance aSlider.
• Přiřaďte jí šířku (W): 200.
• Přiřaďte jí výšku (H): 10.
• Přiřaďte hodnotu100 parametru maximum.
• Přiřaďte hodnotu 10 parametrům snapInterval a tickInterval.
4 Přetáhněte další instanci Label z panelu Knihovna a umístěte ji doprostřed pod instanci aSlider.
• Pojmenujte ji názvem instance promptLabel.
• Přiřaďte jí šířku (W): 250.
• Přiřaďte jí výšku (H): 22.
• Zadejte oznámení Udejte míru vaší spokojenosti do parametru text.
83
import fl.controls.Slider;
import fl.events.SliderEvent;
aSlider.addEventListener(SliderEvent.CHANGE, changeHandler);
function changeHandler(event:SliderEvent):void {
valueLabel.text = event.value + "percent";
}
V tomto příkladě při pohybu ukazatelem jezdce z jednoho intervalu ke druhému aktualizuje posluchač události
SliderEvent.CHANGE vlastnost text funkce valueLabel, aby se zobrazila procentuální hodnota odpovídající
pozici ukazatele.
Vytváření aplikací s komponentou Slider pomocí jazyka ActionScript
V následujícím příkladu je pomocí jazyka ActionScript vytvořena komponenta Slider. V příkladu je stažen obrázek
květiny a pomocí komponenty Slider je obrázek ztmaven nebo zesvětlen změnou jeho vlastnosti alpha podle hodnoty
komponenty Slider.
2 Přetáhněte komponenty Label a Slider z panelu Komponenty do panelu Knihovna aktuálního dokumentu.
Tak přidáte komponenty do Knihovny, ale v aplikaci nebudou vidět.
3 Otevřete panel Akce, na hlavní časové ose vyberte Snímek 1 a zadejte následující kód, který vytvoří instance
komponenty a umístí je na místo:
84
import
import
import
import
fl.controls.Slider;
fl.events.SliderEvent;
fl.controls.Label;
fl.containers.UILoader;
var sliderLabel:Label = new Label();
sliderLabel.width = 120;
sliderLabel.text = "< Fade - Brighten >";
sliderLabel.move(170, 350);
var aSlider:Slider = new Slider();
aSlider.width = 200;
aSlider.snapInterval = 10;
aSlider.tickInterval = 10;
aSlider.maximum = 100;
aSlider.value = 100;
aSlider.move(120, 330);
var aLoader:UILoader = new UILoader();
aLoader.source = "http://www.flash-mx.com/images/image1.jpg";
aLoader.scaleContent = false;
addChild(sliderLabel);
addChild(aSlider);
addChild(aLoader);
aLoader.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event) {
trace("Number of bytes loaded: " + aLoader.bytesLoaded);
}
aSlider.addEventListener(SliderEvent.CHANGE, changeHandler);
function changeHandler(event:SliderEvent):void {
aLoader.alpha = event.value * .01;
}
5 Posouváním ukazatele Jezdce doprava se obrázek ztmavuje a doleva se zesvětluje.
Používání komponenty TextArea
Komponenta TextArea zabaluje nativní objekt TextField jazyka ActionScript. Komponenta TextArea slouží k
zobrazování textu a k úpravě a přijímání textového vstupu, je-li vlastnost editable nastavena na hodnotu true.
Komponenta může zobrazovat nebo přijímat víceřádkový text a zabalí dlouhé řádky textu, je-li vlastnost wordWrap
nastavena na hodnotutrue. Vlastnost restrict umožňuje omezit znaky, které uživatel může vkládat, a vlastnost
maxChars umožňuje určit maximální počet znaků, které může uživatel zadat. Pokud text přesahuje vodorovné nebo
svislé ohraničení textového pole, objeví se automaticky vodorovné nebo svislé posuvné lišty, za předpokladu, že
vlastnosti horizontalScrollPolicy a verticalScrollPolicy nejsou nastaveny na hodnotu off.
85
Komponentu TextArea můžete použít vždy, když potřebujete víceřádkové textové pole. Komponentu TextArea
můžete například použít jako pole pro komentář ve formuláři. Můžete nastavit posluchače, který bude kontrolovat,
zda je pole prázdné, když z něj uživatel přepnul jinam. Posluchač může zobrazit chybovou zprávu s výzvou k zapsání
komentáře do pole.
Pokud potřebujete vytvořit jednořádkové textové pole, použijte komponentu TextInput.
Můžete nastavit styl textFormat pomocí metody setStyle pro změnu stylu textu, který se objevuje v instanci
komponenty TextArea. Pomocí vlastnosti htmlText můžete také formátovat komponentu TextArea v jazyce
ActionScript a nastavením vlastnosti displayAsPassword na hodnotu true můžete maskovat text hvězdičkami.
Nastavíte-li vlastnost condenseWhite na hodnotu true, program Flash odstraní bílá místa v novém textu způsobená
mezerami, zalomeními a podobně. Nemá to žádný vliv na text, který je již v ovládacím prvku.
Interakce uživatele s komponentou TextArea
Komponenta TextArea může být v aplikaci povolena nebo zakázána. V zakázaném stavu nepřijímá žádné vstupy z
myši ani z klávesnice. Když je povolená, řídí se stejnými pravidly pro aktivaci pro vstup, výběr a navigaci jako objekt
TextField jazyka ActionScript. Když je instance TextArea aktivní pro vstup, můžete ji ovládat následujícími klávesami:
Klíč
Popis
Kurzorové klávesy
Posunují textový kurzor nahoru, dolů, doleva nebo doprava v textu, dá-li se text upravovat.
PageDown
Přesune textový kurzor na konec textu, dá-li se text upravovat.
PageUp
Přesune textový kurzor na začátek textu, pokud se text dá upravovat.
Shift+Tabulátor
Přesune aktivaci pro vstup na předcházející objekt v cyklu procházení Tabulátorem.
Tabulátor
Přesune aktivaci pro vstup na následující objekt v cyklu procházení Tabulátorem.
Parametry komponenty TextArea
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty TextArea nastavit následující
parametry vyvíjení: condenseWhite, editable, hortizontalScrollPolicy, maxChars, restrict, text,
verticalScrollPolicy a wordwrap. Každý z těchto parametrů má odpovídající vlastnost jazyka ActionScript
stejného názvu. Informace týkající se možných hodnot pro tyto parametry naleznete pod třídou TextArea v Referenční
V živém náhledu každé instance komponenty TextArea se odrážejí změny provedené v parametrech Inspektoru
vlastnosti, resp. Inspektoru komponenty při vyvíjení. Je-li potřeba posuvná lišta, objeví se v živém náhledu, ale nebude
funkční. Text nelze v živém náhledu vybrat a do instance komponenty ve vymezené ploše nelze vkládat text.
K ovládání těchto a dalších možností komponenty TextArea pomocí jejích vlastností, metod a událostí lze použít jazyk
ActionScript. Další informace naleznete pod třídou TextArea v Referenční příručce jazyka ActionScript 3.0 aplikace
Flash Professional.
86
Vytváření aplikací s komponentou TextArea
Následuje postup přidání komponenty TextArea do aplikace při vyvíjení. V tomto příkladu je nastaven manipulační
program události focusOut v instanci komponenty TextArea, který ověřuje, zda uživatel něco napsal do textového
pole, než přesunul aktivaci pro vstup do jiné části rozhraní.
2 Přetáhněte komponentu TextArea z panelu Komponenty na vymezenou plochu a pojmenujte ji názvem instance
aTa. Parametry ponechte ve výchozím nastavení.
3 Přetáhněte z panelu Komponenty na vymezenou plochu druhou komponentu TextArea, umístěte ji pod první a
pojmenujte ji názvem instance bTa. Parametry ponechte ve výchozím nastavení.
import flash.events.FocusEvent;
aTa.restrict = "a-z,'\" \"";
aTa.addEventListener(Event.CHANGE,changeHandler);
aTa.addEventListener(FocusEvent.KEY_FOCUS_CHANGE, k_m_fHandler);
aTa.addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, k_m_fHandler);
function changeHandler(ch_evt:Event):void {
bTa.text = aTa.text;
}
function k_m_fHandler(kmf_event:FocusEvent):void {
kmf_event.preventDefault();
}
V tomto příkladu je omezen počet znaků, které lze vložit do textového pole aTa na malá písmena, čárku, apostrof
a mezery. Nastaví také manipulační programy událostí change, KEY_FOCUS_CHANGE a události
MOUSE_FOCUS_CHANGE v textovém poli aTa. Funkce changeHandler() má za následek, že text vložený do oblasti
aTa se automaticky objeví v textovém poli bTa po přiřazení textu aTa.text textu bTa.text při každé události
change. Funkcek_m_fHandler() pro události KEY_FOCUS_CHANGE a MOUSE_FOCUS_CHANGE zabraňuje stisknutí
klávesy Tabulátor, které by vás přesunulo na další textové pole, aniž by došlo k vložení nějakého textu. Je to
provedeno zabráněním výchozího chování.
Stisknete-li klávesu Tabulátor za účelem přesunutí aktivace pro vstup na druhé textové pole, aniž by došlo k vložení
nějakého textu, objeví se chybová zpráva a aktivace se vrátí na první textové pole. Při vkládání textu do prvního
textového pole jej uvidíte zopakovaný v druhém textovém poli.
Vytvoření instance komponenty TextArea pomocí jazyka ActionScript
V následujícím příkladu je vytvořena komponenta TextArea pomocí jazyka ActionScript. Nastaví vlastnost
condenseWhite na hodnotu true pro zhuštění bílých míst a přiřazení textu vlastnosti htmlText, za účelem využití
výhod atributů formátování textu v kódu HTML.
2 Přetáhněte komponentu TextArea do panelu Knihovna.
87
aTa.move(100,100);
aTa.condenseWhite = true;
aTa.htmlText = '<b>Lorem ipsum dolor</b> sit amet, consectetuer adipiscing elit. <u>Vivamus
quis nisl vel tortor nonummy vulputate.</u> Quisque sit amet eros sed purus euismod tempor.
Morbi tempor. <font color="#FF0000">Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.</font> Curabitur diam. Suspendisse at purus in ipsum
volutpat viverra. Nulla pellentesque libero id libero.';
addChild(aTa);
V tomto příkladu je použita vlastnost htmlText k aplikaci atributů HTML pro tučné a podtržené písmo na blok
textu a jeho zobrazení v textovém poli a_ta. V přikladu je také nastavena vlastnost condenseWhite na hodnotu
true pro zhuštění bílých míst v bloku textu. Metoda setSize() slouží k nastavení výšky a šířky textového pole a
metoda move() slouží k nastavení jeho polohy. Metoda addChild() slouží k přidání instance TextArea na
vymezenou plochu.
Používání komponenty TextInput
Komponenta TextInput je komponenta pro jednořádkový text, která zabaluje nativní objekt TextField jazyka
ActionScript. Pokud potřebujete pole pro víceřádkový text, použijte komponentu TextArea. Komponentu TextInput
můžete použít např. jako pole pro zadání hesla ve formuláři. Můžete také nastavit posluchače, který bude kontrolovat,
zda pole obsahuje dostatek znaků, když jej uživatel opustí. Tento posluchač může zobrazit chybovou zprávu s
oznámením, že je třeba vložit dostatečný počet znaků.
Můžete nastavit vlastnost textFormat pomocí metody setStyle() ke změně stylu textu zobrazeného v instanci
TextInput. Komponentu TextInput lze také formátovat ve formátu HTML nebo jako textové pole pro heslo s
maskováním textu.
Interakce uživatele s komponentou TextInput
Komponenta TextInput může být v aplikaci povolena nebo zakázána. V zakázaném stavu nepřijímá žádný vstup z
klávesnice ani z myši. Když je povolená, řídí se stejnými pravidly pro aktivaci pro vstup, výběr a navigaci jako objekt
TextField jazyka ActionScript. Je-li instance TextField aktivní pro vstup, můžete ji ovládat následujícími klávesami:
Klíč
Popis
Kurzorové klávesy
Přesunou kurzor o jeden znak vlevo nebo vpravo.
Shift+Tabulátor
Tabulátor
V živém náhledu každé instance komponenty TextInput se odrážejí změny provedené v parametrech Inspektoru
vlastnosti, resp. Inspektoru komponenty při vyvíjení. Text nelze v živém náhledu vybrat a do instance komponenty ve
vymezené ploše nelze vkládat text.
88
Když přidáte komponentu TextInput do aplikace, můžete použít panel Usnadnění přístupu k usnadnění jejího
přístupu pro programy pro čtení z obrazovky.
Parametry komponenty TextInput
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty TextInput nastavit následující
parametry vyvíjení: editable,displayAsPassword, maxChars, restrict a text. Každý z těchto parametrů má
odpovídající vlastnost jazyka ActionScript stejného názvu. Informace týkající se možných hodnot pro tyto parametry
naleznete pod třídou TextInput v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional.
K ovládání těchto a dalších možností komponenty TextInput pomocí jejích vlastností, metod a událostí lze použít
jazyk ActionScript. Další informace naleznete pod třídou TextInput v Referenční příručce jazyka ActionScript 3.0
Vytváření aplikací s komponentou TextInput
Následuje postup přidání komponenty TextInput do aplikace. V příkladu jsou použita dvě textová pole pro zadání a
potvrzení hesla. Použije se posluchač události, který zajistí, aby bylo zadáno minimálně osm znaků a aby byl text v
obou polích stejný.
• Jako název instance zadejte pwdLabel.
• V sekci Parametry zadejte jako hodnotu textového parametru Heslo:.
3 Přetáhněte z panelu Komponenty druhou komponentu Label na vymezenou plochu a přiřaďte jí následující
hodnoty:
• Jako název instance zadejte confirmLabel.
• V sekci Parametry zadejte u textového parametru hodnotu PotvrditHeslo:.
4 Přetáhněte komponentu TextInput z panelu Komponenty na vymezenou plochu a přiřaďte jí následující hodnoty:
• Jako název instance zadejte pwdTi.
• V sekci Parametry poklepejte na hodnotu parametru displayAsPassword a vyberte hodnotu true. Hodnota
vložená do textového pole pak bude maskována hvězdičkami.
89
5 Přetáhněte druhou komponentu TextInput z panelu Komponenty na vymezenou plochu a přiřaďte jí následující
hodnoty:
• Jako název instance zadejte confirmTi.
• V sekci Parametry poklepejte na parametr displayAsPassword a vyberte hodnotu true. Hodnota vložená do
textového pole pak bude maskována hvězdičkami.
function tiListener(evt_obj:Event){
if(confirmTi.text != pwdTi.text || confirmTi.length < 8)
{
trace("Password is incorrect. Please reenter it.");
}
else {
trace("Your password is: " + confirmTi.text);
}
}
confirmTi.addEventListener("enter", tiListener);
Tento kód nastaví manipulační program události enter v instanci TextInput nazvané confirmTi. Pokud hesla
nejsou stejná nebo pokud uživatel vloží méně než 8 znaků, zobrazí se v příkladu zpráva: „Nesprávné heslo. Zadejte
jej znovu.“ Mají-li hesla 8 a více znaků a shodují se, v příkladu se zobrazí hodnota zadaná v panelu Výstup.
Vytváření instancí TextInput pomocí jazyka ActionScript
V následujícím příkladu je vytvořena komponenta TextInput pomocí jazyka ActionScript. V příkladu je také
vytvořena komponenta Label, která slouží k zobrazení výzvy k zadání hesla. V příkladu je nastavena vlastnost
restrict komponenty pro povolení pouze velkých a malých písmen, pomlčky a mezery. Také je vytvořen objekt
TextFormat, který slouží k formátovaní textu v komponentách Label a TextInput.
2 Přetáhněte komponentu TextInput z panelu Komponenty do panelu Knihovna.
3 Přetáhněte komponentu Label z panelu Komponenty do panelu Knihovna.
90
import fl.controls.TextInput;
var nameLabel:Label = new Label();
var nameTi:TextInput = new TextInput();
addChild(nameLabel);
addChild(nameTi);
nameTi.restrict = "A-Z .a-z";
tf.font = "Georgia";
tf.color = 0x0000CC;
tf.size = 16;
nameLabel.text = "Name: " ;
nameLabel.setSize(50, 25);
nameLabel.move(100,100);
nameLabel.setStyle("textFormat", tf);
nameTi.move(160, 100);
nameTi.setSize(200, 25);
nameTi.setStyle("textFormat", tf);
Používání komponenty TileList
Komponenta TileList se skládá ze seznamu tvořeného řadami a sloupci, které poskytovatel dat zaplní daty. Jako
položka se označuje jednotka dat, která je uložena v buňce komponenty TileList. Položka pocházející z poskytovatele
dat má většinou vlastnost label a vlastnost source. Vlastnost label udává obsah pro zobrazení v buňce a vlastnost
source pro ni poskytuje hodnotu.
Můžete vytvořit instanci Array, nebo ji vyhledat na serveru. Komponenta TileList má metody, které zastupují její
poskytovatel dat, například metody addItem a removeItem. Není-li k seznamu dodán žádný externí poskytovatel dat,
vytvoří tyto metody automaticky instanci, která bude vyslána prostřednictvím funkce List.dataProvider.
Interakce uživatele s komponentou TileList
Komponenta TileList vykresluje jednotlivé buňky pomocí objektu Sprite, který implementuje rozhraní ICellRenderer.
Tento objekt pro vykreslení můžete určit pomocí vlastnosti cellRenderer komponenty TileList. Výchozí funkcí
CellRenderer komponenty TileList je funkce ImageCell, která zobrazuje obraz (třídu, bitmapu, instanci nebo URL) a
volitelný popis. Popis je jeden řádek, který je vždy vyrovnaný se spodní částí buňky. Komponentu TileList je možné
posouvat pouze jedním směrem.
Když je instance TileList aktivní pro vstup, můžete ji ovládat následujícími klávesami:
91
Klíč
Popis
Šipka nahoru a šipka dolů
Umožňují pohyb sloupcem nahoru a dolů. Je-li vlastnost allowMultipleSelection
nastavena na hodnotu true, můžete použít tyto klávesy v kombinaci s klávesou Shift k
označení více buněk.
Šipka vlevo a šipka vpravo
Umožňují pohyb v řádku doleva a doprava. Je-li vlastnost allowMultipleSelection
nastavena na hodnotu true, můžete použít tyto klávesy v kombinaci s klávesou Shift k
označení více buněk.
Home
Vybere první buňku v komponentě TileList. Je-li vlastnost allowMultipleSelection
nastavena na hodnotu true, lze stisknutím kombinace kláves Shift a Home vybrat buňky od
aktuálně označené buňky k první buňce.
End
Vybere poslední buňku v komponentě TileList. Je-li vlastnost allowMultipleSelection
nastavena na hodnotu true, lze stisknutím kombinace kláves Shift a End vybrat buňky od
aktuálně označené buňky k poslední buňce.
Ctrl
Je-li vlastnost allowMultipleSelection nastavena na hodnotu true, lze vybrat více
buněk, které spolu nesousedí.
Když přidáte komponentu TileList do aplikace, můžete u ní přidáním následujících řádek kódu jazyka ActionScript
nastavit usnadnění přístupu pro program pro čtení z obrazovky:
import fl.accessibility.TileListAccImpl;
TileListAccImpl.enableAccessibility();
Nastavit usnadnění přístupu u komponenty stačí pouze jednou, bez ohledu na to, kolik instancí komponenta má. Více
informací naleznete v Kapitole 18 „Vytváření přístupného obsahu“ v příručcePoužívání programu Flash.
Parametry komponenty TileList
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty TileList nastavit následující
parametry vyvíjení: allowMultipleSelection, columnCount, columnWidth, dataProvider, direction,
horizontalScrollLineSize, horizontalScrollPageSize, labels, rowCount, rowHeight, ScrollPolicy,
verticalScrollLineSize a verticalScrollPageSize. Každý z těchto parametrů má odpovídající vlastnost
jazyka ActionScript stejného názvu. Informace o použití parametru dataProvider naleznete v příručce „Použití
parametru dataProvider“ na stránce 30.
Pomocí jazyka ActionScript můžete nastavit další možnosti instance komponenty TileList pomocí jejích metod,
vlastností a událostí. Další informace naleznete pod třídou TileList v Referenční příručce jazyka ActionScript 3.0
Vytváření aplikací s komponentou TileList
V tomto příkladu je pomocí komponenty MovieClip vyplněna komponenta TileList polem malířských barev.
2 Přetáhněte komponentu TileList na vymezenou plochu a pojmenujte ji názvem instance aTl.
92
import flash.display.DisplayObject;
var aBoxes:Array = new Array();
var i:uint = 0;
var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00);
var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July");
var dp:DataProvider = new DataProvider();
for(i=0; i < colors.length; i++) {
aBoxes[i] = new MovieClip();
drawBox(aBoxes[i], colors[i]);// draw box w next color in array
dp.addItem( {label:colorNames[i], source:aBoxes[i]} );
}
aTl.dataProvider = dp;
aTl.move(150, 150);
}
4 Aplikaci otestujete příkazem Ovládání > Testovat film.
Vytvoření komponenty TileList pomocí jazyka ActionScript
V tomto příkladu se dynamicky vytvoří instance komponenty TileList a přidá se do ní instance komponent
ColorPicker, ComboBox, NumericStepper a CheckBox. Je vytvořeno Pole obsahující popisy a názvy instancí
komponenty k zobrazení a je přiřazeno Pole (dp) vlastnosti dataProvider komponenty TileList. Použijí se vlastnosti
columnWidth a rowHeight s metodou setSize() k rozvržení komponenty TileList, metoda move() k jejímu
umístění na vymezenou plochu a styl contentPadding k vložení místa mezi okraj a obsah komponenty TileList a
metoda sortItems() k uspořádání obsahu podle popisů.
2 Z panelu Komponenty přetáhněte do panelu Knihovna následující komponenty: ColorPicker, ComboBox,
NumericStepper, CheckBox a TileList.
93
import
import
import
import
import
import
var
var
var
var
var
fl.controls.CheckBox;
fl.controls.ColorPicker;
fl.controls.ComboBox;
fl.controls.NumericStepper;
fl.controls.TileList;
aCp:ColorPicker = new ColorPicker();
aCb:ComboBox = new ComboBox();
aNs:NumericStepper = new NumericStepper();
aCh:CheckBox = new CheckBox();
aTl:TileList = new TileList();
var dp:Array = [
{label:"ColorPicker", source:aCp},
{label:"ComboBox", source:aCb},
{label:"NumericStepper", source:aNs},
{label:"CheckBox", source:aCh},
];
aTl.dataProvider = new DataProvider(dp);
aTl.move(150, 150);
aTl.sortItemsOn("label");
addChild(aTl);
4 Aplikaci otestujete příkazem Ovládání > Testovat film.
Používání komponenty UILoader
Komponenta UILoader je kontejner, který může zobrazit soubory typu SWF, JPEG, progresivní JPEG, PNG a GIF.
Komponentu UILoader můžete použít pokaždé, když potřebujete vyhledat obsah ze vzdáleného umístění a vložit jej
do aplikace Flash. Komponentu UILoader můžete například použít, chcete-li do formuláře přidat logo společnosti
(formát JPEG). V aplikaci, která zobrazuje fotografie, můžete použít také komponentu UILoader. K načtení obsahu
použijte metodu load(), k určení míry načtení obsahu použijte vlastnost percentLoad a k určení dokončení načítání
použijte událost complete.
Můžete měnit velikost obsahu komponenty UILoader nebo měnit velikost samotné komponenty UILoader pro
přizpůsobení velikosti obsahu. Velikost obsahů je při výchozím nastavení taková, aby se vešly do komponenty
UILoader. Obsah můžete načítat také při běhu a monitorovat průběh načítání (i když po načtení obsahu po jeho
uložení do vyrovnávací paměti, průběh rychle skočí na 100 %). Pokud určíte umístění během načítání obsahu
komponenty UILoader, musíte zadat souřadnice (X a Y) tohoto umístění jako 0, 0.
Interakce uživatele s komponentou UILoader
Komponenta UILoader nemůže být aktivní pro vstup. Avšak obsah nahraný do komponenty UILoader může být
aktivován pro vstup a také může mít svou vlastní interakci se vstupem. Další informace týkající se nastavení aktivace
pro vstup naleznete pod třídou FocusManager v Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional
a v části „Práce s instancí FocusManager“ na stránce 27.
94
Parametry komponenty UILoader
V Inspektoru vlastností nebo Inspektoru komponent lze u každé instance komponenty UILoader nastavit následující
parametry vyvíjení: autoLoad, maintainAspectRatio, source a scaleContent. Každý z těchto parametrů má
odpovídající vlastnost jazyka ActionScript stejného názvu.
V živém náhledu každé instance komponenty UILoader se odrážejí změny provedené v parametrech Inspektoru
vlastnosti, resp. Inspektoru komponenty při vyvíjení.
Pomocí jazyka ActionScript můžete nastavit další možnosti instance komponenty UILoader pomocí jejích metod,
vlastností a událostí. Další informace naleznete pod třídou UILoader v Referenční příručce jazyka ActionScript 3.0
Vytváření aplikací s komponentou UILoader
Následuje postup přidání komponenty UILoader do aplikace při vyvíjení. V tomto příkladu načte zaváděč logo ve
formátu souboru GIF.
2 Přetáhněte komponentu UILoader z panelu Komponenty na vymezenou plochu.
3 V Inspektoru vlastnosti zadejte jako název instance aUI.
4 Ve vymezené ploše a v Inspektoru komponenty vyberte zaváděč a jako parametr source zadejte
http://www.helpexamples.com/images/logo.gif.
Vytvoření instance komponenty UILoader pomocí jazyka ActionScript
V tomto příkladu je vytvořena komponenta UILoader pomocí jazyka ActionScript a načten obrázek květiny ve
formátu JPEG. Při výskytu události complete se v panelu Výstup zobrazí počet načtených bytů.
2 Přetáhněte komponentu UILoader z panelu Komponenty do panelu Knihovna.
import fl.containers.UILoader;
var aLoader:UILoader = new UILoader();
aLoader.source = "http://www.flash-mx.com/images/image1.jpg";
aLoader.scaleContent = false;
addChild(aLoader);
aLoader.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event) {
trace("Number of bytes loaded: " + aLoader.bytesLoaded);
}
95
Používání komponenty UIScrollBar
Komponenta UIScrollBar umožňuje přidat do textového pole posuvnou lištu. Posuvnou lištu můžete do textového
pole přidat během vyvíjení nebo při běhu pomocí jazyka ActionScript. Chcete-li použít komponentu UIScrollBar,
vytvořte ve vymezené ploše textové pole a přetáhněte komponentu UIScrollBar z panelu Komponenty do libovolného
kvadrantu okna textového pole.
Je-li délka posuvné lišty menší než společná velikost šipek posunu, nezobrazí se správně. Jedno z tlačítek se šipkou
bude schované za druhým. Program Flash však neumožňuje kontrolu tohoto případu. V takovém případě je dobré
skrýt posuvnou lištu pomocí jazyka ActionScript. Má-li posuvná lišta takový rozměr, že není dost místa pro jezdce,
učiní program Flash jezdce neviditelným.
Komponenta UIScrollBar funguje jako jakákoli jiná posuvná lišta. Obsahuje tlačítka s šipkou na obou koncích dráhy
a jezdce mezi nimi. Lze ji připojit k libovolnému okraji textového pole jak vodorovně, tak svisle.
Další informace o komponentě TextField naleznete pod třídou TextField v Referenční příručce jazyka ActionScript 3.0
Interakce uživatele s komponentou UIScrollBar
Na rozdíl od mnoha jiných komponent může komponenta UIScrollBar přijímat nepřetržitý vstup z myši, například
když uživatel drží tlačítko myši namísto opakovaných klepnutí stále stisknuté.
Komponenta UIScrollBar nemá žádnou interakci s klávesnicí.
Parametry komponenty UIScrollBar
V Inspektoru vlastností nebo Inspektoru komponent lze u obou instancí komponenty UIScrollBar nastavit následující
parametry vyvíjení: direction a scrollTargetName. Každý z těchto parametrů má odpovídající vlastnost jazyka
ActionScript stejného názvu.
Pomocí jazyka ActionScript můžete nastavit další možnosti instance komponenty UIScrollBar pomocí jejích metod,
vlastností a událostí. Další informace naleznete pod třídou UIScrollBar v Referenční příručce jazyka ActionScript 3.0
Vytváření aplikací s komponentou UIScrollBar
Následuje postup přidání komponenty UIScrollBar do aplikace při vyvíjení.
2 Vytvořte dynamické textové pole dostatečně vysoké na to, aby pojmulo jeden nebo dva řádky textu a v Inspektoru
vlastnosti jej pojmenujte názvem instance myText.
3 V Inspektoru vlastnosti nastavte vlastnost Line Type vstupního textového pole na Multiline, popř. na Multiline No
Wrap, plánujete-li použít vodorovnou posuvnou lištu.
4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a zadejte následující kód jazyka ActionScript k
vyplnění vlastnosti text tak, aby uživatel musel text pro jeho celé zobrazení posunout:
myText.text="When the moon is in the seventh house and Jupiter aligns with Mars, then peace
will guide the planet and love will rule the stars."
96
Poznámka: Dbejte na to, aby bylo textové pole na vymezené ploše dostatečně malé, aby jej bylo nutné pro zobrazení
celého textu posunout. V opačném případě se posuvná lišta nemusí zobrazit, nebo se může zobrazit jako pouhé dva
řádky bez jezdce (té části, kterou posouváte obsah).
5 Ujistěte se, že je zapnuto přitahování na objekty (Zobrazit > Přitahování > Přitahování na objekty).
6 Přetáhněte instanci komponenty UIScrollBar z panelu Komponenty do vstupního textového pole blízko strany, ke
které ji chcete připojit. V okamžiku uvolnění tlačítka myši musí komponenta textové pole překrývat, jinak nebude
s polem správně spojena. Pojmenujte komponentu názvem instance mySb.
Vlastnost scrollTargetName komponenty bude v Inspektoru vlastnosti a Inspektoru komponenty automaticky
zaplněna textovým polem názvu instance. Pokud se poté neobjeví na kartě Parametry, je možné, že nedošlo k
dostatečnému překrytí instancí UIScrollBar.
Vytváření instancí komponenty UIScrollBar v jazyce ActionScript
V jazyce ActionScript můžete vytvořit instanci komponenty UIScrollBar a přiřadit ji k textovému poli při běhu. V
následujícím příkladu je vytvořena vodorovně orientovaná instance komponenty UIScrollBar a ta je připojena ke
spodní straně instance textového pole nazvané myTxt, která je načtena s textem z URL. V příkladu je také nastavena
velikost posuvné lišty tak, aby odpovídala velikosti textového pole:
2 Přetáhněte komponentu ScrollBar do panelu Knihovna.
97
import flash.net.URLLoader;
import fl.controls.UIScrollBar;
var myTxt:TextField = new TextField();
myTxt.border = true;
myTxt.width = 200;
myTxt.height = 16;
myTxt.x = 200;
myTxt.y = 150;
var mySb:UIScrollBar = new UIScrollBar();
mySb.direction = "horizontal";
// Size it to match the text field.
mySb.setSize(myTxt.width, myTxt.height);
// Move it immediately below the text field.
mySb.move(myTxt.x, myTxt.height + myTxt.y);
// put them on the Stage
addChild(myTxt);
addChild(mySb);
// load text
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest("http://www.helpexamples.com/flash/lorem.txt");
loader.load(request);
loader.addEventListener(Event.COMPLETE, loadcomplete);
function loadcomplete(event:Event) {
// move loaded text to text field
myTxt.text = loader.data;
// Set myTxt as target for scroll bar.
mySb.scrollTarget = myTxt;
}
98
99
Kapitola 5: Přizpůsobení komponent
uživatelského rozhraní
Co je přizpůsobení komponent uživatelského rozhraní
Vzhled komponent v aplikaci je možné přizpůsobit upravením jednoho či obou následujících elementů:
Styly
Každá komponenta má sadu stylů, jejichž nastavením lze určit, jaké hodnoty bude program Flash používat k
vykreslení podoby této komponenty. Styly obvykle určují, jaké vzhledy a ikony mají být použity pro komponentu v
jejích různých stavech, a také jaké hodnoty pro formátování textu a odsazení se mají použít.
Vzhled se skládá z kolekce symbolů, jež tvoří grafický vzhled komponenty v určitém stavu. Zatímco styl
určuje, jaký vzhled se má použít, vzhled je grafický element, pomocí něhož program Flash kreslí komponentu. Změna
vzhledu je proces zajišťující změnu podoby komponenty upravením nebo nahrazením její grafiky.
Vzhledy
Poznámka: Výchozí podobu komponent jazyka ActionScript 3.0 lze považovat za motiv (Aeon Halo), avšak tyto vzhledy
jsou vestavěny do komponent. Na rozdíl od verze jazyka ActionScript 2.0 nepodporují komponenty jazyka ActionScript
3.0 externí soubory motivů.
Nastavení stylů
Styly komponenty obvykle určují hodnoty pro její vzhledy, ikony, formátování textu a odsazení, když program Flash
kreslí komponentu v jejích různých stavech. Program Flash například nakreslí tlačítko s jiným vzhledem pro
znázornění stavu Dole, k němuž dochází při klepnutí tlačítkem myši na toto tlačítko, než pro znázornění jeho
nestisknutého nebo normálního stavu. Odlišný vzhled se také použije, když je tlačítko v zakázaném stavu, což nastane
při nastavení vlastnosti povoleno na hodnotu false.
Styly se pro komponenty nastavují na úrovni dokumentu, třídy a instance. Kromě toho mohou být některé vlastnosti
stylu děděny od nadřazené komponenty. Komponenta List například dědí styly ScrollBar ze třídy BaseScrollPane.
Nastavením stylů je možné přizpůsobit komponentu následujícím způsobem:
• Nastavení stylů v instanci komponenty. Vlastnosti barvy a textu lze změnit i pro jedinou instanci komponenty. V
některých situacích se jedná o efektivní řešení, pokud je však potřeba nastavit jednotlivé vlastnosti u všech
komponent v dokumentu, je tento postup časově velmi náročný.
• Nastavení stylů pro všechny komponenty určitého typu v dokumentu. Chcete-li použít jednotnou podobu pro
všechny komponenty určitého typu, např. pro všechna zaškrtávací políčka nebo tlačítka v dokumentu, můžete styly
nastavit na úrovni komponent.
Hodnoty vlastností stylu nastavené u kontejnerů jsou převzaty obsaženými komponentami.
Při prohlížení komponent na vymezené ploše pomocí funkce Živý náhled nezobrazuje program Flash změny
provedené ve vlastnostech stylu.
Přizpůsobení komponent uživatelského rozhraní
Význam nastavení stylu
Zde je několik klíčových bodů k použití stylů:
Potomek komponenty je záměrně nastaven tak, aby dědil styl od nadřazené komponenty. V jazyce
ActionScript nelze dědění stylů nastavit.
Zdědění
Jestliže je styl komponenty nastaven více způsoby, použije program Flash první styl, na který narazí v
závislosti na jeho pořadí. Program Flash hledá styly v následujícím pořadí dokud nenalezne hodnotu:
Priorita
1 Program Flash hledá vlastnost stylu v instanci komponenty.
2 Pokud se jedná o některý z děděných stylů, program Flash hledá v nadřazené hierarchii zděděnou hodnotu.
3 Program Flash hledá styl v komponentě.
4 Program Flash hledá globální nastavení v objektu StyleManager.
5 Není-li ani přesto vlastnost definována, je použita hodnota nedefinováno.
Přístup k výchozím stylům komponenty
K výchozím stylům pro komponentu lze získat přístup pomocí statické metody getStyleDefinition() pro třídu
komponenty. Následující kód například načte výchozí styly pro komponentu ComboBox a zobrazí výchozí hodnoty
vlastností buttonWidth a downArrowDownSkin:
var styleObj:Object = ComboBox.getStyleDefinition();
trace(styleObj.buttonWidth); // 24
trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin
Nastavení a získání stylů pro instanci komponenty
Kterákoliv instance komponenty uživatelského rozhraní může přímo vyvolat metody setStyle() a getStyle() za
účelem nastavení nebo načtení stylu. Následující syntaxe nastaví styl a hodnotu pro instanci komponenty:
instanceName.setStyle("styleName", value);
Tato syntaxe dosadí styl pro instanci komponenty:
var a_style:Object = new Object();
a_style = instanceName.getStyle("styleName");
Všimněte si, že metoda getStyle() vrátí typ Objekt, neboť může vrátit více stylů s různými typy dat. Následující kód
například nastaví styl písma pro instanci komponenty TextArea (aTa) a potom ji načte pomocí metody getStyle().
V tomto příkladu se vrácená hodnota dosadí od objektu TextFormat a bude přiřazena proměnné TextFormat. Bez
tohoto dosazení by kompilátor nahlásil chybu kvůli snaze vnutit proměnné TextFormat proměnnou Objekt.
aTa.setStyle("textFormat",tf);
aTa.text = "Hello World!";
var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat;
trace(aStyle.font);
100
Nastavení vlastností textu pomocí objektu TextFormat
Objekt TextFormat lze použít k formátování textu pro instanci komponenty. Vlastnosti objektu TextFormat umožňují
definování parametrů textu, např. tu n , odrážka, barva, písmo, kurzíva, velikost atd. Tyto vlastnosti je možné
nastavit v objektu TextFormat a následně je pomocí metody setStyle() aplikovat na instanci komponenty.
Následující kód například nastaví u objektu TextFormat vlastnosti písmo, velikost a tu n a aplikuje je na instanci
Button:
/* Create a new TextFormat object to set text formatting properties. */
tf.font = "Arial";
tf.size = 16;
tf.bold = true;
a_button.setStyle("textFormat", tf);
Na následujícím obrázku je znázorněn vliv tohoto nastavení na tlačítko s popisem Odeslat:
Vlastnosti stylu nastavené u instance komponenty pomocí metody setStyle() mají nejvyšší prioritu a nahradí
všechna ostatní nastavení stylu. Čím více vlastností však nastavíte pomocí funkce setStyle() u jediné instance
komponenty, tím pomaleji se bude komponenta za běhu vykreslovat.
Nastavení stylu pro všechny instance komponenty
Styl je možné nastavit pro všechny instance třídy komponenty pomocí statické metody setComponentStyle() třídy
StyleManager. Můžete například pro všechna tlačítka nastavit barvu textu na červenou tak, že nejprve přetáhnete
tlačítko na vymezenou plochu a potom na panel Akce do Snímku 1 Časové osy přidáte tento kód jazyka ActionScript:
import fl.managers.StyleManager;
tf.color = 0xFF0000;
StyleManager.setComponentStyle(Button, "textFormat", tf);
Všechna tlačítka, jež budou následně přidána na vymezenou plochu, budou mít červené popisy.
Nastavení stylu pro všechny komponenty
Styl je možné nastavit pro všechny komponenty pomocí statické metody setComponentStyle() třídy StyleManager.
1 Přetáhněte na vymezenou plochu komponentu List a přiřaďte jí název instance aList.
2 Přetáhněte na vymezenou plochu komponentu Button a přiřaďte jí název instance aButton.
3 Stiskněte klávesu F9 nebo v nabídce Okno vyberte možnost Akce a otevřete panel Akce, pokud již není otevřeno, a
do Snímku 1 Časové osy zadejte následující kód, který pro všechny komponenty nastaví barvu textu na červenou:
import fl.managers.StyleManager;
StyleManager.setStyle("textFormat", tf);
4 Přidejte následující kód na panel Akce a zaplňte seznam textem.
101
5 Zvolte možnost Ovládání > Testovat film nebo stiskněte klávesy Ctrl+Enter, čímž zkompilujete kód a otestujete
obsah. Text v popisu tlačítka i v seznamu by měl být červený.
Co jsou vzhledy
Podobu komponenty utváří grafické prvky jako je obrys, barva výplně, ikony a případně i další komponenty.
Komponenta ComboBox například obsahuje komponentu List a komponenta List obsahuje komponentu ScrollBar.
Společně tyto grafické prvky utváří podobu komponenty ComboBox. Podoba komponenty se však mění v závislosti
na jejím aktuálním stavu. Například komponenta CheckBox bez popisu vypadá asi takto, když se objeví v aplikaci:
Komponenta CheckBox v normálním stavu Nahoře
Když stisknete tlačítko myši a podržíte je stisknuté na komponentě CheckBox, změní se její podoba takto:
Komponenta CheckBox ve stavu Dole
A po uvolnění tlačítka myši se komponenta CheckBox vrátí do své původní podoby, avšak nyní bude zaškrtnutá, což
značí, že byla zvolena.
Komponenta CheckBox ve stavu výběru
Ikony, jež představují komponentu v různých stavech se společně nazývají vzhledy. Podobu komponenty můžete
změnit v některém nebo ve všech stavech, pokud v programu Flash upravíte její vzhled, a to stejným způsobem jako
kterýkoliv jiný symbol Flash. Ke vzhledu komponenty lze získat přístup dvěma způsoby. Nejsnazší je přetáhnout
komponentu na vymezenou plochu a poklepat na ni. Tím se otevře paleta vzhledů dané komponenty, která pro
komponentu CheckBox vypadá takto.
102
Vzhledy komponenty CheckBox
Kromě toho je možné získat přístup k jednotlivým vzhledům komponenty z panelu Knihovna. Po přetažení
komponenty na vymezenou plochu ji rovněž zkopírujete do knihovny spolu se složkou jejích datových zdrojů a se
všemi dalšími komponentami, které obsahuje. Jestliže například přetáhnete na vymezenou plochu komponentu
ComboBox, bude panel Knihovna rovněž obsahovat komponenty List, ScrollBar a TextInput, které jsou do
komponenty ComboBox vestavěny, spolu se složkou vzhledů pro každou z těchto komponent a se složkou Sdílené
datové zdroje, která obsahuje prvky, jež mají všechny tyto komponenty společné. Vzhledy pro kteroukoliv z těchto
komponent lze upravit otevřením její složky vzhledů (ComboBoxSkins, ListSkins, ScrollBarSkins či TextInputSkins)
a poklepáním na ikonu vzhledu, který chcete upravit. Poklepáním na ikonu ComboBox_downSkin například otevřete
vzhled v režimu úpravy symbolu, jak je znázorněno na následujícím obrázku:
Vzhled ComboBox_downSkin
Vytvoření nového vzhledu
Pokud chcete vytvořit novou podobu komponenty v dokumentu, upravíte vzhledy této komponenty, aby se změnilo
jejich vzezření. Chcete-li získat přístup ke vzhledům komponenty, poklepejte na komponentu na vymezené ploše a
otevřete paletu jejích vzhledů. Potom poklepejte na vzhled, který chcete upravit, aby se otevřel v režimu úpravy
symbolu. Poklepejte například na komponentu TextArea na vymezené ploše a její položky se otevřou v režimu úpravy
symbolu. Nastavte ovládání zvětšení na 400% (nebo i více, pokud chcete) a upravte symbol, aby se změnila jeho
podoba. Po skončení se tato změna projeví ve všech instancích této komponenty v dokumentu. Případně můžete
poklepat na určitý vzhled na panelu Knihovna a otevřít ho na vymezené ploše v režimu úpravy symbolu.
Vzhledy komponenty lze upravit následujícím způsobem:
• Vytvořením nového vzhledu pro všechny instance
• Vytvořením nových vzhledů pro některé instance
103
Vytvoření vzhledu pro všechny instance
Při úpravě vzhledu komponenty standardně změníte podobu komponenty pro všechny její instance v dokumentu.
Jestliže chcete pro stejnou komponentu vytvořit různé podoby, je nutné duplikovat vzhledy, které chcete změnit,
přiřadit jim jiné názvy, upravit je a následně je nastavením příslušných stylů aplikovat. Další informace naleznete v
sekci „Vytvoření vzhledů pro některé instance“ na stránce 104.
V této kapitole je popsán způsob úpravy jednoho či více vzhledů pro jednotlivé komponenty uživatelského rozhraní.
Při dodržení některého z těchto postupů pro změnu jednoho či více vzhledů komponenty uživatelského rozhraní se
změní všechny její instance v dokumentu.
Vytvoření vzhledů pro některé instance
Vzhled pro některé instance komponenty lze vytvořit podle následujícího všeobecného postupu:
• Na panelu knihovna vyberte vzhled ve složce Datové zdroje požadované komponenty.
• Duplikujte vzhled a přiřaďte mu jedinečný název třídy.
• Upravte vzhled do požadované podoby.
• Vyvoláním metody setStyle() pro instanci komponenty přiřaďte nový vzhled ke stylu vzhledu.
Následující postup slouží k vytvoření nového vzhledu selectedDownSkin pro jednu z instancí komponenty Button.
2 Z panelu Komponenty přetáhněte na vymezenou plochu dvě komponenty Button a přiřaďte jim názvy instancí
aButton a bButton.
3 Otevřete panel Knihovna a v něm složky Datové zdroje komponenty a ButtonSkins.
4 Klepněte na vzhled selectedDownSkin a vyberte ho.
5 Klepnutím pravým tlačítkem otevřete místní nabídku a zvolte možnost Duplikovat.
6 V dialogovém okně Duplikovat symbol přiřaďte novému vzhledu jedinečný název, např.
Button_mySelectedDownSkin. Pak klepněte na tlačítko OK.
7 Ve složce Knihovna > Datové zdroje komponenty > ButtonSkins vyberte položku Button_mySelectedDownSkin a
klepnutím pravým tlačítkem otevřete místní nabídku. Zvolte možnost Navázání a otevřete dialogové okno
Vlastnosti navázání.
8 Zaškrtněte políčko Exportovat pro jazyk ActionScript. Políčko Exportovat v prvním snímku nechejte zaškrtnuté a
ujistěte se, že je zadán jedinečný název třídy. Klepněte na tlačítko OK a potom opět klepnutím na tlačítko OK
potvrďte upozornění, že definice třídy nebyla nalezena a bude vytvořena.
9 Na panelu Knihovna poklepejte na vzhled Button_mySelectedDownSkin a otevřete ho v režimu úpravy symbolu.
10 Klepněte na modrou výplň uprostřed vzhledu, aby se jeho barva zobrazila ve výběru barvy výplně v okně Inspektor
vlastností. Klepněte na výběr barvy a zvolte pro výplň vzhledu barvu #00CC00.
11 Klepnutím na tlačítko Zpět umístěné vlevo na panelu úprav nad vymezenou plochou se vraťte do režimu úpravy
dokumentu.
12 V okně Inspektor vlastností klepněte na záložku Parametry pro jednotlivá tlačítka a nastavte parametr přepínání
na hodnotu true.
13 Přidejte následující kód na panel Akce do Snímku 1 Časové osy:
bButton.setStyle("selectedDownSkin", Button_mySelectedDownSkin);
bButton.setStyle("downSkin", Button_mySelectedDownSkin);
104
15 Klepněte na jednotlivá tlačítka. Všimněte si, že vzhled dole (vybraný a odznačený) pro objekt bButton používá nový
symbol vzhledu.
Přizpůsobení komponenty Button
Komponentu Button lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření vyberte
komponentu na vymezené ploše a použijte nástroj Volná transformace nebo kterýkoliv příkaz z nabídky Změnit >
Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti třídy Button, např. height a width
nebo scaleX a scaleY.
Při změně velikosti tlačítka se nezmění velikost ikony ani popisu. Ohraničovací rámeček tlačítka odpovídá okraji
tlačítka a rovněž označuje oblast klepnutí pro instanci. Zvětšíte-li velikost instance, zvětší se i velikost oblasti klepnutí.
Jestliže je ohraničovací rámeček příliš malý, než aby se do něho vešel popis, pak se popis ořízne.
Pokud má tlačítko ikonu a ta je větší než tlačítko, roztáhne se ikona přes okraj tlačítka.
Použití stylů u komponenty Button
Styly komponenty Button obvykle určují hodnoty pro vzhledy, ikony, formátování textu a odsazení, když je
komponenta nakreslena v různých stavech.
V následujícím postupu budou na vymezenou plochu vložena dvě tlačítka a po klepnutí na jedno z nich se u obou
nastaví vlastnost zvýrazn no na hodnotu true. Také styl emphasizedSkin pro druhé tlačítko bude po klepnutí
nastaven na styl selectedOverSkin, takže každé tlačítko bude mít pro stejný stav jiný vzhled.
1 Vytvořte soubor Flash (ActionScript 3.0).
2 Po jednom přetáhněte na vymezenou plochu dvě tlačítka a přiřaďte jim názvy instancí aBtn a bBtn. V okně
Inspektor vlastností jim na záložce Parametry přiřaďte popisy Button A a Button B.
3 Přidejte následující kód na panel Akce do Snímku 1 Časové osy:
bBtn.emphasized = true;
aBtn.emphasized = true;
bBtn.addEventListener(MouseEvent.CLICK, Btn_handler);
function Btn_handler(evt:MouseEvent):void {
bBtn.setStyle("emphasizedSkin", "Button_selectedOverSkin");
}
5 Klepněte na jedno z tlačítek a uvidíte, jaký účinek bude mít styl emphasizedSkin na každé tlačítko.
Použití vzhledů u komponenty Button
Komponenta Button používá následující vzhledy, jež odpovídají jejím různým stavům. Chcete-li upravit jeden či více
vzhledů a změnit tak podobu tlačítka, poklepejte na instanci tlačítka na vymezené ploše a otevřete paletu jeho vzhledů,
jak je znázorněno na následujícím obrázku:
105
Vzhledy tlačítka
Pokud je tlačítko povoleno, zobrazuje stav Přes, když přes ně přejede ukazatel myši. Po stisknutí začne být tlačítko
aktivní a zobrazí stav Dole. Po uvolnění myši se tlačítko vrátí do stavu Přes. Jestliže se ukazatel posune mimo tlačítko,
zatímco je tlačítko myši stisknuté, vrátí se tlačítko do původního stavu. Pokud je parametr přepínání nastaven na
hodnotu true, znázorní se stav stisknutí vzhledem selectedDownSkin, stav Nahoře vzhledem selectedUpSkin a stav
Přes vzhledem selectedOverSkin.
Je-li tlačítko zakázáno, zobrazuje stav Zakázáno bez ohledu na činnost uživatele.
Jestliže chcete některý ze vzhledů upravit, poklepáním ho otevřete v režimu úpravy symbolu, jak je znázorněno na
následujícím obrázku.
Tlačítko v režimu úpravy symbolu
Nyní můžete pomocí vývojových nástrojů Flash vzhled libovolně upravit.
V následujícím postupu se u tlačítka změní barva vzhledu selected_over.
1 Vytvořte nový soubor Flash (ActionScript 3.0).
2 Z panelu Komponenty přetáhněte na vymezenou plochu tlačítko. Na záložce Parametry nastavte parametr
přepínání na hodnotu true.
3 Poklepáním na tlačítko otevřete paletu jeho vzhledů.
4 Poklepejte na vzhled selected_over a otevřete ho v režimu úpravy symbolu.
5 Nastavte ovládání zvětšení na 400% a zvětšete ikonu pro provádění úprav.
6 Poklepejte na pozadí, aby se jeho barva zobrazila ve výběru barvy výplně v okně Inspektor vlastnosti.
7 Ve výběru barvy výplně vyberte barvu #CC0099, aby se aplikovala na pozadí vzhledu selected_over.
106
dokumentu.
10 Klepněte na tlačítko a uveďte je do stavu výběru.
Při umístění ukazatele myši přes tlačítko by měl stav selected_over vypadat jako na následujícím obrázku.
Tlačítko znázorňující vzhled selected_over se změněnou barvou
Přizpůsobení komponenty CheckBox
Komponentu CheckBox lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření
vyberte komponentu na vymezené ploše a použijte nástroj Volná transformace nebo kterýkoliv příkaz z nabídky
Změnit > Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti třídy CheckBox. Můžete
například změnit velikost komponenty CheckBox nastavením jejích vlastností výška a ší ka a scaleX a scaleY. Při
změně velikosti komponenty CheckBox se nezmění velikost popisu ani ikony zaškrtávacího políčka, změní se jen
velikost ohraničovacího rámečku.
Ohraničovací rámeček instance CheckBox není viditelný a určuje oblast klepnutí pro instanci. Zvětšíte-li velikost
instance, zvětší se i velikost oblasti klepnutí. Jestliže je ohraničovací rámeček příliš malý na to, aby se do něho vešel
popis, pak se popis ořízne.
Použití stylů u komponenty CheckBox
Nastavením vlastností stylu lze změnit podobu instance ChceckBox. V následujícím postupu se například změní
velikost a barva popisu komponenty ChceckBox.
1 Přetáhněte komponentu CheckBox z panelu Komponenty na vymezenou plochu a přiřaďte jí název instance myCb.
2 V okně Inspektor vlastností klepněte na záložku Parametry a do parametru popisu zadejte následující hodnotu:
Méně než 500 USD?
3 Na panelu Akce zadejte do Snímku 1 hlavní Časové osy následující kód:
var myTf:TextFormat = new TextFormat();
myCb.setSize(150, 22);
myTf.size = 16;
myTf.color = 0xFF0000;
myCb.setStyle("textFormat", myTf);
Další informace naleznete v sekci „Nastavení stylů“ na stránce 99. Informace týkající se nastavení vlastností stylu
za účelem změny ikon a vzhledů komponenty naleznete v sekcích „Vytvoření nového vzhledu“ na stránce 103 a
„Použití vzhledů u komponenty CheckBox“ na stránce 107.
Použití vzhledů u komponenty CheckBox
Komponenta CheckBox má následující vzhledy, které lze změnit a upravit tak její podobu.
107
Vzhledy komponenty CheckBox
Tento příklad popisuje změnu barvy obrysu a barvy pozadí komponenty ve stavech Naho e a selectedUp. Podobný
postup se použije také při změně vzhledů pro ostatní stavy.
2 Přetáhněte komponentu CheckBox na vymezenou plochu, čímž rovněž dojde k jejímu umístění do knihovny spolu
se složkou jejích datových zdrojů.
3 Poklepáním na komponentu CheckBox na vymezené ploše otevřete její panel ikon vzhledů.
4 Poklepejte na ikonu selected_up a otevřete ji v režimu úpravy symbolu.
6 Klepněte na okraj komponenty CheckBox a vyberte ho. Pomocí výběru barvy výplně v okně Inspektor vlastností
vyberte barvu #0033FF a aplikujte ji na okraj.
7 Vyberte komponentu CheckBox poklepáním na její pozadí a znovu použijte výběr barvy výplně k nastavení barvy
pozadí na #00CCFF.
8 Zopakujte kroky 4 až 8 pro vzhled komponenty CheckBox Nahoře.
Přizpůsobení komponenty ColorPicker
Jedinou změnu velikosti lze u komponenty ColorPicker provést prostřednictvím jejích stylů: swatchWidth,
swatchHeight, backgroundPadding, textFieldWidth a textFieldHeight. Jestliže se pokusíte změnit její velikost
pomocí nástroje Transformace nebo prostřednictvím jazyka ActionScript pomocí metody setSize(), případně
použitím vlastností ší ka, výška, scaleX a scaleY, budou tyto hodnoty při vytváření souboru SWF ignorovány a
komponenta ColorPicker se zobrazí ve výchozí velikosti. Velikost pozadí palety se změní podle počtu sloupců, jež byly
nastaveny pomocí metody setStyle() pro styl columnCount. Výchozí počet sloupců je 18. Vlastní barvy je možné
nastavit na 1024 a velikost palety se změní ve svislém směru, aby odpovídala počtu vzorků barev.
108
Použití stylů u komponenty ColorPicker
Chcete-li změnit podobu komponenty ColorPicker, můžete nastavit několik stylů. V následujícím postupu se
například změní počet sloupců (columnCount) v komponentě ColorPicker na 12, změní se výška(swatchHeight) a
šířka (swatchWidth) vzorků barev a také se změní odsazení pro textové pole (textPadding) i pozadí
(backgroundPadding).
2 Přetáhněte komponentu ColorPicker na vymezenou plochu a přiřaďte jí název instance aCp.
3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a zadejte následující kód:
aCp.setStyle("columnCount", 12);
aCp.setStyle("swatchWidth", 8);
aCp.setStyle("swatchHeight", 12);
aCp.setStyle("swatchPadding", 2);
aCp.setStyle("backgroundPadding", 3);
aCp.setStyle("textPadding", 7);
5 Klepnutím otevřete komponentu ColorPicker a podívejte se, jak se tímto nastavením změnil její vzhled.
Použití vzhledů u komponenty ColorPicker
Komponenta ColorPicker používá k vyjádření svých vizuálních stavů následující vzhledy.
Vzhledy komponenty ColorPicker
Změnou barvy vzhledu Pozadí je možné změnit barvu pozadí palety.
2 Přetáhněte komponentu ColorPicker na vymezenou plochu.
3 Poklepejte na ni a otevřete její paletu vzhledů.
4 Poklepejte na vzhled Pozadí, aby se vybral a v okně Inspektor vlastností se zobrazil výběr barvy pozadí.
5 Pomocí výběru barvy pozadí vyberte barvu #999999 a použijte ji na vzhled Pozadí.
dokumentu.
109
Po klepnutí na komponentu ColorPicker by mělo být pozadí palety šedé, jak je znázorněno na následujícím
obrázku.
Komponenta ColorPicker s tmavě šedým vzhledem Pozadí
Přizpůsobení komponenty ComboBox
Komponentu ComboBox lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření
Změnit > Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti třídy ComboBox, např.
výška a ší ka, scaleX a scaleY.
Velikost komponenty ComboBox se změní, aby odpovídala zadané výšce a šířce. Velikost seznamu se upraví podle
šířky komponenty, pokud nebyla nastavena vlastnost dropdownWidth.
Pokud je text příliš dlouhý, než aby se vešel do komponenty ComboBox, potom se ořízne. Aby se text do komponenty
ComboBox vešel, je zapotřebí změnit její velikost a nastavit vlastnost dropdownWidth.
Použití stylů u komponenty ComboBox
Nastavením vlastností stylu lze změnit podobu komponenty ComboBox. Styly určují hodnoty pro vzhledy
komponenty, vykreslení buněk, odsazení a šířku tlačítka. Následující příklad ilustruje nastavení stylů buttonWidth a
textPadding. Styl buttonWidth nastavuje šířku oblasti klepnutí pro tlačítko a platí pouze v případě, že je
komponenta ComboBox upravitelná, takže stačí jen stisknout tlačítko k otevření rozbalovacího seznamu. Styl
textPadding určuje velikost prostoru mezi vnějším okrajem textového pole a textem. Je užitečný k vystředění textu v
textovém poli ve svislém směru, když se zvětší výška komponenty ComboBox. Jinak by to mohlo vypadat, že je text
umístěný v horní části textového pole.
2 Přetáhněte komponentu ComboBox na vymezenou plochu a přiřaďte jí název instance aCb.
110
aCb.setSize(150, 35);
aCb.setStyle("textPadding", 10);
aCb.setStyle("buttonWidth", 10);
aCb.editable = true;
var items:Array = [
{label:"San Francisco", data:"601 Townsend St."},
{label:"San Jose", data:"345 Park Ave."},
{label:"San Diego", data:"10590 West Ocean Air Drive, Suite 100"},
{label:"Santa Rosa", data:"2235 Mercury Way, Suite 105"},
{label:"San Luis Obispo", data:"3220 South Higuera Street, Suite 311"}
];
Všimněte si, že oblast tlačítka, jehož stisknutím se otevře rozbalovací seznam, je pouze úzká oblast na pravé straně.
Rovněž si všimněte, že je text v textovém poli vystředěný ve svislém směru. Můžete tento příklad vyzkoušet bez
obou příkazů setStyle() a uvidíte, jaký mají účinek.
Použití vzhledů u komponenty ComboBox
Komponenta ComboBox používá k vyjádření svých vizuálních stavů následující vzhledy:
Vzhledy komponenty ComboBox
Změnou barvy vzhledu Nahoře je možné změnit barvu komponenty v neaktivním stavu na vymezené ploše.
111
2 Přetáhněte komponentu ComboBox na vymezenou plochu.
3 Poklepejte na ni a otevřete její paletu vzhledů.
4 Poklepejte na vzhled Nahoře, aby se vybral a otevřel pro úpravy.
5 Nastavte ovládání zvětšení na 400%.
6 Klepněte doprostřed vzhledu, aby se jeho barva zobrazila ve výběru barvy výplně v okně Inspektor vlastností.
7 Pomocí výběru barvy pozadí vyberte barvu #33FF99 a použijte ji na vzhled Nahoře.
dokumentu.
Komponenta ComboBox by se měla objevit na vymezené ploše, jak je znázorněno na následujícím obrázku.
Komponenta ComboBox s přizpůsobenou barvou vzhledu Pozadí
Přizpůsobení komponenty DataGrid
Komponentu DataGrid lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření vyberte
Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti, např. width, height, scaleX a
scaleY. Není-li k dispozici vodorovný posuvník, šířka sloupců se proporcionálně upraví. Jestliže dojde ke změně
velikosti sloupce (a tím i buňky), může se text v buňkách oříznout.
Použití stylů u komponenty DataGrid
Nastavením vlastností stylu lze změnit podobu komponenty DataGrid. Komponenta DataGrid dědí styly od
komponenty List. (Viz „Použití stylů u komponenty List“ na stránce 118.)
Nastavení stylů pro jednotlivé sloupce
Objekt DataGrid může mít několik sloupců a pro každý z nich lze stanovit jiné objekty pro vykreslení buněk. Každý
sloupec objektu DataGrid je představován objektem DataGridColumn a třída DataGridColumn obsahuje vlastnost
cellRenderer, u které můžete definovat objekt CellRenderer pro daný sloupec.
2 Přetáhněte komponentu DataGrid na panel Knihovna.
3 Přidejte následující kód na panel Akce do Snímku 1 Časové osy. Tento kód vytvoří objekt DataGrid spolu s
dlouhým řetězcem textu ve třetím sloupci. Nakonec nastaví vlastnost cellRenderer tohoto sloupce na název
objektu pro vykreslení buněk, který vykreslí víceřádkovou buňku.
112
/* This is a simple cell renderer example.It invokes
the MultiLineCell cell renderer to display a multiple
line text field in one of a DataGrid's columns. */
import
import
import
import
fl.controls.DataGrid;
fl.controls.dataGridClasses.DataGridColumn;
fl.controls.ScrollPolicy;
// Create a new DataGrid component instance.
var aLongString:String = "An example of a cell renderer class that displays a multiple line
TextField"
var myDP:Array = new Array();
myDP = [{firstName:"Winston", lastName:"Elstad", note:aLongString, item:100},
{firstName:"Ric", lastName:"Dietrich", note:aLongString, item:101},
{firstName:"Ewing", lastName:"Canepa", note:aLongString, item:102},
{firstName:"Kevin", lastName:"Wade", note:aLongString, item:103},
{firstName:"Kimberly", lastName:"Dietrich", note:aLongString, item:104},
{firstName:"AJ", lastName:"Bilow", note:aLongString, item:105},
{firstName:"Chuck", lastName:"Yushan", note:aLongString, item:106},
{firstName:"John", lastName:"Roo", note:aLongString, item:107},
];
// Assign the data provider to the DataGrid to populate it.
// Note: This has to be done before applying the cellRenderers.
aDg.dataProvider = new DataProvider(myDP);
/* Set some basic grid properties.
Note: The data grid's row height should reflect
the number of lines you expect to show in the multiline cell.
The cell renderer wil size to the row height.
About 40 for 2 lines or 60 for 3 lines.*/
aDg.columns = ["firstName", "lastName", "note", "item"];
aDg.setSize(430,190);
aDg.move(40,40);
aDg.rowHeight = 40;// Allows for 2 lines of text at default text size.
aDg.columns[0].width = 70;
aDg.resizableColumns = true;
aDg.verticalScrollPolicy = ScrollPolicy.AUTO;
addChild(aDg);
// Assign cellRenderers.
var col3:DataGridColumn = new DataGridColumn();
col3 = aDg.getColumnAt(2);
col3.cellRenderer = MultiLineCell;
4 Uložte soubor FLA jako MultiLineGrid.fla.
5 Vytvořte nový soubor jazyka ActionScript.
6 Zkopírujte následující kód jazyka ActionScript do okna Skript:
113
package {
import fl.controls.listClasses.CellRenderer;
public class MultiLineCell extends CellRenderer
{
public function MultiLineCell()
{
textField.wordWrap = true;
textField.autoSize = "left";
}
override protected function drawLayout():void {
textField.width = this.width;
super.drawLayout();
}
}
}
7 Uložte soubor jazyka ActionScript pod názvem MultiLineCell.as do stejné složky jako soubor MultiLineGrid.fla.
8 Vraťte se do aplikace MultiLineGrid.fla a zvolte Ovládání > Testovat film.
Objekt DataGrid by měl vypadat takto:
Objekt DataGrid pro aplikaci MultiLineGrid.fla
Nastavení stylů záhlaví
Pomocí stylu headerTextFormat lze nastavit styl textu pro řádek záhlaví. Následující příklad ilustruje použití objektu
TextFormat k nastavení stylu headerTextFormat na písmo Arial, červenou barvu, velikost písma 14 a kurzívu.
2 Přetáhněte komponentu DataGrid na vymezenou plochu a přiřaďte jí název instance aDg.
114
import fl.controls.dataGridClasses.DataGridColumn;
var myDP:Array = new Array();
myDP = [{FirstName:"Winston", LastName:"Elstad"},
{FirstName:"Ric", LastName:"Dietrich"},
{FirstName:"Ewing", LastName:"Canepa"},
{FirstName:"Kevin", LastName:"Wade"},
{FirstName:"Kimberly", LastName:"Dietrich"},
{FirstName:"AJ", LastName:"Bilow"},
{FirstName:"Chuck", LastName:"Yushan"},
{FirstName:"John", LastName:"Roo"},
];
// Assign the data provider to the DataGrid to populate it.
// Note: This has to be done before applying the cellRenderers.
aDg.dataProvider = new DataProvider(myDP);
aDg.setSize(160,190);
aDg.move(40,40);
tf.size = 14;
tf.color = 0xff0000;
tf.italic = true;
tf.font = "Arial"
aDg.setStyle("headerTextFormat", tf);
Použití vzhledů u komponenty DataGrid
Komponenta DataGrid používá k vyjádření svých vizuálních stavů následující vzhledy:
115
Vzhledy komponenty DataGrid
Vzhled CellRenderer je vzhled použitý pro buňky těla objektu DataGrid, zatímco vzhled HeaderRenderer je použitý
pro řádek záhlaví. V následujícím postupu se změní barva pozadí řádku záhlaví, pomocí stejného postupu však lze
změnit barvu buněk těla objektu DataGrid provedením změn ve vzhledu CellRenderer.
2 Přetáhněte komponentu DataGrid na vymezenou plochu a přiřaďte jí název instance aDg.
3 Poklepejte na komponentu a otevřete její paletu vzhledů.
4 Nastavte ovládání zvětšení na 400% a zvětšete ikony pro provádění úprav.
5 Poklepáním na vzhled HeaderRenderer otevřete paletu vzhledů HeaderRenderer.
6 Poklepáním otevřete vzhled Up_Skin v režimu úpravy symbolu a klepněte na jeho pozadí, aby se vybralo a v okně
Inspektor vlastností se zobrazil výběr barvy pozadí.
7 Pomocí výběru barvy výplně vyberte barvu #00CC00 a aplikujte ji na pozadí vzhledu Up_Skin HeaderRenderer.
dokumentu.
9 Přidejte následující kód na panel Akce do Snímku 1 Časové osy a přidejte data do objektu DataGrid:
116
bldRosterGrid(aDg);
aRoster = [
{Name:"Wilma Carter",Home: "Redlands, CA"},
{Name:"Sue Pennypacker",Home: "Athens, GA"},
{Name:"Jill Smithfield",Home: "Spokane, WA"},
{Name:"Shirley Goth", Home: "Carson, NV"},
{Name:"Jennifer Dunbar",Home: "Seaside, CA"}
];
dg.columns = ["Name", "Home"];
dg.move(50,50);
};
10 Zvolte Ovládání > Testovat film a otestujte aplikaci.
Objekt DataGrid by měl vypadat jako na následujícím obrázku s pozadím řádku záhlaví vyplněným zelenou
barvou.
Objekt DataGrid s přizpůsobeným pozadím řádku záhlaví
Přizpůsobení komponenty Label
Komponentu Label lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření vyberte
Transformovat. Rovněž je možné nastavit zdrojový parametr autoSize, přičemž nastavením tohoto parametru se
nezmění ohraničovací rámeček v živém náhledu, ale změní se velikost komponenty Label. Velikost komponenty Label
se změní v závislosti na parametru wordwrap. Jestliže je tento parametr nastaven na hodnotu true, změní se velikost
komponenty Label ve svislém směru, aby se do ní vešel text. Pokud je tento parametr nastaven na hodnotu false,
změní se velikost komponenty Label ve vodorovném směru. Za běhu použijte metodu setSize(). Další informace
naleznete u metody Label.setSize() a vlastnosti Label.autoSize v Referenční příručce jazyka ActionScript 3.0
aplikace Flash Professional. Rovněž viz sekce „Vytváření aplikací s komponentou Label“ na stránce 63.
Použití stylů u komponenty Label
Nastavením vlastností stylu lze změnit podobu instance popisu. Veškerý text v instanci komponenty Label musí mít
stejný styl. Komponenta Label má styl textFormat, který má stejné atributy jako objekt TextFormat a umožňuje
nastavení stejných vlastností pro obsah popisu Label.text jako pro běžnou komponentu Flash TextField. Následující
příklad ilustruje nastavení barvy textu v popisu na červenou.
1 Přetáhněte komponentu Label z panelu Komponenty na vymezenou plochu a přiřaďte jí název instance a_label.
117
2 Klepněte na záložku Parametry a nahraďte hodnotu vlastnosti Text následujícím textem:
Vybarvit červeně
3 Na hlavní časové ose vybere Snímek 1, otevřete panel Akce a vložte následující kód:
/* Create a new TextFormat object, which allows you to set multiple text properties at a
time. */
/* Apply this specific text format (red text) to the Label instance. */
a_label.setStyle("textFormat", tf);
Další informace týkající se stylů pro komponentu Label naleznete pod třídou Label v Referenční příručce jazyka
Vzhledy a komponenta Label
Komponenta Label nemá žádné vizuální prvky sloužící jako vzhled.
Přizpůsobení komponenty List
Komponentu List lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření vyberte
Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti třídy List, např. výška, ší ka, scaleX
a scaleY.
Při změně velikosti seznamu se řádky seznamu zmenší ve vodorovném směru, přičemž dojde k oříznutí textu, který je
v nich umístěný. Ve svislém směru se do seznamu podle potřeby přidávají řádky, nebo se z něho odebírají. Posuvníky
se umisťují automaticky podle potřeby.
Použití stylů u komponenty List
Nastavením vlastností stylu lze změnit podobu komponenty List. Styly určují hodnoty pro vzhledy komponenty a
odsazení při jejím kreslení.
Různé styly vzhledů umožňují určení různých tříd, jež mají být pro vzhled použity. Další informace o použití stylů
vzhledů naleznete v sekci „Co jsou vzhledy“ na stránce 102.
V následujícím postupu se pro komponentu List nastaví hodnoty stylu contentPadding. Všimněte si, že hodnota
tohoto nastavení se odečte od velikosti seznamu pro výpočet odsazení kolem obsahu, takže můžete potřebovat zvětšit
velikost seznamu, aby nedošlo k oříznutí textu, který je v něm umístěný.
2 Přetáhněte komponentu List z panelu Komponenty na vymezenou plochu a přiřaďte jí název instance aList.
3 Na hlavní časové ose vyberte Snímek 1, otevřete panel Akce a vložte následující kód, který nastaví styl
contentPadding a přidá data do seznamu:
118
aList.setStyle("contentPadding", 5);
aList.rowCount = aList.length;
Použití stylů u komponenty List
Komponenta List používá k vyjádření svých vizuálních stavů následující vzhledy:
Vzhledy komponenty List
Další informace týkající se změn vzhledu pro komponentu ScrollBar naleznete v sekci „Přizpůsobení komponenty
UIScrollBar“ na stránce 133. Další informace o změnách vzhledu Focus Rect naleznete v sekci „Přizpůsobení
komponenty TextArea“ na stránce 128.
Poznámka: Při změně vzhledu ScrollBar u jedné komponenty se tento vzhled změní i u všech ostatních komponent, které
používají posuvník.
Poklepáním na vzhled Cell Renderer otevřete druhou paletu vzhledů pro jiné stavy buňky seznamu.
119
Vzhledy Cell Renderer seznamu
Úpravou těchto vzhledů lze změnit podobu buněk seznamu. Následující postup popisuje změnu barvy vzhledu
Nahoře, aby se změnila podoba seznamu v normálním neaktivním stavu.
2 Přetáhněte komponentu List z panelu Komponenty na vymezenou plochu a přiřaďte jí název instance aList.
3 Poklepejte na seznam a otevřete jeho paletu vzhledů.
4 Poklepáním na vzhled Cell Renderer otevřete paletu vzhledů Cell Renderer.
5 Poklepejte na vzhled Up_Skin a otevřete ho pro provádění úprav.
6 Klepněte do oblasti výplně vzhledu a vyberte ji. V okně Inspektor vlastností by se měl zobrazit výběr barvy výplně
s aktuální barvou výplně vzhledu.
7 Pomocí výběru barvy výplně vyberte barvu #CC66FF a aplikujte ji na výplň vzhledu Up_Skin.
dokumentu.
9 Přidejte následující kód na panel Akce do Snímku 1 Časové osy a přidejte data do seznamu:
aList.setStyle("contentPadding", 5);
aList.rowCount = aList.length;
Seznam by měl vypadat jako na následujícím obrázku:
Buňky seznamu s uživatelskou barvou vzhledu Up_Skin
Orámování vyplývá z nastavení stylu contentPadding.
120
Přizpůsobení komponenty NumericStepper
Komponentu NumericStepper lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření
Změnit > Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti a metody třídy
NumericStepper, např. width, height, scaleX a scaleY.
Při změně velikosti komponenty NumericStepper se nezmění šířka tlačítek se šipkou dolů a nahoru. Pokud bude mít
krokovač po změně velikosti větší výšku, než je výchozí hodnota, budou ve výchozím nastavení tlačítka se šipkami
uchycena v horní a dolní části komponenty. V opačném případě určí způsob nakreslení tlačítek změna měřítka s 9
řezy. Tlačítka se šipkami jsou vždy zobrazena vpravo od textového pole.
Styly a komponenta NumericStepper
Nastavením vlastností stylu komponenty NumericStepper lze změnit její vzhled. Styly určují hodnoty pro vzhledy
komponenty, odsazení a formát textu při jejím kreslení. Styl textFormat umožňuje změnu velikosti a podoby
hodnoty komponenty NumericStepper. Různé styly vzhledů umožňují určení různých tříd, jež mají být pro vzhled
použity. Další informace o použití stylů vzhledů naleznete v sekci „Co jsou vzhledy“ na stránce 102.
V tomto postupu se používá ke změně vzhledu hodnoty zobrazené v komponentě NumericStepper styl textFormat.
2 Přetáhněte komponentu NumericStepper z panelu Komponenty na vymezenou plochu a přiřaďte jí název instance myNs.
3 Přidejte následující kód na panel Akce do Snímku 1 hlavní časové osy:
myNs.setSize(100, 50);
tf.color = 0x0000CC;
tf.size = 24;
tf.font = "Arial";
tf.align = "center";
myNs.setStyle("textFormat", tf);
Vzhledy a komponenta NumericStepper
Komponenta NumericStepper má vzhledy pro znázornění stavů svých tlačítek Nahoře, Dole, Zakázáno a Výběr.
Pokud je krokovač povolen, zobrazují tlačítka dolů a nahoru své stavy Přes, když přes ně přejede ukazatel myši. Při
stisknutí tlačítka zobrazují stav Dole. Po uvolnění myši se tlačítka vrátí do stavu Přes. Jestliže se ukazatel posune mimo
tlačítka, zatímco je tlačítko myši stisknuté, vrátí se tlačítka do původního stavu.
Je-li krokovač zakázán, zobrazuje se stav Zakázáno bez ohledu na činnost uživatele.
Komponenta NumericStepper má následující vzhledy:
121
Vzhledy komponenty NumericStepper
1 Vytvořte nový soubor FLA.
2 Přetáhněte komponentu NumericStepper na vymezenou plochu.
3 Nastavte ovládání zvětšení na 400% a zvětšete obraz pro provádění úprav.
4 Poklepejte na pozadí vzhledu TextInput na panelu vzhledů, až se dostanete na úroveň skupiny a barva pozadí se
zobrazí ve výběru barvy výplně v okně Inspektor vlastností.
5 Pomocí výběru barvy výplně v okně Inspektor vlastností vyberte barvu #9999FF a aplikujte ji na pozadí vzhledu
TextInput.
dokumentu.
7 Opět poklepejte na komponentu NumericStepper a znovu otevřete panel vzhledů.
8 Poklepejte na pozadí tlačítka se šipkou nahoru ve skupině Up, aby se pozadí vybralo a jeho barva se zobrazila ve
výběru barvy výplně v inspektoru vlastností.
9 Vyberte barvu #9966FF a aplikujte ji na pozadí tlačítka se šipkou nahoru.
10 Zopakujte kroky 8 a 9 pro tlačítko se šipkou dolů ve skupině Up.
Instance NumericStepper by měla vypadat jako na následujícím obrázku:
Přizpůsobení komponenty ProgressBar
Komponentu ProgressBar lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření
Změnit > Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti třídy ProgressBar, např.
výška, ší ka, scaleX a scaleY.
122
Komponenta ProgressBar má tři vzhledy: vzhled dráhy, vzhled panelu a neurčitý vzhled. Ke změně velikosti datových
zdrojů používá změnu měřítka s 9 řezy.
Styly a komponenta ProgressBar
Nastavením vlastností stylu lze změnit podobu instance ProgressBar. Styly komponenty ProgressBar určují hodnoty
pro její vzhled a odsazení při jejím kreslení. Následující příklad ilustruje zvětšení velikosti instance ProgressBar a
nastavuje její styl barPadding.
2 Přetáhněte komponentu ProgressBar z panelu Komponenty na vymezenou plochu a přiřaďte jí název instance myPb.
myPb.width = 300;
myPb.height = 30;
myPb.setStyle("barPadding", 3);
Informace týkající se nastavení stylů vzhledů naleznete v sekci „Co jsou vzhledy“ na stránce 102.
Vzhledy a komponenta ProgressBar
Komponenta ProgressBar používá vzhledy ke znázornění dráhy indikátoru průběhu, dokončeného indikátoru a
neurčeného indikátoru, jak je znázorněno na následujícím obrázku.
Vzhledy komponenty ProgressBar
Indikátor je umístěn přes vzhled dráhy pomocí stylu barPadding k určení polohy. Změna velikosti datových zdrojů se
provádí pomocí změny měřítka s 9 řezy.
Neurčitý pruh se použije, když je vlastnost instance ProgressBar neur itý nastavena na hodnotu true. Velikost
vzhledu se mění ve svislé i vodorovné poloze, aby odpovídala velikosti komponenty ProgressBar.
Úpravou těchto vzhledů lze změnit podobu komponenty ProgressBar. V následujícím příkladu je například
ilustrována změna barvy neurčitého pruhu.
2 Přetáhněte komponentu ProgressBar na vymezenou plochu a poklepejte na ni, aby se otevřel její panel ikon
vzhledů.
3 Poklepejte na vzhled neurčitého pruhu.
123
5 Poklepejte na jeden z diagonálních pruhů a potom držte stisknutou klávesu Shift a postupně klepněte na ostatní.
Ve výběru barvy výplně v okně Inspektor vlastností se zobrazí aktuální barva.
6 Klepnutím otevřete výběr barvy výplně v okně Inspektor vlastností, vyberte barvu #00CC00 a použijte ji na vybrané
diagonální pruhy.
dokumentu.
Komponenta ProgressBar by měla vypadat jako na následujícím obrázku.
Přizpůsobení komponenty RadioButton
Komponentu RadioButton lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření
Změnit > Transformovat. Za běhu použijte metodu setSize().
Ohraničovací rámeček komponenty RadioButton není viditelný a určuje oblast klepnutí pro komponentu. Zvětšíte-li
velikost komponenty, zvětší se i velikost oblasti klepnutí.
Jestliže je ohraničovací rámeček komponenty příliš malý, než aby se do něho vešel popis komponenty, pak se popis
ořízne.
Použití stylů u komponenty RadioButton
Nastavením vlastností stylu lze změnit podobu komponenty RadioButton. Vlastnosti stylu komponenty RadioButton
určují hodnoty pro její vzhledy, ikony, formátování textu a odsazení při jejím kreslení. Styly komponenty RadioButton
určují hodnoty pro její vzhledy a odsazení pro rozvržení při kreslení.
Následující příklad ilustruje načtení stylu textFormat z komponenty CheckBox a jeho aplikaci na komponentu
RadioButton, aby byl styl jejich popisu stejný.
2 Přetáhněte komponentu CheckBox na vymezenou plochu a v okně Inspektor vlastností jí přiřaďte název instance myCh.
3 Přetáhněte komponentu RadioButton na vymezenou plochu a v okně Inspektor vlastností jí přiřaďte název instance
myRb.
4 Přidejte následující kód na panel Akce do Snímku 1 Časové osy.
tf.color = 0x00FF00;
tf.size = 18;
myCh.setStyle("textFormat", tf);
myRb.setStyle("textFormat", myCh.getStyle("textFormat"));
Tento kód nastaví pro komponentu CheckBox styl textFormat a následně ho vyvoláním metody getStyle() z
komponenty CheckBox aplikuje na komponentu RadioButton.
124
Vzhledy a komponenta RadioButton
Komponenta RadioButton má následující vzhledy, které lze změnit a upravit tak její podobu:
Vzhledy komponenty RadioButton
Jestliže je komponenta RadioButton povolená a není vybraná, zobrazí se její vzhled Přes, když na ni uživatel najede
ukazatelem myši. Když uživatel klepne na komponentu RadioButton, ta se aktivuje a zobrazí vzhled selected_down.
Po uvolnění myši zobrazí komponenta RadioButton vzhled selected_up. Pokud se ukazatel myši posune mimo oblast
klepnutí komponenty RadioButton, zatímco je tlačítko myši stisknuté, komponenta RadioButton znovu zobrazí
vzhled Nahoře.
Je-li komponenta RadioButton zakázána, zobrazuje stav Zakázáno bez ohledu na činnost uživatele.
Následující příklad ilustruje nahrazení vzhledu selected_up, který značí stav výběru.
2 Přetáhněte komponentu RadioButton na vymezenou plochu a poklepejte na ni, aby se otevřela její paleta vzhledů.
4 Poklepáním vyberte vzhled selected_up a stisknutím klávesy Delete ho vymažte.
5 Z panelu nástrojů vyberte nástroj obdélník.
6 V okně Inspektor vlastností nastavte barvu čáry na červenou (#FF0000) a barvu výplně na černou (#000000).
7 Začněte od nitkových křížů označujících vztažný bod symbolu (nebo také počáteční bod či nulový bod) a klepnutím
a přetažením ukazatele myši nakreslete obdélník.
dokumentu.
10 Klepněte na komponentu RadioButton a vyberte ji.
Komponenta RadioButton by měla ve stavu výběru vypadat jako na následujícím obrázku.
125
Přizpůsobení komponenty ScrollPane
Komponentu ScrollPane lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření
Změnit > Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti nebo metody třídy
ScrollPane, např. height, width, scaleX a scaleY.
Komponenta ScrollPane má následující grafické vlastnosti:
• Vztažný bod (nebo také počáteční bod či nulový bod) obsahu se nachází v levém horním rohu panelu.
• Když je vodorovný posuvník vypnutý, zobrazuje se svislý posuvník odshora až dolů podél pravé strany rolovacího
panelu. Když je vypnutý svislý posuvník, zobrazuje se vodorovný posuvník zleva doprava podél spodní strany
rolovacího panelu. Rovněž je možné vypnout oba posuvníky.
• Pokud je rolovací panel příliš malý, nemusí se obsah zobrazovat správně.
• Při změně velikosti rolovacího panelu se posuvná dráha a jezdec posuvníku roztáhne nebo smrští a změní se
velikost jejich oblasti klepnutí. Velikost tlačítek zůstane stejná.
Použití stylů u komponenty ScrollPane
Vlastnosti stylu komponenty ScrollPane určují hodnoty pro její vzhledy a odsazení pro její rozvržení při kreslení.
Různé styly vzhledů umožňují označení různých tříd, jež mají být pro vzhledy komponenty použity. Další informace
o použití stylů vzhledů naleznete v sekci „Co jsou vzhledy“ na stránce 102.
2 Přetáhněte komponentu ScrollPane na vymezenou plochu a přiřaďte jí název instance mySp.
3 V okně Inspektor vlastností klepněte na záložku Parametry a zadejte následující hodnotu pro parametr Zdroj:
http://www.helpexamples.com/flash/images/image1.jpg.
mySp.setStyle("contentPadding", 5);
Všimněte si, že odsazení se aplikuje mezi okraj komponenty a její obsah, na vnější straně posuvníků.
Vzhledy a komponenta ScrollPane
Komponenta ScrollPane používá okraj a posuvníky pro rolovací datové zdroje. Informace týkající se změny vzhledu
posuvníků naleznete v sekci „Použití vzhledů u komponenty UIScrollBar“ na stránce 134.
Přizpůsobení komponenty Slider
Komponentu Slider lze transformovat ve vodorovném směru při vytváření i za běhu. Při vytváření vyberte
Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti třídy Slider, např. ší ka a scaleX.
Jezdce lze pouze prodloužit. Není možné zvětšit jeho výšku. Program Flash ignoruje vlastnost výška a parametr výška
metody setSize(). Je však možné vytvořit svislý posuvník a prodloužit ho ve svislém směru.
126
Styly a komponenta Slider
Styly komponenty Slider určují pouze třídy pro její vzhledy a hodnotu pro odsazení FocusRectPadding, která značí
počet obrazových bodů, jež mají být použity pro odsazení mezi ohraničovacím rámečkem komponenty a jejím vnějším
okrajem. Další informace týkající se použití stylů vzhledů naleznete v sekci „Co jsou vzhledy“ na stránce 102.
Vzhledy a komponenta Slider
Komponenta Slider používá následující vzhledy, které lze změnit a upravit tak její podobu.
Vzhledy komponenty Slider
Následující příklad ilustruje úpravu dráhy nahoru a změnu její barvy na modrou.
2 Přetáhněte komponentu Slider z panelu Komponenty na vymezenou plochu.
3 Poklepejte na komponentu Slider a otevřete její panel vzhledů.
4 Poklepejte na dráhu nahoru v místě její vztažné značky a otevřete ji v režimu úpravy symbolu.
5 Nastavte ovládání zvětšení na 800% a zvětšete ikonu pro provádění úprav. Všimněte si, že se dráha jezdce skládá ze
tří panelů.
6 Klepnutím vyberte horní panel. Po vybrání se jeho barva objeví ve výběru barvy výplně v okně Inspektor vlastností.
7 Pomocí výběru barvy výplně v okně Inspektor vlastností vyberte barvu #000066 a aplikujte ji na horní panel dráhy
jezdce.
8 Klepnutím vyberte prostřední panel dráhy jezdce. Po vybrání se jeho barva zobrazí ve výběru barvy výplně v okně
Inspektor vlastností.
9 Pomocí výběru barvy výplně v okně Inspektor vlastností vyberte barvu #0066FF a aplikujte ji na prostřední panel
dráhy jezdce.
10 Klepnutím vyberte spodní panel dráhy jezdce. Po vybrání se jeho barva zobrazí ve výběru barvy výplně v okně
Inspektor vlastností.
11 Pomocí výběru barvy výplně v okně Inspektor vlastností vyberte barvu #00CCFF a aplikujte ji na spodní panel
dráhy jezdce.
dokumentu.
127
Jezdec by měl vypadat jako na následujícím obrázku.
Přizpůsobení komponenty TextArea
Komponentu TextArea lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření vyberte
Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti třídy TextArea, např. výška, ší ka,
scaleX a scaleY.
Při změně velikosti komponenty TextArea se změní velikost obrysu podle nového ohraničovacího rámečku. Pokud
jsou nezbytné, jsou posuvníky umístěny na spodním a pravém okraji. Velikost textové oblasti se pak upraví v rámci
zbývající oblasti. Komponenta TextArea neobsahuje žádné prvky o pevné velikosti. Jestliže je šířka komponenty
TextArea příliš malá, než aby v ní bylo možné zobrazit text v aktuální velikosti, pak se text ořízne.
Styly a komponenta TextArea
Styly komponenty TextArea určují hodnoty pro její vzhledy, odsazení a formát textu při jejím kreslení. Styly
texFormat a disabledTextFormat určují styl textu, který se bude zobrazovat v komponentě TextArea. Další
informace o vlastnostech stylů vzhledů naleznete v sekci „Použití vzhledů u komponenty TextArea“ na stránce 128.
Následující příklad ilustruje nastavení stylu disabledTextFormat, aby se změnila podoba textu, když je komponenta
TextArea zakázaná, ale stejný proces platí i pro nastavení stylu textFormat pro povolenou komponentu TextArea.
1 Vytvořte nový soubor Flash.
2 Přetáhněte komponentu TextArea na vymezenou plochu a přiřaďte jí název instance myTa.
3 Přidejte následující kód na panel Akce ve Snímku 1 hlavní Časové osy.
tf.color = 0xCC99FF;
tf.font = "Arial Narrow";
tf.size = 24;
myTa.setStyle("disabledTextFormat", tf);
myTa.text = "Hello World";
myTa.setSize(120, 50);
myTa.move(200, 50);
myTa.enabled = false;
Použití vzhledů u komponenty TextArea
Komponenta TextArea má následující vzhledy, které lze změnit a upravit tak její podobu.
128
Vzhledy komponenty TextArea
V následujícím postupu se změní barva okrajů vzhledu Focus Rect, který se zobrazí, když je komponenta TextArea
aktivní, a normálního vzhledu.
2 Přetáhněte komponentu TextArea na vymezenou plochu a poklepejte na ni, aby se otevřel její panel ikon vzhledů.
3 Poklepejte na vzhled Focus Rect.
4 Klepnutím vyberte okraj vzhledu Focus Rect. Po vybrání se jeho aktuální barva zobrazí ve výběru barvy výplně v
okně Inspektor vlastností.
5 Klepnutím otevřete výběr barvy výplně v okně Inspektor vlastností, vyberte barvu #CC0000 a aplikujte ji na okraj.
dokumentu.
7 Poklepejte na komponentu TextArea a otevřete její panel ikon vzhledů.
8 Poklepejte na vzhled Normal.
9 Po jednom vyberte jednotlivé okraje vzhledu Normal a nastavte jejich barvu na #990099.
dokumentu.
Po výběru komponenty TextArea za účelem vložení textu by měly její okraje vypadat jako na následujícím obrázku:
Vnější okraj má vzhled Focus Rect a vnitřní okraj má vzhled Normal.
Informace o úpravě vzhledu UIScrollBar naleznete v sekci „Přizpůsobení komponenty UIScrollBar“ na stránce 133.
129
Přizpůsobení komponenty TextInput
Velikost instance TextInput lze změnit při vytváření nebo za běhu. Při vytváření vyberte komponentu na vymezené
ploše a použijte nástroj Volná transformace nebo kterýkoliv příkaz z nabídky Změnit > Transformovat. Za běhu
použijte metodu setSize() nebo příslušné vlastnosti třídy TextInput, např. výška, ší ka, scaleX a scaleY.
Při změně velikosti komponenty TextInput se změní velikost obrysu podle nového ohraničovacího rámečku.
Komponenta TextInput nepoužívá posuvníky, ale textový kurzor se posunuje automaticky podle toho, jak uživatel
pracuje s textem. Velikost textového pole se pak upraví v rámci zbývající oblasti. Komponenta TextInput neobsahuje
žádné prvky o pevné velikosti. Pokud je komponenta TextInput příliš malá, než aby se v ní mohl zobrazit text, potom
se text ořízne.
Styly a komponenta TextInput
Styly komponenty TextInput určují hodnoty pro její vzhledy, odsazení a formátování textu při jejím kreslení. Styly
texFormat a disabledTextFormat určují styl textu, který se bude v komponentě zobrazovat. Další informace
o vlastnostech stylů vzhledů naleznete v sekci „Vzhledy a komponenta TextInput“ na stránce 130.
Následující příklad ilustruje nastavení stylu textFormat pro nastavení písma, velikosti a barvy textu zobrazeného v
komponentě TextInput. Stejný postup platí i pro nastavení stylu disabledTextFormat, který se použije, když je
komponenta zakázaná.
2 Přetáhněte komponentu TextInput na vymezenou plochu a přiřaďte jí název instance myTi.
3 Přidejte následující kód na panel Akce ve Snímku 1 hlavní Časové osy.
tf.color = 0x0000FF;
tf.font = "Verdana";
tf.size = 30;
tf.italic = true;
myTi.setStyle("textFormat", tf);
myTi.text = "Enter your text here";
myTi.setSize(350, 50);
myTi.move(100, 50);
Vzhledy a komponenta TextInput
Komponenta TextInput má následující vzhledy, které lze změnit a upravit tak její podobu:
Popisek komponenty TextInput
130
Následující postup slouží ke změně barvy okraje a pozadí komponenty TextInput:
2 Přetáhněte komponentu TextInput na vymezenou plochu a poklepejte na ni, aby se otevřel její panel vzhledů.
3 Poklepejte na vzhled Normal.
5 Po jednom vyberte jednotlivé okraje vzhledu Normal a nastavte jejich barvu na #993399.
6 Poklepejte na pozadí, aby se jeho barva zobrazila ve výběru barvy výplně v okně Inspektor vlastnosti. Vyberte barvu
#99CCCC a aplikujte ji na pozadí.
dokumentu.
Komponenta TextInput by měla vypadat jako na následujícím obrázku.
Přizpůsobení komponenty TileList
Komponentu TileList lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření vyberte
Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti, např. width, height, columnCount,
rowCount, scaleX a scaleY. Posuvník, který komponentu TileList obsahuje, mění velikost současně s polem
seznamu.
Styly a komponenta TileList
Styly komponenty TextInput určují hodnoty pro její vzhledy, odsazení a formátování textu při jejím kreslení. Styly
texFormat a disabledTextFormat určují styl textu, který se bude v komponentě zobrazovat. Další informace o
stylech vzhledů naleznete v sekci „Použití vzhledů u komponenty TileList“ na stránce 132.
Následující příklad ilustruje vyvolání metody setRendererStyle() pomocí stylu textFormat za účelem nastavení
písma, velikosti, barvy a atributů textu pro popisy, které se zobrazují v instanci TileList. Stejný postup platí i pro
nastavení stylu disabledTextFormat, který se použije, když je vlastnost povoleno nastavena na hodnotu false.
2 Přetáhněte komponentu TileList na vymezenou plochu a přiřaďte jí název instance myTl.
131
myTl.setSize(100, 100);
myTl.addItem({label:"#1"});
tf.font = "Arial";
tf.color = 0x00FF00;
tf.size = 16;
tf.italic = true;
tf.bold = true;
tf.underline = true;
myTl.setRendererStyle("textFormat", tf);
Použití vzhledů u komponenty TileList
Komponenta TileList zahrnuje vzhledy TileList, CellRenderer a ScrollBar. Úpravou těchto vzhledů lze změnit podobu
komponenty TileList:
Vzhledy komponenty TileList
V následujícím postupu se změní barva vzhledu CellRenderer Selected_Up komponenty TileList.
1 Vytvořte dokument Flash (ActionScript 3.0).
2 Přetáhněte komponentu TileList na vymezenou plochu a poklepejte na ni, aby se otevřel její panel vzhledů.
3 Poklepejte na vzhled CellRenderer, potom poklepejte na vzhled Selected_Up a nakonec klepněte na obdélníkové
pozadí.
4 Pomocí výběru barvy pozadí v okně Inspektor vlastností vyberte barvu #99FFFF a aplikujte ji na vzhled
Selected_Up.
5 Klepejte na tlačítko Zpět umístěné vlevo na panelu úprav nad vymezenou plochou, až se vrátíte do režimu úpravy
dokumentu.
132
6 Na záložce Parametry v okně Inspektor vlastností poklepejte na druhý sloupec řádku dataProvider a otevřete
dialogový rámeček Hodnoty. Přidejte položky s těmito popisy: 1. položka, 2. položka, 3. položka, 4. položka.
8 Klepnutím vyberte jednu z buněk komponenty TileList a potom posuňte ukazatel myši mimo vybranou buňku.
Vybraná buňka by měla vypadat jako na následujícím obrázku:
Komponenta TileList s upravenou barvou vzhledu Selected_up
Přizpůsobení komponenty UILoader
Komponentu UILoader lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. Při vytváření
Změnit > Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti, např. ší ka, výška, scaleX
a scaleY.
Chování komponenty UILoader při změně velikosti se řídí vlastností scaleContent. Když je vlastnost scaleContent
nastavena na hodnotu true, změní se velikost obsahu podle okrajů zaváděče (a při vyvolání metody setSize() se jeho
velikost znovu změní). Když je vlastnost scaleContent nastavena na hodnotu false, je velikost komponenty pevně
svázaná s velikostí obsahu a metoda setSize() a vlastnosti pro úpravu velikostí na ni nemají žádný vliv.
Komponenta UILoader neobsahuje žádné prvky rozhraní, na něž by bylo možné aplikovat styly nebo vzhledy.
Přizpůsobení komponenty UIScrollBar
Komponentu UIScrollBar lze transformovat ve vodorovném i svislém směru při vytváření i za běhu. U svislé
komponenty UIScrollBar však nelze změnit šířku a u vodorovné komponenty UIScrollBar nelze změnit výšku. Při
vytváření vyberte komponentu na vymezené ploše a použijte nástroj Volná transformace nebo kterýkoliv příkaz z
nabídky Změnit > Transformovat. Za běhu použijte metodu setSize() nebo příslušné vlastnosti a metody třídy
UIScrollBar, např. ší ka, výška, scaleX a scaleY.
Poznámka: Použijete-li metodu setSize() , můžete změnit pouze šířku vodorovného posuvníku nebo výšku svislého
posuvníku. Během vytváření lze nastavit výšku vodorovného posuvníku nebo šířku svislého posuvníku, ale při
publikování filmu se tyto hodnoty vrátí k výchozímu nastavení. Lze změnit pouze rozměr posuvníku odpovídající jeho
délce.
Použití stylů u komponenty UIScrollBar
Styly komponenty UIScrollBar určují pouze třídy pro její vzhledy a hodnotu pro odsazení FocusRectPadding, která
značí počet obrazových bodů, jež mají být použity pro odsazení mezi ohraničovacím rámečkem komponenty a jejím
vnějším okrajem. Další informace týkající se použití stylů vzhledů naleznete v sekci „Co jsou vzhledy“ na stránce 102.
133
Použití vzhledů u komponenty UIScrollBar
Komponenta UIScrollBar používá následující vzhledy.
Vzhledy komponenty UIScrollBar
Oba posuvníky, vodorovný i svislý, používají stejné vzhledy. Při zobrazení vodorovného posuvníku otáčí komponenta
UIScrollBar vzhledy podle potřeby.
Následující příklad ilustruje změnu barvy jezdce a tlačítek se šipkami u komponenty UIScrollBar.
2 Přetáhněte komponentu UIScrollBar na vymezenou plochu a přiřaďte jí název instance mySb. Na záložce
Parametry nastavte směr na vodorovný.
3 Poklepáním na posuvník otevřete jeho panel vzhledů.
4 Klepněte na vzhled Nahoře a vyberte ho.
6 Poklepejte na pozadí šipky doprava (nebo šipky nahoru u svislého posuvníku), aby se pozadí vybralo a jeho barva
se zobrazila ve výběru barvy výplně v okně Inspektor vlastností.
7 Vyberte barvu #CC0033 a aplikujte ji na pozadí tlačítka.
8 Klepejte na tlačítko Zpět umístěné vlevo na panelu úprav nad vymezenou plochou, až se vrátíte do režimu úpravy
dokumentu.
9 Zopakujte kroky 6, 7 a 8 pro prvky jezdce a šipky doleva (nebo šipku dolů u svislého posuvníku).
10 Přidejte následující kód na panel Akce do Snímku 1 Časové osy a přiřaďte posuvník ke komponentě TextField.
134
var tf:TextField = new TextField();
addChild(tf);
tf.x = 150;
tf.y = 100;
mySb.width = tf.width = 200;
tf.height = 22;
tf.text = "All work and no play makes Jack a dull boy. All work and no play makes Jack a
dull boy. All . . .";
mySb.y = tf.y + tf.height;
mySb.x = tf.x + tf.width;x
mySb.scrollTarget = tf;
Komponenta UIScrollBar by měla vypadat jako na následujícím obrázku.
Vodorovný posuvník s jezdcem a šipkami doleva a doprava v červené barvě
135
136
Kapitola 6: Použití komponenty
FLVPlayback
Komponenta FLVPlayback umožňuje zahrnout do aplikace Adobe Flash CS5 Professional přehrávač videa, který
slouží k přehrávání postupně stahovaných souborů videa přes HTTP nebo k streamování souborů videa ze serveru
Macromedia Flash Media Server společnosti Adobe či pomocí služby FVSS (Flash Video Streaming Service).
Nové vydání aplikace Adobe Flash Player 9 aktualizace 3 (verze 9.0.115.0 nebo novější) zahrnuje podstatná vylepšení
pro přehrávání videa v přehrávači Flash Player. Tato aktualizace zahrnuje změny v komponentě FLVPlayback, jež
využívají přehrávacího hardwaru koncového uživatele k zajištění většího výkonu při přehrávání videa. Díky změnám
provedeným v komponentě FLVPlayback se rovněž zvýšila věrnost reprodukce video souborů při zobrazení v režimu
na celou obrazovku.
Kromě toho se v přehrávači Flash Player aktualizace 3 zlepšila funkčnost komponenty FLVPlayback přidáním
podpory pro formáty videa MPEG-4, které používají standardní kódování H.264. K těmto formátům patří MP4, M4A,
MOV, MP4V, 3GP a 3G2.
Poznámka: Chráněné soubory MP4 – například soubory stažené z aplikace Apple® iTunes® nebo soubory digitálně
zakódované aplikací FairPlay® – nejsou podporovány.
Uživatelsky orientovaná komponenta FLVPlayback má tyto vlastnosti a výhody:
• Lze ji přetáhnout na vymezenou plochu a snadno a rychle ji implementovat
• Podporuje zobrazení na celou obrazovku
• Poskytuje kolekci předem navržených vzhledů, které lze použít k úpravě vzhledu ovladačů přehrávání
• Umožňuje volbu barvy a alfa hodnot pro předem navržené vzhledy
• Pokročilým uživatelům nabízí možnost vytváření vlastních vzhledů
• Poskytuje živý náhled během vytváření
• Poskytuje vlastnosti rozvržení, díky nimž zůstane video soubor při změně velikosti umístěný ve středu
• Umožňuje spuštění přehrávání ihned po stažení dostatečné části postupně stahovaného video souboru
• Poskytuje startovací body umožňující synchronizaci videa s textem, grafikou a animací
• Zachovává přiměřenou velikost souboru SWF
Použití komponenty FLVPlayback
Použití komponenty FLVPlayback spočívá v jejím umístění na vymezenou plochu a určení video souboru, který má
přehrát. Dále je možné nastavit různé parametry, jež řídí její chování a popisují video soubor.
Komponenta FLVPlayback rovněž zahrnuje aplikační programovací rozhraní jazyka ActionScript (API). Rozhraní
API obsahuje následující třídy, které jsou podrobně popsány v Referenční příručce jazyka ActionScript 3.0 pro aplikaci
Flash Professional: CuePointType, FLVPlayback, FLVPlaybackCaptioning, NCManager, NCManagerNative,
VideoAlign, VideoError, VideoPlayer, VideoState a několik tříd událostí – AutoLayoutEvent, LayoutEvent,
MetadataEvent, SkinErrorEvent, SoundEvent, VideoEvent a VideoProgressEvent.
Komponenta FLVPlayback zahrnuje vlastní komponenty uživatelského rozhraní přehrávače FLV. Komponenta
FLVPlayback je kombinací oblasti zobrazení neboli přehrávače videa, který slouží k prohlížení video souboru, a
ovladačů určených k jeho ovládání. Vlastní komponenty uživatelského rozhraní přehrávače FLV poskytují ovládací
tlačítka a mechanismy, pomocí nichž lze přehrát, zastavit, pozastavit a jinak řídit video soubor. Mezi tyto ovladače
patří BackButton, BufferingBar, CaptionButton (pro FLVPlaybackCaptioning), ForwardButton, FullScreenButton,
MuteButton, PauseButton, PlayButton, PlayPauseButton, SeekBar, StopButton a VolumeBar. Komponenta
FLVPlayback a vlastní ovladače uživatelského rozhraní přehrávače FLV jsou zobrazeny v panelu Komponenty, jak je
znázorněno na následujícím obrázku:
Komponenty FLVPlayback v panelu Komponenty
Proces přidávání ovladačů přehrávání do komponenty FLVPlayback se nazývá změny vzhledu. Komponenta
FLVPlayback má výchozí vzhled, SkinOverAll.swf, který poskytuje ovladače přehrát, zastavit, zpět, dopředu, hledání,
ztlumit, hlasitost, celá obrazovka a titulkování. Jestliže chcete tento vzhled změnit, máte následující možnosti:
• Vybrat si z kolekce předem navržených vzhledů
• Vytvořit si vlastní vzhled a přidat ho do kolekce předem navržených vzhledů
• Vybrat jednotlivá tlačítka z vlastních komponent uživatelského rozhraní a přizpůsobit je
V případě, že si vyberete předem navržený vzhled, můžete si zvolit jeho barvu a alfa hodnoty, a to buď při vytváření
nebo až za běhu. Další informace naleznete v sekci „Výběr předem navrženého vzhledu“ na stránce 154.
Jakmile si zvolíte jiný vzhled, stane se z něho nový výchozí vzhled.
Další informace týkající se výběru nebo vytváření vzhledu pro komponentu FLVPlayback naleznete v sekci
„Přizpůsobení komponenty FLVPlayback“ na stránce 154.
Vytvoření aplikace s komponentou FLVPlayback
K zahrnutí komponenty FLVPlayback do aplikace lze použít následující metody:
• Přetažení komponenty FLVPlayback z panelu Komponenty na vymezenou plochu a zadání hodnoty pro parametr
Zdroj.
• Vytvoření komponenty na vymezené ploše pomocí průvodce importem videa a její přizpůsobení výběrem vzhledu.
• Použití konstruktoru FLVPlayback() k dynamickému vytvoření instance FLVPlayback na vymezené ploše za
předpokladu, že komponentou je knihovna.
137
Poznámka: Jestliže vytvoříte instanci FLVPlayback pomocí jazyka ActionScript, musíte jí pomocí jazyka ActionScript
rovněž přiřadit vzhled nastavením vlastnosti Vzhled. Když aplikujete vzhled tímto způsobem, nebude automaticky
publikován se souborem SWF. Je zapotřebí zkopírovat soubor SWF aplikace i soubor SWF vzhledu na aplikační
server, jinak nebude soubor SWF při spuštění aplikace dostupný.
Přetažení komponenty FLVPlayback z panelu Komponenty
1 Klepnutím na tlačítko Plus (+) na panelu Komponenty otevřete video.
2 Přetáhněte komponentu FLVPlayback na vymezenou plochu.
3 Zatímco je komponenta FLVPlayback na vymezené ploše vybraná, vyhledejte na panelu Parametry v okně
Inspektor komponent buňku Hodnota pro parametr Zdroj a zadejte řetězec, který určuje jednu z následujících
možností:
• Lokální cestu k video souboru
• Adresu URL k video souboru
• Adresu URL k synchronizovanému souboru SMIL (Synchronized Multimedia Integration Language), který
popisuje, jak se má přehrávat video soubor
Informace o způsobu vytváření souboru SMIL k popisu jednoho či více souborů FLV naleznete v sekci „Použití
souboru SMIL“ na stránce 165.
4 Zatímco je komponenta FLVPlayback na vymezené ploše vybraná, klepněte v okně Inspektor komponent na
záložce Parametry na buňku Hodnota pro parametr Vzhled.
5 Klepnutím na ikonu lupy otevřete dialogové okno Vybrat vzhled.
6 Vyberte jednu z následujících možností:
• V rozbalovacím seznamu vyberte jeden z předem navržených vzhledů a připojte ke komponentě sadu ovladačů
přehrávání.
• Jestliže jste si vytvořili vlastní vzhled, vyberte v rozbalovací nabídce URL vlastního vzhledu a do pole URL
zadejte URL souboru SWF obsahujícího daný vzhled.
• Vyberte možnost Žádný a přetažením jednotlivých vlastních komponent uživatelského rozhraní FLVPlayback
na vymezenou plochu přidejte ovladače přehrávání.
Poznámka: V prvních dvou případech se v zobrazovacím okně nad rozbalovací nabídkou zobrazí náhled vzhledu.
V dialogovém okně Výběr barvy lze změnit barvu vzhledu.
Aby bylo možné změnit barvu vlastního ovladače uživatelského rozhraní, je třeba ho přizpůsobit. Další
informace týkající se použití vlastních ovladačů uživatelského rozhraní naleznete v sekci „Změna vzhledu
jednotlivých vlastních komponent uživatelského rozhraní přehrávače FLV“ na stránce 155.
7 Klepnutím na tlačítko OK dialogové okno Vybrat vzhled zavřete.
8 Zvolením možnosti Ovládání > Testovat film proveďte soubor SWF a spusťte video.
Následující postup slouží k přidání komponenty FLVPlayback pomocí průvodce importem videa:
Použití průvodce importem videa:
1 Zvolte možnost Soubor > Import > Importovat video.
2 Určete umístění video souboru zvolením jedné z následujících možností:
• V lokálním počítači
• Již nasazeno na webový server, streamovací službu videa Flash nebo server Flash Media
138
3 V závislosti na zvolené možnosti zadejte cestu nebo URL určující umístění souboru videa a klepněte na tlačítko
Další.
4 Jestliže byla zvolena cesta souboru, zobrazí se dialogové okno Nasazení, ve kterém lze zvolit jednu z uvedených
možností a určit, jakým způsobem má být video nasazeno:
• Postupné stažení ze standardního webového serveru
• Streamovat ze streamovací služby pro video Flash
• Streamovat ze serveru Flash Media
• Vložit video do souboru SWF a přehrát v Časové ose
Důležité: Nevybírejte možnost Vložit video. Komponenta FLVPlayback přehrává pouze externí streamované
video. Tato volba neumístí komponentu FLVPlayback na vymezenou plochu.
5 Klikněte na tlačítko Další.
6 Zvolte jednu z následujících možností:
• V rozbalovacím seznamu vyberte jeden z předem navržených vzhledů a připojte ke komponentě sadu ovladačů
přehrávání.
• Jestliže jste si pro komponentu vytvořili vlastní vzhled, vyberte v rozbalovací nabídce URL vlastního vzhledu a
do pole URL zadejte URL souboru SWF obsahujícího daný vzhled.
• Vyberte možnost Žádný a přetažením jednotlivých vlastních komponent uživatelského rozhraní FLVPlayback
na vymezenou plochu přidejte ovladače přehrávání.
Poznámka: V prvních dvou případech se v zobrazovacím okně nad rozbalovací nabídkou zobrazí náhled vzhledu.
7 Klepnutím na OK dialogové okno Vybrat vzhled zavřete.
8 Přečtěte si dialogové okno Dokončit import videa, kde se dozvíte, co se bude dít dále, a potom klepněte na tlačítko
Dokončit.
9 Pokud jste soubor FLA neuložili, zobrazí se dialogové okno Uložit jako.
10 Spusťte soubor SWF výběrem příkazu Ovládání > Testovat film a spusťte video.
Následující postup slouží k přidání komponenty FLVPlayback pomocí jazyka ActionScript.
Dynamické vytvoření instance pomocí jazyka ActionScript:
1 Přetáhněte komponentu FLVPlayback z panelu Komponenty na panel Knihovna (Okno > Knihovna).
2 Přidejte následující kód na panel Akce do Snímku 1 Časové osy. Změňte instalační_disk na disk, kde je instalován
program Flash, a změňte cestu tak, aby odpovídala umístění složky vzhledů pro vaši instalaci:
Na počítači s operačním systémem Windows:
import fl.video.*;
var my_FLVPlybk = new FLVPlayback();
my_FLVPlybk.x = 100;
my_FLVPlybk.y = 100;
addChild(my_FLVPlybk);
my_FLVPlybk.skin = "file:///install_drive|/Program Files/Adobe/Adobe Flash
CS5/en/Configuration/FLVPlayback Skins/ActionScript 3.0/SkinOverPlaySeekMute.swf"
my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/water.flv";
Na počítači Macintosh:
139
import fl.video.*;
my_FLVPlybk.skin = "file:///Macintosh HD:Applications:Adobe Flash
CS5:Configuration:FLVPlayback Skins:ActionScript 3.0SkinOverPlaySeekMute.swf"
Poznámka: Jestliže nenastavíte vlastnosti Zdroj a Vzhled, bude se vygenerovaný filmový klip jevit prázdný.
3 Zvolením možnosti Ovládání > Testovat film proveďte soubor SWF a spusťte video soubor.
Parametry komponenty FLVPlayback
Pro každou instanci komponenty FLVPlayback lze v oknech Inspektor komponent a Inspektor vlastností nastavit
následující parametry: Zarovnat, autoPlay, cuePoints, Náhled, scaleMode, Vzhled, skinAutoHide,
skinBackgroundAlpha, skinBackgroundColor, Zdroj a Hlasitost. Každý z těchto parametrů má odpovídající
vlastnost jazyka ActionScript stejného názvu. Při přiřazení hodnoty těmto parametrům nastavujete výchozí stav
vlastnosti v aplikaci. Nastavení vlastnosti v jazyce ActionScript přepíše hodnotu, jež byla nastavena v parametru.
Informace týkající se možných hodnot pro tyto parametry naleznete pod třídou FLVPlayback v Referenční příručce
jazyka ActionScript 3.0 aplikace Flash Professional.
Určení parametru Zdroj FLVPlayback
Parametr Zdroj umožňuje zadání názvu a umístění video souboru, jež informují program Flash, jak se má soubor
přehrávat.
Poklepáním na buňku Hodnota pro parametr Zdroj v okně Inspektor komponent otevřete dialogové okno Cesta
obsahu.
Dialogové okno FLVPlayback Cesta obsahu
Dialogové okno Cesta obsahu poskytuje zaškrtávací políčko Přizpůsobit rozměrům zdrojového FLV, které určuje, zda
se má instance FLVPlayback na vymezené ploše přizpůsobit rozměrům zdrojového video souboru. Zdrojový video
soubor obsahuje preferovanou výšku a šířku pro přehrávání. Pokud zvolíte tuto volbu, rozměry instance FLVPlayback
budou přizpůsobeny tak, aby odpovídaly těmto preferovaným rozměrům.
Zdroj
Zadejte URL nebo lokální cestu pro video soubor nebo soubor XML, který popisuje, jak se má přehrávat video soubor.
Jestliže neznáte přesné umístění souboru videa, klepněte na ikonu složky a otevřete dialogové okno Prohlížeč, které
vám pomůže najít správné umístění. Při vyhledávání video souboru, je-li tento soubor v umístění cílového souboru
SWF nebo v jeho podsložce, program Flash automaticky převede tuto cestu na relativní vůči tomuto umístění, aby byla
připravená pro předávání z webového serveru. V opačném případě bude cesta absolutní cesta Windows nebo
Macintosh. Chcete-li zadat název lokálního souboru XML, zadejte cestu a název.
Pokud určíte HTTP URL, bude se video soubor přehrávat formou postupného stahování. Jestliže zadáte URL, jež bude
RTMP URL, bude se video soubor streamovat ze serveru Flash Media nebo FVSS. Také URL k souboru XML může být
streamovaný video soubor ze serveru Flash Media nebo FVSS.
140
Důležité:
Je rovněž možné určit umístění souboru SMIL, který popisuje, jak se mají u vícenásobných šířek pásma připojení
přehrávat vícenásobné streamy video souboru. Soubor popisuje soubory FLV pomocí jazyka SMIL (Synchronized
Multimedia Integration Language). Popis souboru SMIL naleznete v „Použití souboru SMIL“ na stránce 165.
Název a umístění video souboru je možné určit také pomocí vlastnosti jazyka ActionScript FLVPlayback.source za
použití metod FLVPlayback.play() a FLVPlayback.load(). Tyto tři alternativy mají přednost před parametrem
Zdroj v okně Inspektor komponent. Další informace naleznete u položek FLVPlayback.source,
FLVPlayback.play() a FLVPlayback.load() pro třídu FLVPlayback v Referenční příručce jazyka ActionScript 3.0
pro aplikaci Flash Professional.
Podpora zobrazení na celou obrazovku
Verze jazyka ActionScript 3.0 komponenty FLVPlayback podporuje režim na celou obrazovku, který vyžaduje Flash
Player 9.0.28.0 nebo novější, a také správné nastavení HTML na prohlížení přes celou obrazovku. Některé předem
navržené vzhledy zahrnují přepínací tlačítko sloužící k zapínání a vypínání režimu na celou obrazovku. Ikona
FullScreenButton se nachází na pravé straně ovládacího panelu znázorněného na následujícím obrázku.
Ikona celé obrazovky na ovládacím panelu
Podpora zobrazení na celou obrazovku probíhá, pouze když je vlastnost fullScreenTakeOver nastavena na hodnotu
true, což je její výchozí nastavení.
Podpora zobrazení na celou obrazovku může být k dispozici s podporou hardwarové akcelerace nebo bez ní.
Informace týkající se hardwarové akcelerace naleznete v sekci „Hardwarová akcelerace“ na stránce 144..
Implementace podpory zobrazení na celou obrazovku pro komponentu FLVPlayback:
1 Přidejte komponentu FLVPlayback do aplikace a přiřaďte jí video soubor.
2 Vyberte pro komponentu FLVPlayback vzhled s tlačítkem celé obrazovky (např.
SkinUnderPlaySeekFullscreen.swf) nebo přidejte do komponenty FLVPlayback komponentu uživatelského
rozhraní FullScreenButton ze sekce Video na panelu Komponenty.
3 Zvolte Soubor > Nastavení publikování.
4 V dialogovém okně Nastavení publikování klepněte na záložku HTML.
5 Na záložce HTML zvolte v rozbalovací nabídce Předloha možnost Flash s podporou celé obrazovky.
6 Dále na záložce HTML zaškrtněte políčko Zjistit verzi Flash a v závislosti na použité verzi přehrávače Flash zadejte
verzi 9.0.28 nebo novější.
7 Zvolte šablonu Formáty a ujistěte, zda jsou obě volby Flash (.swf) i HTML (.html) zvoleny. Výchozí názvy souborů
je možné změnit.
8 Klepněte na tlačítko Přiřadit a následně na tlačítko OK.
Jako další možnost můžete v kroku 7 klepnout na tlačítko OK a pomocí volby Soubor > Náhled publikování >
Výchozí - (HTML) automaticky otevřít exportovaný soubor HTML ve výchozím prohlížeči. V opačném případě
otevřete exportovaný soubor HTML v prohlížeči a otestujte možnost zobrazení na celou obrazovku.
Chcete-li komponentu FLVPlayback s podporou zobrazení na celou obrazovku přidat na webovou stránku,
otevřete exportovaný soubor HTML a zkopírujte kód, který vloží soubor SWF do souboru HTML pro webovou
stránku. Tento kód by měl vypadat jako na následujícím obrázku:
141
//from the <head> section
<script language="javascript"> AC_FL_RunContent = 0; </script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!-// ----------------------------------------------------------------------------// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 28;
// ----------------------------------------------------------------------------// -->
</script>
//and from the <body> section
<script language="JavaScript" type="text/javascript">
<!-if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
var hasRightVersion = DetectFlashVer(requiredMajorVersion,
requiredMinorVersion, requiredRevision);
if(hasRightVersion) { // if we've detected an acceptable version
// embed the Flash movie
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=9,0,28,0',
'width', '550',
'height', '400',
'src', 'fullscreen',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/
getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'fullscreen',
'bgcolor', '#ffffff',
'name', 'fullscreen',
'menu', 'true',
'allowScriptAccess','sameDomain',
142
'allowFullScreen','true',
'movie', 'fullscreen',
'salign', '' ); //end AC code
} else { // Flash is too old or we can't detect the plug-in.
var alternateContent = 'Alternative HTML content should be placed
here.'
+ 'This content requires Adobe Flash Player.'
+ '<a href=http://www.macromedia.com/go/getflash/>Get Flash</a>
';
document.write(alternateContent); // Insert non-Flash content.
}
}
// -->
</script>
<noscript>
// Provide alternative content for browsers that do not support scripting
// or for those that have scripting disabled.
Alternative HTML content should be placed here. This content requires Adobe Flash Player.
<a href="http://www.macromedia.com/go/getflash/">Get Flash</a>
</noscript>
Případně můžete exportovaný soubor HTML použít jako předlohu pro webovou stránku a přidat k němu další
obsah. Jestliže tak však učiníte, změňte název souboru HTML, aby nedošlo k jeho náhodnému přepsání v případě,
že by se soubor HTML FLVPlayback později znovu exportoval z přehrávače Flash.
V každém případě je nezbytné odeslat na webový server také soubor AC_RunActiveContent.js, který se exportuje
do stejné složky jako soubor HTML.
Podpora jazyka ActionScript pro režim zobrazení na celou obrazovku zahrnuje vlastnosti
fullScreenBackgroundColor, fullScreenSkinDelay a fullScreenTakeOver a metodu
enterFullScreenDisplayState(). Informace týkající se těchto elementů jazyka ActionScript naleznete v
Referenční příručce jazyka ActionScript 3.0 aplikace Flash Professional.
Použití metody enterFullScreenDisplayState()
Režim zobrazení na celou obrazovku je rovněž možné vyvolat pomocí metody jazyka ActionScript
enterFullScreenDisplayState(), jak ukazuje následující příklad.
function handleClick(e:MouseEvent):void {
myFLVPlybk.enterFullScreenDisplayState();
}
myButton.addEventListener(MouseEvent.CLICK, handleClick);
V tomto příkladu není režim zobrazení na celou obrazovku vyvolán klepnutím na přepínací tlačítko celé obrazovky na
vzhledu FLVPlayback, ale klepnutím na přepínací tlačítko (MyButton), které bylo na webovou stránku přidáno pro
vyvolání režimu zobrazení na celou obrazovku. Klepnutím na toto tlačítko se spustí zpracování události handleClick,
jež vyvolá metodu enterFullScreenDisplayState().
Metoda enterFullScreenDisplayState() nastaví vlastnost Stage.displayState na hodnotu
StageDisplayState.FULL_SCREEN, a proto přináší stejná omezení jako vlastnost displayState. Další informace
týkající se metody enterFullScreenDisplayState() a vlastnosti Stage.displayState naleznete v Referenční
143
Hardwarová akcelerace
Verze Flash Player 9.0.115.0 a novější obsahují kód, který pomocí dostupného video hardwaru vylepšuje výkonnost a
přesnost souborů FLV, jež FLVPlayback přehrává v režimu zobrazení na celou obrazovku. Budou-li splněny
podmínky a vlastnost fullScreenTakeOver bude nastavena na hodnotu true, použije přehrávač Flash ke změně
měřítka hardwarovou akceleraci místo toho, aby ho měnil pomocí softwaru. V případě, že je komponenta
FLVPlayback použita ve starší verzi přehrávače Flash, nebo pokud neexistují žádné podmínky pro hardwarovou
akceleraci, změní přehrávač Flash velikost video souboru sám, jako tomu bylo dříve.
Aby bylo možné využít hardwarové akcelerace pro podporu zobrazení na celou obrazovku, musí mít počítač video
kartu kompatibilní s DirectX 7 s pamětí VRAM (video RAM) 4 MB a více. Tato hardwarová podpora je k dispozici v
operačním systému Windows 2000 nebo Mac OS X 10.2 a v jejich novějších verzích. Direct X ® poskytuje rozhraní API,
jež zahrnují mimo jiné i rozhraní mezi softwarem a video hardwarem k urychlení třírozměrné a dvourozměrné
grafiky.
Chcete-li využít režimu hardwarové akcelerace, musíte jedním z následujících způsobů vyvolat také režim zobrazení
na celou obrazovku:
• Pomocí přepínacího tlačítka celé obrazovky na vzhledu FLVPlayback
• Pomocí ovladače videa FullScreenButton
• Pomocí metody jazyka ActionScript enterFullScreenDisplayState(). Další informace naleznete v sekci
„Použití metody enterFullScreenDisplayState()“ na stránce 143.
Jestliže vyvoláte režim zobrazení na celou obrazovku nastavením vlastnosti Stage.displayState na hodnotu
StageDisplayState.FULLSCREEN, nebude FLVPlayback používat hardwarovou akceleraci ani v případě, že bude
k dispozici video hardware a paměť.
Jako jeden z důsledků použití hardwarové akcelerace pro podporu zobrazení na celou obrazovku se velikost
vzhledů FLVPlayback mění spolu s přehrávačem videa a video souborem. Na následujícím obrázku je znázorněn
vliv režimu zobrazení na celou obrazovku s hardwarovou akcelerací na vzhled FLVPlayback, jehož detail je zde
vyobrazen v plném rozlišení.
Režim zobrazení na celou obrazovku na monitoru 1600 x 1200 u videa s rozlišením 320 x 240
Na tomto obrázku je znázorněn výsledek režimu zobrazení na celou obrazovku na monitoru 1600 x 1200 s video
souborem o šířce 320 a výšce 240 obrazových bodů, což jsou výchozí rozměry FLVPlayback. Deformace vzhledu je
zřetelnější u souborů FLV s menšími rozměry nebo na větších monitorech. Naopak u větších souborů FLV nebo na
menších monitorech je deformace méně zřetelná. Například při změně velikosti z 640 x 480 na 1600 x 1200 se
velikost vzhledu zvětší, ale jeho deformace bude menší.
144
Nastavením vlastnosti skinScaleMaximum lze omezit změnu velikosti vzhledu FLVPlayback. Výchozí hodnota je
4,0 neboli 400%. Omezení změny velikosti vzhledu však vyžaduje ke změně velikosti FLV kombinaci hardwaru a
softwaru, což může mít negativní vliv na výkonnost souborů FLV s velkými rozměry zakódovaných při vysoké
přenosové rychlosti. Pokud je video velké (např. 640 obr. bodů šířky či více, 480 obr. bodů výšky či více), není
vhodné nastavovat vlastnost skinScaleMaximum na malou hodnotu, neboť by to mohlo na velkých monitorech
způsobit vážné problémy s výkonem. Vlastnost skinScaleMaximum pomůže najít kompromis mezi výkonností a
kvalitou a podobou velkého vzhledu.
Ukončení režimu zobrazení na celou obrazovku
Chcete-li režim zobrazení na celou obrazovku ukončit, klepněte znovu na tlačítko celé obrazovky nebo stiskněte
klávesu Esc.
Nastavení následujících vlastností a volání následujících metod může způsobit změny v rozvržení, v jejichž důsledku
komponenta FLVPlayback ukončí režim zobrazení na celou obrazovku: height, registrationHeight,
registrationWidth, registrationX, registrationY, scaleX, scaleY, width, x, y, setScale() nebo setSize().
Jestliže nastavíte vlastnosti zarovnání nebo scaleMode, nastaví je FLVPlayback až do ukončení režimu zobrazení na
celou obrazovku na hodnoty na st ed a maintainAspectRatio.
Pokud při použití celé obrazovky změníte hodnotu vlastnosti fullScreenTakeOver z true na false, režim
hardwarové akcelerace rovněž způsobí, že přehrávač Flash ukončí režim zobrazení na celou obrazovku.
Zarovnání rozvržení pro přehrávání většího počtu video souborů
FLVPlayback verze jazyka ActionScript 3.0 má vlastnost zarovnání, která určuje, zda má být video při změně velikosti
umístěno na střed komponenty nebo zarovnáno nahoru, dolů, doleva či doprava. Kromě vlastností x, y, ší ka a výška
má komponenta jazyka ActionScript 3.0 také vlastnosti registrationX, registrationY, registrationWidth a
registrationHeight. Ty zpočátku odpovídají vlastnostem x, y, ší ka a výška. Při načítání dalších video souborů
se tyto vlastnosti při automatické změně rozvržení nezmění, takže nový video soubor může být vystředěný na stejném
místě. Pokud scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO, mohou být následující soubory FLV
přizpůsobeny podle původních rozměrů komponenty místo toho, aby se měnila šířka a výška komponenty.
Automatické přehrávání postupně stahovaných video souborů
Při načítání postupně stahovaného video souboru začne FLVPlayback přehrávat video soubor až v okamžiku, kdy se
stáhne jeho dostatečná část, takže může video soubor přehrát od začátku do konce.
Chcete-li začít video soubor přehrávat dříve, než se stáhne jeho dostatečná část, vyvolejte metodu play() bez
jakýchkoliv parametrů.
Jestliže se chcete vrátit do stavu čekání na stažení dostatečné části video souboru, vyvolejte metodu pause() a následně
vyvolejte metodu playWhenEnoughDownloaded().
Použití startovacích bodů
Startovací bod je místo, ve kterém přehrávač videa během přehrávání video souboru odešle událost cuePoint.
Startovací body lze přidat do souboru FLV v čase, kdy má být provedena akce pro jiný element na webové stránce.
Můžete například požadovat zobrazení textu nebo grafiky, případně provést synchronizaci s animací Flash nebo
pracovat s přehrávaným souborem FLV jeho pozastavením, vyhledáním jiného místa ve videu či přepnutím na jiný
soubor FLV. Startovací body umožňují řízení v kódu jazyka ActionScript za účelem synchronizace bodů v souboru
FLV s dalšími akcemi na webové stránce.
145
Existují tři typy startovacích bodů: navigace, událost a ActionScript. Startovací body navigace a událost se rovněž
nazývají vložené startovací body, neboť jsou vloženy ve streamu souboru FLV a v paketu metadat souboru FLV.
Startovací bod navigace umožňuje vyhledání určitého snímku v souboru FLV, protože v souboru FLV vytvoří klíčový
snímek co nejblíže zadanému času. Klíčový snímek je datový segment, který se vyskytuje mezi obrazovými snímky ve
streamu souboru FLV. Při hledání startovacího bodu navigace vyhledá komponenta klíčový snímek a spustí událost
cuePoint.
Startovací bod událost umožňuje synchronizaci okamžiku v souboru FLV s externí událostí na webové stránce. Událost
cuePoint se stane přesně ve stanovenou dobu. Startovací body navigace a událost lze vložit do souboru FLV pomocí
průvodce importem videa nebo kodéru videa Flash. Další informace o průvodci importem videa a kodéru videa Flash
naleznete v kapitole 16 „Práce s videem“ v sekci Použití programu Flash.
Startovací bod jazyka ActionScript je externí startovací bod, který lze přidat buďto prostřednictvím dialogového okna
Startovací body videa Flash nebo pomocí metody FLVPlayback.addASCuePoint(). Komponenta ukládá a sleduje
startovací body jazyka ActionScript mimo soubor FLV, v důsledku čehož jsou méně přesné než vložené startovací
body. Startovací body jazyka ActionScript jsou přesné na desetinu sekundy. Přesnost startovacích bodů jazyka
ActionScript lze zvýšit snížením hodnoty vlastnosti playheadUpdateInterval, protože komponenta generuje
událost cuePoint pro startovací body jazyka ActionScript při aktualizaci přehrávací hlavy. Další informace naleznete
u vlastnosti FLVPlayback.playheadUpdateInterval v Referenční příručce jazyka ActionScript 3.0 pro aplikaci Flash
Professional.
V jazyce ActionScript a v metadatech souboru FLV je startovací bod znázorněn jako objekt s následujícími
vlastnostmi: název, as, typ a parametry. Vlastnost název je řetězec obsahující název přiřazený startovacímu bodu.
Vlastnost as je číslo, které představuje čas výskytu startovacího bodu v hodinách, minutách, sekundách a
milisekundách (HH:MM:SS:mmm). Vlastnost typ je řetězec, jehož hodnota je „navigace", „událost" nebo
„actionscript" v závislosti na typu vytvořeného startovacího bodu. Vlastnost parametry je soubor definovaných
dvojic názvů a hodnot.
Při události cuePoint je objekt startovacího bodu k dispozici v objektu události prostřednictvím vlastnosti info.
Použití dialogového okna Startovací body videa Flash
Dialogové okno Startovací body videa Flash otevřete poklepáním na buňku Hodnota u parametru cuePoints v okně
Inspektor komponent. Vzhled dialogového okna se podobá následujícímu obrázku:
Dialogové okno Startovací body
146
V tomto dialogovém okně jsou zobrazeny vložené startovací body jazyka ActionScript. Pomocí tohoto dialogového
okna lze přidávat a odstraňovat startovací body jazyka ActionScript, jakož i parametry startovacích bodů. Kromě toho
lze povolit nebo zakázat vložené startovací body. Vložené startovací body však nelze přidávat, měnit či odstraňovat.
Přidání startovacího bodu jazyka ActionScript:
1 Poklepáním na buňku Hodnota u parametru cuePoints v okně Inspektor komponent otevřete dialogové okno
Startovací body videa Flash.
2 Klepněte na znaménko plus (+) v levém horním rohu nad seznamem startovacích bodů a přidejte výchozí záznam
startovacího bodu jazyka ActionScript.
3 Ve sloupci Název klepněte na text Nový startovací bod a zadejte název startovacího bodu.
4 Klepněte na hodnotu Čas 00:00:00:000 a zadejte čas výskytu startovacího bodu. Čas lze určit v hodinách, minutách,
sekundách a milisekundách (HH:MM:SS:mmm).
Pokud existuje více startovacích bodů, přesune dialogové okno nový startovací bod do jeho chronologického
umístění na seznamu.
5 Chcete-li pro vybraný startovací bod přidat parametr, klepněte na znaménko plus (+) nad sekcí Parametry a zadejte
hodnoty do sloupců Název a Hodnota. Tento krok zopakujte pro všechny parametry.
6 Jestliže chcete přidat více startovacích bodů jazyka ActionScript, zopakujte pro každý z nich kroky 2 až 5.
7 Klepnutím na tlačítko OK uložte provedené změny.
Vymazání startovacího bodu jazyka ActionScript:
2 Vyberte startovací bod, který chcete vymazat.
3 Startovací bod vymažete klepnutím na znaménko minus (-) v levém horním rohu nad seznamem startovacích
bodů.
4 Zopakujte kroky 2 a 3 pro každý startovací bod, který chcete vymazat.
Povolení nebo zakázání vloženého startovacího bodu souboru FLV:
2 Vyberte startovací bod, který chcete povolit nebo zakázat.
3 Klepněte na hodnotu ve sloupci Typ a spusťte rozbalovací nabídku, nebo klepněte na šipku dolů.
4 Klepnutím na název typu startovacího bodu (např. Událost nebo Navigace) startovací bod povolíte. Klepnutím na
volbu Zakázat startovací bod zakážete.
Použití startovacích bodů s jazykem ActionScript
Pomocí jazyka ActionScript lze přidávat startovací body jazyka ActionScript, poslouchat události cuePoint, vyhledat
startovací body libovolného nebo určitého typu, najít startovací bod navigace, povolit nebo zakázat startovací bod,
zkontrolovat, zda je startovací bod povolený, a odstranit startovací bod.
Příklady uvedené v této sekci využívají soubor FLV s názvem cuepoints.flv, který obsahuje následující tři startovací body:
147
148
Název
Čas
Typ
bod1
00:00:00.418
Navigace
bod2
00:00:07.748
Navigace
bod3
00:00:16.020
Navigace
Přidání startovacích bodů jazyka ActionScript
Startovací body jazyka ActionScript lze přidat do souboru FLV pomocí metody addASCuePoint(). Následující
příklad ilustruje přidání dvou startovacích bodů jazyka ActionScript do souboru FLV v okamžiku, kdy je připraven k
přehrávání. První startovací bod se přidá pomocí objektu startovacího bodu, který ve svých vlastnostech určuje čas,
název a typ startovacího bodu. Druhé volání určí čas a název pomocí parametrů metody as a název.
// Requires an FLVPlayback instance called my_FLVPlybk on Stage
import fl.video.*;
import fl.video.MetadataEvent;
my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/cuepoints.flv"
var cuePt:Object = new Object(); //create cue point object
cuePt.time = 2.02;
cuePt.name = "ASpt1";
cuePt.type = "actionscript";
my_FLVPlybk.addASCuePoint(cuePt);//add AS cue point
// add 2nd AS cue point using time and name parameters
my_FLVPlybk.addASCuePoint(5, "ASpt2");
Další informace naleznete u metody FLVPlayback.addASCuePoint() v Referenční příručce jazyka ActionScript 3.0 pro
aplikaci Flash Professional.
Poslouchání událostí cuePoint
Událost cuePoint umožňuje řízení v kódu jazyka ActionScript, když dojde k události cuePoint. Když se v
následujícím příkladu objeví startovací body, posluchač událostí cuePoint vyvolá funkci zpracování událostí, která
zobrazí hodnotu vlastnosti playheadTime a název a typ startovacího bodu. Chcete-li vidět výsledek, použijte tento
příklad v kombinaci s příkladem uvedeným v předchozí sekci Přidání startovacích bodů jazyka ActionScript.
my_FLVPlybk.addEventListener(MetadataEvent.CUE_POINT, cp_listener);
function cp_listener(eventObject:MetadataEvent):void {
trace("Elapsed time in seconds: " + my_FLVPlybk.playheadTime);
trace("Cue point name is: " + eventObject.info.name);
trace("Cue point type is: " + eventObject.info.type);
}
Další informace o události cuePoint naleznete u události FLVPlayback.cuePoint v Referenční příručce jazyka
ActionScript 3.0 pro aplikaci Flash Professional.
Vyhledání startovacích bodů
Pomocí jazyka ActionScript lze vyhledat startovací bod libovolného typu, najít startovací bod nejblíže k určitému času
nebo najít následující startovací bod s určitým názvem.
Zpracování událostí ready_listener() v následujícím příkladu vyvolá metodu findCuePoint() k vyhledání
startovacího bodu ASpt1 a následně vyvolá metodu findNearestCuePoint() k vyhledání startovacího bodu
navigace, který se nachází nejblíže k času startovacího bodu ASpt1.
import fl.video.FLVPlayback;
import fl.video.CuePointType;
import fl.video.VideoEvent;
var rtn_obj:Object; //create cue point object
my_FLVPlybk.addASCuePoint(2.02, "ASpt1");//add AS cue point
function ready_listener(eventObject:VideoEvent):void {
rtn_obj = my_FLVPlybk.findCuePoint("ASpt1", CuePointType.ACTIONSCRIPT);
traceit(rtn_obj);
rtn_obj = my_FLVPlybk.findNearestCuePoint(rtn_obj.time, CuePointType.NAVIGATION);
traceit(rtn_obj);
}
my_FLVPlybk.addEventListener(VideoEvent.READY, ready_listener);
function traceit(cuePoint:Object):void {
trace("Cue point name is: " + cuePoint.name);
trace("Cue point time is: " + cuePoint.time);
trace("Cue point type is: " + cuePoint.type);
}
V následujícím příkladu vyhledá zpracování událostí ready_listener() startovací bod ASpt a vyvolá metodu
findNextCuePointWithName() k vyhledání následujícího startovacího bodu.
import fl.video.*;
var rtn_obj:Object; //create cue point object
my_FLVPlybk.addASCuePoint(2.02, "ASpt");//add AS cue point
my_FLVPlybk.addASCuePoint(3.4, "ASpt");//add 2nd Aspt
rtn_obj = my_FLVPlybk.findCuePoint("ASpt", CuePointType.ACTIONSCRIPT);
traceit(rtn_obj);
rtn_obj = my_FLVPlybk.findNextCuePointWithName(rtn_obj);
traceit(rtn_obj);
}
function traceit(cuePoint:Object):void {
trace("Cue point name is: " + cuePoint.name);
trace("Cue point time is: " + cuePoint.time);
trace("Cue point type is: " + cuePoint.type);
}
Informace týkající se vyhledání startovacích bodů naleznete v metodách FLVPlayback.findCuePoint(),
FLVPlayback.findNearestCuePoint() a FLVPlayback.findNextCuePointWithName() v Referenční příručce jazyka
Vyhledání startovacích bodů navigace
Je možné vyhledat startovací bod navigace, vyhledat následující startovací bod navigace od stanovaného času a
vyhledat předchozí startovací bod navigace od stanovaného času. V následujícím příkladu se přehrává soubor
cuepoints.flv a vyhledává se startovací bod v čase 7.748, kdy dojde k události p ipravení. Při výskytu události
cuePoint se vyvolá metoda seekToPrevNavCuePoint() a vyhledá první startovací bod. Při výskytu události
cuePoint se vyvolá metoda seekToNextNavCuePoint() a vyhledá se poslední startovací bod přidáním deseti sekund
k eventObject.info.time, což je čas aktuálního startovacího bodu.
149
import fl.video.*;
function ready_listener(eventObject:Object):void {
my_FLVPlybk.seekToNavCuePoint("point2");
}
trace(eventObject.info.time);
if(eventObject.info.time == 7.748)
my_FLVPlybk.seekToPrevNavCuePoint(eventObject.info.time - .005);
else
my_FLVPlybk.seekToNextNavCuePoint(eventObject.info.time + 10);
}
my_FLVPlybk.source = "http://helpexamples.com/flash/video/cuepoints.flv";
Další informace naleznete u metod FLVPlayback.seekToNavCuePoint(), FLVPlayback.seekToNextNavCuePoint() a
FLVPlayback.seekToPrevNavCuePoint() v Referenční příručce jazyka ActionScript 3.0 pro aplikaci Flash Professional.
Povolení a zakázání vložených startovacích bodů souboru FLV
Vložené startovací body souboru FLV je možné povolit a zakázat pomocí metody setFLVCuePointEnabled().
Zakázané startovací body nespustí události cuePoint a nebudou fungovat u metod seekToCuePoint(),
seekToNextNavCuePoint() nebo seekToPrevNavCuePoint(). Zakázané startovací body je však možné vyhledat
pomocí metod findCuePoint(), findNearestCuePoint() a findNextCuePointWithName().
Pomocí metody isFLVCuePointEnabled() lze vyzkoušet, zda je vložený startovací bod souboru FLV povolený.
Následující příklad ilustruje zakázání vložených startovacích bodů bod2 a bod3, když je video připraveno k přehrávání.
Jakmile však dojde k první události cuePoint, zpracování událostí vyzkouší, zda je startovací bod bod3 zakázaný a
popřípadě ho povolí.
import fl.video.*;
my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/cuepoints.flv";
my_FLVPlybk.setFLVCuePointEnabled(false, "point2");
my_FLVPlybk.setFLVCuePointEnabled(false, "point3");
}
trace("Cue point time is: " + eventObject.info.time);
trace("Cue point type is: " + eventObject.info.type);
if (my_FLVPlybk.isFLVCuePointEnabled("point2") == false) {
my_FLVPlybk.setFLVCuePointEnabled(true, "point2");
}
}
Další informace naleznete u metod FLVPlayback.isFLVCuePointEnabled() a FLVPlayback.setFLVCuePointEnabled()
v Referenční příručce jazyka ActionScript 3.0 pro aplikaci Flash Professional.
Odstranění startovacího bodu jazyka ActionScript
Startovací bod jazyka ActionScript lze odstranit pomocí metody removeASCuePoint(). Následující příklad ilustruje
odstranění startovacího bodu ASpt2 při výskytu startovacího bodu ASpt1.
150
import fl.video.*;
my_FLVPlybk.addASCuePoint(2.02, "ASpt1");//add AS cue point
my_FLVPlybk.addASCuePoint(3.4, "ASpt2");//add 2nd Aspt
if (eventObject.info.name == "ASpt1") {
my_FLVPlybk.removeASCuePoint("ASpt2");
trace("Removed cue point ASpt2");
}
}
Další informace naleznete u metody FLVPlayback.removeASCuePoint() v Referenční příručce jazyka ActionScript 3.0
pro aplikaci Flash Professional.
Přehrávání většího počtu video souborů
V instanci FLVPlayback lze postupně přehrávat video soubory načtením nové adresy URL do vlastnosti Zdroj, jakmile
dohraje předchozí video soubor. Následující kód jazyka ActionScript například zajišťuje poslouchání události
complete, k níž dojde po skončení přehrávání videa. Když dojde k této události, kód nastaví ve vlastnosti Zdroj název
a umístění nového video souboru a vyvolá metodu play() k přehrání nového videa.
import fl.video.*;
my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/clouds.flv";
my_FLVPlybk.addEventListener(VideoEvent.COMPLETE, complete_listener);
// listen for complete event; play new FLV
function complete_listener(eventObject:VideoEvent):void {
if (my_FLVPlybk.source == "http://www.helpexamples.com/flash/video/clouds.flv") {
my_FLVPlybk.play("http://www.helpexamples.com/flash/video/water.flv");
}
};
Použití většího počtu přehrávačů videa
V jediné instanci komponenty FLVPlayback lze rovněž otevřít více přehrávačů videa k přehrávání většího počtu videí
a během přehrávání mezi nimi přepínat.
První přehrávač videa se vytvoří při přetažení komponenty FLVPlayback na vymezenou plochu. Komponenta
automaticky přiřadí prvnímu přehrávači videa číslo 0 a přiřadí mu status výchozího přehrávače. Jestliže chcete vytvořit
další přehrávač videa, nastavte vlastnost activeVideoPlayerIndex na nové číslo. Nastavením vlastnosti
activeVideoPlayerIndex se z uvedeného přehrávače videa stane aktivní přehrávač videa, tedy ten, který budou
ovlivňovat vlastnosti a metody třídy FLVPlayback. Nastavením vlastnosti activeVideoPlayerIndex se však
přehrávač videa nestane viditelným. Pokud chcete, aby byl přehrávač videa viditelný, nastavte vlastnost
visibleVideoPlayerIndex na číslo přehrávače videa. Další informace týkající se interakce těchto vlastností s
metodami a vlastnostmi třídy FLVPlayback naleznete ve vlastnostech FLVPlayback.activeVideoPlayerIndex a
FLVPlayback.visibleVideoPlayerIndex v Referenční příručce jazyka ActionScript 3.0 pro aplikaci Flash Professional.
Následující kód jazyka ActionScript načte vlastnost Zdroj pro přehrávání video souboru ve výchozím přehrávači videa
a přidá startovací bod pro tuto operaci. Při výskytu události p ipravení otevře zpracování událostí druhý přehrávač
videa nastavením vlastnosti activeVideoPlayerIndex na číslo 1. To určuje soubor FLV a startovací bod pro druhý
přehrávač videa a potom udělá z výchozího přehrávače (0) znovu aktivní přehrávač videa.
151
/**
Requires:
- FLVPlayback component on the Stage with an instance name of my_FLVPlybk
*/
// add a cue point to the default player
import fl.video.*;
my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/clouds.flv";
my_FLVPlybk.addASCuePoint(3, "1st_switch");
// add a second video player and create a cue point for it
my_FLVPlybk.activeVideoPlayerIndex = 1;
my_FLVPlybk.addASCuePoint(3, "2nd_switch");
};
Jestliže chcete během přehrávání jednoho souboru FLV přepnout na jiný, musíte provést toto přepnutí v kódu jazyka
ActionScript. Startovací body umožňují zasáhnout v určitých bodech do souboru FLV pomocí události cuePoint.
Následující kód vytvoří posluchače pro událost cuePoint a vyvolá funkci zpracování, která pozastaví aktivní
přehrávač videa (0), přepne na druhý přehrávač (1) a přehraje jeho soubor FLV:
import fl.video.*;
// add listener for a cuePoint event
// add the handler function for the cuePoint event
// display the no. of the video player causing the event
trace("Hit cuePoint event for player: " + eventObject.vp);
// test for the video player and switch FLV files accordingly
if (eventObject.vp == 0) {
my_FLVPlybk.pause(); //pause the first FLV file
my_FLVPlybk.activeVideoPlayerIndex = 1; // make the 2nd player active
my_FLVPlybk.visibleVideoPlayerIndex = 1; // make the 2nd player visible
my_FLVPlybk.play(); // begin playing the new player/FLV
} else if (eventObject.vp == 1) {
my_FLVPlybk.pause(); // pause the 2nd FLV
my_FLVPlybk.activeVideoPlayerIndex = 0; // make the 1st player active
my_FLVPlybk.visibleVideoPlayerIndex = 0; // make the 1st player visible
my_FLVPlybk.play(); // begin playing the 1st player
}
}
my_FLVPlybk.addEventListener(VideoEvent.COMPLETE, complete_listener);
function complete_listener(eventObject:VideoEvent):void {
trace("Hit complete event for player: " + eventObject.vp);
if (eventObject.vp == 0) {
my_FLVPlybk.visibleVideoPlayerIndex = 1;
my_FLVPlybk.play();
} else {
my_FLVPlybk.closeVideoPlayer(1);
}
};
152
Při vytvoření nového přehrávače videa nastaví instance FLVPlayback jeho vlastnosti na hodnotu výchozího
přehrávače videa, kromě vlastností Zdroj, totalTime a isLive, jež instance FLVPlayback vždy nastavuje na výchozí
hodnoty: prázdný řetězec, 0 a false. Vlastnost autoPlay, jejímž výchozím nastavením pro výchozí přehrávač videa
je hodnota true, nastaví na hodnotu false. Vlastnost cuePoint nemá žádný účinek a nijak neovlivní následné
načtení do výchozího přehrávače videa.
Metody a vlastnosti, které řídí hlasitost, umístění, rozměry, viditelnost a ovladače uživatelského rozhraní, jsou vždy
globální a jejich chování není ovlivněno nastavením vlastnosti activeVideoPlayerIndex. Další informace o těchto
metodách a vlastnostech a účinku nastavení vlastnosti activeVideoPlayerIndex naleznete u vlastnosti
FLVPlayback.activeVideoPlayerIndex v Referenční příručce jazyka ActionScript 3.0 pro aplikaci Flash Professional.
Zbývající vlastnosti a metody jsou zaměřeny na přehrávač videa, který určuje hodnota vlastnosti
activeVideoPlayerIndex.
Vlastnosti a metody řídící rozměry však vzájemněreagují s vlastností visibleVideoPlayerIndex. Další informace
naleznete u vlastnosti FLVPlayback.visibleVideoPlayerIndex v Referenční příručce jazyka ActionScript 3.0 pro aplikaci
Flash Professional.
Streamování souborů FLV ze serveru Flash Media
Požadavky na streamování souborů FLV ze serveru Flash Media se liší podle toho, zda je ze služby pro streamování
videa Flash dostupná detekce nativní šířky pásma. Detekce nativní šířky pásma znamená, že je detekce šířky pásma
vestavěná na streamovacím serveru a ten zajišťuje větší výkonnost. Informujte se u svého poskytovatele, zda je detekce
nativní šířky pásma k dispozici.
Pro přístup k souborům FLV na serveru Flash Media použijte URL jako např.
rtmp://my_servername/my_application/stream.flv.
Při přehrávání živého streamu prostřednictvím serveru Flash Media je zapotřebí nastavit vlastnost FLVPlayback
isLive na hodnotu true. Další informace naleznete u vlastnosti FLVPlayback.isLive v Referenční příručce jazyka
Další informace o správě serveru Flash Media, včetně způsobu nastavení živého streamu, naleznete v dokumentaci
serveru Flash Media na adrese www.adobe.com/support/documentation/en/flashmediaserver/.
Pro detekci nativní šířky pásma nebo bez detekce šířky pásma
Třída NCManagerNative je podtřídou třídy NCManager, jež podporuje detekci nativní šířky pásma, což mohou
podporovat někteří poskytovatelé služby streamování videa Flash. Při použití třídy NCManagerNative nemusí být na
serveru Flash Media žádné speciální soubory. Třída NCManagerNative rovněž umožňuje připojení k libovolné verzi
serveru Flash Media bez souboru main.asc, pokud není požadována detekce šířky pásma.
Chcete-li použít třídu NCManagerNative místo výchozí třídy NCManager, přidejte do prvního snímku souboru FLA
následující řádky kódu:
import fl.video*;
VideoPlayer.iNCManagerClass = fl.video.NCManagerNative;
Pro detekci jiné než nativní šířky pásma
Není-li od poskytovatele služby streamování videa Flash k dispozici detekce nativní šířky pásma, ale je zapotřebí
provádět detekci šířky pásma, je nezbytné přidat do aplikace FLV serveru Flash Media soubor main.asc. Soubor
main.asc naleznete na Internetu na stránce www.adobe.com/go/learn_fl_samples_cz. Je obsažen v souboru
Samples.zip – v adresáři Samples\ComponentsAS2\FLVPlayback.
153
Nastavení serveru Flash Media pro streamování souborů FLV:
1 Vytvořte si ve složce aplikace serveru Flash Media novou složku a pojmenujte ji např. my_application.
2 Do složky my_application zkopírujte soubor main.asc.
3 Ve složce my_application vytvořte složku s názvem streamy .
4 Ve složce streamy vytvořte složku s názvem _definst_ .
5 Do složky _definst_ umístěte soubory FLV.
Přizpůsobení komponenty FLVPlayback
V této sekci je vysvětlen postup přizpůsobení komponenty FLVPlayback. Tyto metody většinou umí přizpůsobit jiné
komponenty, nepracují však s komponentou FLVPlayback. Jestliže chcete přizpůsobit komponentu FLVPlayback,
používejte jen techniky popsané v této sekci.
Přizpůsobení komponenty FLVPlayback můžete provést jedním z následujících způsobů: zvolením předem
navrženého vzhledu, změnou vzhledu jednotlivých komponent uživatelského rozhraní pro přehrávání FLV nebo
vytvořením nového vzhledu. Pomocí vlastností FLVPlayback je rovněž možné upravit chování vzhledu.
Poznámka: Soubor vzhledu SWF je třeba poslat na webový server spolu se souborem aplikace SWF, aby vzhled fungoval
s komponentou FLVPlayback.
Výběr předem navrženého vzhledu
Vzhled pro komponentu FLVPlayback lze vybrat klepnutím na buňku hodnota pro parametr vzhled v okně
Inspektor komponent. Potom klepněte na ikonu lupy a otevřete dialogové okno Vybrat vzhled, kde je možné vybrat
vzhled nebo zadat URL označující umístění souboru SWF.
Dialogové okno vybrat vzhled FLVPlayback
Vzhledy, které jsou uvedeny v rozbalovací nabídce Vzhled, jsou umístěny ve složce aplikace Flash /Konfigurace
Flash/Vzhledy FLVPlayback/ActionScript 3.0. Nové vzhledy lze zpřístupnit pro toto dialogové okno jejich vytvořením
a umístěním souboru SWF do této složky. Název souboru se zobrazí v rozbalovací nabídce s příponou .swf. Další
informace o vytváření vzhledů naleznete v sekci „Vytvoření nového vzhledu“ na stránce 160.
154
Vzhledům přiřazeným nastavením vlastnosti vzhled, buďto nastavením parametru vzhledu během vytváření nebo za
běhu pomocí jazyka ActionScript, lze nezávisle na výběru vzhledu přiřadit barvu a hodnoty alfa (průhlednosti). Pokud
chcete přiřadit barvu a hodnoty alfa během vytváření, otevřete v dialogovém okně Vybrat vzhled zde vyobrazené
dialogové okno Výběr barvy.
Výběr barvy v dialogovém okně Vybrat vzhled
Barvu vyberete klepnutím na vzorek na panelu nebo zadáním jeho číselné hodnoty do textového pole. Chcete-li vybrat
hodnotu alfa, použijte jezdce nebo do textového pole Alfa zadejte procentní hodnotu.
V případě, že chcete přiřadit barvu a hodnoty alfa za běhu, nastavte vlastnosti skinBackgroundColor a
skinBackgroundAlpha. Vlastnost skinBackgroundColor nastavte na hodnotu 0xRRGGBB (červená, zelená,
modrá). Vlastnost skinBackgroundAlpha nastavte na číslo od 0,0 do 1,0. Následující příklad ilustruje nastavení
vlastnosti skinBackgroundColor na hodnotu 0xFF0000 (červená) a vlastnosti skinBackgroundAlpha na hodnotu 5.
my_FLVPlybk.skinBackgroundColor = 0xFF0000;
my_FLVPlybk.skinBackgroundAlpha = .5;
Výchozí hodnoty jsou poslední hodnoty zvolené uživatelem.
Pokud chcete změnit vzhled komponenty FLVPlayback pomocí vlastních komponent uživatelského rozhraní
FLVPlayback, zvolte v rozevírací nabídce možnost Žádný.
Změna vzhledu jednotlivých vlastních komponent uživatelského rozhraní
přehrávače FLV
Pomocí vlastních komponent uživatelského rozhraní přehrávače FLV lze upravit vzhled ovládacích prvků
FLVPlayback v souboru FLA a sledovat výsledky v náhledu na webové stránce. Tyto komponenty však nejsou navrženy
na změnu velikosti. Filmový klip a jeho obsah je vhodné upravovat na určitou velikost. Proto je obvykle nejvhodnější
mít komponentu FLVPlayback na vymezené ploše v požadované velikosti, s režimem scaleMode nastaveným na
možnost exactFit.
Nejprve přetáhněte požadované komponenty uživatelského rozhraní přehrávače FLV z panelu Komponenty, umístěte
je na požadované místo na vymezené ploše a přiřaďte jim názvy instancí.
Tyto komponenty mohou pracovat s jazykem ActionScript. Pokud je vložíte na stejnou časovou osu a do stejného
snímku jako komponentu FLVPlayback a v komponentě nebude nastaven žádný vzhled, komponenta FLVPlayback
se k nim automaticky připojí. Je-li na vymezené ploše umístěno více komponent FLVPlayback, nebo nejsou-li vlastní
ovládací prvky a instance FLVPlayback na stejné Časové ose, je zapotřebí provést Akci.
Komponenty se po umístění na vymezenou plochu upravují stejným způsobem jako kterýkoliv jiný symbol. Po
otevření komponent je patrné, že se nastavení každé z nich od ostatních mírně liší.
155
Komponenty Button
Komponenty Button (tlačítko) mají podobnou strukturu. Tlačítka zahrnují BackButton, ForwardButton, MuteButton,
PauseButton, PlayButton, PlayPauseButton a StopButton. Většina z nich má jediný filmový klip ve Snímku 1 s názvem
instance placeholder_mc. To je pro tlačítko obvykle instance normálního stavu, ale nemusí to tak být vždy. Ve Snímku
2 jsou na vymezené ploše čtyři filmové klipy pro jednotlivé stavy zobrazení: normální, přes, dolů a vypnuto. (Za běhu
se komponenta ve skutečnosti nikdy neposune do Snímku 2. Tyto filmové klipy jsou zde umístěny pro pohodlnější
provádění úprav a k zajištění jejich načtení do souboru SWF bez toho, aby v dialogovém okně Vlastnosti symbolu
muselo být zaškrtnuto políčko Exportovat v prvním snímku. Přesto je však zapotřebí zvolit možnost Exportovat pro
jazyk ActionScript.)
Chcete-li změnit vzhled tlačítka, jednoduše upravíte jednotlivé filmové klipy. Je možné změnit jejich velikost i podobu.
Ve Snímku 1 se obvykle objeví některý jazyk ActionScript. Nemělo by být zapotřebí tento skript měnit. Ten zastaví
přehrávací hlavu na Snímku 1 a určí, které filmové klipy se mají použít pro které stavy.
Tlačítka PlayPauseButton, MuteButton, FullScreenButton a CaptionButton
Tlačítka PlayPauseButton, MuteButton, FullScreenButton a CaptionButton jsou nastavena jinak než ostatní tlačítka –
mají pouze jeden snímek se dvěma vrstvami a žádný skript. V tomto snímku jsou dvě tlačítka, která jsou umístěna přes
sebe – v případě tlačítka PlayPauseButton jsou to tlačítka Přehrát a Pauza, v případě tlačítka MuteButton jsou to
tlačítka Ztlumení zapnuto a Ztlumení vypnuto, v případě tlačítka FullScreenButton jsou to tlačítka Celá obrazovkazapnuto a Celá obrazovka-vypnuto, v případě tlačítka CaptionButton jsou to tlačítka Titulkování zapnuto a
Titulkování vypnuto. Jestliže chcete změnit vzhled těchto tlačítek, učiňte tak vždy u jednoho ze dvou interních tlačítek
podle pokynů uvedených v sekci „Změna vzhledu jednotlivých vlastních komponent uživatelského rozhraní
přehrávače FLV“ na stránce 155. Žádná další akce není potřeba.
Tlačítko CaptionButton je určeno pro komponentu FLVPlaybackCaptioning a musí být připojeno k této komponentě
a nikoliv ke komponentě FLVPlayback.
Tlačítka BackButton a ForwardButton
Také tlačítka BackButton a ForwardButton jsou nastavena jinak než ostatní tlačítka. Ve Snímku 2 mají další filmové
klipy, které lze použít k orámování jednoho či obou tlačítek. Tyto filmové klipy nejsou nezbytné a nenabízí žádné
speciální možnosti, jsou k dispozici jen z praktických důvodů. Pokud je chcete použít, přetáhněte je z panelu Knihovna
na vymezenou plochu a umístěte je na požadované místo. Jestliže je nechcete, buďto je nepoužívejte nebo je z panelu
Knihovna odstraňte.
Většina tlačítek, která jsou k dispozici, je založena na společné sadě filmových klipů, takže je možné změnit vzhled
všech tlačítek najednou. Buďto můžete použít tuto možnost, nebo můžete tyto společné klipy nahradit a dát každému
tlačítku jinou podobu.
Komponenta BufferingBar
Komponenta indikátoru vyrovnávací paměti je jednoduchá: sestává z animace, která začne být viditelná v okamžiku,
kdy komponenta přejde do stavu ukládání do paměti, a pro svoji konfiguraci nevyžaduje žádný speciální jazyk
ActionScript. Standardně se jedná o proužkovaný indikátor posunutý zleva doprava s nasazenou obdélníkovou
maskou vytvářející efekt „barber pole“, na této konfiguraci však není nic zvláštního.
Přestože indikátory vyrovnávací paměti v souborech vzhledu SWF používají změnu měřítka s 9 řezy, protože je
zapotřebí měnit jejich velikost za běhu, vlastní komponenta BufferingBar uživatelského rozhraní FLV změnu měřítka
s 9 řezy nepoužívá a nemůže používat, neboť má vnořené filmové klipy. Jestliže je zapotřebí zvětšit šířku nebo výšku
komponenty BufferingBar, může být vhodnější změnit její obsah místo změny její velikosti.
156
Komponenty SeekBar a VolumeBar
Komponenty SeekBar a VolumeBar jsou si podobné, mají však různé funkce. Obě mají táhla, používají stejné
mechanismy pro sledování polohy táhla a nabízejí podporu pro vnořené klipy pro sledování průběhu a vyplnění.
Kód jazyka ActionScript v komponentě FLVPlayback na celé řadě míst předpokládá, že se vztažný bod (nebo také
počáteční bod či nulový bod) komponenty SeekBar nebo VolumeBar nachází v levém horním rohu obsahu, proto je
důležité toto pravidlo zachovat. V opačném případě mohou nastat potíže s táhly a s průběhem a vyplněním filmových
klipů.
Přestože indikátory hledání v souborech vzhledu SWF používají změnu měřítka s 9 řezy, protože je zapotřebí měnit
jejich velikost za běhu, vlastní komponenta SeekBar uživatelského rozhraní FLV změnu měřítka s 9 řezy nepoužívá a
nemůže používat, neboť má vnořené filmové klipy. Pokud je zapotřebí zvětšit šířku nebo výšku komponenty SeekBar,
může být vhodnější změnit její obsah místo změny její velikosti.
Táhlo
Instance filmového klipu táhla se nachází ve Snímku 2. Stejně jako u komponent BackButton a ForwardButton platí,
že komponenta se ve skutečnosti nikdy neposune do Snímku 2. Tyto filmové klipy jsou zde umístěny pro pohodlnější
provádění úprav a k zajištění jejich načtení do souboru SWF bez toho, aby v dialogovém okně Vlastnosti symbolu
muselo být zaškrtnuto políčko Exportovat v prvním snímku. Přesto je však zapotřebí zaškrtnout volbu Exportovat pro
jazyk ActionScript.
Můžete si všimnout, že filmový klip táhla má na pozadí obdélník s hodnotou alfa nastavenou na 0. Tento obdélník
zvětšuje velikost oblasti klepnutí, takže je snazší táhlo uchopit bez toho, aby se změnil jeho vzhled jako u stavu stisknutí
tlačítka. Vzhledem k tomu, že se táhlo vytváří dynamicky za běhu, musí to být filmový klip a nikoliv tlačítko. Tento
obdélník s hodnotou alfa nastavenou na 0 není nutný z žádného jiného důvodu a obecně platí, že vnitřní část táhla
může být nahrazena libovolným obrazem. Nejlepší je však nechat vztažný bod vystředěný ve vodorovném směru
uprostřed filmového klipu táhla.
Ve Snímku 1 komponenty SeekBar je následující kód jazyka ActionScript pro řízení táhla:
stop();
handleLinkageID = "SeekBarHandle";
handleLeftMargin = 2;
handleRightMargin = 2;
handleY = 11;
Vyvolání funkce stop() je nezbytné kvůli obsahu Snímku 2.
Druhý řádek udává, který symbol se má použít jako táhlo, a pokud jednoduše upravíte instanci filmového klipu táhla
ve Snímku 2, nemělo by být zapotřebí to měnit. Komponenta FLVPlayback vytváří za běhu instanci stanoveného
filmového klipu na vymezené ploše jako sourozence instance komponenty Indikátor, což znamená, že mají stejný
nadřazený filmový klip. Pokud se tedy indikátor nachází na základní úrovni, musí být na základní úrovni také táhlo.
Proměnná handleLeftMargin určuje původní umístění táhla (0%) a proměnná handleRightMargin určuje, kde se
nachází na konci (100%). Čísla udávají posun od levého a pravého konce ovládacího prvku indikátoru, přičemž kladná
čísla označují mezní hodnoty v indikátoru a záporná čísla značí mezní hodnoty mimo indikátor. Tyto hodnoty posunu
udávají, kam až může táhlo zajít na základě vztažného bodu. Jestliže umístíte vztažný bod do středu táhla, pak táhlo
zcela vlevo i zcela vpravo přesáhne okraje. Filmový klip indikátoru hledání musí mít vztažný bod v levém horním rohu
svého obsahu, aby fungoval správně.
Proměnná handleY určuje polohu y táhla vzhledem k instanci indikátoru. Ta je založena na vztažných bodech
jednotlivých filmových klipů. Vztažný bod v ukázkovém táhle se nachází na špičce trojúhelníku, aby byl umístěn
vzhledem k viditelné části, bez ohledu na neviditelný stav stisknutí obdélníku. Kromě toho musí mít filmový klip
indikátoru hledání vztažný bod vždy v levém horním rohu svého obsahu, aby fungoval správně.
157
Pokud je tedy například s těmito mezními hodnotami indikátor nastaven na hodnoty (100, 100) a je široký 100 obr.
bodů, může se táhlo pohybovat v rozmezí 102 až 198 ve vodorovném směru a zůstat na hodnotě 111 ve svislém směru.
Změníte-li hodnotu handleLeftMargin a handleRightMargin na -2 a hodnotu handleY na -11, může se táhlo
pohybovat v rozmezí 98 až 202 ve vodorovném směru a zůstat na hodnotě 89 ve svislém směru.
Filmové klipy průběhu a vyplnění
Komponenta SeekBar má filmový klip průběhu a komponenta VolumeBar má filmový klip vyplnění, ale ve skutečnosti
může mít jakákoliv komponenta SeekBar či VolumeBar kterýkoliv z těchto filmových klipů, žádný z nich nebo oba
dva. Co do struktury jsou stejné a chovají se podobně, ale sledují jiné hodnoty. Filmový klip průběhu se postupně
vyplňuje s tím, jak se stahuje soubor FLV (což je užitečné pouze pro stahování HTTP, neboť při streamování z FMS je
neustále plný), a filmový klip vyplnění se postupně vyplňuje při pohybu táhla zleva doprava.
Komponenta FLVPlayback hledá tyto filmové klipy podle konkrétního názvu instance, takže instance filmového klipu
průběhu musí mít nastaven filmový klip indikátoru jako nadřazený a musí mít název instance progress_mc. Instance
filmového klipu vyplnění musí mít název instance fullness_mc.
Filmové klipy průběhu a vyplnění lze nastavit s vnořenou instancí filmového klipu fill_mc nebo bez ní. Filmový klip
VolumeBar fullness_mc znázorňuje metodu s použitím filmového klipu fill_mc a filmový klip SeekBar progress_mc
znázorňuje metodu bez použití filmového klipu fill_mc.
Metoda s použitím vnořeného filmového klipu fill_mc je užitečná v případě, že chcete použít výplň, jejíž velikost nelze
změnit bez porušení vzhledu.
Ve filmovém klipu VolumeBar fullness_mc je vnořená instance filmového klipu fill_mc zamaskovaná. Lze ji
zamaskovat buďto při vytváření filmového klipu, nebo se maska vytvoří dynamicky za běhu. Pokud ji zamaskujete
pomocí filmového klipu, přiřaďte instanci název mask_mc a nastavte ji tak, aby klip fill_mc vypadal jako při dosažení
procentní hodnoty 100%. V případě, že klip fill_mc nezamaskujete, bude mít dynamicky vytvořená maska
obdélníkový tvar a stejnou velikost jako klip fill_mc při 100%.
Filmový klip fill_mc může být s maskou odhalen jedním ze dvou způsobů podle toho, zda má fill_mc.slideReveal
hodnotu true nebo false.
Jestliže má fill_mc.slideReveal hodnotu true, posunuje se klip fill_mc zleva doprava a odhaluje se přes masku. Při 0%
je zcela vlevo, takže se přes masku nezobrazuje. Se vzrůstající procentní hodnotou se posunuje doprava až na 100%,
kdy se vrátí na místo, kde byl vytvořen na vymezené ploše.
Pokud má fill_mc.slideReveal hodnotu false nebo není definován (výchozí chování), bude se velikost masky měnit
zleva doprava, takže bude odhalovat stále větší část klipu fill_mc. Když je maska na hodnotě 0%, zvětší se její velikost
ve vodorovném směru na 05 a se vzrůstající procentní hodnotou se bude měřítko scaleX zvyšovat, až nakonec při
100% odhalí celý klip fill_mc. Nemusí to nutně znamenat, že měřítko scaleX = 100, protože velikost instance
mask_mc mohla být při jejím vytvoření změněna.
Metoda bez použití klipu fill_mc je jednodušší než metoda s použitím klipu fill_mc, způsobuje však deformaci výplně
ve vodorovném směru. Chcete-li této deformaci zamezit, musíte použít klip fill_mc. Tato metoda je znázorněna na
filmovém klipu SeekBar progress_mc.
Velikost filmového klipu průběhu nebo vyplnění se mění ve vodorovném směru v závislosti na procentní hodnotě. Při
0% je měřítko scaleX instance nastaveno na hodnotu 0, takže není viditelná. Se vzrůstající procentní hodnotou se
měřítko scaleX upravuje, až klip při 100% dosáhne stejné velikosti jakou měl při vytvoření na vymezené ploše. Opět
to nemusí nutně znamenat, že měřítko scaleX = 100, protože velikost instance klipu mohla být při vytvoření změněna.
158
Připojení vlastních komponent uživatelského rozhraní přehrávače FLV
Jestliže byly vlastní komponenty uživatelského rozhraní umístěny na stejnou Časovou osu a do stejného snímku jako
komponenta FLVPlayback a nebyla nastavena vlastnost Vzhled, FLVPlayback se k nim automaticky připojí, aniž by k
tomu byl zapotřebí nějaký jazyk ActionScript.
Je-li na vymezené ploše více komponent FLVPlayback nebo nejsou-li vlastní ovládací prvky a FLVPlayback na stejné
Časové ose, je nezbytné zadat kód jazyka ActionScript pro připojení vlastních komponent uživatelského rozhraní k
instanci komponenty FLVPlayback. Nejprve je nutné přiřadit instanci FLVPlayback název a následně pomocí jazyka
ActionScript přiřadit instance vlastních komponent uživatelského rozhraní přehrávače FLV k odpovídajícím
vlastnostem komponenty FLVPlayback. V následujícím příkladu má instance FLVPlayback název my_FLVPlybk,
názvy vlastností FLVPlayback jsou uvedeny za tečkami (.) a instance vlastních ovládacích prvků uživatelského
rozhraní přehrávače FLV se nacházejí napravo od rovnítka (=).
//FLVPlayback instance = my_FLVPlybk
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc.
my_FLVPlybk.pauseButton = pausebtn;
my_FLVPlybk.playPauseButton = playpausebtn;
my_FLVPlybk.stopButton = stopbtn;
my_FLVPlybk.muteButton = mutebtn;
my_FLVPlybk.backButton = backbtn;
my_FLVPlybk.forwardButton = forbtn;
my_FLVPlybk.volumeBar = volbar;
my_FLVPlybk.seekBar = seekbar;
my_FLVPlybk.bufferingBar = bufbar;
Následující postup slouží k vytvoření ovládacích prvků StopButton, PlayPauseButton, MuteButton a SeekBar:
1 Přetáhněte komponentu FLVPlayback na vymezenou plochu a přiřaďte jí název instance my_FLVPlybk.
2 Prostřednictvím okna Inspektor komponent nastavte parametr source na
http://www.helpexamples.com/flash/video/cuepoints.flv.
3 Nastavte parametr Vzhled na možnost Žádný.
4 Přetáhněte na vymezenou plochu ovládací prvky StopButton, PlayPauseButton a MuteButton a umístěte je přes
instanci FLVPlayback tak, že je vyrovnáte na levé straně ve svislém směru. V okně Inspektor vlastností přiřaďte
každému tlačítku název instance (např. my_stopbttn, my_plypausbttn a my_mutebttn).
5 Na panelu Knihovna otevřete složku vzhledů FLVPlayback a následně otevřete složku SquareButton umístěnou
pod ní.
6 Vyberte filmový klip SquareBgDown a poklepáním ho otevřete na vymezené ploše.
7 Klepnutím pravým tlačítkem myši (Windows) nebo se stisknutou klávesou Ctrl (Macintosh) vyberte v nabídce
možnost Vybrat vše a symbol vymažte.
8 Zvolte nástroj elipsa, nakreslete na stejném místě elipsu a nastavte výplň na modrou barvu (#0033FF).
9 V okně Inspektor vlastností nastavte šířku (Š:) na hodnotu 40 a výšku (V:) na hodnotu 20. Nastavte souřadnici x
(X:) na hodnotu 0,0 a souřadnici y (Y:) na hodnotu 0,0.
10 Zopakujte kroky 6 až 8 pro klip SquareBgNormal, ale barvu výplně změňte na žlutou (#FFFF00).
11 Zopakujte kroky 6 až 8 pro klip SquareBgOver, ale barvu výplně změňte na zelenou (#006600).
12 Upravte filmové klipy pro různé ikony symbolů v tlačítkách (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon a
StopIcon). Tyto filmové klipy lze přidat do panelu Knihovna pod složku Vzhledy přehrávače FLV/Popis
tlačítek/Datové zdroje, kde Popis je název tlačítka, např. Spustit, Pauza atd. Pro každou položku proveďte
následující postup:
a Zvolte možnost Vybrat vše.
159
b Změňte barvu na červenou (#FF0000).
c Změňte velikost na 300 %.
d Změnou umístění obsahu X: na 7,0 upravte vodorovné umístění ikon v jednotlivých stavech tlačítek.
Poznámka: Pokud změníte umístění tímto způsobem, nebudete muset otevírat každý stav tlačítka a přesunovat
instanci filmového klipu ikony.
13 Klepnutím na modrou šipku Zpět nad Časovou osou se vraťte ke Scéně 1, Snímek 1.
14 Přetáhněte komponentu SeekBar na vymezenou plochu a umístěte ji do pravého dolního rohu instance
FLVPlayback.
15 Na panelu Knihovna poklepejte na indikátor SeekBar a otevřete ho na vymezené ploše.
16 Změňte jeho velikost na 400%.
17 Vyberte obrys a nastavte barvu na červenou (#FF0000).
18 Ve složce Vzhledy FLVPlayback/Hledání poklepejte na komponentu SeekBarProgress a nastavte barvu na žlutou
(#FFFF00).
19 Ve složce Vzhledy FLVPlayback/Hledání poklepejte na komponentu SeekBarHandle a nastavte barvu na červenou
(#FF0000).
20 Klepnutím na modrou šipku Zpět nad Časovou osou se vraťte ke Scéně 1, Snímek 1.
21 Vyberte na vymezené ploše instanci SeekBar a přiřaďte jí název instance my_seekbar.
22 Na panelu Akce ve Snímku 1 časové osy přidejte příkaz import pro třídy videa a přiřaďte názvy tlačítek a indikátorů
hledání odpovídajícím vlastnostem FLVPlayback, jak je znázorněno v následujícím příkladu:
import fl.video.*;
my_FLVPlybk.stopButton = my_stopbttn;
my_FLVPlybk.playPauseButton = my_plypausbttn;
my_FLVPlybk.muteButton = my_mutebttn;
my_FLVPlybk.seekBar = my_seekbar;
23 Stisknutím kláves Ctrl+Enter film otestujte.
Vytvoření nového vzhledu
Nejvhodnější metodou pro vytvoření souboru vzhledu SWF je zkopírovat jeden ze souborů vzhledu, který je součástí
programu Flash, a použít ho jako výchozí bod. Soubory FLA pro tyto vzhledy naleznete ve složce aplikace Flash
Konfigurace/Vzhledy FLVPlayback/FLA/ActionScript 3.0/. Chcete-li dokončený soubor vzhledu SWF zpřístupnit jako
volbu v dialogovém okně Vybrat vzhled, umístěte ho do složky Konfigurace/Vzhledy FLVPlayback/ActionScript 3.0
buďto ve složce aplikace Flash nebo v lokální uživatelské složce Konfigurace/Vzhledy FLVPlayback/ActionScript 3.0.
Vzhledem k tomu, že lze nastavit barvu vzhledu nezávisle na výběru vzhledu, není kvůli změně barvy zapotřebí
upravovat soubor FLA. Pokud vytvoříte vzhled se specifickou barvou a nechcete, aby ji bylo možné upravovat v
dialogovém okně Vybrat vzhled, zadejte v kódu jazyka ActionScript souboru vzhledu FLA hodnotu
this.border_mc.colorMe = false;. Informace o nastavení barvy vzhledu naleznete v sekci „Výběr předem
navrženého vzhledu“ na stránce 154.
Při pohledu na soubory instalovaných vzhledů Flash FLA se může zdát, že některé věci jsou na vymezené ploše
zbytečné, ale řada z nich je vložena do vrstev vodítek. Při živém náhledu pomocí měřítka 9 lze snadno zjistit, co se ve
skutečnosti objeví v souboru SWF.
V následující sekci jsou popsány složitější uživatelské úpravy a změny prováděné v filmových klipech SeekBar,
BufferingBar a VolumeBar.
160
Použití rozvržení vzhledu
Po otevření souboru vzhledu Flash FLA uvidíte filmové klipy vzhledů rozložené na hlavní Časové ose. Tyto klipy a kód
jazyka ActionScript nacházející se ve stejném snímku definují, jak budou ovládací prvky za běhu rozloženy.
Přestože vrstva Rozvržení vypadá téměř stejně, jako bude vypadat za běhu, obsah této vrstvy není za běhu viditelný.
Slouží pouze pro výpočet umístění ovládacích prvků. Ostatní ovládací prvky na vymezené ploše se používají za běhu.
Ve vrstvě Rozvržení je zástupný symbol pro komponentu FLVPlayback s názvem video_mc. Všechny ostatní ovládací
prvky jsou rozloženy vzhledem k symbolu video_mc. Pokud spustíte jeden ze souborů Flash FLA a změníte velikost
ovládacích prvků, budete pravděpodobně moci určit rozvržení posunutím klipů těchto zástupných symbolů.
Každý klip zástupného symbolu má specifický název instance. Názvy klipů zástupných symbolů jsou playpause_mc,
play_mc, pause_mc, stop_mc, captionToggle_mc, fullScreenToggle_mc, back_mc, bufferingBar_mc,
bufferingBarFill_mc, seekBar_mc, seekBarHandle_mc, seekBarProgress_mc, volumeMute_mc, volumeBar_mc a
volumeBarHandle_mc. Část, jejíž barva se změní při výběru barvy vzhledu, má název border_mc.
Není důležité, který klip se použije pro ovládací prvek. Pro tlačítka se obvykle používá klip normálního stavu. U
ostatních ovládacích prvků se použije klip pro daný ovládací prvek, tak tomu však je pouze z praktických důvodů.
Jediným důležitým údajem je umístění v ose x (vodorovné) a v ose y (svislé) a výška a šířka zástupného znaku.
Kromě standardních ovládacích prvků můžete mít libovolný počet doplňkových klipů. Jediným požadavkem u těchto
klipů je, aby pro jejich symboly knihovny byla v dialogovém okně Navázání zaškrtnuta volba Exportovat pro jazyk
ActionScript. Vlastní klipy mohou mít ve vrstvě Rozvržení libovolný název instance, musí však být jiný než jsou výše
uvedené vyhrazené názvů instancí. Název instance je nezbytný pouze pro nastavení jazyka ActionScript na klipech k
určení rozvržení.
Klip border_mc je zvláštní. Nastavíte-li vlastnost FlvPlayback.skinAutoHide na hodnotu true, zobrazí se tento
vzhled při umístění kurzoru myši nad klip border_mc. To je důležité u vzhledů, které se objevují mimo hranice
přehrávače videa. Informace o vlastnosti skinAutoHide naleznete v sekci „Změna chování vzhledu“ na stránce 164.
V souborech Flash FLA se klip border_mc používá pro chróm a pro ohraničení tlačítek Dopředu a Zpět.
Klip border_mc je rovněž součástí vzhledu, jehož hodnoty alfa a barva jsou změněny pomocí vlastností
skinBackgroundAlpha a skinBackgroundColor. Aby bylo možné upravovat barvu a hodnoty alfa, musí jazyk
ActionScript v souboru vzhledu FLA obsahovat následující část kódu:
border_mc.colorMe = true;
ActionScript a rozvržení vzhledu
Následující kód jazyka ActionScript se obvykle vztahuje na všechny ovládací prvky. Některé ovládací prvky mají
specifický jazyk ActionScript, jež definuje doplňující chování, které je vysvětleno v sekci věnované danému
ovládacímu prvku.
Počáteční kód jazyka ActionScript je dlouhý úsek, který určuje názvy tříd pro jednotlivé stavy každé komponenty.
Názvy všech těchto tříd lze prohlížet v souboru SkinOverAll.fla. Kód pro tlačítka Pauza a Přehrát například vypadá
takto:
this.pauseButtonDisabledState = "fl.video.skin.PauseButtonDisabled";
this.pauseButtonDownState = "fl.video.skin.PauseButtonDown";
this.pauseButtonNormalState = "fl.video.skin.PauseButtonNormal";
this.pauseButtonOverState = "fl.video.skin.PauseButtonOver";
this.playButtonDisabledState = "fl.video.skin.PlayButtonDisabled";
this.playButtonDownState = "fl.video.skin.PlayButtonDown";
this.playButtonNormalState = "fl.video.skin.PlayButtonNormal";
this.playButtonOverState = "fl.video.skin.PlayButtonOver";
161
Názvy tříd nemají skutečné externí soubory tříd; pro všechny filmové klipy v knihovně jsou definovány jen v
dialogovém okně Navázání.
V komponentě jazyka ActionScript 2.0 byly na vymezené ploše filmové klipy, které byly skutečně použity za běhu. V
komponentě jazyka ActionScript 3.0 jsou tyto filmové klipy stále obsaženy v souboru FLA, ale jen pro pohodlnější
provádění úprav. Nyní jsou všechny ve vrstvě vodítek a neexportují se. Všechny vzhledy obsažené v knihovně jsou
nastaveny na export v prvním snímku a jsou vytvářeny dynamicky, například pomocí následujícího kódu:
new fl.video.skin.PauseButtonDisabled();
Po tomto úseku následuje kód jazyka ActionScript, který definuje minimální šířku a výšku vzhledu. Tyto hodnoty jsou
zobrazeny v dialogovém okně Vybrat vzhled a používají se za běhu, kdy zamezují změně velikosti vzhledu pod jeho
minimální velikost. Jestliže nechcete stanovit minimální velikost, nechejte ji nedefinovanou nebo zadejte hodnotu
rovnou nebo menší než nula.
// minimum width and height of video recommended to use this skin,
// leave as undefined or <= 0 if there is no minimum
this.minWidth = 270;
this.minHeight = 60;
Každý zástupný znak může mít přiřazeny následující vlastnosti:
Vlastnost
Popis
anchorLeft
Boolean. Umisťuje ovládací prvky vzhledem k levé straně instance FLVPlayback. Výchozí hodnota je true,
pokud není vlastnost anchorRight explicitně nastavena na hodnotu true; pak je výchozí hodnotou
false..
anchorRight
Boolean. Umisťuje ovládací prvky vzhledem k pravé straně instance FLVPlayback. Výchozí hodnotou je
false.
anchorBottom
Boolean. Umisťuje ovládací prvky vzhledem ke spodnímu okraji instance FLVPlayback. Výchozí hodnota je
true, pokud není vlastnost anchorTop explicitně nastavena na hodnotu true; pak je výchozí hodnotou
false.
anchorTop
Boolean. Umisťuje ovládací prvky vzhledem k hornímu okraji instance FLVPlayback. Výchozí hodnotou je
false.
Jsou-li obě vlastnosti anchorLeft i anchorRight nastaveny na hodnotu true, pak se za běhu mění velikost
ovládacího prvku ve vodorovném směru. Jsou-li obě vlastnosti anchorTop i anchorBottom nastaveny na hodnotu
true, pak se za běhu mění velikost ovládacího prvku ve svislém směru.
Chcete-li vidět účinek těchto vlastností, podívejte se na způsob jejich použití ve vzhledech Flash. BufferingBar a
SeekBar jsou jediné ovládací prvky, jejichž velikost se mění, a jsou uloženy na sobě a mají obě vlastnosti anchorLeft
i anchorRight nastaveny na hodnotu true. Všechny ovládací prvky umístěné vlevo od prvků BufferingBar a SeekBar
mají vlastnost anchorLeft nastavenou na hodnotu true a všechny ovládací prvky umístěné vpravo od nich mají
vlastnost anchorRight nastavenou na hodnotu true. Všechny ovládací prvky mají vlastnost anchorBottom
nastavenou na hodnotu true.
Můžete zkusit upravit filmové klipy ve vrstvě Rozvržení a vytvořit vzhled, kde budou všechny ovládací prvky umístěny
nahoře místo dole. Stačí jen přesunout ovládací prvky nahoru vzhledem ke komponentě video_mc a nastavit vlastnost
anchorTop u všech prvků na hodnotu true.
Indikátor vyrovnávací paměti
Indikátor vyrovnávací paměti má dva filmové klipy: bufferingBar_mc a bufferingBarFill_mc. Vzájemná poloha obou
klipů na vymezené ploše je důležitá, neboť toto relativní umístění zůstane zachováno. Indikátor vyrovnávací paměti
používá dva samostatné klipy, protože se mění velikost klipu bufferingBar_mc ale ne klipu bufferingBarFill_mc.
162
Na klip bufferingBar_mc je aplikována změna měřítka s 9 řezy, takže jeho okraje se při změně velikosti deformují. Klip
bufferingBarFill_mc je extrémně široký, aby byl vždy dostatečně široký bez toho, aby bylo nutné měnit jeho velikost.
Za běhu je automaticky maskován, takže je vidět jen jeho část nad roztaženým klipem bufferingBar_mc. Ve výchozím
nastavení budou přesné rozměry masky zachovávat v klipu bufferingBar_mc stejný okraj nalevo i napravo v závislosti
na rozdílu mezi polohou klipů bufferingBar_mc a bufferingBarFill_mc v ose x (vodorovný směr). Umístění lze upravit
prostřednictvím kódu jazyka ActionScript.
Jestliže indikátor vyrovnávací paměti nepotřebuje měnit velikost nebo používá změnu měřítka s 9 řezy, lze ho nastavit
jako vlastní komponentu BufferingBar uživatelského rozhraní přehrávače FLV. Další informace naleznete v sekci
„Komponenta BufferingBar“ na stránce 156.
Indikátor vyrovnávací paměti má následující doplňkovou vlastnost:
Vlastnost
Popis
fill_mc:MovieClip
Udává název instance výplně indikátoru vyrovnávací paměti. Výchozí název je bufferingBarFill_mc.
Indikátor hledání a panel nastavení hlasitosti
Indikátor hledání má rovněž dva filmové klipy: seekBar_mc a seekBarProgess_mc. Vzájemná poloha obou klipů ve
vrstvě Rozvržení je důležitá, neboť toto relativní umístění zůstane zachováno. Přestože oba klipy mění svoji velikost,
klip seekBarProgress_mc nemůže být vnořený v klipu seekBar_mc, protože seekBar_mc používá změnu měřítka s 9
řezy, což u vnořených filmových klipů nefunguje příliš dobře.
Na klip seekBar_mc je aplikována změna měřítka s 9 řezy, takže jeho okraje se při změně velikosti deformují. Klip
seekBarProgress_mc rovněž mění svoji velikost, ale dochází u něho k deformaci. Nepoužívá změnu měřítka s 9 řezy,
protože se jedná o výplň, která vypadá dobře, když je deformovaná.
Klip seekBarProgress_mc funguje bez výplně fill_mc, podobně jako klip progress_mc funguje ve vlastních
komponentách uživatelského rozhraní přehrávače FLV. Jinými slovy není zamaskovaný a mění svoji velikost ve
vodorovném směru. Přesné rozměry klipu seekBarProgress_mc při 100% jsou definovány levým a pravým okrajem v
klipu seekBarProgress_mc. Tyto rozměry jsou ve výchozím nastavení stejné a jsou založeny na rozdílu mezi polohou
klipů seekBar_mc a seekBarProgress_mc v ose x (vodorovný směr). Rozměry lze upravit pomocí jazyka ActionScript
ve filmovém klipu indikátoru hledání, jak je znázorněno v následujícím příkladu:
this.seekBar_mc.progressLeftMargin = 2;
this.seekBar_mc.progressRightMargin = 2;
this.seekBar_mc.progressY = 11;
this.seekBar_mc.fullnessLeftMargin = 2;
this.seekBar_mc.fullnessRightMargin = 2;
this.seekBar_mc.fullnessY = 11;
Tento kód je možné vložit buďto na Časovou osu filmového klipu SeekBar, nebo na hlavní Časovou osu spolu s
druhým kódem jazyka ActionScript. Jestliže místo přizpůsobení rozvržení provedete úpravy změnou kódu, nemusí být
výplň umístěna na vymezené ploše. Stačí, když bude uložena v knihovně a nastavena na export pro kód jazyka
ActionScript ve Snímku 1 se správným názvem třídy.
Podobně jako u vlastní komponenty SeekBar uživatelského rozhraní přehrávače FLV lze pro indikátor hledání vytvořit
filmový klip vyplnění. Pokud indikátor hledání nepotřebuje měnit svoji velikost nebo ji mění, ale nepoužívá změnu
měřítka s 9 řezy, lze nastavit progress_mc nebo fullness_mc pomocí kterékoliv metody používané pro vlastní
komponenty uživatelského rozhraní přehrávače FLV. Další informace naleznete v sekci .
Vzhledem k tomu, že panel hlasitosti ve vzhledech Flash nemění svoji velikost, je navržen stejným způsobem jako
vlastní komponenta VolumeBar uživatelského rozhraní přehrávače FLV. Další informace naleznete v sekci
„Komponenty SeekBar a VolumeBar“ na stránce 157. Jedinou výjimkou je to, že táhlo je implementováno jiným
způsobem.
163
Táhla komponent Seekbar a VolumeBar
Táhla komponent Seekbar a VolumeBar jsou umístěny ve vrstvě Rozvržení vedle indikátorů. Ve výchozím nastavení
jsou hodnoty táhla pro levý okraj, pravý okraj a osu y nastaveny podle jeho polohy vzhledem k filmovému klipu
indikátoru. Levý okraj je nastaven podle rozdílu mezi umístěním táhla v ose x (vodorovný směr) a umístěním
indikátoru v ose x (vodorovný směr), přičemž pravý okraj je stejný jako levý. Tyto hodnoty lze změnit pomocí jazyka
ActionScript ve filmovém klipu SeekBar nebo VolumeBar. V následujícím příkladu je uveden stejný kód jazyka
ActionScript, který se používá u vlastních komponent uživatelského rozhraní přehrávače FLV:
this.seekBar_mc.handleLeftMargin = 2;
this.seekBar_mc.handleRightMargin = 2;
this.seekBar_mc.handleY = 11;
Tento kód je možné vložit buďto na Časovou osu filmového klipu SeekBar, nebo na hlavní Časovou osu spolu s
druhým kódem jazyka ActionScript. Jestliže místo přizpůsobení rozvržení provedete úpravy změnou kódu, nemusí být
táhlo umístěno na vymezené ploše. Stačí, když bude uloženo v knihovně a nastaveno na export pro jazyk ActionScript
ve Snímku 1 se správným názvem třídy.
Kromě těchto vlastností jsou táhla jednoduché filmové klipy, které se nastavují stejným způsobem jako u vlastních
komponent uživatelského rozhraní přehrávače FLV. Obě mají obdélníkové pozadí s vlastností alfa nastavenou na
hodnotu 0. Ta jsou k dispozici jen za účelem zvětšení oblasti klepnutí a nejsou povinná.
Klipy pozadí a popředí
Jako klipy pozadí jsou implementovány filmové klipy chrome_mc a forwardBackBorder_mc.
Z filmových klipů ForwardBackBorder, ForwardBorder a BackBorder na vymezené ploše a tlačítek zástupných znaků
Dopředu a Dozadu je ForwardBackBorder jedinou komponentou, která není umístěna ve vrstvě vodítek. Nachází se
pouze ve vzhledu, který skutečně využívá tlačítka Dopředu a Zpět.
Jediným požadavkem u těchto klipů je, aby byly exportovány pro jazyk ActionScript ve Snímku 1 v knihovně.
Změna chování vzhledu
Vlastnost bufferingBarHidesAndDisablesOthers a vlastnost skinAutoHide umožňují přizpůsobení chování
vzhledu FLVPlayback.
Po nastavení vlastnosti bufferingBarHidesAndDisablesOthers na hodnotu true komponenta FLVPlayback skryje
SeekBar a jeho táhlo a rovněž vypne tlačítka Přehrát a Pauza, když komponenta přejde do stavu ukládání do paměti.
To může být užitečné například při streamování souboru FLV z FMS přes pomalé připojení s nastavením vlastnosti
bufferTime na vysokou hodnotu (např. 10). V takovém případě se může netrpělivý uživatel pokusit zahájit hledání
klepnutím na tlačítka Přehrát a Pauza, což by mohlo vést k dalšímu zpoždění při přehrávání souboru. Tomu lze
zamezit nastavením vlastnosti bufferingBarHidesAndDisablesOthers na hodnotu true a vypnutím elementu
SeekBar a tlačítek Přehrát a Pauza, zatímco je komponenta ve stavu ukládání do paměti.
Vlastnost skinAutoHide ovlivňuje jen soubory předem navržených vzhledů SWF a nikoliv na ovládací prvky
vytvořené z vlastních komponent uživatelského rozhraní přehrávače FLV. Pokud je nastavena na hodnotu true,
komponenta FLVPlayback vzhled skryje, když se kurzor myši nenachází v oblasti prohlížení. Výchozí hodnota této
vlastnosti je false.
164
Použití souboru SMIL
Ke zpracování většího počtu streamů u vícenásobných šířek pásma používá třída VideoPlayer pomocnou třídu
(NCManager) podporující podmnožinu SMIL. SMIL slouží k identifikaci umístění video streamu, rozvržení (šířky a
výšky) souboru FLV a zdrojových souborů FLV, jež odpovídají různým šířkám pásma. Rovněž ho lze použít k určení
přenosové rychlosti a délky souboru FLV.
Pomocí parametru Zdroj nebo vlastnosti FLVPlayback.source property (ActionScript) definujte umístění souboru
SMIL. Další informace naleznete v části a pod vlastností FLVPlayback.source v Referenční příručce jazyka
V následujícím příkladu je znázorněn soubor SMIL, který streamuje soubory FLV s vícenásobnými šířkami pásma z
FMS pomocí protokolu RTMP:
<smil>
<head>
<meta base="rtmp://myserver/myapp/" />
<layout>
<root-layout width="240" height="180" />
</layout>
</head>
<body>
<switch>
<ref src="myvideo_cable.flv" dur="3:00.1"/>
<video src="myvideo_isdn.flv" system-bitrate="128000" dur="3:00.1"/>
<video src="myvideo_mdm.flv" system-bitrate="56000"dur="3:00.1"/>
</switch>
</body>
</smil>
Tag <head> může obsahovat tagy <meta> a <layout>. Tag <meta> podporuje pouze atribut základna sloužící k
určení URL streamovaného videa (RTMP z FMS).
Tag <layout> podporuje jen element rozvržení ko ene, který se používá pro nastavení atributů výška a ší ka,
proto určuje velikost okna, v němž je vykreslen soubor FLV. Tyto atributy povolují jen hodnoty obrazových bodů,
nikoliv procenta.
Do těla souboru SMIL lze zahrnout jediný odkaz na zdrojový soubor FLV, nebo v případě streamování většího počtu
souborů u vícenásobných šířek pásma z FMS (jako v předchozím příkladu) je možné použít tag <switch> k uvedení
seznamu zdrojových souborů.
Tagy video a ref v tagu <switch> jsou shodné – oba mohou definovat soubory FLV pomocí atributu src. Dále může
každý z nich pomocí atributů oblast, system-bitrate a dur určit oblast, minimální požadovanou šířku pásma a
délku souboru FLV.
V tagu <body> je povolen jen jeden výskyt každého z tagů <video>, <src> a <switch>.
Následující příklad demonstruje postupné stahování jediného souboru FLV bez použití detekce šířky pásma:
165
<smil>
<head>
<layout>
</layout>
</head>
<body>
<video src=""myvideo.flv" />
</body>
</smil>
<SMIL>
Dostupnost
Flash Professional 8
Použití
<smil>
...
child tags
...
</smil>
Atributy
Neurčeno
Podřízené tagy
<head>, <body>
Nadřazený tag
Neurčeno
Popis
Tag nejvyšší úrovně, který označuje soubor SMIL.
Příklad
V následujícím příkladu je znázorněn soubor SMIL definující tři soubory FLV:
166
<smil>
<head>
<layout>
</layout>
</head>
<body>
<switch>
</switch>
</body>
</smil>
<head>
Dostupnost
Použití
<head>
...
child tags
...
</head>
Atributy
Neurčeno
Podřízené tagy
<meta>, <layout>
Nadřazený tag
<smil>
Popis
Podporuje tagy <meta> a <layout>, určuje umístění a výchozí rozvržení (výšku a šířku) zdrojových souborů FLV.
Příklad
Následující příklad nastavuje kořenové rozvržení na 240 obr. bodů na 180 obr. bodů:
<head>
<layout>
</layout>
</head>
167
<meta>
Dostupnost
Použití
<meta/>
Atributy
base
Podřízené tagy
<layout>
Nadřazený tag
Neurčeno
Popis
Zahrnuje atribut základna definující umístění (RTMP URL) zdrojových souborů FLV.
Příklad
Následující příklad ilustruje meta tag pro umístění základny na serveru myserver:
<rozvržení>
Dostupnost
Použití
<layout>
...
child tags
...
</layout>
Atributy
Neurčeno
Podřízené tagy
<root-layout>
Nadřazený tag
<meta>
Popis
Definuje šířku a výšku souboru FLV.
168
Příklad
V následujícím příkladu je uvedeno rozvržení 240 obr. bodů na 180 obr. bodů:
<layout>
</layout>
<root-layout>
Dostupnost
Použití
<root-layout...attributes.../>
Atributy
Šířka, výška
Podřízené tagy
Neurčeno
Nadřazený tag
<layout>
Popis
Definuje šířku a výšku souboru FLV.
Příklad
V následujícím příkladu je uvedeno rozvržení 240 obr. bodů na 180 obr. bodů:
<body>
Dostupnost
Použití
<body>
...
child tags
...
</body>
Atributy
Neurčeno
169
Podřízené tagy
<video>, <ref>, <switch>
Nadřazený tag
<smil>
Popis
Zahrnuje tagy <video>, <ref> a <switch>, jež definují název zdrojového souboru FLV, minimální šířku pásma a
délku souboru FLV. Atribut system-bitrate je podporován jen při použití tagu <switch>. V tagu <body> je povolen
jen jeden výskyt každého z tagů <switch>, <video> nebo <ref>.
Příklad
V následujícím příkladu jsou definovány tři soubory FLV, z nichž dva používají tag video a jeden používá tag ref:
<body>
<switch>
</switch>
</body>
<video>
Dostupnost
Použití
<video...attributes.../>
Atributy
src, system-bitrate, dur
Podřízené tagy
Neurčeno
Nadřazený tag
<body>
Popis
Shodný s tagem <ref>. Podporuje atributy src a dur, jež definují název zdrojového souboru FLV a jeho délku. Atribut
dur podporuje plný (00:03:00:01) i částečný (03:00:01) formát času.
Příklad
Následující příklad ilustruje nastavení zdroje a délky pro video:
<video src="myvideo_mdm.flv" dur="3:00.1"/>
170
<ref>
Dostupnost
Použití
<ref...attributes.../>
Atributy
src, system-bitrate, dur
Podřízené tagy
Neurčeno
Nadřazený tag
<body>
Popis
Shodný s tagem <video>. Podporuje atributy src a dur, jež definují název zdrojového souboru FLV a jeho délku.
Atribut dur podporuje plný (00:03:00:01) i částečný (03:00:01) formát času.
Příklad
Následující příklad ilustruje nastavení zdroje a délky pro video:
<switch>
Dostupnost
Použití
<switch>
...
child tags
...
<switch/>
Atributy
Neurčeno
Podřízené tagy
<video>, <ref>
Nadřazený tag
<body>
171
Popis
Použije se s podřízeným tagem <video> nebo <ref> k uvedení seznamu souborů FLV pro streamování videa s
vícenásobnými šířkami pásma. Tag <switch> podporuje atribut system-bitrate , který definuje minimální šířku
pásma, jakož i atributy src a dur.
Příklad
V následujícím příkladu jsou definovány tři soubory FLV, z nichž dva používají tag video a jeden používá tag ref:
<switch>
<video src="myvideo_mdm.flv" system-bitrate="56000"dur="3:00.1" />
</switch>
172
173
Kapitola 7: Používání komponenty
titulkování FLVPlayback
Komponenta FLVPlayback umožňuje vložit do aplikace Adobe Flash CS5 Professional přehrávač videa pro přehrávání
stažených souborů Adobe Flash Video (formát FLV nebo F4V) a streamovaných souborů formátu FLV nebo F4V.
Další informace o komponentě FLVPlayback viz „Použití komponenty FLVPlayback“ na stránce 136.
Komponenta FLVPlaybackCaptioning umožňuje vkládat podporu uzavřených titulků pro soubory videa.
Komponenta titulkování podporuje soubory XML formátu Timed Text ve standardu W3C a zahrnuje následující
funkce:
Titulkování s vloženými startovacími body události Místo použití souboru XML Timed Text přidružte vložené
startovací body událostí v souboru FLV k souboru XML pro poskytnutí titulkování.
Vícenásobné titulkování FLVPlayback Vytvořte instance vícenásobného titulkování FLVPlayback pro více instancí
FLVPlayback.
Ovládání přepínacího tlačítka Pomocí přepínacího tlačítka titulkování zajistěte interakci uživatele s titulkováním.
Používání komponenty FLVPlaybackCaptioning
Komponenta FLVPlaybackCaptioning se používá s jednou nebo více komponentami FLVPlayback. V nejjednodušším
scénáři přetáhněte komponentu FLVPlayback do vymezené plochy, přetáhněte komponentu FLVPlaybackCaptioning
do stejné plochy, určete URL vašich titulků a nastavte titulky pro zobrazení. Navíc můžete nastavit i různé parametry
pro přizpůsobení vašeho titulkování FLVPlayback.
Přidávání titulkování komponenty FLVPlayback
Komponentu FLVPlaybackCaptioning můžete přidat k libovolné komponentě FLVPlayback. Informace o přidávání
komponenty FLVPlayback do aplikací viz „Vytvoření aplikace s komponentou FLVPlayback“ na stránce 137.
Přidávání komponenty FLVPlaybackCaptioning z panelu Komponenty:
1 V panelu Komponenty otevřete složku Video.
2 Přetáhněte komponentu FLVPlaybackCaptioning (nebo na ni poklepejte) a přidejte ji do stejné vymezené plochy
jako komponentu FLVPlayback, do které chcete přidat titulkování.
Poznámka: Společnost Adobe nabízí dva soubory, které vám pomohou rychle se naučit používat komponentu
FLVPlaybackCaptioning: caption_video.flv (ukázka komponenty FLVPlayback) a caption_video.xml (ukázka
titulkování). Tyto soubory naleznete na adrese www.helpexamples.com/flash/video/caption_video.flv a
www.helpexamples.com/flash/video/caption_video.xml.
3 (Volitelné) Přetáhněte komponentu CaptionButton do stejné vymezené plochy jako komponenty FLVPlayback a
FLVPlaybackCaptioning. Komponenta CaptionButton umožňuje uživateli zapínat a vypínat titulkování.
Poznámka: Chcete-li povolit komponentu CaptionButton, musíte ji přetáhnout do stejné vymezené plochy jako
komponenty FLVPlayback a FLVPlaybackCaptioning.
Používání komponenty titulkování FLVPlayback
4 Na vymezené ploše vyberte komponentu FLVPlaybackCaptioning a na kartě Parametry v Inspektoru vlastností
určete následující požadované informace:
• Nastavte parametr showCaptions na hodnotu true.
• Určete zdroj souboru XML formátu Timed Text ke stažení.
Chcete-li při práci v aplikaci Flash otestovat vaše titulky, měli byste nastavit vlastnost showCaptions na
hodnotu true. Jestliže však použijete komponentu CaptionButton, abyste umožnili uživateli zapínat a
vypínat titulky, měli byste vlastnost showCaptions nastavit na hodnotu false.
K dispozici jsou i další parametry, které vám pomohou přizpůsobit komponentu FLVPlaybackCaptioning. Další
informace viz „Přizpůsobení komponenty FLVPlaybackCaptioning“ na stránce 183 a Referenční příručka jazyka
5 Video spustíte volbou příkazu Ovládání > Testovat film.
Dynamické vytvoření instance pomocí jazyka ActionScript:
1 Přetáhněte komponentu FLVPlayback z panelu Komponenty do panelu Knihovna (Okno > Knihovna).
2 Přetáhněte komponentu FLVPlaybackCaptioning z panelu Komponenty do panelu Knihovna.
import fl.video.*;
my_FLVPlybk.skin = "install_drive:/Program Files/Adobe/Adobe Flash
CS5/en/Configuration/FLVPlayback Skins/ActionScript 3.0/SkinUnderPlaySeekCaption.swf";
my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/caption_video.flv";
var my_FLVPlybkcap = new FLVPlaybackCaptioning();
addChild (my_FLVPlybkcap);
my_FLVPlybkcap.source = "http://www.helpexamples.com/flash/video/caption_video.xml";
my_FLVPlybkcap.showCaptions = true;
4 Proměnnou install_drive změňte na jednotku, na kterou jste instalovali program Flash a změňte cestu na umístění
složky Skiny pro vaši instalaci:
Poznámka: Vytvoříte-li instanci FLVPlayback pomocí jazyka ActionScript, musíte jí také dynamicky přiřadit vzhled
nastavením vlastnosti vzhledu pomocí jazyka ActionScript. Jakmile aplikujete vzhled pomocí jazyka ActionScript,
nebude automaticky publikován se souborem SWF. Zkopírujte soubor SWF a soubor aplikace SWF na váš server,
jinak soubor SWF vzhledu nebude při provádění dostupný.
Nastavení parametrů komponenty FLVPlaybackCaptioning
U každé instance komponenty FLVPlaybackCaptioning můžete dále přizpůsobit komponentu nastavením
následujících parametrů v Inspektoru vlastností nebo v Inspektoru komponenty. V následujícím seznamu jsou
uvedena krátká vysvětlení následujících vlastností:
autoLayout Určuje, jestli komponenta FLVPlaybackCaptioning ovládá velikost oblasti titulkování. Výchozí hodnota
je true.
captionTargetName Určuje název instance TextField nebo MovieClip obsahující titulky. Výchozí hodnota je
automatická.
174
flvPlaybackName Určuje název instance FLVPlayback, ve které chcete použít titulkování. Výchozí hodnota je
automatická.
simpleFormatting Při nastavení na hodnotu true omezuje instrukce formátování ze souboru XML Timed Text.
Výchozí hodnota je false.
showCaptions Určuje, jestli se budou zobrazovat titulky. Výchozí hodnota je true.
source Určuje umístění souboru XML Timed Text.
Další informace o všech parametrech komponenty FLVPlaybackCaptioning jsou uvedeny v Referenční příručce jazyka
Určení parametru source
Pomocí parametru source určete název a umístění souboru XML Timed Text, který obsahuje titulky pro váš film.
Zadejte cestu URL přímo ve zdrojové buňce v Inspektoru komponenty.
Zobrazení titulků
Chcete-li zobrazit titulky, nastavte parametr showCaptions na hodnotu true.
Další informace o všech parametrech komponent FLVPlaybackCaptioning viz Referenční příručka jazyka ActionScript
V předchozích příkladech jste se naučili, jak vytvořit a povolit komponentu FLVPlaybackCaptioning pro zobrazení
titulků. Pro své titulky můžete použít dva zdroje: (1) soubor XML Timed Text obsahující příslušné titulky, nebo (2)
soubor XML s textem titulků, který přidružíte k vestavěným startovacím bodům událostí.
Používání titulků Timed Text
Komponenta FLVPlaybackCaptioning povoluje titulkování pro přidruženou komponentu FLVPlayback stažením
souboru XML Timed Text (TT). Další informace o formátu Timed Text jsou uvedeny v informacích k formátu
AudioVideo Timed Text na adrese http://www.w3.org.
V této části je uveden přehled podporovaných časovaných textových značek, požadovaných tagů souboru titulků a
příklad souboru XML Timed Text. Podrobné informace o všech podporovaných časovaných textových značkách viz
„Časované textové značky“ na stránce 177.
Komponenta FLVPlaybackCaptioning podporuje následující časované textové značky:
175
Kategorie
Úloha
Podpora formátování odstavců
Zarovnání odstavce vpravo, vlevo nebo na střed
Podpora formátování textu
•
Nastavte velikost textu použitím absolutní velikosti v obrazových bodech nebo stylu
delta (např. +2, -4)
•
Nastavte barvu textu a písma
•
Nastavte u textu tučné písmo a kurzívu
•
Nastavte zarovnání textu
•
Nastavení barvy pozadí komponenty TextField pro titulky
•
Nastavení barvy pozadí komponenty TextField pro titulky na průhledné (alpha 0)
•
Nastavení zalamování řádků titulků TextField (zapínání a vypínání)
Další podpora formátování
Komponenta FLVPlaybackCaptioning přizpůsobuje časový kód souboru FLV. Každý titulek musí mít atribut begin,
který určuje, kdy se má titulek zobrazit. Nemají-li titulky atribut dur nebo end, titulky zmizí, když se objeví další titulky
nebo když soubor FLV skončí.
Následuje příklad souboru XML Timed Text. Tento soubor (caption_video.xml) poskytuje titulkování pro soubor
caption_video.flv. Tyto soubory naleznete na adrese www.helpexamples.com/flash/video/caption_video.flv a
www.helpexamples.com/flash/video/caption_video.xml.
176
177
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en"
xmlns="http://www.w3.org/2006/04/ttaf1"xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
<style id="1" tts:textAlign="right"/>
<style id="2" tts:color="transparent"/>
<style id="3" style="2" tts:backgroundColor="white"/>
<style id="4" style="2 3" tts:fontSize="20"/>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="00:00:00.00" dur="00:00:03.07">I had just joined <span
tts:fontFamily="monospaceSansSerif,proportionalSerif,TheOther"tts:fontSize="+2">Macromedia</
span> in 1996,</p>
<p begin="00:00:03.07" dur="00:00:03.35">and we were trying to figure out what to do about the
internet.</p>
<p begin="00:00:06.42" dur="00:00:03.15">And the company was in dire straights at the time.</p>
<p begin="00:00:09.57" dur="00:00:01.45">We were a CD-ROM authoring company,</p>
<p begin="00:00:11.42" dur="00:00:02.00">and the CD-ROM business was going away.</p>
<p begin="00:00:13.57" dur="00:00:02.50">One of the technologies I remember seeing was
Flash.</p>
<p begin="00:00:16.47" dur="00:00:02.00">At the time, it was called <span
tts:fontWeight="bold" tts:color="#ccc333">FutureSplash</span>.</p>
<p begin="00:00:18.50" dur="00:00:01.20">So this is where Flash got its start.</p>
<p begin="00:00:20.10" dur="00:00:03.00">This is smart sketch running on the <span
tts:fontStyle="italic">EU-pin computer</span>,</p>
<p begin="00:00:23.52" dur="00:00:02.00">which was the first product that FutureWave did.</p>
<p begin="00:00:25.52" dur="00:00:02.00">So our vision for this product was to</p>
<p begin="00:00:27.52" dur="00:00:01.10">make drawing on the computer</p>
<p begin="00:00:29.02" dur="00:00:01.30" style="1">as <span tts:color="#ccc333">easy</span>
as drawing on paper.</p>
</div>
</body>
</tt>
Časované textové značky
Komponenta FLVPlaybackCaptioning podporuje časované textové značky pro soubory XML titulků. Další informace
o časovaných textových značkách zvuku a videa naleznete na adrese http://www.w3.org. V následující tabulce jsou
uvedeny podporované a nepodporované značky.
Funkce
Tag/Hodnota
Použití/Popis
Ignorované tagy
metadata
Ignorováno / povoleno na libovolné úrovni
dokumentu.
set
Ignorováno / povoleno na libovolné úrovni
dokumentu.
xml:lang
Ignorované
xml:space
Ignorované / Chování potlačuje na:
xml:space=„výchozí“
Příklad
178
Funkce
Časování médií
pro titulky
Časování hodin
pro titulky
Tag/Hodnota
Použití/Popis
rozvržení
Ignorované / včetně všech regionálních
tagů v části tagů rozvržení
tag „br“
Všechny atributy a obsahy jsou ignorovány.
atributy begin
Povoleno pouze u tagů p. Požadováno pro
nasazení času média s titulky.
atributy dur
Povoleno pouze u tagů p. Doporučeno.
Nejsou-li zahrnuty, titulky skončí společně
se souborem FLV, nebo když začnou další
titulky.
atributy end
Povoleno pouze u tagů p. Doporučeno.
Nejsou-li zahrnuty, titulky skončí společně
se souborem FLV, nebo když začnou další
titulky.
00:03:00.1
Plný formát hodin
03:00.1
Částečný formát hodin
10
Časy odsazení bez jednotek. Odsazení je
vyjádřeno v sekundách.
00:03:00:05
Není podporováno. Časované formáty,
které zahrnují snímky nebo dílky, nejsou
podporovány.
00:03:00:05.1
Příklad
<p begin="3s">
30f
30t
Tag hlavní části
body
Vyžadovaný / Podpora pouze jednoho tagu <body><div>...</div></body>
hlavní části.
Tag obsahu
div tag
Povolena nula nebo více. Použije se první
tag.
tag p
Povolena nula nebo více.
tag „span“
Logický kontejner pro posloupnost
jednotek textového obsahu. Není podpora
pro vnořené rozsahy. Podpora pro tagy
stylu atributu.
tag „br“
Označuje jednoznačné zalomení řádku.
style
Odvolejte se na jeden nebo více prvků stylu.
Může se použít jako tag i jako atribut. V
případě tagu je vyžadován atribut ID (styl
lze použít znovu v dokumentu). Podpora
jednoho nebo více tagů stylu uvnitř tagu
stylu.
tts:barva pozadí
Určete vlastnost stylu, která definuje barvu
pozadí určité oblasti. Parametr alpha je
ignorován, pokud není nastaven na nulu
(alpha 0), aby bylo pozadí průhledné.
Formát barvy je #RRGGBBAA.
Nastavení stylu
tagů
(Všechny tagy
stylu se používají
s tagem p)
179
Funkce
Tag/Hodnota
Použití/Popis
Příklad
tts:color
Určete vlastnost styl, která definuje barvu
<style id="3" style="2"
popředí. Parametr alpha není podporován tts:backgroundColor="white"/>
pro všechny barvy. Hodnota pr hledná se
"průhledná" = #00000000
přeloží na černou.
"černá"=#000000FF
"stříbrná"=#C0C0C0FF
"šedá"=#808080FF
"bílá"=#FFFFFFFF
"kaštanová"=#800000FF
"červená"=#FF0000FF
"nachová"=#800080FF
"fuchsiová"("purpurová")=
#FF00FFFF
"zelená"=#008000FF
"citrónová"=#00FF00FF
"olivová"=#808000FF
"žlutá"=#FFFF00FF
"tmavomodrá"=#000080FF
"modrá"=#0000FFFF
"světlemodrá"=#008080FF
"akvamarínová"("azurová")=#00FFFFFF
tts:fontFamily
Určete vlastnost stylu, která definuje
skupinu písem.
"výchozí" = _serif
"monospace" = _typewriter
"sansSerif" = _sans
"serif" = _serif
"monospaceSansSerif" =_typewriter
"monospaceSerif" =_typewriter
"proportionalSansSerif" = _sans
tts:fontSize
Určete vlastnost stylu, která definuje
velikost písma. Jsou dodány dvě hodnoty,
použije se pouze první (svislá) hodnota.
Procentuální hodnoty a jednotky jsou
ignorovány. Podpora pro absolutní velikost
v obrazových bodech (např. 12) a relativní
velikost stylu (např. +2).
tts:fontStyle
Určete vlastnost stylu, která definuje styl
písma.
"normal"
"kurzíva"
„zdědit“*
* Výchozí chování; zdědí styl z nadřazeného
tagu.
180
Funkce
Tag/Hodnota
Použití/Popis
Příklad
tts:fontWeight
Určete vlastnost styl, která definuje váhu
písma.
"normal"
"tučné"
„zdědit“*
* Výchozí chování; zdědí styl z nadřazeného
tagu.
tts:textAlign
Určete vlastnost styl, která definuje, jak
budou zarovnány přímé plochy uvnitř
obsahující plochy bloku.
"vlevo"
"vpravo"
"na střed"
"spustit" (="vlevo")
"konec" (="vpravo")
„zdědit“*
* Zdědí styl z nadřazeného tagu. Je-li nastaven
tag textAlign, výchozí hodnota je "vlevo".
tts:wrapOption
Nepodporované
atributy
Určete vlastnost styl, která definuje, jestli
"wrap"
bude v kontextu ovlivněného prvku použito
"noWrap"
automatické zalamování řádků. Toto
nastavení ovlivní všechny odstavce v prvku „zdědit“*
titulků.
* Zdědí styl z nadřazeného tagu. Není-li
nastaven tag wrapOption, výchozí hodnota je
"wrap".
tts:direction
tts:display
tts:displayAlign
tts:dynamicFlow
tts:extent
tts:lineHeight
tts:opacity
tts:origin
tts:overflow
tts:padding
tts:showBackground
tts:textOutline
tts:unicodeBidi
tts:visibility
tts:writingMode
tts:zIndex
Používání startovacích bodů s titulkováním
Startovací body umožňují interakci s videem. Můžete například ovlivnit přehrávání souboru FLV nebo zobrazení textu
v určité časové okamžiky při přehrávání videa. Nemáte-li soubor XML Timed Text, který byste použili se souborem
FLV, můžete do souboru FLV vložit startovací body události a poté je přidružit k textu. V této části jsou uvedeny
informace o standardech startovacích bodů komponenty FLVPlaybackCaptioning a stručný přehled, jak tyto
startovací body přidružit k textu titulků. Další informace o způsobu vkládání startovacích bodů události pomocí
Průvodce importem videa nebo kodéru videa Flash najdete v kapitole 16, „Práce s videem“, v části Používání programu
Flash.
Vysvětlení standardů startovacích bodů komponenty
FLVPlaybackCaptioning
Uvnitř metadat souboru FLV je startovací bod vyjádřen jako objekt s následujícími vlastnostmi: name, time, type a
parameters. Startovací body jazyka ActionScript komponenty FLVPlaybackCaptioning mají následující atributy:
name Vlastnost name je řetězec obsahující přiřazený název startovacího bodu. Vlastnost name musí začínat předponou
fl.video.caption.2.0. a následovat za předponou s řetězcem. Řetězec je řada kladných celých čísel, která jsou u každého
názvu o jednu vyšší, aby byl každý název jedinečný. Předpona obsahuje číslo verze, které se také shoduje s číslem verze
komponenty FLVPlayback. U aplikace Adobe Flash CS4 a novější musíte číslo verze nastavit na 2.0.
as Vlastnost time je čas, kdy by se měl titulek zobrazit.
type Vlastnost type je řetězec, jehož hodnota je"event".
parametry Vlastnost parameters je pole, které podporuje následující páry název-hodnota:
•
text:String Text pro titulky ve formátu HTML. Tento text se předává přímo vlastnosti TextField.htmlText.
Komponenta FLVPlaybackCaptioning podporuje volitelný text:vlastnostn, která podporuje použití vícejazyčných
stop. Další informace viz část „Podpora vícejazyčných stop s vloženými startovacími body“ na stránce 183.
• endTime:Number Čas, kdy by měl titulek zmizet. Nezadáte-li tuto vlastnost, komponenta FLVPlaybackCaptioning
bude předpokládat, že to není číslo (NaN) a titulek bude zobrazen, dokud neskončí soubor FLV (instance
FLVPlayback odešle událost VideoEvent.COMPLETE ). Určete vlastnost endTime:Number v sekundách.
•
backgroundColor:uint Tento parametr nastaví proměnnou TextField.backgroundColor. Tato vlastnost je
nepovinná.
•
backgroundColorAlpha:Boolean Má-li proměnná backgroundColor hodnotu alpha 0 %, tak daný parametr
nastaví TextField.background = !backgroundColor. Tato vlastnost je nepovinná.
•
wrapOption:Boolean Tento parametr nastaví proměnnou TextField.wordWrap. Tato vlastnost je nepovinná.
Vysvětlení titulkování pro vložené startovací body události
Nemáte-li soubor XML Timed Text obsahující titulky pro příslušný soubor FLV, můžete vytvořit titulky přidružením
souboru XML, který obsahuje titulkování s vloženými startovacími body událostí. V ukázce XML se předpokládá, že
jste na základě následujícího postupu vytvořili ve vašem souboru videa vložené startovací body událostí:
• Přidejte startovací body událostí (podle standardů komponenty FLVPlaybackCaptioning) a zakódujte video.
• V programu Flash přetáhněte komponentu FLVPlayback a FLVPlaybackCaptioning do vymezené plochy.
• Nastavte zdrojové vlastnosti komponent FLVPlayback a FLVPlaybackCaptioning (umístění příslušného souboru
FLV a umístění příslušného souboru XML).
• Publikujte.
181
V následující ukázce je soubor XML importován do kodéru:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<FLVCoreCuePoints>
<CuePoint>
<Time>9136</Time>
<Type>event</Type>
<Name>fl.video.caption.2.0.index1</Name>
<Parameters>
<Parameter>
<Name>text</Name>
<Value><![CDATA[Captioning text for the first cue point]]></Value>
</Parameter>
</Parameters>
</CuePoint>
<CuePoint>
<Time>19327</Time>
<Type>event</Type>
<Parameters>
<Parameter>
<Name>text</Name>
<Value><![CDATA[Captioning text for the second cue point]]></Value>
</Parameter>
</Parameters>
</CuePoint>
<CuePoint>
<Time>24247</Time>
<Type>event</Type>
<Parameters>
<Parameter>
<Name>text</Name>
<Value><![CDATA[Captioning text for the third cue point]]></Value>
</Parameter>
</Parameters>
</CuePoint>
<CuePoint>
<Time>36546</Time>
<Type>event</Type>
<Parameters>
<Parameter>
<Name>text</Name>
<Value><![CDATA[Captioning text for the fourth cue point]]></Value>
</Parameter>
</Parameters>
</CuePoint>
</FLVCoreCuePoints>
Komponenta FLVPlaybackCaptioning podporuje také vícejazyčné stopy s vloženým startovacím bodem. Další
informace viz část „Podpora vícejazyčných stop s vloženými startovacími body“ na stránce 183.
182
Podpora vícejazyčných stop s vloženými startovacími body
Vlastnost track komponenty FLVPlaybackCaptioning podporuje vícejazyčné stopy s vloženými startovacími body,
pokud se soubor XML Timed Text řídí standardy startovacích bodů komponenty FLVPlaybackCaptioning. (Další
informace viz „Vysvětlení standardů startovacích bodů komponenty FLVPlaybackCaptioning“ na stránce 181)
Komponenta FLVPlaybackCaptioning však nepodporuje vícejazyčné stopy v samostatných souborech XML. Chceteli použít vlastnost track, nastavte ji na hodnotu různou od nuly. Například nastavíte-li vlastnost track na 1 (track =
1), komponenta FLVPlaybackCaptioning bude hledat parametry startovacího bodu. Jestliže nenajde shodu, použije
vlastnost text v parametrech startovacího bodu. Další informace naleznete u vlastnosti track v Referenční příručce
Přehrávání více souborů FLV s titulky
Můžete otevřít více přehrávačů videa v jedné instanci komponenty FLVPlayback pro přehrání více videí a přepínat
mezi nimi během přehrávání. Můžete také přidružit titulky k jednotlivým přehrávačům videa uvnitř komponenty
FLVPlayback. Další informace o způsobu otvírání přehrávačů videa viz „Použití většího počtu přehrávačů videa“ na
stránce 151. Chcete-li použít titulkování ve více přehrávačích videa, vytvořte jednu instanci komponenty
FLVPlaybackCaptioning pro každý objekt VideoPlayer a nastavte hodnotu videoPlayerIndex komponenty
FLVPlaybackCaptioning na odpovídající index. Index VideoPlayer má výchozí hodnotu 0, když existuje pouze jeden
objekt VideoPlayer.
Následuje příklad kódu, který přidruží jedinečné titulky jedinečným videím. Chcete-li tento příklad spustit, je třeba
nahradit fiktivní URL v příkladu za funkční adresy URL.
captioner0.videoPlayerIndex = 0;
captioner0.source = "http://www.[yourDomain].com/mytimedtext0.xml";
flvPlayback.play("http://www.[yourDomain].com/myvideo0.flv");
captioner1.videoPlayerIndex = 1;
captioner1.source = "http://www.[yourDomain].com/mytimedtext1.xml";
flvPlayback.activeVideoIndex = 1;
flvPlayback.play ("http://www.[yourDomain].com/myvideo1.flv");
Přizpůsobení komponenty FLVPlaybackCaptioning
Chcete-li provést rychlé spuštění pomocí komponenty FLVPlaybackCaptioning, můžete se rozhodnout použít výchozí
hodnoty komponenty FLVPlaybackCaptioning, které umístí titulky přímo nad komponentu FLVPlayback.
Komponentu FLVPlaybackCaptioning můžete přizpůsobit tak, že přemístí titulky mimo obraz.
Následující kód předvádí, jak dynamicky vytvořit objekt FLVPlayback s přepínacím tlačítkem titulků:
1 Umístěte komponentu FLVPlayback do bodu 0, 0 na vymezené ploše a zadejte název instance player.
2 Umístěte komponentu FLVPlaybackCaptioning do bodu 0, 0 na vymezené ploše a zadejte název instance
captioning.
3 Umístěte komponentu CaptionButton do vymezené plochy.
4 V následujícím příkladu nastavte proměnnou testVideoPath:String na soubor FLV (pomocí absolutní nebo
relativní cesty).
183
Poznámka: Kód v příkladu nastaví proměnnou testVideoPath na ukázku videa programu Flash,
caption_video.flv. Změňte tuto proměnnou na cestu komponenty titulků videa, na kterou přidáváte komponentu
tlačítko titulkování.
5 Kód v následujícím příkladu nastaví proměnnou testCaptioningPath:Stringna příslušný soubor XML Timed
Text (pomocí absolutní nebo relativní cesty).
Poznámka: Kód v příkladu nastaví proměnnou testCaptioningPath na soubor XML Timed Text,
caption_video.xml. Změňte tuto proměnnou na cestu k souboru XML Timed Text, který obsahuje titulky pro dané
video.
6 Uložte následující kód jako FLVPlaybackCaptioningExample.as do stejného adresáře jako odpovídající soubor FLA.
7 Nastavte třídu DocumentClass v souboru FLA na FLVPlaybackCaptioningExample.
package
{
import
import
import
import
flash.display.Sprite;
flash.text.TextField;
fl.video.FLVPlayback;
fl.video.FLVPlaybackCaptioning;
public class FLVPlaybackCaptioningExample extends Sprite {
private var testVideoPath:String =
"http://www.helpexamples.com/flash/video/caption_video.flv";
private var testCaptioningPath:String =
"http://www.helpexamples.com/flash/video/caption_video.xml";
public function FLVPlaybackCaptioningExample() {
player.source = testVideoPath;
player.skin = "SkinOverAllNoCaption.swf";
player.skinBackgroundColor = 0x666666;
player.skinBackgroundAlpha = 0.5;
captioning.flvPlayback = player;
captioning.source = testCaptioningPath;
captioning.autoLayout = false;
captioning.addEventListener("captionChange",onCaptionChange);
}
private function onCaptionChange(e:*):void {
var tf:* = e.target.captionTarget;
var player:FLVPlayback = e.target.flvPlayback;
// move the caption below the video
tf.y = 210;
}
}
}
Další informace o všech parametrech komponenty FLVPlaybackCaptioning jsou uvedeny v Referenční příručce
184

Zobrazit nápovědu v souboru

Transkript

Podobné dokumenty

Diplomový projekt

Ročníkový projekt

Stáhnout PDF analýzu

Řemeslníci

Stáhnout PDF s nápovědou( 10MB)

zde

CZJUG, 15.12.2008, Robert Vojta

Skripta - Marek Běhálek

Používání aplikace Flash Professional

Používání aplikace Adobe Media Encoder CS4

Používání programu Adobe® Flash® CS4 Professional

Yahoo! Maps

YAHOO Mapy

Zobrazit nápovědu v souboru

Používání aplikace Adobe® Flash® Professional CS5

Antická architektura Říma