Flash: Preloadery a příbuzná zvířena I. díl - Grafika.cz - vše o počítačové grafice

Flash

Flash

23. listopadu 2001, 00.00 | V tomto miniseriálu se dozvíte, jak postavit preloadery různých typů, druhů a funkcí až po větvení celého projektu s dynamickým načítáním externích souborů pomocí inteligentního preloadingu... a dalších pár užitečných fint. Dnes začneme od úplného základu pro začínající flashare.

V tomto prvním díle se odpovíme na otázky:

• co je to preloading, k čemu se používá a jaká jsou jeho základní pravidla
• základní jednoduché skripty pro ovládání preloadingu
• příklady "grafických" řešení (ovládacích skriptů pro grafiku)
• a ještě vám ukážu takový "zvířecky šidící" preloader :o)

Proč se dělají preloadery?
Preloader NENÍ určený k tomu, aby pobavil nebo rozveselil uživatele, ale k tomu, aby informoval o tom, že se něco děje. To "něco" je natahování obsahu do uživatelova browseru. AS verze 5 umožňuje, na rozdíl od předešlých verzí, informovat uživatele o tom, jaká část stránky je již načtena a kolik ještě zbývá načíst.

Jde o důležitý moment v komunikaci s uživatelem. Snažíte se tak udržet uživatelovu pozornost a snížit na minimum riziko, že ještě před načtením stránky zavře browser, protože se mu nechce čekat za situace, kdy se vůbec nic neděje (po načtení stránky už toto riziko není tak velké, protože pro něj jistě máte připravenou jiskřivou grafiku, strhující obsah a milióny životně důležitých informací :o)))

Základní pravidla pro tvorbu preloaderů
Nejzákladnějším a nejdůležitějším pravidlem je MINIMÁLNÍ datová velikost preloaderu. Už jsem viděl preloadery, které se natahují téměř stejně dlouho, jako hlavní stránka. To už potom ale není preloader!

Z toho plyne, že preloader by měl být velmi jednoduchý a maximálně graficky úsporný. Takže jen ve stručnosti: doporučenými útvary, které mají malý datový objem, jsou základní tvary (kružnice, obdélník apod.), které obsahují málo vektorových uzlových bodů. Pamatujte na to, že každý další vektorový bod přidává data a zvětšuje objem preloaderu.

Poměrně mnoho dat obnáší statický text, který se v .swf interpretuje ve vektorovém popisu. Písmenka jsou poměrně složité útvary, a tedy drahocenná data navíc. Takže s textem se snažte šetřit.

Pokud potřebuje do preloaderu umístit více textu, zaškrtněte na paletce Text Options volbu "Use device fonts". Text se potom nepřevádí do křivek, použije se font na uživatelově počítači. Ale ouha, na jiných platformách to potom nechodí česky (pokud uděláte stránku na PC, uživatel na Mac bude mít místo textů ptačí zobání).
NIKDY nepoužívejte bitmapy, které jsou datově náročné. Vyhýbejte se i složitým vektorovým objektům.

Pokud používáte útvary, které se opakují (např. čáry), udělejte si jedno MC s daným útvarem a ten potom duplikujte jako MC, můžete měnit jeho proporce, obarvit ho pomocí paletky Effect atd.

MC má totiž to kouzlo, že se do .swf vyexportuje jen jednou, všechny další instance jsou jen odkazy, které zabírají nepoměrně méně místa.

Prostě a krátce řečeno, čím jednodušší preloader vytvoříte, tím rychleji se natáhne a tím je funkčnější.

Ideální preloader by měl mít tak 2-3k, snažte se nikdy nedostat přes 5k.

Základní skripty pro řízení preloaderů
Základními skripty pro řízení preloaderů jsou metody "getBytesTotal" a "getBytesLoaded". "getBytesTotal" nám zjistí, kolik bytů se má celkově načíst. Pokud má třeba načítané .swf 50k, při skriptovém dotazu getBytesTotal nám skript zobrazí přesně tuto hodnotu, kterou si přečte ze serveru.

"getBytesLoaded" nám zobrazí "kolik bytů už bylo načteno". Tento údaj se samozřejmě mění v průběhu načítání, a to od nuly na počátku až po hodnotu velikosti celého souboru (kterou zjistíme z getBytesTotal).

Pokud máte problém představit si tyto metody, uvedu malý příklad. Představte si, že vám někdo dluží 1000 Kč. Znamená to, že celkový dluh je 1000 Kč, to je obdoba getBytesTotal. Dotyčný vám splácí po stokoruně a provedl už tři splátky, tzn. vrátil vám 300 Kč. To je hodnota, obdobná getBytesLoaded. Po další stokorunové splátce se tato hodnota zvýší na 400 Kč a (když to půjde dobře :o)) se nakonec dostane na cílových 1000 Kč.

Jak vidíte, pomocí dvou jednoduchých údajů zjistíme vše, co potřebujeme vědět, a ostatní si dokážeme jednoduše spočítat.

Další skripty už slouží jen ke grafické interpretaci probíhajícího načítání.

"Vnitřní" preloader
Existuje více druhů preloaderů. Postupně si popíšeme všechny, v dnešním díle se podíváme na nejjednodušší variantu, které říkám "vnitřní preloader".
Je to preloader, který umístíte na začátek stránky, tedy na první snímky hlavní časové osy.
Flash načítá .swf obsah souboru po jednotlivých snímcích. Filozofií vnitřního preloaderu je načíst tento preloader jako první část stránky, a ten nám bude indikovat průběh načítání dalších částí stránky (dalších snímků).

A hurrráááá na první jednoduchý příklad!
Nejprve si stáhněte sadu ukázkových souborů zde a otevřete si soubor, který se jmenuje "internal1.fla"

Jednoduchý preloader s indikací stavu načtení
V souboru "internal1.fla" najdete následující elementy stránky: v první řadě jsem na poslední frame umístil obrázek (bitmapu), který vytváří "umělou zátěž", tj. simuluje zbytek stránky, který se po načtení preloaderu postupně načítá. Tato "umělá zátěž" nám tedy umožní testovat funkčnost preloaderu.

Ve vrstvě "skripty" jsou umístěny veškeré skripty, které řídí preloading. Pod ní je vrstva, ve které najdete ukázku základního typu grafického zobrazení průběhu preloadingu.

Nejprve si soubor otestujte. Stisknete CTRL + Enter, nyní si nahoře na liště otevřete volbu Debug a v ní zvolte hodnotu 28.8. Tím budete simulovat chování stránky u uživatele, připojeného pomocí modemu s přenosovou rychlostí 28.8. Dalším stiskem CTRL + Enter se vám spustí tato simulace.

Jak vidíte, proužek preloaderu se zvětšuje od nulové hodnoty až po maximální. Po dosažení maximální hodnoty skočí skript na "hlavní stránku".

Nejprve se podívejme na grafický preloader a jeho "konstrukci". Otevřete si klip s názvem "loadr" (nic kreativnějšího mě nenapadlo :o))). Pod textem vidíte světle žlutý proužek, to je MC, který se jmenuje "ctec", tedy čteč, který "čte" hodnoty načítání. Když tento čteč odsunete, najdete pod ním modrý proužek, který vlastně vymezuje maximální hodnotu. Díky němu uživatel vidí, kam až se musí "ctec" zvětšit, tedy kde je konec načítání.

MC "ctec" tedy budeme v průběhu preloadingu zvětšovat ve vodorovném směru od 0 do 100%. A to už se dostáváme k prvním skriptům.

Podívejte se na první frame.

_root.loadr.ctec._xscale = 0

To znamená, že na prvním snímků nastavíme žlutý proužek MC "ctec" na počáteční nulovou hodnotu. Skript přejde na další snímek:

natahnout = _level0.getBytesTotal()
natazeno = _level0.getBytesLoaded()
_root.loadr.ctec._xscale = 100*natazeno/natahnout

Proměnná "natahnout" nám zjišťuje, kolik se má celkově načíst bytů. Proměnná "natazeno" zjišťuje, kolik bytů již bylo celkově staženo.
Poslední řádek velmi jednoduše porovnává tyto dvě hodnoty a vyjadřuje je v procentech. Tento počet procent je graficky zobrazen jako vodorovná velikost MC "ctec".

Třetí frame obsahuje naprosto totožné skripty. Nebudu vás teď zatěžovat vysvětlováním proč používám dva framy s totožnými skripty za sebou, to vysvětlím v pokračování seriálu, pro teď si pamatujte, že je to praktické a vždy používejte při preloadingu takto zdvojený skript.

Čtvrtý frame obsahuje vyhodnocovací skripty.

if ((!(natazeno == null || natahnout == null)) && natazeno >= natahnout) {
    _level0.gotoAndStop (5)
} else {
    _level0.gotoAndPlay(2)
}

První řádek skriptu, připomínající úplnému začátečníkovi pravděpodobně nějaký tajemný alchymistický vzorec :o), zjišťuje dvě důležité věci:

jsou hodnoty proměnných "natazeno" a "natahnout" definované?

To je velmi důležité, protože při prvním průchodu smyčkou Flash nezná hodnoty těchto proměnných a vrazí hodnotu "nedefinováno", tedy "null". K takové situaci může dojít i uvnitř některých čekacích smyček atd... ale tím se nemusíte zatěžovat, v tomto okamžiku je důležité, abyste pochopili funkci skriptu a naučili se jej používat.

Výraz

!(natazeno == null || natahnout == null)

tedy znamená "když není pravda, že jedna z proměnných má nedefinovanou hodnotu". Nepřehlédněte ten nenápadný vykřičník na začátku, to je operátor "not", který vkládá do výrazu hodnotu "není pravda".

Další část kontroly porovnává hodnoty proměnných:

natazeno >= natahnout

tedy jestli jsou natažena všechna potřebná data. Možná vás trochu zaráží to, že neporovnávám pomocí jednoduchého rovnítka, ale pomocí výrazu ">=", neboli "větší nebo rovno". Už jsem o tom psal v jiném svém tutorialu: ano, pokud mám celkově načíst 1234 bytů, tak má proměnná "natahnout" tuto hodnotu, proměnná "natazeno" se bude zvětšovat od 0 do 1234, takže nikdy nemůže být větší. Ovšem Flash se občas "netrefí" a vyhodí konečnou hodnotu jako "větší" než cílovou.... pravděpodobně je to způsobené nepřesnostmi při výpočtech s plovoucí desetinnou čárkou. V každém případě ">=" nám zajistí, že se Flash strefí vždycky.

Mezi výše popsanými dvěma podmínkami je ještě vložený operátor "&&", tedy logické AND. Skript tedy říká "pokud jsou obě hodnoty proměnných definovány A ZÁROVEŇ jsou všechna cílová data načtená...".

Poté se skript rozhodne, jak se zachová. Pokud jsou splněny obě podmínky najednou, skript skočí na frame 5, kde začíná hlavní stránka. Pokud nejsou splněny, skript odskočí na druhý frame a načítací smyčka pokračuje.

Celý proces načítání tedy probíhá tak, že skript skáče na framy 2 a 3 tak dlouho, dokud nejsou načtená veškerá data stránky, při každém skoku ve smyčce "posune" žlutý proužek, indikující načítání. Po ukončení načítání skript povolí zobrazení dalšího obsahu stránky.

Tak plní preloader dvě funkce najednou: jednak ukazuje uživateli v jaké fázi se nachází načítání, jednak zabraňuje postupnému naskakování jednotlivých částí stránek, které je nehezké a leckdy matoucí, a zobrazí vše najednou až po finálním načtení.

Další preloadery, které si dnes ukážeme, budou obsahovat velmi podobné skripty, pouze budeme měnit způsob grafického zobrazování. Snažil jsem se vytvořit všechny více i méně používané metody až po "zvěrský šidič" :o)), který jsem si nechal až na závěr.

"Maskované" zobrazování
Otevřete si soubor "internal2.fla", nejdříve si ze souboru "internal1.fla" překopírujte obrázek na poslední frame (nedával jsem tu "simulační zátěž" do všech souborů, abyste nemuseli stahovat mnohamegový soubor, ale musíte si tu bitmapu vždycky zkopírovat, jinak vám nebude fungovat testování souboru).

Nyní si soubor otestujte. Jak vidíte, jde jen o obměnu předchozího. V tomto případě se však nezvětšuje "indikační" proužek, ale odkrývá se. Proužek s barevným přechodem je tedy stále na místě, je vymaskován modrým proužkem (MC "ctec"), a tento MC se zmenšuje od 100% do 0. Postupným zmenšováním odkrývá proužek s přechodem.

Já jsem v tomto případě nevymaskoval celý proužek, ale nechal jsem nahoře tenký proužeček, který indikuje uživateli kolik se bude celkově načítat.

"Rozšířená detekce"
Otevřete si soubor "internal3.fla", překopírujte si na poslední frame "simulační zátěž" a otestujte si soubor.

Jak vidíte, po dosažení určité hodnoty se vždycky rozsvítí odpovídající světélko (a jistě jste si všimli, že jsem preloaderu také věnoval trochu úsilí po grafické stránce :o))). Tento způsob indikace preloadingu můžete použít i samostatně, bez plynule nabíhajícího proužku. A domyslet k němu jiné grafické ztvárnění, například při dosažení cílové mezihodnoty je začne některý z objektů otáčet atd.

Podívejme se v rychlosti na řídící skripty. Každé ze světélek, tedy z klipů "s0" až "s5", obsahuje v horním layeru klip "subSvetlo", který simuluje rozsvícení světélka. Při startu se všechna světélka "zhasnou" tím, že se klipy "subSvetlo" zneviditelní:

onClipEvent (load) { this.subSvetlo._visible = false }

V samotné načítací smyčce na 2. a 3. frame jsou přidány tyto skripty:

index = Math.floor(procenta/20)
_root["s" + index].subSvetlo._visible = true

Jak pracuje tento skript? Základní myšlenka je tato: při dosažení každých dalších dvacet procent (tedy při hodnotách 0, 20, 40, 60, 80, 100) "rozsviť" další klip. Klipy jsou pojmenovány "s0" až "s5", znamená to tedy, že potřebuji z řady hodnot "0, 20, 40, 60, 80, 100" dostat hodnoty "0, 1, 2, 3, 4, 5".

Právě to dělá první řádek skriptu: do proměnné "index" se zapíše hodnota proměnné "procenta", vydělená 20, a pomocí matematické operace Math.floor ("základ čísla", funkce podobná zaokrouhlování na celé číslo, která vrací celé číslo, které je menší nebo rovné hodnotě) převede na celé číslo.

V druhém řádku potom použiji hodnotu proměnné "index" a pomocí ní "rozsvítím" příslušné světélko. Například pro hodnotu načtení dat 40% bude hodnota proměnné "index = 2". Skript tedy najde klip "s2" a zviditelní jeho dceřinný klip "subSvetlo".

"Ciferníkový" preloader
Otevřete si soubor "internal4.fla", překopírujte si na poslední frame "simulační zátěž" a otestujte si jej.

Tento typ preloaderu používá grafickou indikaci načítání, podobnou ručičce přístroje. Kromě toho, že jsem i u tohoto preloaderu věnoval několik pikosekund jeho grafice :o)), jistě jste si povšimli lehce nervózního zachvívání ručičky, které je charakteristické pro některé analogové měřiče a dodává animaci trochu více realističnosti a živosti.

Řídící skript pohybu ručičky je velmi jednoduchý a je založený na řízení natočení neboli rotace klipu:

_root.cifernik.rucicka._rotation = procenta - 60

Rotace probíhá od -60 stupňů, proto od hodnoty procentuálního načtení odečítáme startovní hodnotu 60. K celému skriptu je potom přidané náhodně vygenerované číslo, která zajistí nepravidelné chvění ručičky:

_root.cifernik.rucicka._rotation = procenta - 60 + (2.5 - 5*Math.random())

Část s náhodně generovanými hodnotami vrací hodnotu od -2,5 do 2,5.

"Kruhový" preloader
Přiznávám, že tenhle typ preloaderu jsem někde viděl a dalo mi hodně zabrat, abych přišel na to, jak ho napodobil. Princip spočívá v indikaci načítání pomocí kruhové výseče (je to vlastně takový koláčový graf, který neustále bobtná :o). Nakonec se mi podařilo na příslušné řešení přijít. Nejde o žádnou složitou skriptovost, ale o vcelku jednoduchý nápad... jen na něj přijít... :o)

Takže si otevřete soubor "internal5.fla", překopírujte si na poslední frame "simulační zátěž" a otestujte si jej.

Podívejte se nyní dovnitř loaderu: u středu křížku najdete dva na první pohled prázdné klipy. Když jeden z nich otevřete, zjistíte, že obsahuje modrý obdélníček a oranžovou půlkruhovou masku. Pomocí skriptů se otáčí obdélníček a ten se pak objevuje skrze půlkruhovou masku jako kruhová výseč.

A protože se takto pomocí masky nedá udělat plný kruh, musíme použít dva půlkruhy.

Tyto dva půlkruhy jsou potom řízeny pomocí skriptu:

if (procenta <= 180) {
_root.citac.ct2.c1._rotation = 0
_root.citac.ct1.c1._rotation = procenta
} else {
_root.citac.ct1.c1._rotation = 180
_root.citac.ct2.c1._rotation = procenta - 180 }

Místo 100% používám v tomto skriptu 360 stupňů jako cílovou hodnotu. Pokud je načteno méně než 50% dat, což odpovídá 0 - 180 stupňů z kruhu, jeden z modrých obdélníků zůstává na hodnotě nula, druhý se postupně otáčí do půlkruhové masky. Při více než 50% načtených dat se spustí obdobná animace pro druhý obdélník, až po zaplnění celé plochy kruhu.

Jak vidíte, opravdu jednoduché, ale přijít na to...

Zdůraznění hodnot preloaderu
Průběh načítání můžete ještě zvýraznit použitím nějaké další vlastnosti instance klipu. Jenom jako malou ukázku jsem vám připravil soubor "internal6.fla". Otevřete si jej, vložte na poslední frame "simulační zátěž" a otestujte.

Oproti předchozímu souboru jsem udělal drobnou změnu: přidal jsem změnu hodnoty _alpha neboli průhlednosti.

S přibývajícím objemem načtených dat se preloder postupně "zvýrazňuje". V tomto případě je to samozřejmě zbytečné, ale u graficky složitějších preloaderů se vám podobná technika může hodit pro upoutání pozornosti uživatele... a občas jen tak pro efekt...

"Zvěrský šidič" aneb preloader, který měří neměřitelné
Na závěr dnešního tutoru jsem vám připravil takovou malou ukázku toho, jak je člověk důvěřivý a hloupoučký :o)))

Když jsem na tenhle typ preloaderu narazil poprvé, dostal jsem záchvat paniky: proboha, já umím jenom obyčejné stránky ve Flashi, ale tohle nikdy nezvládnu.... až o pár týdnů později mi došlo, že to je jenom takový malý podvůdek... prostě zvěrské šizení nic netušících lidiček :o)

Otevřete si soubor "internal7.fla", vložte "simulační zátěž" a otestujte. Hmmmm, to je ale podivuhodnost, že? Já jsem tenkrát skutečně uvěřil, že procesy, které se na obrazovce zobrazují, skutečně probíhají :o). Ale uznejte, že to vypadá efektně a high-tech?

Na druhou stranu skripty k takovému preloaderu nejsou zas tak úplně jednoduché... jejich výklad v tomto tutorialu neuvádím, protože by to bylo téma na celý nový tutík. Tedy jen letmo: základ je v tom, že cílových 100% rozdělím v různých poměrech mezi několik "podloaderů"...

Závěrem dnešního tutorialu...
Tak, pokud jste zatím byli začátečníci, po dnešku byste měli mít velmi dobrý základ pro tvorbu vlastních preloaderů. A zase trochu více zkušeností se skriptováním.

Příště si povíme něco o tom jak zobrazovat uživateli takové hodnoty jako jsou rychlost připojení k internetu, čas, potřebný k natažení celé animace, průběžný čas stahování atd.