Ako vytvoriť Flash preloader v ActionScript 2

Pri tvrobe Flash aplikácí sa často stretneme s tým, že uživateľ pri načítaní našej stránky čaká niekoľko sekúnd kým mu nabehne Flash aplikácia ktorú sme na stránku vložili. Počas týchto pár sekúnd uživateľ mnoho krát vôbec netuší, že sa na stránku načítava nejaká aplikácia (prípadne animácia) a už vôbec netuší, ako dlho načítavanie potrvá.

Z tohto dôvodu sa pri aplikáciach väčších než pár desiatok kilobajtov odporúča použiť preloader. Preloader informuje uživateľa nielen o tom, že má čakať na načítanie našej aplikácie, ale aj o tom koľko to bude trvať.

Preloader môžeme vytvoriť s ľubovoľným vzhľadom a určite sme sa s nimi už stretli:

Ukazka roznych typov preloaderov

V tomto príklade si vytvoríme veľmi jednoduchý preloader, ale nič nám nebráni jeho vzhľad zmeniť.

Začneme s novým súborom (programovať budeme v ActionScript 2), ale jednoducho môžeme preloader pridať aj k už existujúcej aplikácii.

Vytvoríme si vrstvu, ktorú nazveme „Actions“.
Na tejto vrstve pridáme na prvom a druhom Frame prázdny KeyFrame [F7].

Pod túto vrstvu pridáme novú vrstvu. Nazveme ju napríklad „obsah“. Poslúži nám na vloženie obsahu, aby sme mohli nasimulovať načítavanie reálnej aplikácie. Rovnako ako pri vrstve Actions, aj tu vložíme na prvý a druhý Frame nový prázdny KeyFrame [F7].

Označíme prvý Frame na vrstve Actions a stlačíme klávesu [F9]. Týmto otvoríme editor na vkladanie príkazov ActionScript na prvý Frame. Vložíme tu jediný príkaz: stop(); ktorý zabezpečí, že aplikácia zostane stáť na prvom Frame (kde bude iba náš preloader).

Vrstvy v nasom Flash preloadery

Na druhom Frame vo vrstve „obsah“ vložíme obrázok. Čím väčší, tým lepšie, pretože budeme mať možnosť vidieť ako preloader zobrazuje načítanie aplikácie až kým sa tento obrázok nenačíta.

Pod vrstvou Actions vložíme novú vrstvu. Nazveme ju „preloader“  a na prvom Frame vložíme nový KeyFrame [F6].

Do tohto KeyFrame vložíme text (typu Static text) s textom „Načítavam…“. Frame dva zostane prázdny.

Označíme práve vložený text a konvertujeme ho na Symbol typu MovieClip, klávesa [F8] a potvrdíme tlačítkom OK.

Vôjdeme do tohto Symbolu (dvojklik myšou nad symbolom) a uvidíme časovú os Symbolu.

Momentálne je tu iba vrstva s našim „Načítavam…“ textom. Tak si ju pomenujme „text“.

Vytvorme si ďalšie tri vrstvy: „Actions“, „Percenta“ a „Posuvnik“.

Na prvom Frame vo vrstve Actions stlačíme [F9] a v editore zapíšeme známy príkaz stop();

Do vrstvy percenta vložíme text. Na paneli vlastnosti nastavíme že pôjde o „Dynamic text“ a Instance name mu dáme rovnako ako na obrázku „percentaz“.

Nastavenie Dynamic textu

Keďže ide o dynamic text, tak potrebujeme špecifikovať, ktoré znaky majú byť pripojené k nášej Flash aplikácií. Týmto spôsobom zabezpečíme, že každý uživateľ uvidí znaky v tom fonte v ktorom sme chceli.

Klikneme na tlačítko Embed a vyberieme, že chceme pripojiť  čísla (Numbers [0..9]) a taktiež znak %.

Pripojenie (Embed) znakov do Flash aplikácie

Do vrstvy „posuvník“ nakreslíme štvoruholník bez obrysovej čiary a na paneli nástrojov mu nastavíme šírku (width) na 1px a výšku (height) na 10px. Toto bude ukazovateľ, ktorý bude s pribúdajúcimi precentami načítania aplikácie rásť tak, že mu zväčšíme šírku.

Preloader pred a po úprave vlastnostiOznačíme náš „posuvník“ a zkonvertujeme ho na symbol MovieClip [F8]. Tento MovieClip nazveme (dáme mu Instance Name) „ukazovatel“.

Opustíme editovanie Preloadaru a vrátime sa späť na hlavnu scénu (v hornej časti klikneme na odkaz Scene1).

Vrátenie na hlavnú scénu

Označíme Symbol „preloader“ v ktorom je celý náš preloader umiestnený a stlačíme klávesu [F9]. Teraz sa nám otvoril editor cez ktorý vložíme nasledovný kód ActionScriptu priamo do Symbolu.

onClipEvent(enterFrame) {

nacitane = _parent.getBytesLoaded();
spolu = _parent.getBytesTotal();

if (percent == undefined) percent = 0;

percent -= (percent – ((nacitane/spolu)*100)) * 0.25;
kolko = int(percent);

percentaz.text = kolko + “%”;
ukazovatel._width = kolko;

if (percent > 99)
{
_parent.gotoAndStop(2);
}

}

Ak aplikáciu otestujeme [Ctrl]+[Enter], tak uvidíme že sa pred načítaním aplikácie skutočne zobrazuje preloader.

Ako tento preloader funguje?

Prejdime si predchádzajúci kód riadok po riadku:

onClipEvent(enterFrame) zabezpečí, že sa kód ktorý nasleduje v zložených zátvorkach vykoná vždy keď sa preloader ocitne na Frame. V tomto prípade to zabezpečí, že kód  sa spúšťa stále.

Do premennej „nacitane“ ukladáme koľko bytov z našej aplikácie sa už načítalo.

V premennej „spolu“ je  uložená celková veľkosť našej aplikácie v bytoch.

Podmienkou overíme, či už bola premenná „percent“ definovaná. Ak nie , čiže ak premenná percent = undefined, tak ju nastavíme na nulu.

Podľa celkovej veľkosti aplikácie a množstva načítaných bytov zistíme koľko percent už bolo načítaných.

Do premennej „kolko“ vložíme počet načítaných percent zaokrúhlený funkciou int() na celé čísla.

Množstvo načítaných percent („kolko“) vypíšeme v textovom poli „percentaz“  a pripojíme aj znak %.

Podľa toho koľko percent je načítaných, nastavíme šírku „posuvníka“. Takže ak je načítaných 50% aplikácie, tak šírka bude 50px.

Nakoniec ešte podmienkou skontrolujeme, či nebolo načítaných viac ako 99% a ak áno, skočíme na frame dva a necháme nabehnúť našu aplikáciu.

Stiahni súborZdrojový súbor s preloaderom (Flash CS4)
Zdrojový súbor s preloaderom (Flash CS5)

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s

%d bloggers like this: