Obsah
Úvod 7
1.Základy tvorby v programu Flash 11
1.1 Nastavení scény ........................................................12
1.2Tvorba tla č ítka..........................................................13
1.3Tvorba Movie Clipu ....................................................14
1.4ActionScript .............................................................16
1.5Textová pole .............................................................16
1.6Tvorba preloaderu .....................................................17
2.Využití internetových Flash her v praxi 21
2.1Zvýšení návšt ě vnosti stránek .......................................22
2.2Brandová reklama (posílení zna č ky klienta) .....................22
2.3Zvýšení prodeje výrobk ů .............................................24
2.4Hra s placeným p ř ístupem ..........................................25
2.5Prodej reklamní plochy ...............................................25
2.6Hra o ceny ...............................................................25
2.7Hry v reklamním banneru ............................................25
2.8Další využití her ........................................................26
2.9 Cílová skupina her .....................................................26
3.Tvorba her 27
3.1St ř elnice ..................................................................29
3.2Letadlo ....................................................................37
3.3 P ř istání na M ě síci .....................................................42
3.4 Chytání vajec ............................................................52
3.5 Pong .......................................................................56
3.6 Golf ........................................................................62
3.7 Automobilové závody ..................................................68
3.8 Samuraj ..................................................................74
3.9 Piškvorky pro dva hrá č e .............................................81
3.10 Plošinovka s ukládáním rozehrané hry ............................91
3.11 Asteroidy .................................................................96
3.12 Sv ě tla ...................................................................106
3.13 Hledání min ............................................................113
3.14 Puzzle (obrázková skláda č ka) .....................................124
3.15 Dáma – hra pro více hrá čů .......................................138 1 2 3
Úvod
Dalo by se ř íci, že jsme se dlouhou dobu rozhodovali o tom, jestli tuto knihu máme v ů bec napsat a jak ji p ř esn ě pojmout tak, aby zaujala co nejvíce č tená řů . Flash hry jsou velmi oblíbené, což dokazuje návšt ě vnost webových stránek, které takové hry obsahují. Opa čným p ř ípadem je ale práv ě jejich tvorba. Ne každý je natolik pokro č ilý programátor, aby byl schopen takové hry vytvá ř et a ne každý je natolik dobrý grafik, aby jeho hry byly úsp ě šné pro široké hrá č ské publikum. V této knize se sice dozvíte n ě co málo o tom, jak grafiku do her vytvá ř et, ale je samoz ř ejmé, že grafickému cít ě ní se nedá nau č it z knihy a ne každý má podobné nadání. Naproti tomu programovat se m ů že nau č it tém ěř každý a tato kniha vás provede jednotlivými postupy, zádrhely a nástrahami p ř i tvorb ě Flash her. Nau č íte se díky ní vytvá ř et hry snad všech myslitelných žánr ů , které si dokážete p ř edstavit. To vše v p ř ehledných postupech, kdy nebudete jen slep ě opisovat desítky ř ádk ů p ř íkaz ů , ale postupn ě dosp ě jete k tomu, k č emu je každý ř ádek programu pot ř eba a co se stane, pokud ho nahradíte ř ádkem jiným. Cílem knihy není nau č it se otrocky naprogramovat všechny uvedené hry, ale zažít si jednotlivé postupy, které se pro každou hru mohou podstatn ě lišit. I z tohoto d ů vodu jsme se rozhodli knihu napsat jako spoluauto ř i a každý tak ukázat sv ů j r ů znorodý p ř ístup k práci, který ale vede ke stejnému výsledku – funk č ní h ř e, která bude jist ě ozdobou vašich stránek.
A č koliv m ě la být kniha p ů vodn ě ur č ena spíše pokro č ilým uživatel ů m programu, tuto myšlenku jsme pom ě rn ě rychle opustili, protože cílová skupina knihy by byla natolik malá, že by bylo obtížné podobné dílo obhájit. Zkušení uživatelé se ale nemusí bát, že by vzniklé dílo bylo n ě jakým kompromisem. Úvod knihy je v ě nován p ř ipomenutí základ ů programu, (zárove ň ale doufáme, že se bude jednat opravdu o p ř ipomenutí, protože pokud bychom knihu v ě novali jen základ ů m, nezbylo by už na samotné hry místo) a dalšími kapitolami už za č íná nefalšované programovaní od jednoduchých h ř í č ek až po velmi složité hry (i hry pro více hrá čů – multiplayerové hry), které dají bez naší knihy zabrat i zkušeným programátor ů m. Zárove ň jsme se snažili zahrnout do knihy takové hry, které jsou originální p ř edevším svým netradi č ním ř ešením a nejedná se pouze o používání základních funkcí programu.
K naší knize rozhodn ě nelze p ř istupovat jako k románu, který si na jeden „zátah“ p ř e č tete, ale vyžadujeme vaši aktivní spolupráci a po č ítáme s tím, že budete nad každým ř ádkem p ř emýšlet a sami si vymýšlet, jak hry ješt ě více zdokonalit a vylepšit. Opravdovým cílem této knihy ale je, aby se vám zde popsané postupy natolik vžily, že budete schopni sami bez problému vytvo ř it libovolnou hru i úpln ě jiného žánru.
Kupodivu tvorba her ale není jediná v ě c, kterou se v této knize nau č íte. Krom ě r ů zných dalších vylepšení, jako jsou herní tabulky, kam se mohou hrá č i zapisovat, ukládání herního skóre č i pozice v rozehrané h ř e do cookies, se nau č íte také pracovat ve Flashi s 3D grafikou, se zvuky (nap ř íklad si vytvo ř íme MP3 p ř ehráva č , který umí používat skiny z programu WinAmp ), optimalizovat hry (a nejenom je) na co nejv ě tší plynulost a rychlost na č ítání a mnoho dalšího.
Zdrojové kódy všech her a aplikací, které jsou v knize popsané, zárove ň naleznete na webových stránkách nakladatelství Grada Publis hing www.grada.cz. Doufáme, že se nespokojíte pouze s jejich stažením, ale že vám budou sloužit spíše ke kontrole postup ů popsaných v této knize. Tímto vám p ř ejeme p ř íjemné č tení naší knihy a pevn ě doufáme, že vám p ř inese mnoho nových poznatk ů p ř i práci s programem Macromedia Flash MX
Použité konvence
V celé knize jsou použity následující typografické konvence, které usnad ňují orientaci v textu:
Tu č ným písmem jsou zd ů razn ě ny d ů ležité pojmy.
Tu č nou kurzivou jsou ozna č eny p ř íkazy nabídek, popisky tla č ítek, názvy dialogových oken, „citace z obrazovky“.
Modify → Document posloupnost p ř íkaz ů (zadávaná v nabídkách a následn ě otevíraných dialogových oknech) odd ě lená šipkou.
Kurzivní písmo je vyhrazeno pro názvy program ů a firem vyráb ě jících softwarové produkty.
KAPITÁLKY slouží k popisu kláves a klávesových zkratek.
V textu se budete také č asto setkávat se zvláštními odstavci ozna č enými ikonou, která bude charakterizovat druh informace v daném odstavci:
V poznámkách jsou umíst ě ny informace týkající se tématu a prozrazující další souvislosti.
Pokud uvidíte takto ozna č ený odstavec, znamená to, že je nablízku n ě jaký tip nebo trik , s jehož pomocí si m ů žete usnadnit práci, p ř ípadn ě snadno dosáhnout efektních výsledk ů .
Takový odstavec by se m ě l stát varovn ě vzty č eným prstem, který vás upozorň uje na n ě co, na co byste si m ě li dát pozor , co vás m ů že nep ř íjemn ě p ř ekvapit, nebo co by vám mohlo zp ů sobit problémy.
Základy tvorby v programu Flash
1.Základy tvorby v programu Flash
Pokud se nepovažujete za za č áte č níky v programu Flash , m ů žete následující kapitoly, v ěnované jeho základ ů m, sm ě le p ř esko č it. Stejn ě tak je ale pravd ě podobné, že jste si tuto knihu zakoupili a s Flashem teprve za č ínáte. A č koliv není zrovna ideální za č ít hned programováním her, vysv ě tlíme si úvodem základy tvorby v tomto programu. Nau č íme se, jak si nastavit scénu p ř ed tvorbou hry, jak vytvo ř it jednotlivé typy symbol ů , se kterými program pracuje, vysv ě tlíme si, jak a kam umístit skripty popsané u tvorby všech her, povíme si, jak naprogramovat preloader, který zajistí, aby uživatel byl informován o tom, jak dlouho se bude hra na č ítat, č i jaké existují typy textových polí. Tyto kapitoly rozhodn ě nepovažujeme za kompletní kurz o programu, ale spíš p ř ipomenutí n ě kterých jeho základ ů
1.1 Nastavení scény
Tvorbu každé hry za č ínáme p ř izp ů sobením scény našim požadavk ů m. K tomu slouží panel
Modify → Document (obrázek 1.1.1). Jako první tu nalezneme položky Dimension , které ur č ují rozm ě r scény. Standardní rozm ě r scény je 550 x 400 bod ů , což bude pro v ě tšinu her vyhovovat. Doporu č ujeme po č ítat s uživateli, kte ř í doposud používají rozlišení 800 x 600 (t ě ch je k dnešnímu dni zhruba 30–40 %), a ned ě lat hry na v ě tší rozlišení než 770 x 430, což odpovídá zhruba velikosti stránky po ode č tení všech nabídek, ikon č i posuvník ů . Navíc, č ím menší rozlišení hra má, tím b ě ží plynuleji i na pomalejších po č íta č ích. Našt ě stí je Flash vektorový program, takže v mnoha p ř ípadech sta č í rozlišení hry upravit, až když je hra hotová, pouze v HTML souboru. P ř i práci s bitmapovými obrázky ale doporu č ujeme zachovat p ř esné rozm ě ry, následným zv ě tšením č i zmenšením celé scény trpí p ř edevším kvalita jejich zobrazení.
Background Color je barva pozadí celé scény. Tu je možno m ěnit i pomocí HTML souboru, ve kterém SWF zobrazujeme bez nutnosti zásahu do Flashe . Poslední d ů ležitou položkou je Frame Rate . Na rozdíl od rozlišení hry je standardní volba 12 fps (snímk ů za sekundu) pro 90 % her absolutn ě nedostate č ná. Proto zkuste nastavit hodnoty na 20–25 fps, jinak nebude v ě tšina her dostate č n ě dynamická a rychlá. Zbyte č n ě vysoký Frame Rate (maximem je 120) zase klade vysoké nároky na výkon po č íta č e, navíc málokdy této hodnoty reáln ě dosáhnete a takováto plynulost nalezne využití jen výjime č n ě – vhodná je nap ř íklad v p ř ípad ě p ř esných hitTest ů , ale tím se nebudeme hned ze za č átku knihy zabývat.
Obr. 1.1.1: Panel se základním nastavením vlastnosti scény
1.2 Tvorba tla č ítka
Tla č ítko je prvkem, který umož ň uje zjistit, zda uživatel klepnul na n ě jaký objekt, č i jen p ř es n ě j p ř ejel myší, nebo stiskl n ě jaké tla č ítko na klávesnici a podobn ě
Nové tla č ítko vytvo ř íme nakreslením libovolného objektu, jeho ozna č ením a volbou Insert
→ Convert to Symbol a volbou Button , což je zmín ě né tla č ítko. Z objektu je nyní symbol tla č ítka, do kterého se p ř epneme klepnutím na n ě j a zjistíme, že má č asovou osu pouze na č ty ř ech snímcích (obrázek 1.2.1). Jsou to tyto:
Up – obrázek Buttonu v klidovém stavu.
Over – Button ve chvíli, kdy p ř es n ě j uživatel p ř ejede kurzorem myši.
Down – Button ve chvíli, kdy ho uživatel stiskne.
Hit – aktivní plocha Buttonu (není viditelná).
Obr. 1.2.1: Č asová osa tla č ítka má pouze č ty ř i využitelné snímky Pokud nechceme n ě které snímky využít, necháme je prázdné.
Na každý Button m ů žeme umístit libovolné programové akce, a to tak, že na n ě m stiskneme pravé tla č ítko myši a zvolíme Actions (obrázek 1.2.2). Otev ř e se nám okno programovacího jazyka ActionScript, kde se programují akce, které Button bude provád ě t.
A ť zvolíme jakýkoliv p ř íkaz ActionScriptu, objeví se nám uvozen mezi závorky p ř íkazu: on (release) {}
To je základní p ř íkaz, který ov ěř uje, jestli uživatel stiskl a uvolnil tla č ítko myši na ploše Buttonu (tj. stiskl tla č ítko). T ě chto p ř íkaz ů ale existuje víc, sta č í se p ř epnout na první ř ádek se zmín ě nou akcí a Flash nabídne tyto další možnosti:
Press – podobné jako základní p ř íkaz, pouze program provede akci hned po stisknutí tla č ítka myši a ne č eká na jeho uvoln ě ní.
Obr. 1.2.2:K volb ě Actions se dostaneme stisknutím pravého tla č ítka myši na objektu
Release Outside – p ř íkaz se provede po uvoln ě ní tla č ítka myši mimo aktivní plochu Buttonu. Tj. uživatel najede myší na Button a stiskne tla č ítko myši, to drží a odjede kurzorem mimo Button a tla č ítko myši uvolní.
Key Press – akce se provede po stisku ur č ité klávesy. V tomto p ř ípad ě se ani nemusí Button nacházet na scén ě , ale i mimo její aktivní plochu, protože na poloze kurzoru myši nezáleží.
Roll Over – akce na Buttonu se provede, jakmile p ř es n ě j uživatel jen p ř ejede myší.
Roll Out – provedení akce je podmín ě no tím, že uživatel p ř ejede p ř es Button myší, a pak z n ě j sjede pry č . V tu chvíli se spustí akce.
Drag Over – akce se spustí, když uživatel stiskne tla č ítko myši mimo aktivní plochu Buttonu, stále ho drží a najede na Button.
Drag Out – akce je spušt ě na stisknutím tla č ítka myši na Buttonu, jeho držením a následným opušt ě ním aktivní plochy Buttonu.
Obr. 1.2.3: Výb ě r z možností, p ř i jakých se tla č ítko aktivuje
Pozor na jednu drobnost. Na HTML stránce pozná Flash stisk klávesy až poté, co je SWF soubor aktivní, tj. p ř edtím už do n ě j uživatel n ě kam klepnul (i naprázdno) myší. Je to z bezpe č nostních d ů vod ů , aby nap ř íklad reklamní
Flash banner umíst ě ný na stránce vstupu do n ě jakého freemailu nebyl schopen zachytávat stisknuté klávesy (zadávání hesla) atd.
Tím by se dalo toto stru č né pojednání o tla č ítkách uzav ř ít. Záv ě rem si jen ř ekneme, že na jednom Buttonu se dají všechny tyto možnosti vzájemn ě kombinovat. Pokud chcete volat symbol z jiného skriptu, lze ho ve chvíli, kdy je ozna č ený, pojmenovat v panelu Properties → <Instance Name> . Jméno symbolu pak m ů žete volat odkudkoliv. Dáte-li na hlavní scénu nap ř íklad p ř íkaz: _root.nazevtlacitka._visible=0 tak Button zmizí ze scény.
1.3 Tvorba Movie Clipu
Movie Clip se dá považovat za nejvíce používaný symbol v programu Flash . Uvnit ř tohoto symbolu m ů že být libovolný po č et vrstev s libovolným po č tem snímk ů v každé z nich. V podstat ě se tak Movie Clip stává scénou ve scén ě . Animace uvnit ř Movie Clipu b ě ží nezávisle na hlavní scén ě . Pokud umístíte na hlavní scénu, která má pouze jeden snímek, Movie Clip, uvnit ř kterého se odehrává animace, tak ta pob ě ží i p ř esto, že na hlavní scén ě
se na první pohled nic neanimuje. Stejn ě jako na Button, tak i na Movie Clip se dají umisť ovat akce programovacího jazyka ActionScript. Postup je naprosto shodný – tj. na symbolu stiskneme op ě t pravé tla č ítko myši a zvolíme položku Actions . Jakákoliv akce se, stejn ě jako u Buttonu, objeví uvozena mezi závorky tohoto p ř íkazu:
onClipEvent (load) {}
Tento p ř íkaz znamená, že následující akce se provedou pouze p ř i prvním objevení symbolu na scén ě . Tj. když se symbol bude nacházet nap ř íklad na pátém snímku č asové osy, tak se akce spustí, až Flash dojde na tento snímek. Najedeme-li myší na tento p ř íkaz, nabídnou se nám op ě t další volby:
EnterFrame – akce uvozené tímto p ř íkazem se provád ě jí stále dokola, dokud je Movie
Clip na scén ě
Unload – akce za tímto p ř íkazem se provedou pouze jednou, a to ve chvíli, kdy Movie
Clip zmizí ze scény.
Mouse down – tento p ř íkaz se provede pokaždé, když uživatel stiskne levé tla č ítko myši (s pravým a prost ř edním program Flash neumí pracovat). Pokud uživatel tla č ítko myši drží, p ř íkaz už se dále neprovádí.
Mouse up – následující akce se provedou pouze ve chvíli, kdy uživatel uvolní p ř edtím stisknuté tla č ítko myši.
Mouse move – podobné jako základní p ř íkaz, pouze program provede akci hned po stisknutí tla č ítka myši a ne č eká na jeho uvoln ě ní.
Key down – akce se provede, jakmile uživatel stiskne libovolnou klávesu.
Key up – zde se naopak akce provede až po uvoln ě ní stisknuté klávesy na klávesnici.
Data – akce se provede ve chvíli, kdy je Movie Clip zavolán odjinud externím p ř íkazem.
Nap ř íklad: _root.jmenoklipu.promenna = 1
Obr. 1.3.1: Výb ě r podmínky, p ř i jaké se akce na Movie Clipu provede Všechny p ř íkazy se dají op ě t kombinovat, takže v rámci jednoho Movie Clipu m ů žete používat všechny podmínky najednou. Možnosti t ě chto p ř íkaz ů m ů žou svád ě t k používání programových akcí už jenom na Movie Clipech. Pokud umístíte ten samý p ř íkaz p ř ímo na č asovou osu, je vždy o n ě co rychleji proveden, což je znatelné, p ř edevším pokud máte na scén ě nap ř íklad dvacet Movie Clip ů s akcemi EnterFrame . Movie Clip se dá pojmenovat a pozd ě ji volat stejným zp ů sobem jako Button.
1.4 ActionScript
Jak jsme si již ř ekli v p ř edchozích odstavcích, tak ActionScript je programovací jazyk aplikace Flash , který slouží k provád ě ní v ě tšiny složit ě jších akcí. P ř íkazy mohou být umíst ě ny jak na tla č ítka (Buttony), kde se provedou nap ř íklad po stisknutí tla č ítka, p ř ejetím kurzoru myši p ř es n ě j, č i stisknutím libovolného tla č ítka na klávesnici, tak na Movie Clipy – zde se provedou nap ř íklad p ř i na č tení objektu, nebo se provád ě jí nonstop. Poslední možností je umíst ě ní p ř ímo na č asovou osu. V tomto p ř ípad ě nemají žádné další volby a p ř íkaz se provede vždy, když program dojde na požadovaný snímek, kde se akce nachází. Okno ActionScriptu se objeví, pokud na zvoleném objektu č i snímku č asové osy stisknete pravé tla č ítko myši a zvolíte Actions . ActionScript má v sou č asné verzi programu již n ě kolik set p ř íkaz ů , z nichž si velkou č ást probereme až p ř ímo p ř i programovaní her v dalších kapitolách. P ř íkazy ActionScriptu lze bu ď vybírat p ř ímo z jejich seznamu, a pak dopisujete jen n ě které jejich parametry, nebo je m ů žete v p ř ípad ě , že je znáte nazpam ěť , psát p ř ímo. Pomocí C TRL +SHIFT +E se p ř epnete do takzvaného Expert módu a pomocí C TRL+SHIFT +N zase zp ě t do módu Normal
1.5 Textová pole
Flash rozlišuje celkem t ř i typy textových polí, podle jejich použití:
Static Text – b ě žný, pevn ě daný text, jehož obsah nelze m ě nit pomocí ActionScriptu. Č ást textu m ů že odkazovat na jinou HTML stránku. Odkaz se zadává do velkého prázdného bílého pole uprost ř ed v dolní č ásti panelu Properties
Obr. 1.5.1: Odkaz na webovou stránku v textu, která se otev ř e v novém okn ě
Dynamic Text – text, jehož obsah je shodný s obsahem libovolné prom ě nné na scén ě
M ů že tak zobrazovat nap ř íklad herní skóre, č i r ů zné texty, které se pr ů b ě žn ě m ě ní.
Instance Name v panelu Properties je název tohoto pole (stejn ě jako název nap ř íklad
Movie Clipu č i Buttonu), který umož ň uje s textovým polem dále pracovat. Do položky Var: se zadává, jakou prom ě nnou textové pole zobrazuje.
Obr. 1.5.2: Název pole a prom ě nné
Input Text – textové pole, do kterého zadává obsah uživatel za b ě hu aplikace. Nap ř íklad své jméno p ř ed za č átkem hry apod. Toto pole má, stejn ě jako Dynamic Text, položku Instance Name a Var: Č íslem v Maximum Characters m ů žeme omezit
maximální po č et napsaných znak ů do textového pole. Uživatel pak nebude moci zadat delší jméno než nap ř íklad na 15 znak ů Č íslo 0 znamená v tomto p ř ípad ě neomezený po č et. U toho typu pole m ů žete také zm ě nit volbu Single Line na Password a všechny vložené znaky budou vypadat jako hvězdičky (z důvodu bezpeč nosti při zadávání hesla).
Textová pole obsahují další možnosti nastavení, jako zalamování ř ádk ů , zapnutí bílého podkladu č i zapnutí/vypnutí možnosti si obsah textového pole ozna č it a mnoho dalších –cílem této knihy ale není vás nau č it základy programu, proto podrobný popis vynecháme.
1.6 Tvorba preloaderu
Preloader je v ě tšinou krátký program, který pozastaví spušt ě ní hry (programu) na dobu, než se celá hra (program) nebo její č ást na č te z internetu do pam ě ti po č íta č e. M ů že vypadat nap ř íklad jako procentuální ukazatel toho, jak se hra na č ítá. Preloader p ř inutí hrá č e po č kat, než se vše na č te. (P ř i absenci preloaderu m ů že dojít k nedostate č nému na č tení hry, kterou se pak nemusí povést spustit, nebo bude fungovat jen její č ást.)
Podoba preloaderu m ů že být libovolná. V ě tšinou posta č í b ě žný ukazatel v procentech, také to m ů že být linka, která se prodlužuje podle toho, jak se hra na č ítá, č i obrázek, který se nap ř íklad vypl ň uje barvou. V p ř ípad ě složit ě jších her, které se na č ítají dlouho, m ů že preloader vypadat jako malá jednoduchá hra, která návšt ě vníka zabaví i na n ě kolik minut, dokud se nena č te celá v ě tší hra.
Nyní si už ukážeme n ě kolik r ů zných typ ů preloader ů :
Za č neme tím nejsnadn ě jším, který bude ukazovat, kolik procent ze hry už je na č teno. Vytvo ř íme si textové pole Dynamic a do pole Var: napíšeme „ info“ , což bude název prom ě nné, kterou bude pole zobrazovat. Z hotového textového pole ud ě láme Movie Clip a na n ě j dáme tyto akce:
1 onClipEvent (enterFrame) {
2info = Math.round(100*_root.getBytesLoaded()/ _root.getBytesTotal())+" %"; 3if (info == "100 %") { 4 _root.gotoAndStop(2); 5} 6 }
První ř ádek skriptu provádí všechny následující akce na Movie Clipu neustále. Druhý ř ádek je nejpodstatn ě jší. Prom ě nná „info“, kterou zobrazujeme v textovém poli, vznikne tím, že pomocí p ř íkazu _root.getBytesLoaded() zjistíme, jak velká č ást souboru se už na č etla do pam ě ti.
Pokud tuto hodnotu d ě líme celkovou velikostí souboru _root.getBytesTotal() , násobíme stem a zaokrouhlíme na celé č íslo, tak získáme hodnotu 0 až 100 odpovídající skute č nému stavu na č tení souboru. Za ní sta č í pouze dopsat znak % a je hotovo. Te ď už jen na t ř etím ř ádku ov ěř íme, jestli se hra na č etla, a pokud ano, skript provede p ř íkaz na ř ádku č ty ř i – tj. sko č í na snímek dv ě na hlavní scén ě . Tam už se nachází hra. Celý preloader zakon č íme umíst ě ním akce stop(); na první snímek č asové osy na hlavní scén ě . Pokud bychom tam tento p ř íkaz nedali, Flash by preloader p ř esko č il jako každý jiný snímek, č ímž by ztratil svou funk č nost.
O n ě co málo složit ě jší preloader vypadá jako linka, která se prodlužuje podle toho, jak se hra na č ítá. Je dobré n ě jak nazna č it, kam má linka dosahovat (nap ř íklad ud ě lat kolem ní obrys), aby bylo na první pohled vid ě t, kdy bude pln ě na č tená.
Nakreslíme si obdélník, p ř edstavující č áru, který bude mít zapnutou výpl ň i obrys. Obrys necháme tak, jak je, a z výpln ě ud ě láme Movie Clip. Nyní se p ř epneme do vnit ř ku tohoto Movie Clipu a posuneme obdélník tak, aby se st ř ed objektu nacházel v jeho levém kraji (obrázek č . 1.6.1). Pokud by se nacházel uprost ř ed, tak se linka bude prodlužovat ze st ř edu do stran. Te ď se p ř epneme zp ě t na hlavní scénu a Movie Clip p ř esuneme, aby se nacházel uprost ř ed obrysu, tak jako ze za č átku. Poté na n ě j umístíme tyto p ř íkazy:
1 onClipEvent (enterFrame) { 2_xscale = 100*_root.getBytesLoaded()/ _root.getBytesTotal(); 3if (_xscale == 100) { 4 _root.gotoAndStop(2); 5} 6 }
Obr. 1.6.1: Umíst ě ní linky (obdélníku) uvnit ř Movie Clipu
Jak vidíte, tak se programový kód moc neliší od p ř edchozího preloaderu. Druhý ř ádek, místo nastavení prom ě nné, nastaví rovnou velikost objektu podle toho, jak velká č ást hry je už na č tená. Další ř ádek ov ěř uje, jestli nemá linka už stoprocentní velikost. Nezapomene op ě t na p ř íkaz stop(); na prvním snímku č asové osy.
Posledním preloaderem, který si ukážeme, bude vypl ň ování respektive vybarvování obrázku. V našem p ř ípad ě jsme použili dva obrázky – jeden č ernobílý a druhý barevný (což asi
v této knize neuvidíte). Preloader bude fungovat tak, že se zobrazí č ernobílý obrázek, který se postupn ě za č ne vybarvovat. Až se vybarví celý, hra je na č tena.
Zač neme nakreslením č i nač tením barevného obrázku. Ten p ř evedeme opět na Movie Clip, na n ě mž budou tentokrát tyto akce:
1 onClipEvent (enterFrame) { 2gotoAndStop(Math.round(100*_root.getBytesLoaded()/ _root.getBytesTotal())); 3if (_currentframe==100) { 4 _root.gotoAndStop(2); 5}
6 }
Od p ř edchozích p ř ípad ů se tém ěř neliší, akorát nyní nepo č ítáme č íseln ě , kolik SWF souboru je již na č teno, ani nenastavujeme velikost symbolu, ale sko č íme na snímek v Movie Clipu odpovídající stupni na č tení. V našem p ř ípad ě t ě ch snímk ů bude 100, (co snímek, to zhruba jedno procento). Na první snímek hlavní č asové osy dáme op ě t p ř íkaz stop(); a p ř epneme se kone č n ě do Movie Clipu s obrázkem.
Na prvním snímku uvnit ř Movie Clipu dáme také akci stop(); , aby se animace vypl ň ování obrázku nespustila sama od sebe. Barevný obrázek prodloužíme na č asové ose až na snímek 100 a vytvo ř íme novou vrstvu nad ním. Do ní dáme č ernobílou verzi obrázku, kterou prodloužíme op ě t na snímek 100 a vytvo ř íme ješt ě poslední vrstvu, která bude nejvýš. Do ní nakreslíme obdélník č i č tverec, který bude tak velký, že celý obrázek zakryje. Nyní zapneme u objektu animaci typu Shape a na posledním stém snímku ho p ř esuneme nad obrázek tak, aby ho zase odkryl. Mezi prvním a posledním snímkem se tak vytvo ř ila animace, jak obdélník č i č tverec jede sm ě rem nahoru. Poslední, co nám zbývá, je klepnout pravým tla č ítkem myši na název této vrstvy a zvolit Mask . Tím se z ní stane maska vrstvy, která se nachází pod ní. Výsledkem je postupné vypl ňování objektu (pozor, p ř ímo ve Flashi bude vid ě t, jen pokud vrstvu s maskou zamknete). Tím je preloader hotov.
Ty nejd ů ležit ě jší a nej č ast ě ji používané preloadery tedy již umíme, a tak si ješt ě povíme n ě co o tom, jak a v jakém po ř adí Flash celý SWF soubor na č ítá. Za č íná samoz ř ejm ě prvním snímkem, který by m ě l být co nejmenší, aby se nestalo, že uživatel nevidí delší dobu v ů bec nic, což by ho mohlo odradit. Snímek se nena č ítá najednou, ale postupn ě po vrstvách. Po ř adí jejich na č tení lze dokonce ovlivnit ve File → Publish Settings → Flash → Load Order . P ř i standardním nastavení se nejd ř íve na č te to, co je v horní vrstv ě , pak se na č ítá vrstva pod ní a tak dále, až k poslední. Až se na č te i ta, pokra č uje Flash na další snímek scény. Na č te-li se poslední vrstva, pokra č uje se další scénou (pokud existuje). K č emu je to ale dobré v ě d ě t? Pokud máte nap ř íklad velmi rozsáhlou hru o desítkách úrovní, bylo by zbyte č né obt ě žovat hrá č e na č tením celé hry, když se pak nebude schopen ani do dalších úrovní dostat. Sta č í na č íst jen č ást SWF po první úrove ň hry (tj. t ř eba jen 20 % hry) a ty další se už budou na č ítat na pozadí, zatímco uživatel bude hrát. Proto je dobré nedávat nap ř íklad úvodní nabídku hry, obrazovku s nápov ě dou, nebo obrazovku s koncem hry do snímku na konci scény nebo dokonce do dalších scén, protože pak se bude muset zbyte č n ě č ekat, než se na č te všechno p ř ed tím (úrovn ě hry atd.).
Dobrým ř ešením je také n ě které č ásti hry na č ítat z dalších externích SWF soubor ů podle toho, jak jsou zrovna zapot ř ebí, č ímž se vyhneme na č ítání zbyte č ných dat.
Obr. 1.6.2: Ukázka hotového Movie Clipu s vypl ň ováním obrázku