Používání komponent jazyka ACTIONSCRIPT 3.0

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ě.


POUŽÍVÁNÍ KOMPONENT JAZYKA ACTIONSCRIPT 3.0 Ú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.


POUŽÍVÁNÍ KOMPONENT JAZYKA ACTIONSCRIPT 3.0 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: 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 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 X zadejte 155. • 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. • Jako hodnotu X zadejte 265. • Jako hodnotu Y zadejte 120. • 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; aTa.setStyle("textFormat", tf); }

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: 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 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. 7 Zvolte Soubor > Nový. 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; } aTa.setStyle("textFormat", tf); } private function cpHandler(event:ColorPickerEvent):void { tf.color = event.target.selectedColor; aTa.setStyle("textFormat", tf); } private function cbHandler(event:Event):void { aTa.text = event.target.selectedItem.data; } } }


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.


POUŽÍVÁNÍ KOMPONENT JAZYKA ACTIONSCRIPT 3.0 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: import fl.controls.Button;


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 , 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: import fl.controls.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: aButton.addEventListener(MouseEvent.CLICK, clickHandler);

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); aButton.addEventListener(MouseEvent.CLICK, clickHandler2);

• Do více instancí komponenty můžete registrovat jeden posluchač. aButton.addEventListener(MouseEvent.CLICK, clickHandler1); 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 3.0 aplikace Flash Professional. 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 fl.controls.Button; import flash.events.MouseEvent; var aButton:Button = new Button(); aButton.label = "Submit"; addChild(aButton); aButton.addEventListener(MouseEvent.CLICK, clickHandler); 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í: aNs is at position: 0 aButton is at position: 1 aCb is at position: 2 aButton is at position: 0 aCb is at position: 1 aNs is at position: 2

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. 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 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: import fl.controls.Button; var i:int = 0; while(i++ < 3) { makeButton(i); } function removeButton(event:MouseEvent):void { removeChildAt(numChildren -1); } function makeButton(num) { var aButton:Button = new Button(); 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; var fm:FocusManager = new FocusManager(this); 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; var fm:FocusManager = new FocusManager(this); 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 aList:List = new List(); 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); aList.move(150,150); 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 fl.data.DataProvider; 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; import fl.data.DataProvider; var aDg:DataGrid = new DataGrid(); addChild(aDg); var employeesXML:XML = <employees> <employee Name="Edna" ID="22" /> <employee Name="Stu" ID="23" /> ; 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> Edna 22 <employee> Stu 23 ;

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. import fl.data.DataProvider; import fl.events.ComponentEvent; 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; fl.data.DataProvider;

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 while(i < listB.length) { listB.dataProvider.replaceItemAt(listA.dataProvider.getItemAt(i), i); ++i; } } else { //if listB is longer, remove extra items from B while(i < listA.length) { listB.dataProvider.replaceItemAt(listA.dataProvider.getItemAt(i), i); ++i; } while(i < listB.length) { 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. import fl.data.DataProvider; import fl.controls.DataGrid; import fl.controls.Button; var aDg:DataGrid = new DataGrid(); 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; dg.columns[1].width = 50; dg.columns[2].width = 50; dg.columns[3].width = 40; dg.columns[4].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. 1 Zvolte Soubor > Nový. 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. 10 Zvolte Soubor > Nový. 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.text.TextFormat; 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: 1 Zvolte Soubor > Nový. 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): 100 • 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({name:"Burger", price:"$5.95"}); myList.addItem({name:"Fries", price:"$1.95"});

9 Vyberte Soubor > Uložit. Pojmenujte soubor a klepněte na tlačítko OK. 10 Zvolte Soubor > Nový. 11 V dialogovém okně Nový dokument, které se zobrazí, zvolte Soubor ActionScript a klepněte na tlačítko OK.


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. 1 Zvolte Soubor > Nový. 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): 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. 14 Na Časové ose zvolte Snímek 1 a zvolte Okno > Akce. 15 Do panelu Akce napište následující skript: myList.setStyle("cellRenderer", MyCellRenderer);

16 Vyberte Soubor > Uložit. Pojmenujte soubor a klepněte na tlačítko OK. 17 Zvolte Soubor > Nový. 18 V dialogovém okně Nový dokument, které se zobrazí, zvolte Soubor ActionScript a klepněte na tlačítko OK. 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 _listData:ListData; private var _data:Object; private var _selected:Boolean; private var glowFilter:GlowFilter; public function MyCellRenderer() { glowFilter = new GlowFilter(0xFFFF00); setInterval(toggleFilter, 200); } public function set data(d:Object):void { _data = d; textField.text = 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; } 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 { private var _listData:ListData; private var _data:Object; public function CustomRenderer() { } 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; } } }

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 JAZYKA ACTIONSCRIPT 3.0 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; aButton.addEventListener(MouseEvent.CLICK, clickHandler); function clickHandler(event:MouseEvent):void { 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(). 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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


import fl.controls.Button; var aButton:Button = new Button(); 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: aButton.addEventListener(MouseEvent.CLICK, clickHandler); function clickHandler(event:MouseEvent):void { 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 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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; function clickHandler(event:MouseEvent):void { 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 ActionScript 3.0 aplikace Flash Professional. 6 Zvolte příkaz Ovládání > Testovat film.

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 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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; import fl.controls.RadioButton; 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); function clickHandler(event:MouseEvent):void { 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. 5 Zvolte příkaz Ovládání > Testovat film.

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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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: import fl.events.ColorPickerEvent; var aBox:MovieClip = new MovieClip(); drawBox(aBox, 0xFF0000);//draw a red box addChild(aBox); aCp.addEventListener(ColorPickerEvent.CHANGE,changeHandler); function changeHandler(event:ColorPickerEvent):void { drawBox(aBox, event.target.selectedColor); } function drawBox(box:MovieClip,color:uint):void { box.graphics.beginFill(color, 1); box.graphics.drawRect(100, 150, 100, 100); box.graphics.endFill(); }

4 Zvolte příkaz Ovládání > Testovat film. 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


52


import fl.controls.ColorPicker; import fl.controls.TextArea; import fl.events.ColorPickerEvent; var aCp:ColorPicker = new ColorPicker(); var aTa:TextArea = new TextArea(); 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.setSize(200, 200); 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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 : import fl.data.DataProvider; import fl.events.ComponentEvent; var items:Array = [ {label:"screen1", data:"screenData1"}, {label:"screen2", data:"screenData2"}, {label:"screen3", data:"screenData3"}, {label:"screen4", data:"screenData4"}, {label:"screen5", data:"screenData5"}, ]; aCb.dataProvider = new DataProvider(items); 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu z panelu Komponenty do panelu Knihovna. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


55


import fl.controls.ComboBox; import fl.data.DataProvider; 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); function changeHandler(event:Event):void { 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 ActionScript 3.0 aplikace Flash Professional.

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 aplikace Flash Professional.

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. 4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: import fl.data.DataProvider; bldRosterGrid(aDg); var aRoster: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"}, {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"}, ]; aDg.dataProvider = new DataProvider(aRoster); aDg.rowCount = aDg.length; function bldRosterGrid(dg:DataGrid){ dg.setSize(400, 300); dg.columns = ["Name", "Bats", "Throws", "Year", "Home"]; dg.columns[0].width = 120; dg.columns[1].width = 50; dg.columns[2].width = 50; dg.columns[3].width = 40; dg.columns[4].width = 120; dg.move(50,50); };

Funkce bldRosterGrid() nastavuje velikost komponenty DataGrid a určuje pořadí sloupců a jejich velikost. 5 Zvolte příkaz Ovládání > Testovat film.

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. 3 V Inspektoru vlastnosti zadejte název instance aDg. 4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: import fl.controls.dataGridClasses.DataGridColumn; import fl.events.DataGridEvent; import fl.data.DataProvider; // 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.rowCount = aDg.length; 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ů. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: import fl.controls.DataGrid; import fl.data.DataProvider; var aDg:DataGrid = new DataGrid(); 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); aDg.rowCount = aDg.length;


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.

2 Vytvořte nový dokument Flash (ActionScript 3.0). 3 Poklepáním přidáte komponentu DataGrid v panelu Komponenty na vymezenou plochu. 4 V Inspektoru vlastnosti zadejte název instance aDg. 5 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


61


import import import import

fl.controls.dataGridClasses.DataGridColumn; fl.data.DataProvider; 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; aDg.rowCount = aDg.length; }


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“. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: import fl.controls.Label; import fl.controls.ColorPicker; var aLabel:Label = new Label(); var aCp:ColorPicker = new ColorPicker(); addChild(aLabel); addChild(aCp); aLabel.htmlText = 'Fill:'; 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 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. 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 5 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: import fl.controls.List; import flash.text.TextField; 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 5 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


66


import fl.controls.List; import fl.data.DataProvider; import flash.text.TextField; 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.allowMultipleSelection = true; 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 název instance zadejte aList. • Jako hodnotu H zadejte 60. • Jako hodnotu X zadejte 100. • Jako hodnotu Y zadejte 150. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


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}); var aBox:MovieClip = new MovieClip(); addChild(aBox); aList.addEventListener(Event.CHANGE, changeHandler); function changeHandler(event:Event) { drawBox(aBox, event.target.selectedItem.data); }; function drawBox(box:MovieClip,color:uint):void { box.graphics.beginFill(color, 1.0); box.graphics.drawRect(225, 150, 100, 100); box.graphics.endFill(); }

4 Zvolte Ovládání > Testovat film a spusťte aplikaci. 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(). 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu List z panelu Komponenty do panelu Knihovna. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: import fl.controls.List; var aList:List = new List(); 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}); aList.setSize(60, 40); aList.move(200,200); addChild(aList); aList.addEventListener(Event.CHANGE, changeHandler); function changeHandler(event:Event):void { trace(event.target.selectedItem.data); }

4 Zvolte Ovládání > Testovat film a spusťte aplikaci.


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. 5 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: import flash.events.Event; 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. 6 Zvolte příkaz Ovládání > Testovat film.

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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu Label do panelu Knihovna. 3 Přetáhněte komponentu NumericStepper do panelu Knihovna. 4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


70


import fl.controls.Label; 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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.

• Jako hodnotu W zadejte 150. • Jako hodnotu X zadejte 200. • Jako hodnotu Y zadejte 230. • 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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 hodnotu X zadejte 185. • Jako hodnotu Y zadejte 225. 3 Přetáhněte komponentu Label z panelu Komponenty na vymezenou plochu a v Inspektoru vlastnosti pro ni zadejte


• Jako název instance zadejte progLabel. • Jako hodnotu X zadejte 180. • Jako hodnotu Y zadejte 180. • 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu ProgressBar z panelu Komponenty na vymezenou plochu a v Inspektoru vlastnosti ji


• Jako název instance zadejte aPb. • Jako hodnotu X zadejte 180. • Jako hodnotu Y zadejte 175. 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. • Jako hodnotu X zadejte 220. • Jako hodnotu Y zadejte 215. • 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. • Jako hodnotu W zadejte 150. • Jako hodnotu X zadejte 180. • Jako hodnotu Y zadejte 120. • Na kartě Parametry smažte v parametru text hodnotu Label. 5 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód : import fl.controls.ProgressBarDirection; import fl.controls.ProgressBarMode; import flash.events.Event; 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 5 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód : 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) + "%"; }

6 Zvolte Ovládání > Testovat film a spusťte aplikaci. 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.

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. 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 6 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: 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); function clickHandler(event:MouseEvent):void { 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu RadioButton do panelu Knihovna. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


78


import fl.controls.RadioButton; 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");

var aBox:MovieClip = new MovieClip(); 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); function clickHandler(event:MouseEvent):void { drawBox(aBox, event.target.selection.value); } function drawBox(box:MovieClip,color:uint):void { box.graphics.beginFill(color, 1.0); box.graphics.drawRect(125, 150, 100, 100); box.graphics.endFill(); }


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); box.graphics.drawRect(0, 0, 150, 300); box.graphics.endFill(); 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 aplikace Flash Professional. 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu ScrollPane z panelu Komponenty na vymezenou plochu a pojmenujte ji názvem instance aSp. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: 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ů. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


81



fl.containers.ScrollPane; fl.controls.ScrollPolicy; fl.controls.DataGrid; fl.data.DataProvider;

var aSp:ScrollPane = new ScrollPane(); var aBox:MovieClip = new MovieClip(); drawBox(aBox, 0xFF0000);//draw a red box aSp.source = aBox; aSp.setSize(150, 200); aSp.move(100, 100); addChild(aSp); function drawBox(box:MovieClip,color:uint):void { box.graphics.beginFill(color, 1); box.graphics.drawRect(0, 0, 150, 300); box.graphics.endFill(); }


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


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. 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 5 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


83


import fl.controls.Slider; import fl.events.SliderEvent; import fl.controls.Label; 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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



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; }

4 Zvolte Ovládání > Testovat film a spusťte aplikaci. 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.

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 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í příručce jazyka ActionScript 3.0 aplikace Flash Professional. 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í. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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í. 4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: 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í. 5 Zvolte příkaz Ovládání > Testovat film.

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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu TextArea do panelu Knihovna. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


87


import fl.controls.TextArea; var aTa:TextArea = new TextArea(); aTa.move(100,100); aTa.setSize(200, 200); aTa.condenseWhite = true; aTa.htmlText = '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.'; 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. 4 Zvolte příkaz Ovládání > Testovat film.

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


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. 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 aplikace Flash Professional.

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ý. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu Label z panelu Komponenty na vymezenou plochu a v Inspektoru vlastnosti pro ni zadejte


• Jako název instance zadejte pwdLabel. • Jako hodnotu W zadejte 100. • Jako hodnotu X zadejte 50. • Jako hodnotu Y zadejte 150. • 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. • Jako hodnotu W zadejte 100. • Jako hodnotu X zadejte 50. • Jako hodnotu Y zadejte 200. • 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. • Jako hodnotu W zadejte 150. • Jako hodnotu X zadejte 190. • Jako hodnotu Y zadejte 150. • 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. • Jako hodnotu W zadejte 150. • Jako hodnotu X zadejte 190. • Jako hodnotu Y zadejte 200. • 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. 6 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: 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. 7 Zvolte příkaz Ovládání > Testovat film.

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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 4 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


90


import fl.controls.Label; import fl.controls.TextInput; var nameLabel:Label = new Label(); var nameTi:TextInput = new TextInput(); var tf:TextFormat = new TextFormat(); 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 aplikace Flash Professional.

Vytváření aplikací s komponentou TileList V tomto příkladu je pomocí komponenty MovieClip vyplněna komponenta TileList polem malířských barev. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu TileList na vymezenou plochu a pojmenujte ji názvem instance aTl. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


92


import fl.data.DataProvider; 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.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(); }

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ů. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Z panelu Komponenty přetáhněte do panelu Knihovna následující komponenty: ColorPicker, ComboBox,

NumericStepper, CheckBox a TileList. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


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; fl.data.DataProvider;

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.columnWidth = 110; aTl.rowHeight = 100; aTl.setSize(280,130); aTl.move(150, 150); aTl.setStyle("contentPadding", 5); 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 aplikace Flash Professional.

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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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ů. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu UILoader z panelu Komponenty do panelu Knihovna. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript: 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 aplikace Flash Professional.

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 aplikace Flash Professional.

Vytváření aplikací s komponentou UIScrollBar Následuje postup přidání komponenty UIScrollBar do aplikace při vyvíjení. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 7 Zvolte příkaz Ovládání > Testovat film.

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: 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu ScrollBar do panelu Knihovna. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a vložte následující kód jazyka ActionScript:


97


import flash.net.URLLoader; import fl.controls.UIScrollBar; import flash.events.Event; 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.


POUŽÍVÁNÍ KOMPONENT JAZYKA ACTIONSCRIPT 3.0 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: import fl.controls.ComboBox; 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. import flash.text.TextFormat; var tf:TextFormat = new TextFormat(); tf.font = "Georgia"; 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. */ var tf:TextFormat = new TextFormat(); 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; import fl.controls.Button; var tf:TextFormat = new TextFormat(); 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; var tf:TextFormat = new TextFormat(); tf.color = 0xFF0000; StyleManager.setStyle("textFormat", tf);

4 Přidejte následující kód na panel Akce a zaplňte seznam textem.


101


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;

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. 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 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);

14 Zvolte Ovládání > Testovat film.


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"); }

4 Zvolte Ovládání > Testovat film. 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


8 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. 9 Zvolte Ovládání > Testovat film. 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. 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 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. 5 Nastavte ovládání zvětšení na 800% a zvětšete ikonu pro provádění úprav. 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. 9 Zvolte Ovládání > Testovat film.

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). 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 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);

4 Zvolte Ovládání > Testovat film. 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. 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 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í. 6 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.


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í 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 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. 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 2 Přetáhněte komponentu ComboBox na vymezenou plochu a přiřaďte jí název instance aCb. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a zadejte následující kód:


110


import fl.data.DataProvider; 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"} ]; aCb.dataProvider = new DataProvider(items);


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. 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0).


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. 8 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. 9 Zvolte Ovládání > Testovat film.

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 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, 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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.data.DataProvider; fl.controls.ScrollPolicy;

// Create a new DataGrid component instance. var aDg:DataGrid = new DataGrid(); 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.columns[1].width = 70; aDg.columns[2].width = 230; aDg.columns[3].width = 60; 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. 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 2 Přetáhněte komponentu DataGrid na vymezenou plochu a přiřaďte jí název instance aDg. 3 Otevřete panel Akce, na hlavní Časové ose vyberte Snímek 1 a zadejte následující kód:


114


import fl.data.DataProvider; 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); aDg.columns[0].width = 80; aDg.columns[1].width = 80; var tf:TextFormat = new TextFormat(); 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 8 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. 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


import fl.data.DataProvider; bldRosterGrid(aDg); var aRoster:Array = new Array(); 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"} ]; aDg.dataProvider = new DataProvider(aRoster); function bldRosterGrid(dg:DataGrid){ dg.setSize(400, 130); dg.columns = ["Name", "Home"]; dg.move(50,50); dg.columns[0].width = 120; dg.columns[1].width = 120; };

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 komponentu na vymezené ploše a použijte nástroj Volná transformace nebo kterýkoliv příkaz z nabídky Změnit > 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. */ var tf:TextFormat = new TextFormat(); tf.color = 0xFF0000; /* 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 ActionScript 3.0 aplikace Flash Professional.

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 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 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ý. 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 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.setSize(145, 200); 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.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. 1 Vytvořte nový dokument souboru Flash (ActionScript 3.0). 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. 8 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. 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.setSize(145, 200); 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.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í 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 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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: var tf:TextFormat = new TextFormat(); 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. 6 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. 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. 11 Zvolte Ovládání > Testovat film.

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í 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 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. 1 Vytvořte nový soubor FLA. 2 Přetáhněte komponentu ProgressBar z panelu Komponenty na vymezenou plochu a přiřaďte jí název instance myPb. 3 Na panelu Akce zadejte do Snímku 1 hlavní Časové osy následující kód: 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. 1 Vytvořte nový soubor FLA. 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. 4 Nastavte ovládání zvětšení na 400% a zvětšete ikonu pro provádění úprav.


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. 7 Klepnutím na tlačítko Zpět umístěné vlevo na panelu úprav nad vymezenou plochou se vraťte do režimu úpravy


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í 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(). 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ý. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. var tf:TextFormat = new TextFormat(); tf.color = 0x00FF00; tf.font = "Georgia"; 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. 5 Zvolte Ovládání > Testovat film.


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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu RadioButton na vymezenou plochu a poklepejte na ni, aby se otevřela její paleta vzhledů. 3 Nastavte ovládání zvětšení na 800% a zvětšete ikonu pro provádění úprav. 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. 8 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. 9 Zvolte Ovládání > Testovat film. 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í 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 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 4 Na panelu Akce zadejte do Snímku 1 hlavní Časové osy následující kód: mySp.setStyle("contentPadding", 5);

Všimněte si, že odsazení se aplikuje mezi okraj komponenty a její obsah, na vnější straně posuvníků. 5 Zvolte Ovládání > Testovat film.

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 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 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 12 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.


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 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 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. var tf:TextFormat = new TextFormat(); 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

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. 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. 1 Vytvořte nový soubor Flash. 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. 6 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. 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. 10 Klepnutím na tlačítko Zpět umístěné vlevo na panelu úprav nad vymezenou plochou se vraťte do režimu úpravy


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á. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. var tf:TextFormat = new TextFormat(); tf.color = 0x0000FF; tf.font = "Verdana"; tf.size = 30; tf.align = "center"; 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: 1 Vytvořte nový soubor Flash. 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. 4 Nastavte ovládání zvětšení na 800% a zvětšete ikonu pro provádění úprav. 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í. 7 Klepnutím na tlačítko Zpět umístěné vlevo na panelu úprav nad vymezenou plochou se vraťte do režimu úpravy


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 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, 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. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 2 Přetáhněte komponentu TileList na vymezenou plochu a přiřaďte jí název instance myTl. 3 Přidejte následující kód na panel Akce do Snímku 1 Časové osy.


131


myTl.setSize(100, 100); myTl.addItem({label:"#1"}); myTl.addItem({label:"#2"}); myTl.addItem({label:"#3"}); myTl.addItem({label:"#4"}); var tf:TextFormat = new TextFormat(); tf.font = "Arial"; tf.color = 0x00FF00; tf.size = 16; tf.italic = true; tf.bold = true; tf.underline = true; tf.align = "center"; 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

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. 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. 7 Zvolte Ovládání > Testovat film. 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í 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, 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. 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. Následující příklad ilustruje změnu barvy jezdce a tlačítek se šipkami u komponenty UIScrollBar. 1 Vytvořte nový dokument Flash (ActionScript 3.0). 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. 5 Nastavte ovládání zvětšení na 400% a zvětšete ikonu pro provádění úprav. 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.


POUŽÍVÁNÍ KOMPONENT JAZYKA ACTIONSCRIPT 3.0 Použití komponenty FLVPlayback

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.*; var my_FLVPlybk = new FLVPlayback(); my_FLVPlybk.x = 100; my_FLVPlybk.y = 100; addChild(my_FLVPlybk); my_FLVPlybk.skin = "file:///Macintosh HD:Applications:Adobe Flash CS5:Configuration:FLVPlayback Skins:ActionScript 3.0SkinOverPlaySeekMute.swf" my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/water.flv";

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 section <script language="javascript"> AC_FL_RunContent = 0; <script language="javascript"> DetectFlashVer = 0; <script src="AC_RunActiveContent.js" language="javascript"> <script language="JavaScript" type="text/javascript"> //and from the section <script language="JavaScript" type="text/javascript">

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.' + 'Get Flash '; document.write(alternateContent); // Insert non-Flash content. } } // --> <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. Get Flash

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í příručce jazyka ActionScript 3.0 aplikace Flash Professional.


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: 1 Poklepáním na buňku Hodnota u parametru cuePoints v okně Inspektor komponent otevřete dialogové okno Startovací body videa Flash. 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. 5 Klepnutím na tlačítko OK uložte provedené změny.

Povolení nebo zakázání vloženého startovacího bodu souboru FLV: 1 Poklepáním na buňku Hodnota u parametru cuePoints v okně Inspektor komponent otevřete dialogové okno Startovací body videa Flash. 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. 5 Klepnutím na tlačítko OK uložte provedené změny.

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; my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/cuepoints.flv" 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.*; my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/cuepoints.flv" 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 my_FLVPlybk.addEventListener(VideoEvent.READY, ready_listener); function ready_listener(eventObject:VideoEvent):void { 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 ActionScript 3.0 pro aplikaci Flash Professional. 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.*; my_FLVPlybk.addEventListener(VideoEvent.READY, ready_listener); function ready_listener(eventObject:Object):void { my_FLVPlybk.seekToNavCuePoint("point2"); } my_FLVPlybk.addEventListener(MetadataEvent.CUE_POINT, cp_listener); function cp_listener(eventObject:MetadataEvent):void { 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.addEventListener(VideoEvent.READY, ready_listener); function ready_listener(eventObject:VideoEvent):void { my_FLVPlybk.setFLVCuePointEnabled(false, "point2"); my_FLVPlybk.setFLVCuePointEnabled(false, "point3"); } my_FLVPlybk.addEventListener(MetadataEvent.CUE_POINT, cp_listener); function cp_listener(eventObject:MetadataEvent):void { trace("Cue point time is: " + eventObject.info.time); trace("Cue point name is: " + eventObject.info.name); 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.source = "http://www.helpexamples.com/flash/video/cuepoints.flv" my_FLVPlybk.addASCuePoint(2.02, "ASpt1");//add AS cue point my_FLVPlybk.addASCuePoint(3.4, "ASpt2");//add 2nd Aspt my_FLVPlybk.addEventListener(MetadataEvent.CUE_POINT, cp_listener); function cp_listener(eventObject:MetadataEvent):void { trace("Cue point name is: " + eventObject.info.name); 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"); my_FLVPlybk.addEventListener(VideoEvent.READY, ready_listener); function ready_listener(eventObject:VideoEvent):void { // add a second video player and create a cue point for it my_FLVPlybk.activeVideoPlayerIndex = 1; my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/water.flv"; my_FLVPlybk.addASCuePoint(3, "2nd_switch"); my_FLVPlybk.activeVideoPlayerIndex = 0; };

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 my_FLVPlybk.addEventListener(MetadataEvent.CUE_POINT, cp_listener); // add the handler function for the cuePoint event function cp_listener(eventObject:MetadataEvent):void { // 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.activeVideoPlayerIndex = 1; 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

ActionScript 3.0 pro aplikaci Flash Professional. 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 ActionScript 3.0 aplikace Flash Professional. 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> <meta base="rtmp://myserver/myapp/" /> <switch>

Používání komponent jazyka ACTIONSCRIPT 3.0

Recommend Documents