| Cél: Előtöltő készítése |
|
| Tartalom
|
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.
|
![]() |
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.
|
![]() |
||
| 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:
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) { 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).
|
![]() |
||
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) {
|
|||