Stalo sa vám niekedy, že ste si pustili na webe flashovú animáciu, ktorá začala sekať? Bolo to spôsobené veľkosťou flashového súboru a pomalosťou internetového pripojenia. No postupom času už takéto veci z webu miznú a do všetkých veľkých flashových animácii sa dáva na začiatok preloader. Čo to vlastne ten preloader je? Ak ste videli niekde vo flash animácii „LOADING“ alebo načítavanie, kde vám zobrazuje percentá načítania obsahu flashovej animácie obohatené o nejaký prúžok, ktorý sa „plní“… to je preloader.

Jeho úlohou je zastavenie animácie na začiatku, až kým sa nenačítaju do prehliadača všetky údaje a až potom spustí animáciu. Chod animácie je potom zaručene rovnomerný, bez sekania alebo iných nechcených vlastností animácie.

My si v tomto tutoriále urobíme spolu jeden taký, ktorý nám bude ukazovať počet načítaných percent a zároveň aj priebeh načítavania v prúžku.

Ako prvé si musíme vytvoriť MovieClip, do ktorého nakreslíme prúžok, ktorý sa bude zväčšovať počas načítavania.

Veľmi dôležitá je poloha krížika! Ak umiestnime rámček tak, že krížik bude napravo, bude sa náš rámček počas načítavania zväčšovať doľava… Náš movieClip si pomenujeme napríklad ramcek. V aktuálnej vrstve si vyčleníme prvé dva snímky a vložíme do nich náš MovieClip. Vo vlastnostiach našeho MovieClipu zadame ako <Instance Name> ramcek.

Ďalej si vytvoríme novú vrstvu do ktorej vložíme Dynamic text a do atributu Var napíšeme pocet.

Možeme a nemusíme urobiť pre náš rámček nejaký okraj. Ja ho urobím. Vytvorím si novú vrstvu a čiarami nakreslím okolo červeného ramčeka čierny.

Vytvoríme si novú vrstvu a do druhého snímku zadáme tento ActionScript kód:

nacitavanie = Math.round(getBytesLoaded()/getBytesTotal()*100);
setProperty(ramcek, _xscale, nacitavanie);

pocet = nacitavanie + "%";

if (nacitavanie == 100) {
     play();
} else {
     gotoAndPlay(1);
}

Celé by to malo vyzerať nejak takto:

No a nakoniec ešte nastavte šírku MovieClipu ramcek na 0%, aby sa na začiatku nezobrazil v plnej veľkosti a presuňte ho na ľavy okraj čierneho rámčeka. Teraz môžete vytvárať svoje animácie ďalej od tretieho snímku… Môj vzorový príklad si môžete pozrieť tu a súbor .fla si môžete stiahnuť tu.

GOOD LUCK Atlox

Hodnocení tutoriálu: 2 (hodnotilo 28 uživatelů)