. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Komponensek

Többfunkciós előtöltő komponens készítése
  feltöltve: 2004.03.08 | szerző: ismeretlen | olvasva: 13963 alkalommal

 
 

Ebben a segédletben egy előtöltő komponenst fogunk elkészíteni, mely alkalmas lesz egész mozik betöltésére, az első frame-re helyezéssel, vagy külső file-ok cél-moziklipekbe történő betöltésére is.

Általában a komponensekről

Biztos tapasztaltatok már olyat, hogy egy feladat elkészítésekor mikor, igen okosan kis építőkockákra bontottátok azt, egy olyan kis részfeladat megoldásához értetek, melyről éreztétek vagy akár tudtátok is, hogy ezt már egyszer megcsináltátok. Ilyenkor én mindig törni kezdtem a fejem: "Jaj, melyik projekt-ben, melyik fla, hol volt melyik frame-n az a kód?" Nos ez terhes két okból is. Az egyik, hogy miért kell kétszer, vagy akár ötvenszer leírnom ugyanazt, miért nem fizetnek nekem inkább ötvenszer ugyanazért a kódomért, amit egyszer jól megírtam. A másik, hogy ha a keresgélős módszernél maradunk akkor mindig újra bele kellett kicsit ásni a kódba, megérteni, hogy milyen logika alapján működött és aztán testreszabni az új feladatra. Nos az ilyen helyzetek orvosolhatók a komponensekkel. Sőt ha elkezded használni őket sokkal hatékonyabbá, gyorsabbá teheted munkádat. Egy folyamatosan bővülő, jól dokumentált (!) komponenstár olyan kincse egy fejlesztőnek amiért ölni tudna:)

A komponensek megjelenése valószínűleg a legnagyobb újítása volt a Flash MX-nek, az 5-ös verzióhoz képest (persze sok más mellett). A komponensek mint az a fentiekből is kiderülhetett, olyan összetett (vagy egyszerűbb) feladatok ellátására készített, többszörösen felhasználható elemek, amilyeneket az Flash MX már maga is tartalmaz (pl.: scrollbar, radio button) és amelyek, belső, önálló logikájuk révén, alkalmasak arra, hogy az aktuális munkánkba helyezve pár paraméterük beállítása után tökéletesen működjenek, az adott feladatot ellátva (pl.: képgaléria melynek csak egy XML file-ra van szüksége és már kész is, vagy egy preloader komponens, melyet most fogunk elkészíteni, mely pár paraméter beállítása után betölti azt és oda amit és ahova szeretnénk)
A Flash MX-be, ill. Flash MX 2004-be "gyárilag" beépített komponensekről elsősorban a program helpje adhat nekünk segítséget, ill. a Macromedia oldalán található Developer Center (Fejlesztő Központ) erre fentartott oldalai.

A komponensek készítésekor valójában egy új osztályt (class) hozunk létre. Ebből aztán saját metódusokkal és tulajdonságokkal (mezőkkel) rendelkező objektum példányok állíthatók elő. Ha te magad is akarsz komp.-eket építeni, nem csak használni más közzétett ingyenes munkáit, akkor fontos hogy valami minimális fogalmad legyen az OOP-ról, amiről itt az swf.hu-n remek segédletet találsz itt.
A Flash MX-ben a komponensek moziklip-ek, de nem csak a moziklipp osztály, hanem a FUIComponentClass osztály tulajdonságait is öröklik. Ebből az is következik, hogy egyes tulajdonságokat központilag tudunk meghatározni, hiszen azt majd a FUIComponentClass-tól öröklik komponenseink. (pl.: szövegek stílusa)

Egy komponensek felépítése: (ezt az öt elemet mindegyik tartalmazni fogja és ilyen sorrendben, vagy nem fog helyesen működni:) )

1. Az initclip utasítás
2. Az osztály definíció
3. Az Object.registerClass utasítás
4. Metódusok és tulajdonságok hozzárendelése
5. Az endinitclip utasítás

Ezek funkcióit majd a példánkon keresztül részletezem.

A feladat meghatározása

Tehát egy preloader komponenst akarunk készíteni. Nem árt tisztázni hogy mit várunk majd el tőle.

1. Tudjon betölteni egész mozikat az első frame-re helyezve és a töltés aktuális fázisát ne számmal, hanem grafikusan, egy vonallal jelezze.
2. Lehessen vele külsö .swf-et, .jpeg-et betölteni, melyeket szintén szépen kijelez.
3. Lehessen neki megadni egy callback függvényt melyet a betöltés végén meghív és így egy láncolt feladatba is illeszthető.
4. Tudjuk módosítani a méreteit és a színet, valamint az alpháját.

Hát mint látjuk, nem lesz egyszerű feladatunk ennyi kritériumnak megfelelő komp.-t alkotni de ha kész lesz rengeteg időt spórol majd nekünk így megéri a belefektetett energiát. Ez lesz belőle

Előkészületek

1. LÉPÉS: Nyissunk meg új dokumentumot. Mindegy mekkora, de mondjuk 100 px * 20 px-nél ne legyen kisebb. Hozzunk létre egy új moziklipet "preloader" néven, mely egyetlen layer-t tartalmazzon "ActionScript" néven. Nyissuk meg a Library-t és kattintsunk jobb egérgombbal a moziklippünkre, majd a "Linkage"-re kattintva, jelöljök ki az "Export for ActionScript" rádiógomb-ot. Az "Identifer" mezőbe pedig gépeljük azt, hogy "preloader_mc".

2. LÉPÉS: Ezután menjünk vissza a Library-ba és a "Component Definition" gombra kattiva nyissuk meg a palettát.

Négy oszlopot láthatunk, melyekbe a komp.-ek paramétereit adhatjuk meg:

Name: A paraméterek nevét adják majd amikor a színpadra húzva a komp.-t paraméterezzük a "Properties" palettán.
Variable: A paraméterek változóneveit adhatjuk itt meg, melyeket majd a moziklippen belülről is elérhetünk . Ha valamelyiket nem adjuk (Name vagy Variable) meg akkor az üresen hagyott azonos lesz a másikrublikával.
Value: A paraméterek alapértelmezett értékeit adhatjuk itt meg.
Type: A paramétereinknek itt adhatjuk meg a típusát. (pl.: szám, szín, string, tömb)

A "+" gombbal adhatunk hozzá új paramétereket a listához és a fel, ill. le nyilakkal tudjuk őket sorrendbe rakni, vagy felcserélgetni, aminek semmi jelentősége nincs csak az átláthatóságot szolgálja. Vegyed fel a képen látható paramétereket, mindent úgy ahogy látsz. Sorba megyünk rajtuk.

1. Az elsővel majd a komp. szélességét adhatjuk meg és csak szám lehet ahogy azt a Type oszlopban láthatjuk. Action Scriptben pedig kompWidth-el fogjuk elérni.
2. A következő a magasságát adja majd meg az előtöltőnek. A többit már ki tudod következni az oszlopokból:)
3. A harmadik sorban egy szín megadására alkalmas paramétert definiálunk, mely a töltő csík színét adja majd meg.
4. Aztán a csík átlátszóságát kérdező paraméter következik, mely csak szám lehet.
5. Az ötödik sorban a keretvonal színét fogjuk megadni.
6. Majd a vonal vastagáságát. (ezeket be is égethetnénk a kódba és akkor az lerövidülne és a munkánk is könnyebb volna, de ne feledd a cél az, hogy minél sokoldalúbb komp.-eket gyártsunk, hisz ki tudja lehet, hogy lesz majd olyan háttér amin mondjuk a fekete 1-es vastagásgú keret -amilyet beégetnénk a kódba- nem mutatna jól így inkább ezt is paraméterezhetővé tesszük.)
7. A következő, a függvény neve. Mikor megadjuk figyeljünk majd arra hogy pl. a rajz függvényt ne "rajz()"-ként írjuk majd be paraméterezésnél, hanem csak "rajz"-nak.
8. Majd maga a callback függvény elérési útja.
9.-10. Ezután két alapvető sor következik. Az elsőben egy paraméter azt mondja meg, hogy mit töltünk, a másikban egy másik param., hogy hova. Ez lehet egy célmoziklipp vagy egész mozi töltése esetén maga _root, de erről majd később.
11. A legalsó paraméter nem fért ki a képre:) így az értékei:

Name: választás
Variable:kompChoice
Value:Default Value
Type:Boolean
Ez pedig egy igaz vagy hamis értékes paraméter, mely azt határozza meg hogy a preloader komp.-ünk melyik funkcióját használjuk. Ha képet vagy külső .swf file-t szeretnénk betölteni, akkor legyen "true"-ra állítva, ha első képkockára helyezve szeretnénk egy mozit betölteni vele, akkor pedig "false"-ra.

3. LÉPÉS: Pipáljuk ki a "Display in Components Panel" sort, azért, hogy mikor majd elérhetővé tesszük a komponensünket az említett panelben, akkor a neve megjelenjen. Mint mondtam rengeteget ér egy komp. tár, ha jól van dokumentálva! Hát itt van erre lehetőségünk. Kattintsunk először a "Description" melletti "Set" gombra, majd a megnyíló menüben, a "Description is plain text" gombra. Írjunk le mindent, bármilyen hülyén is hangzik az adott pillanatban, mert mondjuk egy év után elővett komp.-ünknél nem biztos, hogy emlékezni fogunk hogy meyik paraméter mire való, még akkor sem ha beszédes neveket adtunk nekik. Tehát tanácsos leírni, hogy mikor készült és hogy mit tud a komp. Ezenkívül részletesen minden egyes paramétert, hogy mire való és esetleg egy picit a kód logikájáról sem árt beszélni, hogy ha mégis bele kell piszkálnunk a script-be majd később akkor segítsük ezzel magunkat.
Még nem tudjuk dokumentálni a munkánkat, mert még nem fejeztük be:), de bármilyen fáradságosnak is tűnik az egész komponens fejlesztés, - hát még ez a szakasza - hidd el megéri! Ha túltetted magad ezen akkor mehetünk is tovább...

ActionScript

4. LÉPÉS: Térjünk vissza a preloader moziklippünkbe és nyissuk meg az Actions palettát. Majd gépeljük be ezt:

#initclip 0
//Konstruktor
function preloader() {
this.init();
}

//Objektum regisztráció
preloader.prototype = new MovieClip();
Object.registerClass("preloader_mc", preloader);

//Init Fuggveny
preloader.prototype.init = function() {
this.grafDraw();
#endinitclip };


Nézzük soronként haladva mi, mit jelent. Az #initclip és az #endinitclip utasítások közt történik az osztály definíció és a Flash innen tudja hogy komponens definícióról van szó. Az #initclip melletti számnak az a szerepe hogy meghatározza a komponenseink inicializálódási sorrendjét, ami akkor fontos ha egymástól örökölnek metódusokat és mezőket.
Pl.: A FUIComponentClass mindig elsőként (#initclip 0) inincializálódik, következésképp ha mi 1-est írnánk a kódunkban akkor örökölnénk az FUI osztályától mindent.
Tehát amíg nem akarunk örökíteni komp.-eink közt addig nyugodtan írhatunk 0-t vagy bármit.

A következő sor tartalmazza a konstruktor függvényt,mely létrehozza a "preloader" osztályunkat. Továbbá meghívjuk az init() függvényünket.

Ezután a "preloader" osztály örököl mindent a moziklipp osztálytól. A sorrend nagyon fontos! Ha ugyanis ez a sor a metódus- és meződefiníciók után van akkor felülírja azokat.

A következő sorban társítjuk a Library-ban "preloader_mc" ID-vel ellátot "preloader" moziklippünket a "preloader" osztállyal. Így annak minden példánya már a "preloader" osztály tagja is lesz, egyben.

Végül definiáljuk az init() függvényünket, mely semmit nem fog csinálni csak meghívni a grafDraw() függvényt. Kérdezhetnénk miért nem egyből a konstruktorba hívjuk meg a rajzoló függvényt, miért kell közé az init(). Nos, azért mert szebb ha nem hányjuk tele a konstruktort mindennel, hanem csak elegánsan meghívunk benne egy függvényt, ami aztán meghívhat 200-at is létrehozhat rengeteg mezőt stb. Esetünkben tényleg értelmetlennek tűnik, de jobb még az ilyen egyszerű feladatoknál megszokni ezt a módszert.

Egyenlőre van egy tök üres moziklippünk, melynek minden példánya örökli a "preloader" osztály metódusait és mezőit. Ez már gyakorlatilag egy komponens:) Már csak fel kell használnunk a tömérdek paraméterünket és létrehozni a grafikát és magát a töltésfigyelő függvényt. A grafikát DrawingAPI-val fogjuk megoldani, ami a Flash MX másik nagy újítása. Amennyiben nem ismered még úgy ne ijedj meg, egyenlőre elág ha annyit tudsz róla hogy futásidejű dinamikus grafikát lehet vele létrehozni Action Script-ből. Remélem hamarosan olvashatsz róla egy részletesebb segédletet, addig is majd jelzem melyik az a kódrészlet amivel nem kell foglalkozzál, de valószínűleg úgyis fel fog tűnni mert nem érted majd:).

5. LÉPÉS: grafDraw függvény

A fenti kódot egészítsd ki így:

#initclip 0
//Konstruktor
function preloader() {
this.init();
if (_global.preloader_depth==undefined) {
_global.preloader_depth = 10;
}
}

//Objektum regisztráció
preloader.prototype = new MovieClip();
Object.registerClass("preloader_mc", preloader);

//Init Függvény
preloader.prototype.init = function() {
this.grafDraw();
};

//grafDraw Függvény
preloader.prototype.grafDraw = function() {
//Loading bar megrajzolása és moziklipp-pé alakítása
this.createEmptyMovieClip("loadingBar_mc", preloader_depth);
_global.preloader_depth++;

//Loading bar téglalapot tartamazo mc elhelyezése
this.loadingBar_mc._x = 0;
this.loadingBar_mc._y = 0;

//Drawing API-> Loading bar téglalap megrajzolása
this.loadingBar_mc.lineStyle();
this.loadingBar_mc.beginFill(this.kompColor, this.kompAlpha);
this.loadingBar_mc.lineTo(this.kompWidth, 0);
this.loadingBar_mc.lineTo(this.kompWidth, this.kompHeight);
this.loadingBar_mc.lineTo(0, this.kompHeight);
this.loadingBar_mc.lineTo(0, 0);
this.loadingBar_mc.endFill();

//
//Loading keret megrajzolása és moziklipp-pé alakítása

this.createEmptyMovieClip("loadingKeret_mc", preloader_depth);
_global.preloader_depth++;

//Loading keretet tartamazo mc elhelyezése
this.loadingKeret_mc._x = 0;
this.loadingKeret_mc._y = 0;

//Drawing API-> Loading keret megrajzolása
this.loadingKeret_mc.lineStyle(this.kompLineWidth, this.kompLine);
this.loadingKeret_mc.lineTo(this.kompWidth, 0);
this.loadingKeret_mc.lineTo(this.kompWidth, this.kompHeight);
this.loadingKeret_mc.lineTo(0, this.kompHeight);
this.loadingKeret_mc.lineTo(0, 0);

//Mask moziklip készítése
this.loadingBar_mc.duplicateMovieClip("mask_mc", preloader_depth);
_global.preloader_depth++;

//Mask elhelyezése
this.mask_mc._x = 0;
this.mask_mc._y = 0;

//Maskolás beállítása
this.loadingBar_mc.setMask(this.mask_mc);
//loader fv. meghívása
this.loader();
};
#endinitclip


A konstruktorba bekerült egy új sor, melyben egy globális változót hozunk létre ha még nincs ilyen a mozinkban. A globális változókról csak annyit hogy nem kell megadni olvasásukkor az elérési útvonalat, vagyis bárhonnan elérhetők egyszerűen a nevükkel, viszont mikor átírjuk őket a "_global"-t eléjük kell tenni. A kódunkban található "preloader_depth"-ről majd később... Más nem változott a felső részben, csak lentebb megírtuk a grafDraw() függvényt.

Először is csinálunk egy új mc-t (moziklipp) a "preloader" mc-nkbe, oda ahol most írjuk a kódot. Ennek a "loadingBar_mc" nevet adjuk, és mélységét pedig a globális változónk fogja megadni, melyet ezután eggyel megnövelünk. Erre azért van szükség mert, hogyha például egy képkockán többször is használnád a preloader komponenst, akkor az azonos mélységben lévő mc-ink (melyeket minden alkalommal létrehoz a Flash, ahányszor egy újabb komp.-t teszel ki a színpadra) felülírnák egymást. Így viszont ha már van kitéve a komponensünkből, akkor tudni fogja azt (mert megvizsgálja, hogy van-e már létrehozva ilyen globális válzotó és ha igen akkor az ugye nem jelent mást csak azt, hogy van komp-ünk kirakva) és nem állítja 10-re a globális változónkat, hanem csak az értékét növeli eggyel mindig ahányszor használta az aktuális értékét. Persze ettől még ugyanúgy lehetnek bonyodalmak az mc-ink mélységével, de ha a kezdőértéket 10-ről mondjuk át írod 100 ezerre akkor már nem valószínű ez:) A következő két sorban elhelyezzük az új "loadingBar_mc"-t a "preloader" mc-nkben.

És akkor itt következne a DrawingAPI. Ha picit is tudsz róla akkor gyerekjáték lesz megértened a kód ezen részét, ha pedig fogalmad nincs róla, akkor ne kezd el összezavarni magad, ugorj tovább. (De azért ha tudsz angolul akkor azért ha másból nem, de a lineTo parancsból sejtheted hogyan működik a dolog.) Az érdekes csak annyi, hogy itt láthatjuk, hogy a "Component Definition Panel"-ben megadott Variable oszlopba írt nevekből egy kettő visszaköszön. A lényeg annyi, hogy a komponensek hál' istennek ismerik a saját paramétereik változóneveit, ezért egyszerűen elég ha a this.-t eléjük rakjuk és már dolgozhatunk is velük. (ld. this.loadingBar_mc.lineTo(this.kompWidth, 0);)

Innen a következő rész, a " Mask moziklip készítése" kommentig a keret létrehozására szolgál, melyet szintén egy új mc-be rakunk ("loadingKeret_mc"). Ez már, mivel előbb megnöveltük a globális változónkat (_global.preloader_depth++) 11-es mélységben lesz. Őt is elhelyezzük a 0; 0-s koordinátákon és DrawingAPI-val megrajzoljuk.

Ezután létre kell hoznunk még egy mc-t, mely a dinamikus maszkunkat fogja tartalmazni. Ha neked ez még teljesen új, akkor itt egy remek segédlet erre. A dolog úgy fog működni hogy a 0; 0-s koordinátákon lesz a keret és mask mc és a feltöltőcsík maga, pedig a százalék arányában szépen araszol majd a helyére, de mi ebből csak annyit fogunk látni amekkora a keret. Mivel a mask mc-nek ugyanakkorának kell lennie mint amekkora a "loadingBar_mc" ezért egyszerűbb, ha nem megrajzoljuk megint, hanem egyszerűen duplikáljuk, persze a globális változónkkal vigyázva a duplikált mc mélységére. Ezután beállítjuk a maszkot a "loadingBar_mc"-re , majd meghívjuk a "loader" függvényt, ami még nincs deklarálva, így ez a következő lépés...

6. LÉPÉS: loader függvény

Nincs más hátra, minthogy az utolsó kis függvényünket is megírjuk. Ezt az előző kódrészletben az #endinitclip sor elé szúrjátok be közvetlenül.

preloader.prototype.loader = function() {
this._visible = true;

//Betöltés megkezdése. Komponens funkció ellenőrzése.
if (this.kompChoice) {
//Két fontos változó bevezetése, hogy rövidebb nevekkel dolgozhassunk
this.targetMc = this._parent[this.kompTarget];
this.blankBytes = this.targetMc.getBytesLoaded();
//Ne lássuk még a betöltődött dolgot
_parent[this.kompTarget]._visible = false;
//Láthatóvá tesszük a komp-t
loadMovie(this.kompWhat, this.targetMc);
this.onEnterFrame = function() {

//Addig nem nem figyeljük a töltést amíg ki nem derült mekkora amit betöltünk
if (this.blankBytes != this.targetMc.getBytesTotal()) {
//Százalék kiszámítása
this.perc = int((this.targetMc.getBytesLoaded()/this.targetMc.getBytesTotal())*100);

//Töltés befejezésekor történő események
if (this.perc>=100) {
eval(this.kompObj+"."+this.kompFunction).call(this);
this.targetMc._visible = true;
this.targetMc.nextFrame();
this._visible = false;
delete this.onEnterFrame;
//Csík pozíciójának kiszámítása
} else {
this.loadingBar_mc._x = this.perc*(this.kompWidth/100)-this.kompWidth;
}
}
};


Először is láthatóvá teszzük a komp-t. Erre azért van szükség mert ha pl. egy almenüpont betöltésére szolgál a kis szerzeményünk akkor ugye miután betöltötte amit és ahogy akartuk, azt szeretnénk hogy tűnjün el. Igenám, de ha ugyanazzal a komp.-el szeretnénk mondjuk egy pár menüpont átböngészése után ismét ugyanazt a menüpontot betölteni, akkor nem látnánk semmit mert az előbb eltüntettük a töltés befejeztével. Így, hogy nekünk utólag semmit ne kelljen kívülről belenyúlni a komp. logikájába és működésébe, most felkészítjük erre.

Azután egy if-el megvizsgáljuk hogy a kompChoice paraméterünk, true vagy false-e. Ha true, vagyis igaz, akkor a komp. "külső file betöltése" funkcióját fogjuk használni. Ha false akkor az "egész mozi betöltése" funkciót. Most tehát az első funkcó kódja jön.

Bevezetünk két fontos változót. Természetesen muszály a this.-t eléjük írni, hiszen komponensünk ezzel két új mezőt kap! Az első annak az mc-nek a nevét rövidíti le, amelyikbe betöltünk, a második pedig ennek az aktuális méretét tárolja byte-okban. Hogy erre miért van szükség arról majd később.

Elrejtjük azt a cél-mc-t amibe majd töltjük a file-t. Ezt azért teszzük, mert különben látnánk, ahogy Flash elkezdi játszani a már betöltött részt. Ezt ettől függetlenül is meg fogja tenni, így azon kívül hogy elrejtjük a cél-mc-t még egy valamit kell tennünk, ha külső .swf-eket akarunk töltögetni. Mindegyiknek az első képkockáját hagyjuk üresen és rakjunk egy stop(); utasítást rá. Így nem fog elindulni a lejátszás, amíg mi el nem indítjuk a főmoziól, amit csak akkor teszünk majd meg ha már tudjuk hogy az egész mozi letöltődött.

Ezután a loadMovie() utasítással a cél-mc-be betöltjük a külső file-t és figyeljük hogy hol tart a letöltés. Ezelőtt azonban meg kell győződnünk arról, hogy az üres mc (amibe töltünk) mérete nem egyezik a betöltendő dolog méretével, vagyis addig nem töltünk amíg nem tudjuk azt amire igazán kiváncsiak vagyunk. Mi történne, ha ezt nem tennénk? A Flash-ben ha egy cél-mc-be töltünk külső file-t, akkor annak méretét lekérdezve tudjuk megadni mennyit töltött le az adott file-ból. Így, mivel idő amíg a Flash mozink megtalálja a külső file-t a könyvtárakban és lekérdezi annak méretét, hamarabb tudná meg az üres mc-nk méretét, és azt venné maximumnak, viszont mivel ez már teljesen le van töltve, azonnal azt hinné, hogy a betöltést befejezte és valótlant mutatna a betöltés fázisát mutató csíkunk.Amennyiben ez új neked, akkor nagyon jó segédletet találsz itt az előtöltőkről. Az, hogy hol tart a letöltésünk pedig a this.perc (percent) változóban lesz eltárolva minden frame-ben.

A lényeg itt jön. Ha még nem száz százalék töltődött le akkor minden frame-ben megmondjuk a "loadingBar_mc"-nek hogy hol legyen. Ez egyszerű: ahány százaléknál járunk, azt megszorozzuk a preloader szélességének századrészével, és így egy olyan számot kapunk ami megadja hogy hány pixel látszódhat ki már a keret mögül. Ahhoz hogy annyi látszódjon ki, ki kell vonni belőle a preloader szélességét.

Amikor már betöltődött a file, akkor meghívjuk a paramétereknél megadott callback függvényünket, amit csak ilyen kacifántosan tehetünk, mivel stringekből kell összefüzögetni a parancsot. Majd láthatóvá tesszük a cél-mc-t és így amit betöltöttünk azt is. Amennyiben .swf a betöltött file, az esetben a következő frame-re rakjuk, hiszen tudjuk az első képkockája üres és ott áll. (Ha a betöltött .swf egy film mondjuk, ami nem állhat meg a második képkockán .nextFrame() utasítástól, akkor a második frame-jére írjunk egy play()-t.) A komp-t eltüntetjük és végül töröljük az onEnterFrame-t mert már semmit nem akarunk figyelni.

7. LÉPÉS: loader függvény 2. része:

//Ha egész mozit töltünk

} else {
this[this.kompTarget].stop();
this.onEnterFrame = function() {

//Százalék kiszámítása
this.perc = int((this[this.kompTarget].getBytesLoaded()/this[this.kompTarget].getBytesTotal())*100);
if (this.perc>=100) {

//Töltés befejezésekor történő események
eval(this.kompObj+"."+this.kompFunction).call(this);
this[this.kompTarget].nextFrame();
this._visible = false;
delete this.onEnterFrame;
} else {
this.loadingBar_mc._x = this.perc*(this.kompWidth/100)-this.kompWidth;
}
};
}
};


Ha egy mozi első frame-jére tesszük a komp-t akkor ugye azt ott meg kell állítani hogy addig ne menjen tovább míg minden le nem töltődött. Erre szolgál a this[this.kompTarget].stop(); sor. Ezen kívül minden ugyanúgy történik mint az első funkció esetében, csak itt nem kell ellenőriznünk a betöltendő dolog méretét, mert azt direkt érjük el (nem egy mc-n keresztül), hiszen a _level0 az.

Pár kiegészítés

Hát készen is vagyunk. Bátran húzzunk ki egy preloader mc-t a színpadra és dobjuk be a mélyvízbe. Kattintsunk rá. Lent a "Properties" ablakban állítsunk be néhány param.-t és már megy is az előtöltőnk. Azért megérte a munkát, nem?:) Jöhet a dokumentálás, remélem nem felejtetted el, milyen fontos!

A komponensek képesek arra, hogy ne csak úgy tudjuk leellenőrizni őket hogy lefuttatjuk a mozit, hanem úgy hogy amint beírunk egy paramétert, például a méretet azonnal a színpadon Publish-olás és futtatás nélkül lássuk az eredményt. 0Ezt nevezik "Live Preview"-nak, melyet szintén a Library-ban a "Component Definition" menüben állíthatsz be. Erre nézve elég kevés dokumentáció kering az interneten és sajnos ez a segédlet se fog szépíteni ezen a rút tényen, de talán a következő komp. segédletbe belefér majd a téma. Ide azért nem kerül még be, mert nem olyan elengedhetetlen része a fejlesztésnek, csak egy kényelmes dolog, mely kis időt spórol nekünk fejlesztés közben, de erre nincs is szükségünk, ha már a papíron működő komp.-ünket csak begépeljük, hisz akkor úgyis elsőre működni fog, mint minden jó program! :)

Arra is lehetőség van, hogy a Library-ban a komp. ikonját megváltoztasd a sajátodra. Nem kell mást tenned mint készíteni egy 24 * 20 pixel nagyságú .jpeg, .gif, vagy .png formátumú kis képet és beimportálni a moziba, amiben éppen gyártod a komp-t. A Libraryben létrehozni egy "fCustomIcons" nevü mappát és beletenni a képet és a komp. nevére, esetünkben "preloader"-re változtatni a nevét.
Ha már a mappáknál tartunk akkor érdemes megemlíteni, hogy jó dolog rászokni a Library-ben a mappák használatára. Először minden elemét a komp.-nek egy mappába rakni, amit esetleg, az anyagok (gombok, mc-k, képek, hangok, videók, stb.) mennyiségétől föggően akár almappákra is bonthatsz. Ez azért jó mert így szépen egyben lesz a komp.-t felépítő dolgok csoportja, mikor beinportálod egy aktuális projekt-ed .fla-jába és nem fog annak az alkotó részeivel keveredni.

Végül már csak annyit mondanék el, hogyan helyezd el komponenseidet a Flash "Components" palettáján. Ez igen egyszerű mert csak kinyitsz egy új .fla-t melybe mondjuk kihúzod a komp.-ed annak a .fla-nak a Library-jéből, ahol szerkesztetted. Majd amibe bemásoltad komp.-t, szépen elmented és alapesetben, (ha nem változtattad meg a Flash telepítése elött a cél-mappát) berakod a:
Program Files/Macromedia/Flash MX/First Run/Components
Lehet komp. szetteket is csinálni. Ugyanis abba a .fla-ba amit az előbb bemásoltál, több komp.-t is rakhatsz és akkor ezek egy mappában egy set-ként jelennek meg a "Components Panel"-on.

Végszó

Remélem megkedvelted a komponenseket, ha nagyon sok energiát emészt is fel a fejlesztésük, mert garantáltan meggyorsítja és egyszerűbbé teszi majd a munkádat a használatuk. Erősségüket és fontosságukat igazolja az is hogy külön erre a témára szakosodott portálok vannak, ahol letölthető komp-eket találnuk (jól dokumentálva! :)), így mindenki sokat spórolhat az idején. Szerintem azért sokkal jobb, ha az ember a saját kis építőkockáit használja, nem másét, mert büszke rá és mert jobban érti. Ettől függetlenül nagyon sokat lehet tanulni a letöltöttekből.

Jó komp. termelést és ha bármi nem világos írjatok!

 
 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .