Ondřej Brichta 16.5.2005
Preloader by měl patřit ke každé větší flashové animaci. Jeho účelem je informovat o stavu načítání celé animace a její následné spuštění. V dnešním díle si ukážeme, jak se takový preloader dělá.
Pokud vstoupíme na webovou stránku s flashovou animací, začne se stahovat příslušný swf soubor. Pokud ale uživatel začne provádět akce v neúplně nahraném souboru, může se dočkat nepříjemného překvapení, v podobě nedostupnosti některých funkcí či objektů, které se ještě nestihly načíst.
Preloader by měl zajistit, že se animace začne přehrávat až ve chvíli, kdy je celá kompletně stažená.
Preloader by měl být co nejjednodušší, se základními informacemi o tom, co se právě děje a o stavu nahrávacího procesu. Měli bychom se vyvarovat preloaderů, které jsou zbytečně rozsáhlé a náročné na data. Rozumný jednoduchý preloader se musí vejít do velikosti 1KB.
Jedná se o MovieClip (MC), umístěný na prvním snímku osy, který neustále vyhodnocuje velikost již stažených dat a podle jejich hodnoty zobrazuje příslušné informace. Jakmile dojde k načtení celé animace, zajistíme jednoduchým příkazem postup na další snímek osy.
Preloader, který si vytvoříme, jste už určitě mnohokrát viděli. Vytvoříme objekt, který bude zobrazovat aktuální velikost staženého souboru v procentech a tato hodnota bude graficky znázorněna na malém obdélníku.
Nejdříve si připravíme výplň objektu na panelu „Color Mixer“. Jako typ zvolíme „Linear“ a vytvoříme přechod, který je na okrajích černý a uprostřed bílý.
Obr. 1
Zvolíme nástroj pro kreslení obdélníků „Rectangle Tool“ a otevřeme si panel vlastností „Properties“. Zde zvolíme barvu a typ ohraničení objektu.
Obr. 2
Nakreslíme úzký obdélník
Obr. 3
My ale chceme, aby byla výplň otočená. Změnu tvaru výplně provedeme nástrojem „Fill Transform Tool“.
Obr. 4
Zvolíme tento nástroj, klikneme na výplň, myší najedeme k pravému hornímu rohu objektu k symbolu kolečka, až se objeví místo kurzoru kruh ze šipek. Nyní můžeme tažením myší otočit výplň o 90 stupňů zpět.
Obr. 5
Dále najedeme myší na čtverec, který se nachází na stejné úsečce, jako je kolečko a zmenšíme výplň až na okraj objektu.
Obr. 6
Klikneme pravým tlačítkem myši na výplň a z menu zvolíme „Convert to Symbol“.
Obr. 7
Pojmenujeme MC jako „preloadbar“
Obr. 8
Otevřeme si panel vlastností „Properties“ a pojmenujeme instanci objektu opět „preloadbar“.
Obr. 9
Máme tak vytvořen MC, který budeme roztahovat, podle toho, kolik procent z animace máme načteno.
Aby objekt správně měnil své rozměry, musíme posunout jeho registrační bod. Tento bod ukotvuje objekt k danému místu, od kterého se provádí změna velikosti. Defaultně je bod umístěn uprostřed nových klipů. Při animaci změny velikosti se tak MC roztahuje na každou stranu souměrně.
My ale chceme, aby se objekt roztahoval zleva doprava, proto tento bod posuneme nalevo. Zvolíme nástroj „Free Transform Tool“.
Obr. 10
Klikneme na objekt výplně, všimneme si malého kolečka uprostřed objektu,
Obr. 11
které posuneme do levého horního rohu.
Obr. 12
Pro snazší umisťování, můžeme zaškrtnout volbu přichytávání k objektům, která se zobrazí, když klikneme prvým tlačítkem myši někde na ploše dokumentu.
Obr. 13
Dále si vytvoříme textové pole, které bude zobrazovat informace o načtených datech. Zvolíme nástroj „Text Tool“.
Obr. 14
Pomocí něho na ploše vytáhneme obdélník textového pole.
Obr. 15
Otevřeme si panel vlastností „Properties“, zvolíme typ pole na „Dynamic Text“ a pojmenujeme jej jako „preloadstatus“. Tímto jsme vytvořili instanci objektu textového pole, do které budeme moci později vkládat text.
Obr. 16
Nyní zvolíme nástroj pro výběr objektů „Selection Tool“, vybereme celou skupinu nakreslených objektů a vytvoříme z ní nový objekt.
Obr. 17
Objekt třeba pojmenujeme preloader.
Nyní vytvoříme druhý, prázdný klíčový snímek na časové ose. Klikneme pravým tlačítkem myši na druhý snímek osy a zvolíme „Insert Blank Keyframe“.
Obr. 18
Do tohoto druhého snímku vložíme objekt, který zabere hodně místa, nejlépe fotografii. Zvolíme z hlavního menu: „File - Import - Import to Stage“ a vybereme obrázek.
Aby nám celý preloader fungoval, musíme nejprve zastavit přehrávání hned na prvním snímku. Klikneme tedy na první snímek a otevřeme panel akcí, kde napíšeme příkaz:
stop();
Ten znamená, že se zde animace zastaví. Stejný příkaz vložíme i do druhého snímku.
Nyní už zbývá poslední a nejdůležitější část kódu. Na hlavní scéně klikneme na objekt preloaderu a otevřeme si panel akcí, kde přiřadíme objektu následující funkce:
onClipEvent (load) {
preloadbar._xscale = 0;
}
onClipEvent (enterFrame) {
celkem = _root.getBytesTotal();
nahrano = _root.getBytesLoaded();
procNahrano = nahrano/(celkem/100);
procent = Math.round(procNahrano);
preloadstatus.text = "Již bylo staženo: "+procent+"% z animace.";
preloadbar._xscale = procNahrano;
if (procent == 100) {
_root.gotoAndStop(2);
}
}
První výraz „onClipEvent (load)“ určuje, co se provede ihned po načtení tohoto objektu. My jsme do hranatých závorek napsali, že objekt, který je vložen v tomto MC a je pojmenován „preloadbar“ bude mít šířku 0 procent (vlastnost _xscale určuje šířku v procentech ve směru x-ové souřadnice).
Druhý výraz „onClipEvent (enterFrame)“ určuje, co se bude provádět neustále. My v této části využijeme metody „getBytesTotal()“, která umožňuje zjistit celkovou velikost objektu. V našem případě jsme ji využili pro zjištění velikosti celé animace. Druhá metoda „getBytesLoaded()“ umožňuje získat aktuální velikost načtených bytů objektu.
Z těchto hodnot určíme pomocí proměnné procnahrano, kolik procent je již staženo. Pro použití v textu ji zaokrouhlíme pomocí metody „round“ z třídy „Math“ a vložíme do proměnné „procent“.
Pro zobrazení textu v dynamickém textovém poli použijeme příkaz „preloadstatus.text=“, který říká, jaký text má být v textovém poli s názvem „preloadstatus“.
Dynamickou změnu velikosti obdélníku provedeme příkazem „preloadbar._xscale=“, který určuje, jak má být objekt široký. Vzhledem k tomu, že proměnná „procNahrano“ není zaokrouhlena, bude změna velikosti plynulejší.
A posledním příkazem je podmínka, která testuje hodnotu načtených procent. Pokud jsme již stáhli celý soubor, můžeme zobrazit animaci na snímku 2 hlavní osy.
Chceme-li otestovat výsledek, stisknutím CTRL+Enter, se dostaneme do okna přehrávače, ve kterém máme, mimo jiné, možnost zobrazit, jak by se teoreticky mohla animace načítat při různém druhu připojení. Toto nastavení si zvolíme v horním menu: „View - Download Settings“ a pak zvolením „View - Simulate Download“ můžeme sledovat, jak by se animace nahrávala při daném typu připojení.
Obr. 19
Simulace připojení je čistě teoretická, v reálu to vypadá často jinak, ale pro hrubé testování je tato funkce užitečná.
Poznámka: Pozor na psaní proměnných, názvů objektů a různých výrazů ActionScriptu. Názvy proměnných a instancí objektů nesmí začínat na číslovky a další speciální znaky, proto je raději pojmenovávejte písmeny. Druhé pravidlo ActionScriptu je, že rozlišuje velká a malá písmena. Takže „promA“ není totožná s názvem proměnné „proma“. Jedná se o dvě různé proměnné!
Zdrojový soubor ukázky ke stažení zde.
