Preloaderek

Cél: Előtöltő készítése

Tartalom

  • Egyszerű preloader (előtöltő)
  • Nem változtatható mozi -és moziklip tulajdonságok
  • Komlex preloader

Feladatok:


Ha komplex animációt készítünk, idő kell arra, hogy a Flash Player megjelenítse az egész filmet. Ekkor látszólag nem történik semmi, pedig a háttérben a mozi folyamatosan töltődik be. A felhasználó ilyenkor unatkozik, vagy esetleg leállítja a programot, mondván lefagyott. 

Preloaderekkel (előtöltőkkel) az Interneten találkozhatunk, bonyolult, sok adatot tartalmazó Flashes oldalak nézegetésekor. Sima modemes kapcsolat használatakor a kommunikáció lassú, a lejátszóprogram nem képes egyszerre letölteni az oldal anyagát. Az előtöltők segítségével a felhasználót értesíthetjük a betöltés, illetve a letöltés aktuális állapotáról, és esetleg egy kisebb animációval szórakoztathatjuk is. 

Az előtöltők ötlete azon alapul, hogy a lejátszófejet mindaddig visszatartjuk, míg a film utolsó képkockája is betöltődik. Ennek vizsgálatára az Actions könyvecskében található ifframeloaded() parancsot használjuk.

Szintaxisa: 

ifframeloaded(frame); - vizsgálja, hogy az adott képkocka betöltésre került-e.

A frame paraméterben megadhatjuk a képkocka számát, vagy ha elneveztük abban az esetben a nevét is.


Megjegyzés:
Nemcsak az adott színpadon (current scene) lévő képkocka betöltöttségét vizsgálhatjuk, hanem egy másikon lévőét is.

FELADAT: Készítsünk egyszerű preloadert!

Készítsünk egy moziklipet az első képkockára. Ezt fogja a felhasználó látni mindaddig, amíg a teljes film be nem töltődik. Kattintsunk duplán erre a moziklipre és szerkesszük meg azt az animációt, amit a felhasználó a betöltés közben látni fog.

A példában a felhasználó a "Betöltés" feliratot látja, ami körül egy golyó kering. 

Nem szabad túl komplex animációt készíteni, mivel ennek letöltése is idő, tehát a preloader klipnek a méretének kellően kicsinek kell lennie.

Megjegyzés:
Nem érdemes bitképeket importálni ebbe, javaslom, hogy a Flash eszközeit használjuk.
Lépjünk vissza a főidőegyenesre, a Scene1-re! Adjunk mozinkhoz még egy layert (mozi). 

Ennek a layernek a második képkockájától kezdődik az animáció, azaz a főmozi. Ide készíthetjük el a honlapunkat, esetleg egy nagyobb animációt. A példában több nagyméretű képet importáltam.(1, 2, 3, 4, 5, 6)

képfile importálása:

  • A mozi layer második képkockájára szúrjunk be egy üres képkockát! Ide fogjuk beszúrni a képet.
  • Álljunk rá erre a képkockára, majd válasszuk a File> Import menüt és nyissuk meg a képfile-t.  

Mivel nem felvillantani akarjuk a képeket, ezért szúrjunk be egy üres képkockát is az importált kép mögé. A példában kilenc képkockán keresztül mutatunk egy képet. A képek méreteit állítsuk be úgy, hogy lefedjék a színpadot.

Kényelmi szempontból adjunk még egy layert a mozinkhoz. Erre a rétegre a kódot írjuk. A főidőegyenes első képkockáján állítsuk meg a lejátszófejet, és csak akkor ugrassuk tovább, ha már a film utolsó képkockája is betöltődött.

A Scene1 első képkockájára, ahol a preloader animáció van, oda írjuk a következő szkriptet:

stop();

Majd a preloader moziklipre:

onClipEvent (enterFrame) {
ifFrameLoaded (50) {
_root.gotoandplay(2);
}
}

A mozink 50 képkockából áll. Ha az utolsó is betöltődött, akkor a főidőegyenesen a második képkockára ugratjuk a fejet. Mivel nem a preloader moziklipben akarjuk a fejet tovább ugratni, ezért abszolút hivatkozást használunk.

Teszteljük le mozinkat! A view menüből válasszuk a Bandwidth Profiler-t. Ez az információs ablak tájékoztat arról, hogy hány frame töltődött be. Ha a Show Streaming opciót is bekapcsoljuk, akkor egy zöld csík tájékoztat a letöltöttség mértékéről. A lejátszófej helyét egy háromszög jelzi. A piros vonal fölé lógó téglalapok jelzik, hogy túl sok adat vár betöltésre. A képernyőn információt kapunk a mozink méretéről (size), valamint arról, hogy eddig mekkora része töltődött be (Loaded).

Megjegyzés: 
A merevlemezről a lejátszó program gyorsan töltötte be a file-t, így az előtöltést lényegében nem is használtuk. Ha viszont sikerül kellően lefoglalni a rendszer erőforrásait, akkor a láthatjuk az eredményt. 

Eredmény

Forrás

Ennek a megoldásnak a hátránya az, hogy nem ad információt a letöltött képkockák mennyiségéről, nem tudunk információt adni arról, hogy hány százaléka töltődött le a filmnek.

FELADAT: Készítsünk komlex preloadert!

Ahhoz, hogy százalékosan meg tudjuk adni a letöltés aktuális állapotát tudnunk kell, hogy hány képkockából áll a film, illetve eddig mennyi került betöltésre. Ezt a _totalframes illetve a _framesloaded tulajdonságok tárolják. Ezeket megtaláljuk a properties könyvben. Ezen tulajdonságok segítségével százalékosan meg tudjuk határozni, hogy milyen állapotban van a letöltés.

Hasonlóan az előző preloaderhez készítsük el azt a moziklipet, amelyet a felhasználó a betöltés alatt fog látni. Ez a példában egy csík, ami a letöltés előrehaladtával egyre nagyobb lesz. 

Rajzoljuk meg az induló alakzatot, a négyzetet és ezt alakítsuk moziklippé Ezek után ezt a moziklipet fogjuk szerkeszteni. 

Mivel a csík nő, alakja változik, így shape tween-t használunk. A instance panel frames fülén válasszuk a shape tween átmenetet, majd szúrjuk be a 30-adik képkockára egy kulcsképkockát és nyújtsuk meg a kiinduló alakzatot a teljes méretére. Az eddigi réteg alá szúrjunk be egy másikat (alap), melyen a megrajzoljuk a hátteret.

Lépjünk vissza a főidőegyenesre, a Scene1-re. Adjunk a mozinkhoz még egy layert (mozi). Ezen a layer második képkockájától kezdődik az animációnk, az előző példában szereplő képfileok

Importáljuk a mozi réteg második képkockájára a fileokat.

Hasonlóan az előző preloaderhez itt is a főidőegyenes első képkockáján megállítjuk a lejátszófejet és csak akkor ugratjuk tovább, ha az összes képkocka betöltődött. Tehát az első képkockán lévő szkript:

stop();

Ha a  mozink utolsó képkockája is betöltődött, akkor a lejátszófejet a főidőegyenes második képkockájára ugratjuk a fejet.

Már csak azt kell megvalósítani, hogy a letöltés mértékéhez képest nyújtsuk meg a csíkunkat a preloader moziklipben, azaz a megfelelő képkockára kell pozicionálni.

A százalékos letöltöttséget a letöltött képkockák mennyiségének és az összes képkockák számának hányadosa adja meg. Ha ezt a mennyiséget megszorozzuk a preloaderben szereplő képkockák számával, akkor meg tudjuk határozni, hogy melyik képkockára ugrassuk a fejet ebben a moziklipben. Mivel ez az érték egy valós szám, így ezt kerekítenünk kell.

Ennek megfelelően a kód, amit a preloader moziklipre írunk:

onClipEvent (enterFrame) {
if (_root._framesloaded>=_root._totalframes) {
_root.gotoAndPlay(2);
} else {
this.gotoAndStop(Math.floor ((_root._framesloaded / _root._totalframes) * this._totalframes));
}
}
A Bandwidth Profiler segítségével követni tudjuk a letöltöttség mértékét. 
Megjegyzés: 
A merevlemezről a lejátszó program gyorsan töltötte be a file-t, így az előtöltést lényegében nem is használtuk. Ha viszont sikerül kellően lefoglalni a rendszer erőforrásait, akkor a láthatjuk az eredményt. 

Eredmény

Forrás


Gyakorló feladat: