Loading & Preloading - Učitavanje i pred učitavanje eksternih fajlova u Flash

Vidim ima nestrpljivih, pa evo još jednog tutorijala. U ovom tutorijalu bum vam pokazal kako učitati eksterne fajlove u flash s actionscriptom. Ovo šta bum vam pokazal vrijedi za tipove fajlova .swf, .jpg, .png i .gif format. U actionscriptu 2.0 obično se koristio MovieClipLoder kojeg sad više nema u actionscriptu 3.0. U actionscriptu 3.0 koristimo Loader i URLRequest Class.

1. Otvorite novi Adobe Flash CS3 dokument(actionscript3.0)

2. Snimite taj fajl u folder po vašoj želji

3. Nađite sliku koja ima težinu(500kb - 1mb) i kopirajte ju u folder gdje ste snimili Flash dokument. Slika koju ja koristim je teška 2 magebajta

4. U Flashu zaključajte i preimenujte prvi layer u actions

5. Kliknite na prvi frame actions layera i otvorite actions panel(F9)

6. Počmite kodirat

Prvo tebamo definirati URLRequest variablu koja ima jedan argument, a on je adresa do fajla koji učitavamo. Vi promijenite "slika.jpg" u ime vaše slike.

1

var imageRequest:URLRequest = new URLRequest("slika.jpg");

Sad moramo definirati Loader varijablu. Ono kaj je učitano u loader dodaje se automatski na njegovu display listu.

2

var imageLoader:Loader = new Loader();

Još moramo pokrenuti učitavanje s load() metodom koja ima jedan argument a on je URLRequest.

3

imageLoader.load(imageRequest);

Na kraju moramo dodati Loader na display listu.

4

addChild(imageLoader);

Testirajte film(Ctrl+Enter) i trebali bi vidjeti sliku koju ste odabrali.

Kako vidite uopće nije teško učitati fajl u flash, ali mi tu ne stajemo jer ćemo sad napravit i pred učitavač(koje glupo ime al neznam drukčije) koji će nam pokazati postatak učitanog fajla.

Prvo bumo iskoristili tutorijal o TextField-u da pokažemo taj postotak loadanog fajla. Tekstualno polje bumo napravili izvan funkcije, a unutar ćemo mu dodjeliti jednadžbu za izračunavanje učitanog postotka.

5
6
7
8

var tekstUcitanog:TextField = new TextField();
tekstUcitanog.x = 100;
tekstUcitanog.y = 350;
addChild(tekstUcitanog);

Uz Loader Class za progres učitavanja bumo koristili LoaderInfo Class jer u njemu se nalazi informacija o loadanom fajlu(veličina fajla(kb), širina, visina,itd.) i s njim možemo možemo pratit progres učitavanja. LoaderInfo netreba bit dodan ko variabla.
Do podataka možemo doć na dva načina:
1. loaderInfo - osobine učitanog fajla
2. contentLoaderInfo - osobine učitavanja fajla
Mi bumo koristili contentLoaderInfo jer iz njega možemo saznat kad je učitavanje završilo i informacije o pregresu učitavanja.
Sad moramo dodati dva eventListenera, a to su ProgressEvent.PROGRESS koji je aktiviran za vrijeme samog učitavanja i Event.COMPLETE koji na daje informaciju da je fajl učitan.

9
10

imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadingProgress);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComlpete);

Sad ćemo napisat funkciju koja se poziva tokom progresa učitavanja i iskoristit ćemo ukupni broj bajtova i broj učitanih fajlova iz contentLoaderInfo-a(target) da dobijemo učitani postotak fajla. Jednadžba koju ćemo koristit glasi:
broj učitanih bajtova podjeljen s ukupnim brojem bajtova pomnožen s 100 da dobijemo postotak

ucitaniBajtovi/totalniBajtovi * 100

Ali pošto taj broj ima decimale, a mi ih netrebamo zaokružit ćemo taj broj na cijeli broj s Math.round() funkcijom. Unutar funkcije definitat ćemo tri variable:
1. ucitaniBajtovi - broj
2. totalniBajtov - broj
3. postotakUcitanog - broj koji ćemo dobit izračunavanjem jednadžbe za dobivanje postotka učitanog
Pa ćemo postotakUcitanog dodati tekstualnom polju koje smo napravili maloprije i dodat ću simbol
postotka(%) tako da u tekstualnom polju imamo: broj + %

11
12
13
14
15
16
17

function loadingProgress(e:ProgressEvent):void
{
	var ucitaniBajtovi:Number = e.target.bytesLoaded;
	var totalniBajtovi:Number = e.target.bytesTotal;
	var postotakUcitanog:Number = Math.round(ucitaniBajtovi/totalniBajtovi * 100);
	tekstUcitanog.text = postotakUcitanog + "%";
}

Konačno imamo funkciju koja će nam reć da je učitavanje gotovo. Pošto je moja slika od 10 megapiksela ja ću ju smanjit na 10% njezine veličine nakon šta se učita.

18
19
20
21
22

function loadComlpete(e:Event):void
{
	imageLoader.scaleX = 0.1;
	imageLoader.scaleY = 0.1;
}

Sad testirajte svoj film i u prozoru koji vam se otvorio(filmić) Kliknite VIEW/SIMULATE DOWNLOAD da bi vidjeli kako učitani postatak raste od 0 do 100, tu imate još jednu opciju a ona je DOWNLOAD SETTINGS gdje se možete igrati s brzinom kojiom će Flash loadati fajl. Ako ovo ne napravite nebute vidjeli proces učitavanja.

Primjer:

Social Bookmarks