Flash - Preloader
25. 2. 2010
Začneme tým, že si vytvoríme nový flash dokument File>New..., z dialógového okna vyberieme Flash Document.
Teraz si premenujeme layer (vrstvu) na preloader. Z panelu Tools si označíme Text Tool (T) a do scény vložíme nápis, ktorý bude návštevníka informovať o tom, čo sa deje (to preto aby si nemyslel, že stránka zamrzla atď.). Bežne sa dáva „Načítavam, čakajte prosím...“ alebo hocičo iné. Opäť, z panelu Tools vyberieme nástroj Selection Tool (V), kliknutím na nami vytvorený nápis si ho označíme a zarovnáme ho na stred scény pomocou Align (CTRL+K).
Náš stále označený nápis prekonvertujeme na symbol Movie Clip pomocou Modify>Convert to Symbol (F8). V dialógovom okne označíme Movie Clip a do políčka Name napíšeme meno symbolu, napr. „preloader“ a potvrdíme Ok.
Nástrojom Selection Tool (V) dvojklikom na nápis začneme editovať symbol „preloader“, čím sme prešli z hlavnej časovej osi na časovú os instancie „preloader“.
Pod našim nápisom si teraz spravíme pásik, ktorý bude znázorňovať priebeh načítania animácie. Tento pásik vytvoríme nástrojom Rectangle Tool (R) jednoduchým kliknutím a potiahnutím myši na scéne. Po označení môžeme zmeniť hrúbku obrysu, farbu obrysu a farbu výplne. Klikneme na Selection Tool a označíme len výplň ktorú následne prevedieme na symbol Modify>Convert to Symbol (F8). V dialógovom okne opäť symbol najprv pomenujeme (napr. „ukazovatel“), a Orientation nastavíme na ľavý stred.
Označíme tento nový symbol v paneli Properties, do Instance Name napíšeme ukazovateľ. Pod týmto názvom bude tento symbol vystupovať v ActionScripte (názov symbolu zobrazený v Library nemá s Instance Name nič spoločné). Fajn, to by sme mali hotovú grafickú časť a môžeme sa vrhnúť na skriptovanie.
Teraz si vytvoríme textové pole, ktoré bude ukazovať percentuálny priebeh načítavania. Z panelu Tools si vyberieme nástroj Text Tool (V). V paneli Properties si nastavíme font, veľkosť, farbu a to najdôležitejšie – typ textového poľa. Z roletkového menu, kde by pôvodne malo byť nastavené Static Text, vyberieme Dynamic Text.
Kliknutím do scény vytvoríme Dynamic Text Field, do ktorého napíšeme „100%.“ Je jedno aký text sem teraz vložíme, pretože o obsah tohto textového poľa sa postará skript, píšeme to tam preto, aby sme vedeli čo to je. Zmeníme nástroj na Selection Tool (V), označíme naše textové pole a umiestnime ho na vhodné miesto na scéne (napr. pod symbol „ukazovateľ“). V paneli Properties si ešte nastavíme Instance Name, zarovnávanie textu a tiež určíme, aké znaky bude toto textové pole obsahovať. Instance Name zmeníme rovnako ako prvý raz, tentokrát použijeme názov „percentá“ Zarovnanie nastavíme na stred a kliknutím na tlačítko Embed... môžeme nastaviť, aké znaky sa budú používať. Z ponuky vyberieme Numerals a do riadku Include Theses Characters vpíšeme znak percenta (%).
Vrátime sa na hlavnú časovú os (doteraz sme pracovali na časovej osi symbolu „preloader“) a označíme si prvý frame. Otvoríme si okno Actions Window>Actions (F9) a vložíme tento skript:
stop();
Týmto príkazom si zaistíme, aby sa animácia nezačala prehrávať pred úplným načítaním. Ďalej si označíme symbol „preloader“ a do okna Actions prepíšeme toto:
onClipEvent (load) {
nacitane = 0;
celkom = 0;
pomer = 0;
percenta.text = 0;
}
onClipEvent (enterFrame) {
nacitane = _root.getBytesLoaded();
celkom = _root.getBytesTotal();
pomer = Math.ceil((nacitane/celkom)*100);
percenta.text = pomer+"%";
ukazovatel._xscale = pomer;
if (pomer == 100) {
_root.gotoAndStop(2);
}
}
Príkaz onClipEvent (load) {} vykoná tú časť skriptu, ktorá je medzi vlnenými zátvorkami {} a pri načítaní symbolu „preloader“ na scénu. Ide o vytvorenie premenných, s ktorými budeme ďalej v skripte pracovať. Premennú percenta musíme doplniť identifikátorom .text, pretože ide o názov textového poľa.
onClipEvent (enterFrame) {} funguje podobne ako predošlý príklad, s tým rozdielom, že svoju časť skriptu vykoná vždy, keď sa symbol „preloader“ zobrazí na scéne (pri pôvodnom nastavení scény je to 12 krát za sekundu, túto hodnotu si môžeme zmeniť v Document Properties Modify>Document (CTRL+J), riadok Frame Rate).
nacitane = _root.getBytesLoaded(); bude premennej „nacitane“ priraďovať, koľko bytov sa už stiahlo.
celkom = _root.getBytesTotal(); priraďuje koľko bytov má celá animácia.
pomer = Math.ceil((nacitane/celkom)*100); je jednoduchá matematická operácia delenia a prevedenia na percentá.
Príkaz Math.ceil() slúži na zaokrúhľovanie výsledku smerom hore.
percenta.text = pomer+"%"; nastavuje obsah dynamického textového poľa s názvom „percenta“.
ukazovatel._xscale = pomer; nastavuje šírku symbolu priebeh na osi x.
príkaz if (){} kontroluje, či je splnená podmienka zadaná v oblých zátvorkach. Ak je podmienka splnená, vykoná sa časť skriptu medzi vlnenými zátvorkami, v našom prípade animácia prejde na Frame číslo 2. Ak podmienka splnená nieje, celý skript sa opakuje odznova, kým sa podmienka nesplní.
Takýto preloader bude správne fungovať, len ak sa bude nachádzať ako jediný na prvom snímku animácie. Ak si chceme otestovať našu prácu, tak si najprv do animácie musíme vložiť niečo, čo sa bude načítavať. Na hlavnej časovej osi si vytvoríme novú vrstvu Insert>Timeline>Layer a pomenujeme si ju napr. „obsah“ a vytvoríme si na druhom frame, ktorý by mal byť prázdny Blank Keyframe kliknutím naň pravým tlačítkom myši a z kontextového menu vyberieme Blank Keyframe. Do tohto frame si nahádžeme nejaké dátové závažie (napr. obrázky) pomocou File>Import to Stage.
Hotovo! Teraz už stačí len preloader otestovať. Spustíme Control>Test Movie (CTRL+ENTER). Hneď po spustení by sa mal zobraziť druhý Frame s naimportovanými obrázkami. Stalo sa to z toho dôvodu, že animácia sa z disku načíta okamžite. Testovacie prostredie nám ponúka simuláciu sťahovania z Internetu. Túto rýchlosť si môžeme nastaviť v menu testovacieho prostredia View>Download Settings>... Simuláciu spustíme View>Simulate Download (CTRL+ENTER).
Ak by ste potrebovali, alebo len chceli, tak zdrojový kód nájdete tu
Verím, že Vám tento tutoriál pomohol a bude vám užitočný :-)
Komentáre
Prehľad komentárov
Zatiaľ nebol vložený žiadny komentár.