Flash MX 2004 by Zoner Press

CYAN

MAGENTA

YELOW

CYAN

BLACK

MAGENTA

YELOW

E N C Y K L O P E D I E

Andreas Heim, spolupráce Troy Park

PROJEKT 8 Úprava textu pomocí CSS

„Mým hlavním cílem je usnadnit vytváření hardwarových a softwarových řešení, která umožní informacím zvládnout nekonečnou vzdálenost v téměř nulovém čase.“

Todd Marks

PROJEKT 11 Úprava textu pomocí CSS

„Nebylo by to skvělé, kdyby Flash umožňoval používat existující CSS soubory pro formátování textů ve Flashi? No, ale to je přesně to, co Flash MX 2004 dokáže!“

„JSFL – JavaScript pro Flash – je pravděpodobně nejvíce vzrušujícím prvkem Flashe MX 2004, a určitě je to věc, která nás na nové verzi nejvíce nadchla.“

Michelangelo Capraro a Duncan McAlester

PROJEKT 9 Pokročilé video ve Flashi „V rámci tohoto projektu jsem chtěl vytvořit jednoduché a přitom dostatečně všestranné rozhraní pro nelineární ovládání videa.“

James Williamson

PROJEKT 12 Příprava rozhraní pro kapesní PC „Toužím vytvářet funkční rozhraní, která jsou umělecká ve své podstatě. Doufám, že tento projekt inspiruje ty, kteří navrhují rozhraní, vyzkoušet něco nového.“

Bill Spencer

magický svět

Flash MX 2004 MACROMEDIA

Dvojice autorů za přispění dalších významných představitelů ﬂashovské komunity připravila zajímavou knihu. Zajímavou, ale také rozporuplnou. Pokud hledáte základní učebnici Flashe MX 2004 nebo úvod do ActionScriptu, zvolte něco jiného. Běžte od této knihy rychle pryč. Pokud ale chcete vidět, jak přistupují k Flashi profesionálové, pokud vás zajímá, co vše a jak se dá v poslední verzi Flashe tvořit, máte v rukou tu správnou knihu. Podstatou zde není výuka a dodržování všech možných zásad, pravidel a doporučení pro správný „vývojářský styl“, důraz je kladen na řešení problému s hlubokou znalostí věci. Postupy každého ze spoluautorů jsou do značné míry osobité – a troufnu si říci, že by se daly v některých případech upravit a možná vylepšit –, vždy jsou ale přímočaré a elegantně řešící podstatu věci. Kniha, která vyšla anglicky pod názvem Macromedia Flash MX 2004 MAGIC a které jsme dali jméno magický svět Macromedia Flash MX 2004, by měla být spíše vstupenkou do světa skutečné magie provozované s programem Flash MX 2004. Záleží pouze na vás, zda vstoupíte a budete se bavit tak, jak to dělají autoři této knihy, nebo zda opustíte představení s tím, že už jste to vše viděli, všechno to znáte a možná byste to svedli i lépe. Čtenáři se zájmem o využití nových vlastností Flashe MX 2004 zde najdou řadu podnětů, ať už pro tvorbu interaktivního rozhraní nebo využití CSS, XML a HTML, programování her a řady dalších rozmanitých aplikací. Originální vydání mělo na obálce zajímavý obrázek noční ulice z New Yorku, který ale nebylo možné s ohledem na autorská práva použít. Doufáme ale, že se nám atmosfétu „magického světa“ podařilo navodit i obrázkem naším. Pavel Kristián © Foto: Jiří Heller

ENCYKLOPEDIE WEBDESIGNERA Pod tímto logem vycházejí publikace určené každému zájemci o tvorbu webových stránek; od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje webdesignér při každodenní práci. Na vydavatelský plán i slevy, které můžete získat, se informujte na adrese vydavatelství. Věrným čtenářům je určen výhodný PRÉMIOVÝ PLUS PROGRAM.

CYAN flash_magic_2.indd 1

ZONER software, s.r.o. významný producent software v oblasti digitální fotograﬁe, počítačové graﬁky a multimédií, poskytovatel internetových služeb, souvisejících s prezentací na internetu a e-komercí, a nakladatelství odborné literatury.

Zoner Press tel.: 532 190 883 fax: 543 257 245 knihy@zoner.cz http://www.zonerpress.cz ZONER software, s.r.o. Koželužská 7, 602 00 Brno

MAGENTA

Flash MX 2004

„Dokázal jsem si představit, jak interaktivní video, reagující jen na přejetí kurzorem myši, dokáže zatraktivnit webové stránky – a hlavně: ještě jsem to nikde neviděl!“

PROJEKT 10 Tvorba informačního systému

magický svět

Fotograﬁe z nabídky fotobanky HELLER.CZ www.heller.cz

KATALOGOVÉ ČÍSLO: ZR408

W E B D E S I G N E R A

MACROMEDIA

Flash MX 2004 12 unikátních projektů

10 významných osobností

magický svět

PROJEKT 7 Interaktivní ﬁlmový pás

ENCYKLOPEDIE WEBDESIGNERA

Michelangelo Capraro Duncan McAlester

BLACK

ISBN 80-86815-06-4

9788086

YELOW

815060

www.zoner.cz BLACK

Michelangelo Capraro Duncan McAlester CYAN

MAGENTA

YELOW

„Bylo mi jasné, že budu-li s Flashem pracovat déle, první věc, kterou musím udělat, je naučit se stavět stránky modulárně tak, že už nikdy neuslyším, že by uživatelé mou stránku přirovnávali ke stání ve frontě u poštovní přepážky.“

PROJEKT 4 Elektronické haiku s trochou zábavy s mixováním zvuku „Společně vytvoříme jednoduché rozhraní, které umožňuje uživateli manipulovat se zvukem, vytvářet rytmy a vniknout do hravé tvorby hudební kompozice.“

Robert Hoekman, Jr.

Aria Danika společně s Chrisem Normanem, autorem Geishy

PROJEKT 2 Vytvoření interaktivní prezentace se zabudovanou funkcí tisku

PROJEKT 5 Návrh a hodnocení hry bludiště ve stylu Pac-Man

„Vybavily se mi znuděné tváře posluchačů řady jiných prezentačních akcí a bylo mi jasné, že udržet pozornost zvládne jen Flash.“

„Hry založené na dlaždicích existují již dlouhou dobu a mohou sloužit jako rozumný způsob, jak vytvořit herní prostředí s minimální potřebou paměti.“

Robert Hoekman, Jr.

Capraro McAlester

PROJEKT 1 Dynamická tvorba www stránky

Aria Danika design postavy od Chrise Normana

PROJEKT 3 Okouzlení uživatelů transparentní, ve Flashi vytvořenou reklamou

PROJEKT 6 Vytvoření navigačního 3D prostředí se třídami ActionScript 2

„Vytvoření inzerátu, který překrývá obsah, nám umožňuje zaujmout pozornost uživatele a přitom ho inzerátem iritovat pouze v minimální míře. Klienti milují naše výsledky, což nám samozřejmě umožňuje překračovat hranice standardních, obdélníkových bannerů.“

„Jak vytvořit jednoduché 3D navigační prostředí za pomoci vlastních tříd ActionScriptu 2. Dokončený projekt umožní pohybovat se uvnitř 3D scén za použití klávesnice, prohlížet si informace o objektech, které si vyberete a přecházet ze scény na scénu. “

DallaVilla Design

Chad Corbin

BLACK 29.6.2004 11:55:18

MAGICKÝ SVĚT Macromedia

Flash MX 2004 ◆ 12 jedinečných projektů ◆ 10 významných autorů

Michelangelo Capraro a Duncan McAlester a mistři magie Chad Corbin, DallaVilla Design, Aria Danika, Andreas Heim, Robert Hoekman, Jr., Todd Marks, Bill Spencer a James Williamson

Authorized translation from the English language edition, entitled MACROMEDIA FLASH MX 2004 MAGIC, 1st Edition, 0735713774 by CAPRARO, MICHELANGELO; MCALESTER, DUNCAN; BIANCHI, ERIC; CORBIN, CHAD; DALLAVILLA DESIGN; DANIKA, ARIA; HEIM, ANDREAS; HOEKMAN, ROBERT; MARKS, TODD; SPENCER, BILL; WILLIAMSON, JAMES, published by Pearson Education, Inc, publishing as New Riders; Copyright © 2004 by New Riders Publishing. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. CZECH language edition published by ZONER software s.r.o., Copyright © 2004 by ZONER software s.r.o. Autorizovaný překlad anglického vydání nazvaného MACROMEDIA FLASH MX 2004 MAGIC, první vydání, ISBN 0735713774, autoři: CAPRARO, MICHELANGELO; MCALESTER, DUNCAN; BIANCHI, ERIC; CORBIN, CHAD; DALLAVILLA DESIGN; DANIKA, ARIA; HEIM, ANDREAS; HOEKMAN, ROBERT; MARKS, TODD; SPENCER, BILL; WILLIAMSON, JAMES, vydal Pearson Education, Inc, ve vydavatelství New Riders; Copyright © 2004 New Riders Publishing. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována nebo předávána žádnou formou nebo způsobem, elektronicky ani mechanicky, včetně fotokopií, natáčení ani žádnými jinými systémy pro ukládání bez výslovného svolení Pearson Education, Inc. České vydání vydal ZONER software s.r.o., Copyright © 2004 ZONER software s.r.o.

Magický svět Macromedia Flash MX 2004 Autoři: Michelangelo CAPRARO, Duncan MCALESTER, Eric BIANCHI, Chad CORBIN, DALLAVILLA DESIGN, Aria DANIKA, Andreas HEIM, Robert HOEKMAN, Todd MARKS, Bill SPENCER, James WILLIAMSON Copyright © ZONER software s.r.o. Vydání první v roce 2004. Všechna práva vyhrazena. KATALOGOVÉ ČÍSLO:

ZR408

Zoner Press ZONER software s.r.o. Koželužská 7, 602 00 Brno Překlad: Lucie Helešicová, Ing. Pavel Kristián Odpovědný redaktor: Ing. Pavel Kristián © Foto: Jiří Heller, HELLER.CZ s.r.o., www.heller.cz © Cover a DTP: Ing. Pavel Kristián Informace, které jsou v této knize zveřejněny, mohou byt chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb. Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani distribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí. Veškeré dotazy týkající se distribuce směřujte na: Zoner Press ZONER software s.r.o. Koželužská 7, 602 00 Brno tel.: 532 190 883, fax: 543 257 245 e-mail: knihy@zoner.cz http://www.zonerpress.cz

ISBN 80-86815-06-4

Na původním anglickém originálu knihy se podíleli:

Publisher Stephanie Wall Production Manager Gina Kanouse Senior Acquisitions Editor Linda Bump Harrison Senior Development Editor Jennifer Eberhardt Senior Project Editor Kristy Hart Copy Editor Karen A. Gill Indexer Angie Bess Composition Kim Scott Manufacturing Coordinator Dan UhrigInterior Designer Alan Clements Cover Designer Aren Howell Media Developer Jay Payne Marketing Scott Cowlin Tammy Detrich Hannah Onstad Latham Publicity Manager Susan Nixon

OBSAH O autorech

Techničtí redaktoři a korektoři

Než se pustíte do čtení

Jak vytěžit z této knihy co nejvíc Konvence užité v publikaci

10 10

Rádi bychom znali vaše názory

1 Dynamická tvorba www stránky

Funguje to následovně Příprava k práci Aby tlačítka fungovala Použití MovieClipLoader k načtení obsahu Užití TextField.StyleSheet pro aplikaci CSS Využití objektu LoadVars k nahrání externího textu Vytvoření sdílené knihovny položek Projekt v akci Nyní zkuste toto

2 Vytvoření interaktivní prezentace se zabudovanou funkcí tisku Funguje to následovně Příprava k práci Nastavení šablony Odstranění položek a vrstev Vkládání nových položek Vytvoření animace použité při přechodu Vytvoření přechodu mezi slidy Nastavení MovieClip tak, aby fungoval mezi slidy Příprava celé prezentace pro tisk Nyní zkuste toto

3 Okouzlení uživatelů transparentní, ve Flashi vytvořenou reklamou Funguje to následovně Příprava k práci Nastavení plochy

13 14 14 16 18 20 23 25 27

28 29 30 30 30 31 33 34 36 39 42

44 45 46 46

Tvorba inzerátu ve Flashi Začlenění ﬂashové upoutávky do HTML Spoluráce s jinými servery Nyní zkuste toto

4 Elektronické haiku s trochou zábavy s mixováním zvuku Funguje to následovně Příprava k práci Vytvoření základní mřížky Tvorba mixovacího rozhraní Přidávání zvuků Skriptování hudebních políček Skriptování přehrávací hlavy Skriptování tlačítek PLAY a STOP Přidání ovladače pro kontrolu hlasitosti Všechno dáme dohromady Nyní zkuste toto

5 Návrh a hodnocení hry bludiště ve stylu Pac-Man Funguje to následovně Příprava k práci Vytvoření úvodu hry – intro Vydlaždičkování bludiště Detekce kolize Pohyb postavy Přidání zvuku Počítání skóre Nyní zkuste toto

6 Vytvoření navigačního 3D prostředí se třídami ActionScript 2 Funguje to následovně Příprava k práci Tvorba třídy Generic Tvorba třídy Clip pro řízení viditelných prvků Třída Camera pro uchování globální proměnné Třída Scene pro ovládání vlastností scény

46 48 50 51

52 53 54 54 56 58 60 61 62 66 67 69

70 71 72 72 73 77 80 83 84 85

86 87 88 88 89 90 91

OBSAH Třída Quaternion pro rotaci objektů na scéně Třída Node pro deﬁnici pozice v prostoru 3D Tvorba položek People a Background Začlenění tříd do FLA Spuštění pohybů na scéně pomocí klávesnice Nyní zkuste toto

7 Vytvoření interaktivního ﬁlmového pásu Funguje to následovně Příprava k práci Základní nastavení Přidání videoklipu Upravení parametrů komponenty Dynamické nastavení velikosti komponenty Použití komponenty jako navigační element Nyní zkuste toto

8 Úprava textu pomocí CSS Funguje to následovně Příprava k práci Vytvoření jednoduchého seznamu stylů Aplikace CSS Využití tříd CSS pro formátování textu ve Flashi Použití externích CSS souborů Praktické procvičení: Načítání obrázků ze značek <img> Nyní zkuste toto

9 Pokročilé video ve Flashi Funguje to následovně Příprava k práci Načtení objektu typu Variable Příprava externího videa Příprava nelineárního videa Vytváření klipů s doplňky oblečení Ovládání videa Načítání externího videa Skriptování ovladačů videa Nyní zkuste toto

92 93 94 96 98 99

100 101 102 102 102 104 105 106 108

110 111 112 112 113 114 116 118 120

122 123 124 124 125 128 129 130 131 133 138

10 Tvorba informačního systému Funguje to následovně Příprava k práci Konstrukce kontejnerového souboru XML Příprava projektu ve Flashi Spojení všech komponent Nyní zkuste toto

11 Ukázka JSFL na textovém efektu Funguje to následovně Příprava k práci Vytváření GUI pro efekt s XML Vytvoření iniciačního kódu pro spuštění efektu Uložení originálního textu v editovatelném formátu Rozlámání textu na jednotlivé znaky Přeměna jednotlivého znaku na symbol Přidání symbolů do knihovny Nastavení směru pohybu Aplikace parametrů na každé písmeno Tvorba animace každého písmene Časová osa efektu a hlavní časová osa Odstranění efektu Nyní zkuste toto

12 Příprava rozhraní pro kapesní PC Funguje to následovně Příprava k práci Nastavení plochy Vytváření položek pozadí Projektování posuvného pozadí Vytváření navigace Přidání ActionScriptu Vytvoření uživatelského prostředí jednoduchého pro navigaci Vytváření posuvného panelu Nyní zkuste toto

Rejstřík

140 141 142 142 144 145 149

150 151 152 152 153 155 156 158 159 160 161 162 163 164 165

166 167 168 168 168 169 171 172 174 177 179

180

ÚVOD

O autorech Michelangelo Capraro Michelangelo je multimediální designér a majitel Tin Lion Creative. Vystupuje na různých akcích, které se týkají oblasti multimediálního programování, designu a použitelnosti, a více než osm let působil jako návrhář uživatelského rozhraní a interaktivity pro klienty včetně obchodních B2B firem, společností specializujících se na vývoj operačních systémů, software nebo giganty na poli zábavy. Kariéru započal navrhováním multimediálních CD-ROMů, poté se začal věnovat zábavnímu průmyslu (design webových stránek pro filmové a televizní show). Michelangelo založil několik designových skupin, vytvořil také svou vlastní firmu a pracoval jako návrhář v Be Inc. a později v PalmSource, Inc., kde vedl skupinu vyhodnocování uživatelských zkušeností – user experience. Je spoluautorem knihy Skip Intro: Macromedia Flash Usability and Interface Design a vede studia multimediálního designu. Poděkování: Rád bych poděkoval týmu New Riders, zvláště Jennifer a Lindě, za to, že se s námi podílely na tomto projektu a popohnaly nás, když bylo potřeba. Děkuji Duncanovi, spoluautorovi, který mi toto vše umožnil a byl mi skvělým partnerem. Děkuji také Karen, které nevadil nedostatek spánku, za její lásku a podporu.

Duncan McAlester Duncan žije na pláži a jeho přáním je jednoho dne odejít do důchodu. Zatímco žije prací, neustále se diví, že se najdou lidé, kteří jsou ochotni platit jeho společnosti Breathe (www.breathedesign.com) za programování a design. Pokud Duncan zrovna nevytváří interaktivní grafiku, nejspíš ho najdete na Univerzitě v Kalifornii, kde učí tvorbu grafického uživatelského rozhraní nebo bude sedět na semináři kreslení na živo na Uměleckém institutu v Jižní Kalifornii (jeho alma mater), nebo bude určitě klábosit s malou skupinkou uživatelů Flashe v taverně, kde se právě zastavil, aby je pozdravil. Přednáší také o různých tématech souvisejících s designem, multimediemi, designem rozhranní a jen zřídka si najde čas na spaní.

ÚVOD

Chad Corbin Chad je Flash vývojový projektant, oceňovaný a dobře známý díky své práci na lo9ic.com. Původně vystudoval na strojního inženýra a s designem webových stránek začal, aby uspokojil své kreativní tendence, čímž si z občasného koníčka vybudoval kariéru. Dnes Chad pracuje na Wall Street On Demand, kde dělá na vývoji aplikací Flash a finančnických webových stránek pro vedoucí investiční firmy. Pokud nepracuje, rád jezdí na kole nebo dovádí v horách blízko svého domova v Boulder, Coloradu. Poděkování: Rád bych poděkoval Shan za to, že se vyrovnala se všemi nočními přesčasy a dlouhými hodinami kódování, svým rodičům za podporu ve všem, co dělám, a lidem, co dělají Flash, za jejich velkorysost, kreativitu, obrovské zkušenosti a bohatost nápadů.

DallaVilla Design Jádrem týmu DallaVilla Design jsou: Chris Dallavilla ( ), kreativní vedoucí, Ron Thompson ( ), umělecký vedoucí, Drew Horton ( ), reklamní textař a Rick Williams ( ), vývojový projektant. Jsou úzce propojenou skupinou, která se věnuje produktivní, inovační a vzrušující práci. V posledních pěti letech DVd vytvořili úspěšné projekty, které získaly četná ocenění v oblasti zábavního a módního průmyslu. Dělají jak pro malé společnosti, tak např. i pro Fortune 500. Studio má filozofii, jež je kombinací skvělého designu, úchvatných příběhů a technologických vrcholů. Toto vše dohromady nabízí pokročilý interaktivní zážitek. Přestože pracují tvrdě, určitě si najdou i čas na společné posezení. Tyto

společné chvíle mohou nezasvěcenému připadat jako hraní video her, ale celý tým nás ujišťuje, že je v tom něco mnohem víc. Chcete-li se dozvědět o DVd něco víc, najdete to na www.dvdsgn.com.

Aria Danika Aria je interaktivní designérkou a senior moderátorkou ve Flashkit.com a je členkou Hypermedia Research Centre v Londýně, kde také dokončila svá studia v oboru „hypermedia a interaktivní design“. Původním vzděláním fotografka se začala věnovat interaktivním médiím díky přípravě na získání titulu B.A. v oblasti multimédií a fotografie na Westminster Univesity v Londýně. Aria působila jako nezávislý pracovník pro různé televizní společnosti ve Velké Británii, např. TV3, VH-1 nebo Granada. Později se na pět let přidala k BBC, kde navrhovala a vytvářela bohaté mediální aplikace a hry. Aria v mnohém přispěla do knihy Flash MX Magic (New Riders Publishing, 2002) a napsala spoustu článků o designu her a interaktivním designu. Nyní žije v Brooklynu, NY. Volný čas tráví jízdou na kolečkových bruslích, beta testováním her a sledováním krátkých filmů. Ráda se také věnuje zkoumáním interaktivity z různých úhlů pohledu, díky čemuž vytvořila několik zvukových i video experimentů, instalací a webových „hraček“ ve Flashi či Directoru (www.openedsource.net) Poděkování: Ráda bych mnohokrát poděkovala mé spolubydlící Chris za to, že mě zásobovala kávou, vyzývala ke GBA hrám a testovala pro mě. Díky také členům flashkit.com za to, že mě tolik naučili. Andy Camerone, díky za inspiraci. Yoshi, díky za to, žes mě udržel čilou po celou noc, co jsem kódovala u počítače. Mnohokrát děkuji Lindě Bump Harrison a Jennifer Eberhardt v New Riders. Nakonec díky mým rodičům.

ÚVOD

Andreas Heim Andreas je z malého města Hattenhofenu v Německu, blízko Stuttgartu, centra německého automobilového průmyslu. Původně zamýšlel, že se stane profesionálním hráčem fotbalu. Jeho vzdělání ho však zavedlo do prostředí mediálních studií a programování. Poté, co vytvořil interaktivní CD-ROM, se začal soustředit místo na film a video na interaktivní media. Jeho škola po něm požadovala šestiměsíční stáž, která ho zavedla do Smashing Ideas, kde si německého praktikanta, hráče fotbalu a milovníka piva, vysoce vážili. V Seattlu se mu líbilo natolik, že si pobyt o rok prodloužil, a nakonec zůstal natrvalo. Dnes Andreas pracuje na různých digitálních projektech, včetně Flashe, nebo si užívá dny svého volna na snowboardu a hraním fotbalu. Poděkování: Díky Troy Parkerovi za jeho inspiraci a vzor, skvělým přátelům v New Riders za to, že mě nechali přispět do další knihy, týmu ve Smashing Ideas a Anně Hall za její podporu.

Robert Hoekman, Jr. Robert je autorizovaný Macromedia Flash MX Designer, který pracuje s Flashem již od jeho třetí verze. Je zakladatelem a manažerem Flash and Multimeda Users Group v Arizoně (FMUG/AZ), oficiálně uznávané Macromedia User Group (MMUG) s více než 130 členy. Robert pracuje na volné noze a dělá Flash designéra, píše a vytvořil obsahy mnoha webových stránek a CD-ROMů pro publikum od sběratelů hudby po management Fortune 1000. Je zároveň recenzentem i dodavatelem

obsahu sekce Flash InformIT.com a přispívá do weblogu InformIT´s Flash. Poděkování: Nejraději bych poděkoval své nejlepší přítelkyni, své ženě Christine, že mě přiměla prosedět sobotní odpoledne, abych se naučil psát HTML. Bez ní bych asi pořád nevěděl, čím chci být, až vyrostu.

Todd Marks Todd je aktivním vývojářem, designérem, instruktorem a autorem systémů pro zobrazování informací. V roce 2000 přešel z vyučování matematiky a informatiky ve veřejném sektoru do VP Research and Development. V roce 2002 založil MindGrub Technologies, LLC a také portál o informačních technologiích www.mindgrub.net. V roce 2003 se přidal k PopeDeFlash jako vedoucí technologie pro Unity Project, www.theunityproject.com. Tod je autorizovaný Macromedia Developer a designér. Jeho práce mu přinesla tři nominace na filmovém festivalu Flashe, titul „Macromediální stránka dne“, dvě ceny Addy a několik inspirativních vztahů. Napsal a přispěl k napsání spousty knih, jako Macromedia Flash MX Video, Foundation Dreamweaver MX, Beginning Dreamweaver a dalších. Poděkování: Rád bych poděkoval Danovi DesRosiers, Chrissy Rey a zbytku posádky v ARINC za skvělý FIDS projekt.

ÚVOD

Bill Spencer Bill je společně s Toddem Marksem zakladatelem The Unity Project.com (www.theunityproject. com). Cílem projektu je skloubit nejlepší kód a umění v jedno. Bill je také zakladatelem Popedeflash.com (www.popedeflash.com), první Flash komunity věnující se 3D. Je velmi známý řečník, autor a umělec. Mluvil na spoustě konferencích, včetně známé série konferencí FlashForward nebo na FlashKit konferencích v Austrálii a USA. Pracoval jako recenzent a odborný redaktor pro New Riders a Friends of Ed. Objevil se v časopise Shift, World and I a Computer Arts a dalších odborných měsíčnících. Jeho práce se dostala až do finále na Flash filmovém festivalu. Pracoval jako beta tester pro Macromedia, Adobe, Electric Rain a Discreet a také jako technický poradce pro Electric Image. Dále pracoval jako senior moderátor na FlashKit.com, je členem Flashdevils.com a pracuje jako moderátor na UltraShock.com. Poděkování: Rád bych poděkoval své ženě Sherri za její lásku a podporu během tohoto projektu a při všech dalších pracích, konferencích a podobně. Bez její podpory by Pope de Flash nebyl. Děkuji také své malé jezevčici Daisey, že mě nutila dělat si spoustu přestávek a nezapomínat se bavit. A o tom to je.

James Williamson James je šéfem Trainning center v Lodestone Digital a má více než devítiletou zkušenost s návrhem tiskovin, designem webových stránek a digitálním prepressem. Bydlí v překrásných Rock Hill na jihu Kalifornie a dojíždí každý den přes hranice. Kromě jeho práce v Lodestone Digital je prezidentem Charlotte Society of Communicating Art a členem školního poradního sboru Uměleckého institutu v Charlotte. James byl klíčovým mluvčím několika událostí včetně DeCon a FlashForward. Nejvíc hrdý je na svůj nejlepší projekt – Morganu Williamsovou, narozenou 26. června 2003. Poděkování: Nejradši bych poděkoval Joshi Cavalieru za kritiku a radu a Lindě Bump Harrison, Jennifer Eberhardt a všem dalším v New Riders za příležitost pracovat na tak báječné knize. Děkuji také Dianě Johnosonové ze Sorenson Media a Kymberlee Weilové z FlashForward. V neposlední řadě také děkuji Willu Hinesovi za to, že mi celé ty roky odpovídal na e-maily a tím mi pomohl na cestě k web designu. Naposledy děkuji celé svojí rodině za podporu a mé ženě Holly a narozené dceři Morgan – vítám tě na světě, srdíčko!

ÚVOD

Techničtí redaktoři a korektoři Cílem New Riders je příprava technicky dokonalých knih. Spoléháme se na dovednost a schopnosti řady odborníků, kteří vedou autory při jejich tvůrčí činnosti a přípravě rukopisu. Následující specialisté a recenzenti se významně podíleli na této publikaci a my děkujeme za jejich těžkou práci a obětování.

Erik Bianchi Erik má více než šestileté zkušenosti s rozvojem Flash her a aplikací pro společnosti Fortune 50 a Fortune 500. Dnes pracuje jako softwarový inženýr pro Surgical Information systém, kde je odpovědný za design, vývoj a implementaci klientských produktů. Erik je také aktivním členem věčně rostoucí Flash komunity a přispěl několika publikacemi. Ve svém volném čase rád hraje počítačové hry. Chcete-li vědět více, jděte na www.erikbianchi.com.

Marcus J. Dickinson Marcus je Macromedia developer na volné noze a působí jako statutární školitel pro oblast Toronta. Spousta severoamerických společností již využila jeho dovedností. Aktivně přispívá do flashové komunity v Torontu, kde moderuje několik fór. Flashi věnuje tolik nadšení, že je těžké mu konkurovat. Jeho osobní projekt Diaries of War slibuje jedinečnost a chytlavost (www.diariesofwar.com).

Laura McCabe Laura je vývojářkou a návrhářkou v oblasti multimédií, dnes působí v Baltimore, Maryland. Její vyhraněné zájmy ji vedly k tomu, že vystudovala psychologii a umění, design a multimédia, a dnes pracuje jako spisovatelka, školitelka a redaktorka. Své dovednosti uplatňuje ve webovém designu a rozvoji informační architektury; přitom spolupracuje s klienty jako AARP, Hershey nebo FDA. Ve svém volném čase se věnuje fotografování a sbírání starých knih.

Bill Perry Bill je developer na volné noze, který se specializuje na rozvoj aplikací pro „smart device – šikovná zařízení“, včetně handheldů, kapesních počítačů, PDA atd. Působí v rámci významného zdroje pro vývoj Flash aplikací pro mobilní zařízení www.pocketpcflash.net, je členem Team Macromedia, spoluautorem knih Flash Enabled: Flash Design and Development for Device (New Riders Publishing, 2002). Dnes Bill rozvíjí alternativy použití Flash aplikací pro mobilní zařízení v bezdrátovém (wireless) prostředí. Najdete ho na bill@pocketpcflash.net.

10 ÚVOD

Než se pustíte do čtení Jak vytěžit z této knihy co nejvíc

Konvence užité v publikaci

Tato kniha byla vytvořena se záměrem předat vám co možná nejvíce nových zkušeností zhuštěnou, maximálně praktickou formou. Každá kapitola začíná úvodem, ve kterém autor vysvětluje, proč si vybral právě tuto oblast a jak vám jeho rady mohou pomoci při vaší vlastní práci. V části nazvané Funguje to následovně získáte rychlý, ilustrativní přehled celého projektu. Předtím, než se ponoříte do každé kapitoly, je také uvedeno několik úkolů a přípravných kroků, které musíte provést, abyste si připravili pracovní plochu a soubory. Toto vše naleznete v části nazvané Příprava k práci. Na konci každé kapitoly je část nazvaná Nyní zkuste toto, ve které vás autor navede na další způsoby využití postupu, který jste se právě naučili, případně způsob, jak uvedený postup dále zdokonalit a rozšířit. Navštivte naše webové stránky – www.zonerpress.cz –, kde v sekci Soubory ke stažení najdete nejen zdrojové kódy, ale i vše další potřebné pro práci na jednotlivých projektech v této knize. Soubory jsou označeny číslem projektu podle této knihy a jsou uloženy v komprimovaném formátu zip, takže byste neměli mít problémy s jejich stažením ani použitím. Ve všech případech je doložena i hotová aplikace a to jak ve formátu fla, tak i swf pro přímé prohlédnutí projektu v akci. Doporučujeme stáhnout si ze stránek www.macromedia.com nebo přímo http://www.macromedia.com/shockwave/download/ download.cgi?P1_Prod_Version=ShockwaveFlash i poslední verzi Flash Playeru, aby vám ukázky fungovaly správně, případně aby fungovaly vůbec.

Jakmile začnete procházet jednotlivé projekty, mějte na paměti následující konvence, které jsme v knize použili, abychom vám maximálně zjednodušili orientaci a práci s knihou: • Soubory, které si můžete stáhnout, se uvádějí tučným písmem.

•

Většina technik v této knize vyžaduje přidání nebo určité změny standardního kódu. Většina výpisů je v textu zvýrazněna a uvedena v rámečcích nadepsaných Výpis. Potřebný kód můžete buď vlastnoručně zadat, nebo najít příslušný soubor na webové adrese www.zonerpress.cz, vyhledat soubory ke stažení a stáhnout ZIP soubor označený číslem projektu. Soubory uložené v samostatných složkách si rozbalte na disk, vyhledejte si složku Code listings a otevřete příslušný textový soubor. Například soubor kódů Výpis 2.3 (tj. 3. výpis ve druhé kapitole) je označen jako 02-03.txt a je uložen v ZIP souboru 02.zip ve složce: 02\Code listings.

•

Symbol šipky ve výpisech nám říká, že kód skriptu pokračuje na dalším řádku. Zadáváte-li kód ručně, napíšete jednoduše kód na jeden řádek, aniž byste šipku opisovali.

•

Text, který byste měli vložit do polí nebo do výpisu kódu, je uveden podtrženě.

• •

Programový kód je v knize vypsán neproporcionálním písmem. Příkazy a klávesové zkratky pro Windows naleznete pravidelně v každé kapitole; klávesové zkratky vám pomohou výrazně zkrátit čas při provádění často se opakujících akcí. Klávesové zkratky jsou

ÚVOD 11

Rádi bychom znali vaše názory uvedeny ve tvaru např. Ctrl+B, což znamená: ve Windows podržte klávesu Control a potom zmáčkněte klávesu B, (pro Mac si nahraďte Control klávesou Command a stiskněte B). Užijte si zábavu v magickém světě FLASHe! – pracovníci The New Riders a kolektiv vydavatelství Zoner Press.

Právě vy, čtenáři této knihy, jste našimi nejdůležitějšími kritiky. Vážíme si vašeho názoru a rádi bychom věděli, co děláme správně, co bychom měli dělat lépe, ve které oblasti byste nás rádi viděli publikovat a děkujeme za jakýkoliv jiný postřeh. Uvítáme jakoukoliv připomínku či názor, který máte chuť nám sdělit. Můžete nám faxovat, zaslat e-mail, psát můžete přímo mně (vydavateli), abychom věděli, co se vám líbí a co naopak nelíbí, abychom mohli obohatit naše další knihy. Budete-li nám psát, připište, prosím, název knihy, nezapomeňte na své jméno, e-mailovou adresu nebo telefon či fax. Pečlivě si vaše připomínky přečteme a projdeme je společně s autory, překladateli a vydavatelem této publikace. Předem se omlouvám, ale nemůžeme řešit vaše konkrétní problémy při budování aplikací ve Flashi – v takovýchto případech se obracejte například na interval.cz, kde pravděpodobně najdete řešení nebo alespoň komunitu lidí, kteří vám poradí nebo alespoň vaše problémy vyslechnou. Naše adresa a kontakty jsou: Zoner Press ZONER software s.r.o. Koželužská 7, 602 00 Brno tel.: 532 190 883, fax: 543 257 245 e-mail: knihy@zoner.cz http://www.zonerpress.cz

PROJEKT 4

Elektronické haiku s trochou zábavy s mixováním zvuku Aria Danika společně s Chrisem Normanem, autorem Geishy Moje rané zážitky a fascinace zvukovými hračkami a generováním hudby – původ myšlenky na vytváření hudby pomocí interaktivního návrhu rozhraní – sahá až k mému

Aria Danika

studiu na Hypermedia Research Centre v Londýně. Toto nadšení mi zůstalo dodnes

je interaktivní designérka

a dovedlo mě k tomu, že jsem vytvořila několik sérií hravých zvukových aplikací ve

a vývojářka, senior moderátorka ve Flashkit.com a členka Hypermedia Research Centre v Londýně.

Flashi a Directoru. Žánr hudebních hraček se rozvíjel díky zkušenostem designérů a tvůrců video her, kteří se pokoušeli docílit interaktivního zvukového zážitku. Dokázali to tak, že vytvořili jednoduché rozhraní, které umožňuje uživateli manipulovat se zvukem, vytvářet rytmy a vniknout do hravé tvorby hudební kompozice. V knize Noise: A Political Economy of Music, University of Minnesota Pr., 1985, autor Jacques Attali předpovídal zlom v kulturní spotřebě hudby, přechod od poslouchání (konzumování) nahrávek směrem k vlastní kompozici. S rozvojem technologií se interaktivní hudba nepochybně bude rozvíjet od statických představení do nových forem, estetiky a společných víceuživatelských zkušeností.

Funguje to následovně: V tomto projektu je rozhraní tvořeno mřížkou, která se vymezuje políčka (objekty), které jsou uloženy v Library a ovládány pomocí skriptu. Uživatel může aktivovat zvuky, přehrát a několikrát opakovat vybraný hudební záznam a upravit si hlasitost během přehrávání. Základ vašeho klipu bude mít dvě základní části. První z nich představuje poměrně obsáhlý kód, který se spustí hned jakmile se animace načte, inicializuje veškeré vlastnosti vašeho nástroje a vykreslí vizuální soubory na plochu. Druhá část má na starosti uživatelské rozhraní, přehrává zvuky a pracuje s přehrávací hlavou a nastavením hlasitosti. Tady jsou základní kroky tohoto projektu: 1. Vytvoření základní mřížky za použití ActionScriptu.

Pro animaci mixující zvuk vytvoříme rozhraní a doplníme je o interaktivitu.

2. Tvorba dynamického mixovacího rozhraní a jeho umístění do středu plochy. 3. Dynamické propojení zvuků s rozhraním z knihovny pomocí odkazů na ID propojení. 4. Použití událostí animace (onPress()), jejích metod (crateEmptyMovieClip()) a metod objektu Sound (start()) k vytvoření interaktivního prostředí a ovladačů rozhraní, jako je přehrávací hlava a Sound Volume pro ovládání hlasitosti.

Výsledkem je interaktivně se tvořící a neustále se měnící hudební skladba.

54 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku

Příprava k práci Pro tento projekt budete muset udělat následující: 1. Stáhněte a rozbalte si 04.zip na váš pevný disk vašeho počítače.

grafiku hry jako geisha na pozadí (background), vycházející slunce (risingsun) a text haiku (text).

2. Otevřete soundtoy_final.swf a podívejte se, jak bude výsledný projekt fungovat. Až skončíte, zavřete jej. Poznámka: Některé z nejlepších mixážních hraček nabízejí takovou abstrakci a jsou vybaveny natolik intuitivním rozhraním, že mohou být užívány bez instrukcí, což uživatele navnadí víc než holá technika, která by přebírala vizuální metafory z toho, co už uživatel zná (jako mixážní pulty, jukebox nebo přehrávač).

Vytvoření základní mřížky Než začnete přidávat ovládání zvuku, musíte vytvořit různé prvky rozhraní, které vám umožní spolupracovat s touto hudební hrou. Začneme vytvořením mřížky: šachovnice několika políček (buněk), které zastupují zvuky, které máte uložené v knihovně (Library). Poznámka: Abyste vytvořili tento projekt tak ﬂexibilní, jak to jenom bude možné, budete muset budovat všechno (kromě statických obrázků) dynamicky. Toto vám umožní přidat více zvuků nebo změnit vzhled nástroje a aplikovat je velmi jednoduše na celý klip.

1. Začneme deklarací všech proměnných. Otevřete soubor soundtoy_ start.fla z adresáře 04, který jste si zkopírovali na svůj harddisk během přípravné práce. Časová osa hlavního klipu má následující vrstvy: background, text, risingsun a script. Vrstvu script budete používat k uložení akcí. Spodní tři vrstvy obsahují veškerou statickou

2. Klikněte na vrstvu script a otevřete panel Actions. 3. K deklaraci proměnných přidejte do snímku 1 tento skript. Pokud se vám nechce kód psát, můžete ho převzít ze souboru 04-01.txt ze složky 04\Code listings.

Výpis 4.1 onLoad = function(){ //konstanty _global.ROWS _global.COLUMNS

= 4; = 5;

PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 55 _global.BOXWIDTH _global.BOXHEIGHT _global.DEFAULTBOXALPHA _global.SPEED //proměnné var x,y var soundNum

= = = =

100; 40; 30; 5;

:Number = 0; :Number = 0;

}

Následující obrázek je ukázkou, jak by váš kód měl v tomto okamžiku vypadat.

Máte tu rozepsané inicializační funkce, abyste mohli váš projekt budovat dynamicky. Pokud je spojíte s metodou onLoad animace, můžete si být jisti, že se konstrukce provede v prvním snímku souboru s příponou .swf a postup je pro uživatele transparentní. Následně vložíte proměnné, které definují parametry mřížky jako šířku, výšku, hodnotu průhlednosti alpha a rychlost pohybu přehrávací hlavy. Uvědomte si, že tyto hodnoty jsou konstantní a nemohou být měněny. _global.ROWS _global.COLUMNS _global.BOXWIDTH _global.BOXHEIGHT _global.DEFAULTBOXALPHA _global.SPEED

= = = = = =

4; 5; 100; 40; 30; 5;

Díky definování těchto proměnných jako globální, budou tyto hodnoty přístupné každé časové ose ve vaší animaci a nemusíte používat volání s uvedením cesty typu _root nebo _parent. var x,y var soundNum

:Number = 0; :Number = 0;

Tyto tři proměnné jsou definovány jako typ Number, který zabrání, aby mohly být naplněny jiným typem hodnot (pokud by se tak stalo, oznámí se chyba). 4. Svou práci si uložte. Poznámka: Můžete také zkontrolovat syntax vašeho skriptu na této ploše, jak následně vidíte na přiloženém vzoru, abyste se ujistili, že tam nejsou chyby. Stačí kliknout na tlačítko Check Syntax v panelu Actions. Je to vhodná zkouška vašeho movie a kontrola kódu během rozvíjejícího se procesu.

56 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku

Tvorba mixovacího rozhraní Pokud máte definované parametry mřížky (šířka, výška, počet sloupců a řádků), můžete nyní mřížku pomocí ActionScriptu vytvořit. K tomu potřebujete připojit instance boxMC, který je předpřipraven v Library, umístit je a vyrovnat na ploše. Dále je zapotřebí přiřadit animaci boxMC identifikátor propojení (Linkage ID) tak, abyste se k tomuto objektu dostali pomocí ActionScriptu. 1. Otevřete knihovnu – Library (Ctrl+L).

2. Označte animaci boxMC. Klikněte pravým tlačítkem a vyberte příkaz Linkage. 3. V okně Linkage Properties zvolte Export for ActionScript. Identifikátor boxMC se vloží automaticky.

PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 57 Klikněte na tlačítko OK a okno Linkage Properties se zavře. 4. Klikněte na první snímek vrstvy script a vložte následující skript hned za proměnnou soundNum a před uzavírací složenou závorku }:

Výpis 4.2 //vytvoření mřížky createEmptyMovieClip("movieGrid", 1); //nastavení hlasitosti movieGrid.soundVolume = 100; movieGrid.gridColumnCount = 0; //přidání jednotlivých políček //nastavení šířky a výšky for(x=0;x<ROWS;x++) { for(y=0;y<COLUMNS;y++) { var boxName:String = "boxMC"+x+"_"+y; movieGrid.attachMovie("boxMC",boxName,10*x+y); movieGrid[boxName]._width = BOXWIDTH; movieGrid[boxName]._height = BOXHEIGHT; movieGrid[boxName]._x = movieGrid[boxName]. ¯width * y; movieGrid[boxName]._y = movieGrid[boxName]. ¯height * x; movieGrid[boxName].boxLight._alpha = ¯DEFAULTBOXALPHA; } }

Následující obrázek ukazuje, jak by měl v tomto okamžiku váš kód vypadat.

Tady jste si vytvořili kontejner animace se jménem movieGrid, takže teď můžete lépe určovat, kde se vaše dynamicky generovaná mřížka má na ploše objevit. Dále jsme nastavili počáteční hlasitost soundVolume na 100 a počáteční hodnotu počtu sloupců mřížky gridColumnCount na 0. Vložený cyklus nastaví vaši mřížku dynamicky, funguje nějak podobně jako psací stroj. Přidá nové políčko k pravé straně předchozí buňky, dokud nedosáhne počtu definovanému proměnnou COLUMNS (byla nastavena již dříve), a pak se přesune na další řadu a bude pokračovat, dokud nebude celá mřížka zkonstruována.

58 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 5. Vyzkoušejte základ své animace pomocí Ctrl+Enter. Mřížka je zatím vyrovnána k levému hornímu rohu animace, což není zrovna ideální, ale zatím s tím nic neuděláme. Dříve, než se pustíme do umisťování, přidáme ještě zvuky.

2. Zvolte první položku ARIA_S1.MP3. 6. Svou práci si určitě uložte.

3. Kliknutím pravého tlačítka otevřete kontextovou nabídku a zvolte příkaz Linkage. 4. V okně Linkage Properties vyberte Export pro ActionScript.

Přidávání zvuků Teď, když máme vytvořenou mřížku, můžete přidat zvuky (všech 20 hodnot) z knihovny do každé buňky vytvořené mřížky. Předtím než začnete psát (nebo kopírovat) kód, je potřeba každému zvuku přidělit identifikátor propojení – Linkage ID. 1. Otevřete adresář sounds v Library.

5. Do pole Identifier napište: sound0.

PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 59 6. Kroky 3 – 5 opakujte pro zbývajících 19 zvuků v knihovně, přičemž ARIA_S2.MP3 má identifikátor sound1, ARIA_S3.MP3 má identifikátor sound2 a tak dále.

//přidání políček a nastavení jejich šířky a výšky for(x=0;x<ROWS;x++) { for(y=0;y<COLUMNS;y++) { var boxName:String = “boxMC”+x+”_”+y; movieGrid.attachMovie(“boxMC”,boxName,10*x+y); movieGrid[boxName]._width = BOXWIDTH; movieGrid[boxName]._height = BOXHEIGHT; movieGrid[boxName]._x = movieGrid[boxName]._width ¯ * y; movieGrid[boxName]._y = movieGrid[boxName]._height ¯ * x; movieGrid[boxName].boxLight._alpha = DEFAULTBOXALPHA;

7. Zvolte vrstvu script (hlavní animace). Klikněte na snímek 1. 8. Hned za kód movieGrid a před poslední } vložte tento kód: Výpis 4.3 //přidání zvuků movieGrid[boxName].sound = new Sound(); movieGrid[boxName].soundNum = soundNum; movieGrid[boxName].sound.attachSound("sound"+ ¯ soundNum); soundNum++;

//přidání zvuků movieGrid[boxName].sound = new Sound(); movieGrid[boxName].soundNum = soundNum; movieGrid[boxName].sound.attachSound(“sound”+ ¯ soundNum); soundNum++; } }

Vaše akce pro tento snímek budou nyní vypadat takto: onLoad = function(){ //konstanty _global.ROWS = 4; _global.COLUMNS = 5; _global.BOXWIDTH = 100; _global.BOXHEIGHT = 40; _global.DEFAULTBOXALPHA = 30; _global.SPEED = 5; //proměnné var x,y :Number = 0; var soundNum :Number = 0; //vytvoření mřížky createEmptyMovieClip(“movieGrid”, 1); //nastavení hlasitosti movieGrid.soundVolume = 100; movieGrid.gridColumnCount = 0;

}

V každém průchodu cyklem bude vytvořena instance boxMC animačního klipu (z knihovny animace) jako jeden z prvků mřížky movieGrid, umístěna na plochu a bude jí dáno jméno symbolu a označení podle její řady a sloupce. Poté, co bude instance políčka umístěna na ploše, vložíte do něj nový zvukový objekt (sound) a pomocí metody attachSound() mu přiřadíte jeden ze zvuků z knihovny. (Tyto zvuky jsme v předchozím pojmenovali sound0 – sound19.) Když používáte objekty sound, nemusíte přetahovat zvuky z knihovny na plochu a můžete využít metody a vlastnosti objektu sound k manipulaci s vašimi zvuky.

60 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku projekt si vytvoříte vlastní klip přehrávací hlavy, tlačítko PLAY/STOP, a ovladač hlasitosti. Než začnete připravovat každý z těchto prvků, budete potřebovat přidat nějaké akce do boxMC, které by dokázaly přehrát přiřazený zvuk a adekvátně přizpůsobit transparentnost (vlastnost _alpha) jednotlivých buněk mřížky. 1. Klikněte dvojitě na klip boxMC v Library, abyste se dostali do editovacího módu symbolu. Instance symbolu BoxMC má přiřazeno jméno boxLight (pokud byste chtěli využívat rad – tlačítko Show Code Hint – bylo by třeba použít název s koncovkou _mc).

Nakonec zvětšíte o 1 proměnnou soundNum (kterou jsme inicializovali na začátku skriptu a která slouží jako čítač zvuků), takže zvuky se přidávají v pořadí dle čísel. Zvuky budou do mřížky vloženy dle následujícího schematu: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

9. Svou práci si uložte.

2. Ve vrstvě script klikněte na snímek 1. 3. Vložte tento kratičký skript:

Skriptování hudebních políček Nyní se můžete soustředit na přidávání prvků rozhraní, které uživateli umožní zacházet se zvukovými políčky a mixovat zvuky. Pro tento

Výpis 4.4 var activated:Boolean = false; boxLight._alpha = 0;

PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 61 Skript nastaví proměnnou activated na false a vlastnost _alpha klipu boxLight na 0 (úplná průhlednost). Proměnná activated je definována jako booleovský (logický) typ. 4. Za poslední příkaz skriptu vložte následující kód:

Výpis 4.5 onRelease = function () { if(activated==false){ activated = true; boxLight._alpha = DEFAULTBOXALPHA; if(_parent.playButton.isPlaying == false) { sound.start(); } } else { sound.stop("sound"+soundNum); activated = false; boxLight._alpha = 0; } }

Funkce onRelease() nastavuje vlastnosti klipu boxMC, když je aktivován (pokud na něm uživatel klikne), i když aktivován není (activated = false). Jakmile uživatel klikne na políčko, pak se průhlednost _alpha klipu boxLight nastaví na DEFAULTBOXALPHA (který má hodnotu 30) a zvuk začne hrát. Pokud má proměnná activated hodnotu true, pak se provede příkaz sound.stop(„sound“+soundNum) – to umožňuje uživateli kdykoliv během přehrávání kliknout na již aktivní okénko a zvuk tím vypnout.

V pátém kroku dokončíte kód pro boxMC skriptováním poslední části, kterou je postupné zprůhledňování – „blednutí“ políčka – snižování hodnoty _alpha. 5. Za tyto tři řádky boxLight._alpha = 0; } }

přidejte následující kód:

Výpis 4.6 onEnterFrame = function() { if(activated == true && boxLight._alpha > ¯ DEFAULTBOXALPHA) { boxLight._alpha--; } }

Funkce onEnterFrame() způsobuje blednutí barvy políčka pokud jsou splněny dvě podmínky: activated == true AND boxLigt._alpha > DEFAULTBOXALPHA

tedy: pokud je políčko aktivní a současně průhlednost _alpha má hodnotu vyšší než DEFAULTBOXALPHA (tj. 30). 6. Svou práci si uložte.

Skriptování přehrávací hlavy Tak jak jste si předtím v této kapitole vytvořili dynamickou mřížku (část Tvorba rozhraní Mixer), opět použijete ActionScript k dynamickému připojení hrací hlavy (playhead) tak, že bude vždy umístěna ve vztahu k proměně definované velikosti mřížky.

62 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku Začnete s movie clipem playHead, který se skládá z horní šipky (grafika), střední lišty (movie clip bar) a spodní šipky (movie clip knob). Vytvoření správného rozměru lišty tak, aby odpovídala mřížce, je skutečnou výzvou. Dosáhnete toho tak, že budete měnit velikost lišty na výšku kontejneru moiveGrid a spodní šipku umístíte pod ni. 1. Dvojitě klikněte na movie clip playHead v knihovně a vstupte do editačního módu symbolu.

6. Jděte zpět do hlavní časové osy, klepněte na snímek 1 vrstvy script. 7. Za tyto tři řádky soundNum++; } }

vložte skript:

Výpis 4.7 //vytvořeni Playhead a umístěni na ploše movieGrid.attachMovie("playHead","playHead",10000); movieGrid.playHead.bar._height = movieGrid._height; movieGrid.playHead.knob._y = movieGrid._height; movieGrid.playHead._x -= BOXWIDTH/COLUMNS;

Tento skript kontroluje výšku movie clipu movieGrid a podle hodnoty přizpůsobuje movie clip bar a umísťuje knob na spodek movieGrid. 8. Svou práci si uložte.

Skriptování tlačítek PLAY a STOP

2. Na ploše klikněte na klip knob. Pomocí panelu vlastností (Properties) mu přidělte název instance knob. 3. Na ploše klikněte na movie clip bar. Přidělte mu jméno instance bar. 4. Klikněte pravým tlačítkem na movie clip playHead v knihovně a zvolte Linkage. 5. Označte volbu Export for ActionScript. Identifikační jméno playHead se vloží automaticky.

Abyste mohli playHead spustit, potřebujete k ní mít jako uživatel přístup. K tomu slouží tlačítko PLAY/STOP. Pro tlačítko použijete jediný objekt a zapíšete pro něj skript tak, aby tlačítko mělo několikerou funkčnost. K tomu budete muset udělat následující: • Vypnout všechny hrající zvuky a pak přehrát sekvenci.

• • •

Umožnit hrací hlavě pohyb. Vypnout všechny zvuky. Přestavit hrací hlavu do její původní pozice.

PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 63 Poznámka: Místo toho, abyste vytvářeli dvě tlačítka Stop a Play, použijete dvousnímkový movie clip nazvaný playButton. Ten vám umožní dynamicky spojit a umístit movie clip na plochu z knihovny pomocí metody attachMovie().

1. V knihovně zvolte movie clip playButton. Pravým kliknutím zvolte Linkage. 2. V panelu Linkage Properties zvolte Export for ActionScript. Název movie clipu, playButton, je automaticky vložen jako identifikátor propojení.

Časová osa tohoto movie clipu má tři vrstvy: buton, stop a scprit. Vrstva stop obsahuje movie clip stopSymbol, který je navrchu tlačítka. Pokud je stopSymbol viditelný (visibility = true), pak je tlačítko tlačítkem Stop. Pokud stopSymbol viditelný není (visibitity = false), tlačítko se stává tlačítkem Play. 3. Dvojitě klikněte na movie clip playButton, čímž pro tento movie clip otevřete editovací mód.

4. Jděte zpátky do snímku 1 vrstvy script a přidejte kód, který je uveden jako Výpis 4.8. Své akce si uložíte právě do vrstvy script.

64 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku Výpis 4.8 var z:Number = 0; //skript pro tlačítko stopSymbol._visible = false; isPlaying = false;

Tady si nastavíte proměnnou z na 0, oborem této proměnné je tento movie clip. Pak nastavíte proměnnou isPlaying na false, ta sděluje movie, zda bylo nebo nebylo zmáčknuto tlačítko Play, a dále nastavíte viditelnost (_visible) stopSymbol na false.

Přehrávací hlava se bude pohybovat tak dlouho, dokud _x hodnota její pozice bude menší než BOXWIDTH*COLUMNS (úplně vpravo v rohu mřížky). Jinak (else) bude přehrávací hlava resetována do původní pozice (playHead_x = 0). 6. Tento kód přidejte k funkci movePlayhead():

Výpis 4.10 //kontrola pozice, přehrání zvuku a zesvětlení buněk if(Math.floor(_parent.playHead._x/BOXWIDTH) == ¯ _parent.gridColumnCount) { if(_parent.gridColumnCount < COLUMNS) {

5. Za poslední příkaz předchozího skriptu vložte následující kód:

Výpis 4.9

trace(_parent.gridColumnCount);

//přesun hlavy function movePlayhead() {

for(z=0;z<ROWS;z++) { var boxName:String = "boxMC"+z+"_"+ ¯ _parent.gridColumnCount; if(_parent[boxName].activated == true) { _parent[boxName].sound.setVolume(_parent. ¯ soundVolume); _parent[boxName].sound.start(); _parent[boxName].boxLight._alpha = 100; } } //zvětši hodnotu gridColumnCount o 1 _parent.gridColumnCount++;

if(isPlaying == true) { if(_parent.playHead._x < BOXWIDTH*COLUMNS) { _parent.playHead._x += SPEED; } else { _parent.playHead._x = 0; _parent.gridColumnCount = 0; } }

Funkce movePlayhead() ovládá pohyby přehrávací hlavy po ose X. První podmínka se vztahuje k tomu, když isPlaying == true. Pokud tato podmínka platí, může se přehrávací hlava pohybovat doprava s tím, že přírůstek, o který se posune, je definován proměnnou speed. Pokud je hodnota podmínky false, dojde ke skoku zpět do vyčkávací pozice, vlevo od movieGrid.

} } }

Tento kód přiřazuje “boxMC”+z+”_”+_parent.gridColumnCount proměnné boxName, což vede jednak k jednoduššímu volání a také umožní Flash playeru vyhodnocovat výraz hodnotu pouze

PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 65 jednou. Tady skript kontroluje pozici přehrávací hlavy a jestliže je parent[boxName].activated == true, pak se spustí zvuky, nastaví se hlasitost na hodnotu _parent.soundVolume (která byla definována v hlavní časové ose) a nastaví vlastnost _alpha v boxLight na 100. 7. Dále vložte následující skript:

Výpis 4.11 onRelease = function() { stopAllSounds(); if (isPlaying==false) { movieGrid.playHead._x=0; isPlaying = true; stopSymbol._visible = true; playSounds = setInterval (movePlayhead, 60); } else { isPlaying = false; stopSymbol._visible = false; clearInterval(playSounds); _parent.playHead._x = 0-BOXWIDTH/COLUMNS; _parent.gridColumnCount = 0; } }

Pokud je tlačítko zmáčknuto, všem zvukům je dán příkaz stop, protože přehrávání zvuků bude nyní závislé na přehrávací hlavě. Jestliže hlava není zrovna v pohybu (isPlaying==false), stačí zmáčknou tlačítko a hlava skočí na začátek mřížky, čímž naznačí, že je aktivní, a spustí se její pohyb. Nastavení vlastnosti _visible objektu stopSymbol je pro uživatele znamením, že když podruhé zmáčknou tlačítko, přehrávání se zastaví.

Aby se časová osa mohla pohybovat nezávisle na snímkové frekvenci klipu, využívá se funkce setInterval – ta volá právě vytvořenou funkci movePlayhead() každých 60 milisekund (nebo-li asi 16krát za sekundu). Zvýšením této hodnoty se bude hlava pohybovat pomaleji. Toto volání setInterval je přiřazeno proměnné (playSounds), a může tedy být zastaveno, pokud uživatel zmáčkne tlačítko stop (clearInterval(playSounds)); jinak pořád poběží dál. Pokud uživatel znovu zmáčknul tlačítko, stopSymbol se zneviditelní, hlava skočí zpátky do své odpočívací pozice a funkčnost tlačítka playButton se vrátí k nastavení play. Hodnota gridColumnCount bude také vrácena na hodnotu 0, protože se hlava už nepohybuje. Současně se provede i umístění tlačítka playButton na plochu a jeho zarovnání. 8. Vraťte se na hlavní časovou osu (Scene 1). Ve vrstvě script klikněte na snímek 1. 9. Za příkaz movieGrid.playHead._x -= BOXWIDTH/COLUMNS vložte následující skript:

Výpis 4.12 //vytvoření a umístění tlačítka movieGrid.attachMovie("playButton","playButton", ¯ 20000); movieGrid.playButton._x = movieGrid._width ¯ (BOXWIDTH+movieGrid.playButton._width/2); movieGrid.playButton._y = movieGrid._height + ¯ BOXHEIGHT;

Tady umístíte playButton dynamicky na plochu přidáním instance movie clipu playButton k movie klipu movieGrid a nastavíte jeho umístění pomocí vlastnosti _x a _y podle velikosti movieGrid:

66 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku playButton._x = movieGrid._width - (BOXWIDTH+movieGrid. ¯ playButton._width/2)

Výpis 4.13

var btnLoc:Number = 0;

playButton._y = movieGrid._height + BOXHEIGHT

10. Svou práci si uložte.

Přidání ovladače pro kontrolu hlasitosti Ovladač – táhlo – pro kontrolu hlasitosti je posledním prvkem rozhraní, který umožní uživateli lepší ovládání objektů zvuku a jejich příslušenství. Pro dynamické umístění této animace na plochu použijeme ActionScript, ale předtím jej musíte sestavit. 1. Klikněte pravým tlačítkem na movie clip volumeSlider v knihovně. Zvolte Linkage.

2. V panelu Linkage Properties zvolte Export for ActionScript. Identifikátor pro Linkage ID volumeSlider je vložen automaticky. 3. Jděte na vrstvu script. Klikněte na snímek 1. 4. Do panelu Actions vložte následující skript:

//pokud je kulička stisknuta, umožňuje taženi ve //vodorovném směru volume_btn.onPress = function() { volume_btn.startDrag(true,0,0,300,0); } //je-li kulička uvolněna, ukončí se taženi //a nastaví se odpovídající hlasitost zvuku volume_btn.onRelease = volume_btn.onReleaseOutside = ¯ function() { volume_btn.stopDrag(); btnLoc = Math.floor(volume_btn._x/3); _parent.soundVolume = btnLoc; for(x=0;x<ROWS;x++) { for(y=0;y<COLUMNS;y++) { _parent["boxMC"+x+"_"+y].sound. ¯ setVolume(btnLoc); } } }

Za prvé jste si definovali jméno proměnné btnLoc (typ Number). Tato lokální proměnná je vytvořena pro zachování pozice kuličky – tlačítka volume_btn – na liště volumeSlider. volume_btn.onPress je metoda tlačítka, kterou uživatel uvede

do chodu zmáčknutím tlačítka, které vypadá jako dřevěná kulička. startDrag je metoda tlačítka, které se předává 5 parametrů:

- true, který říká funkci, že přetahování bude omezeno (lepší, než aby mohl uživatel přetahovat tlačítko kamkoli na plochu)

PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 67 - a další čtyři hodnoty definující toto omezení (left, top, right a bottom, tedy omezení zleva, shora, zprava a zdola). left a right jsou okraje lišty táhla. onRelease a onReleaseOutside jsou dvě další metody tlačítka,

které jsou vnořeny, protože by měly mít stejnou funkčnost, když bude tlačítko uvolněno. Metoda stopDrag() zastaví tlačítko a proměnné btnLoc bude přiřazena aktuální pozice tlačítka na liště děleno třemi (lišta je 300 pixelů dlouhá a vy chcete hodnotu hlasitosti mezi 0 a 100). Hodnota soundVolume bude nastaven na nově zadanou hodnotu a pak se v cyklu nastaví hlasitost každého okénka mřížky pomocí metody setVolume objektu sound. 5. Vraťte se do hlavního klipu (Scene 1). Klikněte na snímek 1 (ve vrstvě skript) a vložte tento skript, čímž umístíte ovladač hlasitosti na plochu:

Výpis 4.14 //vytvoření a umístění ovladače hlasitosti movieGrid.attachMovie("volumeSlider","volumeSlider", ¯ 30000); movieGrid.volumeSlider._x = BOXWIDTH - (BOXWIDTH/ ¯ COLUMNS)/COLUMNS; movieGrid.volumeSlider._y -= BOXHEIGHT/2;

Tady přidáváte instanci movie clipu volumeSlider k animaci movieGrid a zarovnáváte ji ke středu horního okraje instance movieGrid. 6. Svou práci si uložte.

Všechno dáme dohromady Jakmile máte všechny elementy spolu v instanci movieGrid, můžete celek vyrovnat ve svém movie na střed. 1. Klikněte na snímek 1 (vrstvy script) v hlavní animaci. 2. Za předchozí skript vložte následující:

Výpis 4.15 //umistěni všech prvků movieGrid._x = ((Stage.width/2) ¯ (movieGrid._width/2))+(BOXWIDTH/COLUMNS)/COLUMNS; movieGrid._y = ((Stage.height/2) ¯ (movieGrid._height/2))+BOXHEIGHT/2;

Tady jste si nastavili souřadnice – vlastnosti _x a _y instance movieGrid tak, že je nyní vycentrovaná. Uvedené hodnoty flexibilně závisejí na rozměrech mřížky (na jejím počtu sloupců, columns, i řádků, rows). Obrázek na následující stránce vám ukazuje, jak v tomto místě vypadá celý skript.

68 PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 3. Vyzkoušejte klip a spusťte nějaké zvuky; klikněte na okénko a poté znovu, abyste volbu zrušili. Jestliže jste s vaším nastavením spokojeni, klikněte na tlačítko Play a vychutnejte si svou kompozici.

4. Svou práci si uložte.

PROJEKT 4: Elektronické haiku s trochou zábavy s mixováním zvuku 69

Nyní zkuste toto Doteď jste si vytvořili pěkný kus kódu, který se spustí, jakmile se klip stáhne, inicializuje vlastnosti veškerých součástí vašeho nástroje a zobrazí jeho vizuální podobu. Také jste se naučili ovládat uživatelské rozhraní a přehrávat zvuky. Tady vám nabízím další nápady jak zužitkovat dovednosti, které jste právě získali, i jiným způsobem: • Když budou vaše „zvukové hračky“ složitější a budete užívat více zvukových cyklů, hodilo by se vám použít preloader, nebo optimalizovat cykly tak, abyste zmenšili velikost souboru. Můžete také experimentovat s použitím metod v objektu Sound, jako jsou getBytesTotal() a getBytesLoaded() k načtení vašich zvuků odděleně od zbytku animace.

•

Můžete také nahrát zvuky z externího zdroje (pomocí metody loadSound() z objektu Sound). Umožní vám to jednak upravovat a aktualizovat MP3 ukázky zvuků mimo tvůrčí prostředí Flashe, a také značně snížit počáteční velikost vaší animace.

•

Vytvořte si rozhraní, které umožní uživateli vstup z více než jednoho přehrávače. Každý přehrávač může mít přístup do mřížky, která přehrává jednotlivé sekvence, a účastní se tak s ostatními přehrávači na kompozici komplexního společného hudebního představení.