Na siteu imamo novu nagradnu igru, zaigrajte i osvojite tecaj osnova web dizajna, u kojem mozete nauciti sve o HTML-u, obradi i izradi grafike te radu u FrontPageu 2002. Idealno za webmastere pocetnike, a i one iskusnije koji mogu osvojiti nagradu i obradovati nekoga s besplatnim tecajem :-)

Flash preloader 2: ucitavanje vanjskih filmova
Napisao: Vlaho Soletic - SHoLa © 2001 - 2003

Preloader je uvodni dio Flash filma koji, osim sto zabavlja korisnika koji ceka na download prezentacije/sajta u svoj browser, ima i funkciju obavijesti o toku downloada. Cilj je ovoga vodica objasniti preloading vanjske .swf datoteke u ciljanu instancu koja se vec nalazi na sceni. Takodjer cemo objasniti ucitavanje filma u novi level filma te time zaokruziti cjelinu o preloaderima (na siteu vec postoji clanak koji korak po korak objasnjava izradu preloadera).

Danasnje Flash prezentacije cesto u sebi nose kompleksnu grafiku i zvukove koji dodatno opterecuju .swf datoteku, cineci njezin download u korisnicke browsere sporim i dosadnim.

Da bi se izbjegla nezgodna situacija cekanja na Flash objekt, korisnik se uobicajeno zabavi preloaderom koji mu na razlicite nacine predstavlja napredovanje downloada.

Zasto i kako odvojiti film i preloader

Iako se danasnje metode preloadinga temelje na dijeljenju filma na dvije scene unutar istog .swf-a (preload [Scena1] i glavni film [Scena2]), takva metoda ima svojih mana.

Cjelokupni Flash film cesto unutar svoje biblioteke sadrzi komponente poput grafike, glazbe i simbola koje se ucitavaju na pocetku .swf datoteke. Njihovo ucitavanje nije ni na koji nacin nagovjesteno, pa se zbog toga moze dogoditi da ih preloader uopce ne detektira. Takva ce metoda za posljedicu imati nepravilni prikaz preloadinga, npr. preloading ce poceti tek od 30-40%.

Da bi se izbjegla spomenuta nepravilnost, potrebno je film i preloader fizicki odvojiti u dvije zasebne .swf datoteke.

Prednosti su mnogostruke:

•  buduci da preloader obicno nije graficki zahtjevan, njegova se .swf datoteka dosta brzo ucitava na scenu i ne stvara pauzu pri ucitavanju.
  
•  preloader prikazuje stvarni promet od 0-100% downloada.
  
•  moguce je cijeli film razbiti na vise poddijelova i stvoriti dojam brzeg ucitavanja. Treba uvijek imati na umu da korisnik mozda nece htjeti vidjeti cijelu prezentaciju, vec samo neke dijelove i da ucitavanje nepotrebnih dijelova samo dodatno opterecuje sustav i povecava vrijeme cekanja. Zato je najbolje ucitati samo najpotrebnije komponente filma, a ostale prezentirati po volji korisnika.

Ucitani .swf moze se smjestiti u osnovni film na dva nacina:

1. Mozemo ga ucitati u postojecu instancu Movie objekta. Pritom ce ucitani .swf postati dijelom glavnog filma i njegovog _root-a.
   
   Na primjer, ako ucitamo "mojFilm.swf" u instancu _root.mojMC, dakle u _root glavnog filma, naredbom:

loadMovie("mojFilm.swf",
_root.mojMC);

mojFilm.swf postaje dijelom glavnog filma nakon sto se do kraja ucita, kao da je od pocetka definiran u glavnom filmu. On takodjer preuzima sva svojstva koja su prije definirana za _root.mojMC instancu, poput pozicije, alphe itd.

Novu instancu mozemo pozivati i mijenjati joj postavke kao sto to radimo sa svakom drugom instancom u filmu:

_root.mojMC.gotoAndPlay(20);

Sve instance koje su se nalazile u ucitanom _root-u mojFilm.swf datoteke postaju 'djeca' _root.mojMC instance.

2. Mozemo ucitati vanjsku .swf datoteku u bilo koji slobodni level glavnog filma. U slucaju da je level vec zauzet, ucitana datoteka prebrisat ce postojeci sadrzaj. Ako se kojim slucajem .swf ucitava u _level0, brise se kompletan sadrzaj glavnoga filma zajedno sa svim svojim levelima.

   Ucitavanje filma vrsi se na sljedeci nacin:

   loadMovieNum("mojFilm.swf",
   1);

   Prednost je ove metode ocuvanje strukture hijerarhije instanci unutar levela (_root.roditelj.djete.funkcija()) te olaksano baratanje definiranim klasama i objektima.

Preloader

Prije nego sto pocnemo s izradom preloadera, pripremimo .swf koji cemo ucitati.

Slika 1: Timeline

Primijetimo da je cijeli film u TimeLineu pomaknut za jedan frame. Prvi je frame svakog layera prazan, osim akcije stop(); koja ga drzi u tom frameu. Film pocinje od drugog framea akcijom play();.

Daljnji je slijed filma nevazan i ovisi o dizajneru.

Autor ovog teksta primijetio je da je ovo najbolja metoda nezeljenog pokretanja filma pri njegovom ucitavanju. Metode _visible=false; nece svaki put raditi kako treba, a moguc je i prijevremeni pocetak ucitanog filma.

Spremimo "film.fla" i pretvorimo ga u "film.swf" preko Publisha. OK, spremni smo za preloader.

Preloader se sastoji od dva objekta: instance mojFilm koja ce primiti ucitani .swf i instance preloader koja ce pratiti tijek ucitavanja filma.

Idemo redom:

MojFilm najlakse je pripremiti ako znamo velicinu filma koji treba ucitati (height & width). Velicina instance mojFilm neka bude ista. Postavimo je na scenu tamo gdje zelimo ucitati .swf film. Na ovaj nacin najlakse kontroliramo dizajn scene jer ne zelimo da ucitani film bude dijelom nevidljiv ili da smeta drugim objektima na sceni.

Preloader je film koji se sastoji od dva keyframea i 100 frameova. Keyframeovi postavljeni su na pocetak i na kraj filma. Istima su pridijeljene akcije stop();

Unutar preloadera takodjer se nalaze tri dinamicka tekstualna polja s varijablama: posto, bajtovi i ukupno. One ce nam najjednostavnije prikazati tijek downloada vanjskog .swf-a.

Cijela scena sastoji se od tri framea. Prvi dio je loader, a treci frame simulira ostatak filma.

Pogledajmo prvi frame filma:

loadMovie("film.swf",
_root.mojFilm); preloader.ucitan
= false;

Prva linija ucitava nas film u instancu mojFilm koja se nalazi u _root-u glavnog filma. Druga linija postavlja varijablu ucitan na "neistina". Ta ce nam varijabla pomoci u zakljucivanju je li film zaista i ucitan.

Drugi frame zaustavlja film sve dok se vanjski .swf ne ucita sa stop();. Treci frame pokrece ucitani film. Naravno, ova se funkcija moze nalaziti bilo gdje dalje u filmu i nema veze sa funkcijom preloadera.

Pogledajmo sada ActionScript preloadera:

onClipEvent (enterFrame) { if ((_root.mojFilm._url
!= _root._url) && !ucitan) { this.bajtovi=Math.round(_root.mojFilm.getBytesLoaded()/1024);
this.ukupno=Math.round(_root.mojFilm.getBytesTotal()/1024); this.posto = Math.round(
(_root.mojFilm.getBytesLoaded()/_root.mojFilm.getBytesTotal() )*100); this.gotoAndPlay(this.posto);
this.posto = this.posto+"%"; if(_root.mojFilm.getBytesLoaded()== _root.mojFilm.getBytesTotal()){
ucitan = true; _root.gotoAndPlay(3); } } }

(Napomena: kôd je lomljen. Funkcije Math.round i if ispitivanje moraju se pisati u jednoj liniji.)

E, sad, eh...

Buduci da je funkcija podredjena enterFrame eventu, ispitivanje se provodi stalno bez obzira na stop(); funkciju u TimeLineu. Ovo nam je vazno jer se podaci ne downloadiraju odjednom, vec malo po malo u odredjenom vremenu.

Pogledajmo ispitivanje u if funkciji:

(_root.mojFilm._url
!= _root._url) && !ucitan

- ucitan je varijabla koju smo definirali u prvom frameu, to je jasno. Funkcija _url daje nam punu stazu do nase .swf datoteke (npr. http://moj.sajt.hr/flash/film.swf). Ovo nam je ispitivanje vazno jer moramo saznati je li procitano zaglavlje .swf datoteke koju treba ucitati.

U slucaju da zaglavlje nije do kraja procitano, _root.mojFilm._url i root._url istovjetni su, a pritom funkcije getBytesLoaded() i getBytesTotal() nece davati tocne rezultate i zbog toga preloader ne radi pravilno.

Da bi preloader graficki radio ispravno, najvaznija je funkcija

this.gotoAndPlay(this.posto);

Ova funkcija postavlja animaciju na jedan od 100 frameova Loader bara.

Drugi if jednostavno ispituje je li sadrzaj u cijelosti downloadiran te nastavlja film svojim normalnim tokom.

I za kraj...

Na ovom jednostavnom primjeru pokazali smo kako napraviti i koristiti preloader vanjskih filmova.

Zgodno je napraviti genericki preloader za sve vanjske .swf-ove koji cemo pozivati kad god zatrebamo njegovu funkciju. Ime unutar loadMovie() funkcije mozemo mijenjati koristeci promjenljive varijable:

Na ovaj nacin mozemo mijenjati ime filma bilo gdje iz glavnog TimeLinea i pozivati isti na glavni scenu.

I to je to :)

Svi primjeri sadrzani su u datoteci primjeri.zip

O autoru:

Vlaho Soletic - SHoLa (shola@net.hr) - svoje slobodno vrijeme trati s Photoshopom, webom i Flashom. Autor je www.dubluesfest.coms.ph i www.revolt.co.ba/shola, a uskoro i samog www.revolt.co.ba. Obozava prckati oko audio i video produkcije te se nada da ce mu to donijeti brdo love u buducnosti.