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


 
 
SEGÉDLETEK Navigáció, Scroll

Dinamikus, egy szintű, fa-szerkezetes menü készítése
  feltöltve: 2004.10.04 | szerző: Ducky | olvasva: 16971 alkalommal

     
 

Főmenü és almenü elemek

Ahhoz, hogy a menüt fel tudjuk építeni, szükségünk lesz menü gombokra és az azokat befogadó mc-kre, amik majd megjelenítik a szövegeket is, szintén dinamikusan. Készítsük el először a főmenü mc-t. Nyissunk meg egy új mc-t, ami négy layerből és három frame oszlopból fog állni, a lenti képen látható módon.

A gomb layeren hozzunk létre egy gombot, ami a példában egy 130*17 pixeles téglalap, instance neve: 'fog_btn'. Fontos, hogy az instance neveket sehol ne felejtsük el megadni és egyezzen az általam leírtakkal, mert az actionscriptet ezekre írjuk. A jel layeren található a plusz/mínusz jel, ami a menü nevek előtt jelenik meg attól függően, hogy nyitott-e az almenü rész, vagy zárt, vagy esetleg nincs almenü. A három frame-en más-más jel van, az elsőn a plusz jel, a másodikon a mínusz jel, a harmadikon pedig egy nyíl, de lehet bármi más jelölést használni.

A text layerre tegyünk egy dynamic text mezőt a gomb fölé, a jel mellé. A text instance neve legyen: 'fmenu'. Az as layeren minden egyes frame-en egy stop(); utasítás található és semmi más. A fő menü mozi ezzel el is készült. Aki esetleg nem egészen értené, azért van három frame oszlop, mert a jelek frame-enként változnak. A kész főmenü gomb mozit mentsük el 'fogombmc' néven, majd a library-ban keressük meg és jelöljük ki az egérrel. Az mc-t elérhetővé tesszük az actionscript számára. Válasszuk a jobb egérgomb lenyomása után a Linkage menüpontot, a megjelenő ablakban jelöljük be az 'Export for ActionScript' lehetőséget és adjuk a mozinak a 'fogomb' nevet.

Ezzel elértük, hogy a főmenü gomb mc-je as-ből is elérhető bármikor. Elkészítjük hasonló módon az almenü moziját is. Az almenü mozijában is készítsünk egy gombot, a példában ez egy 120*15 pixeles téglalap, az instance neve legyen: 'alg_btn'. A gomb fölé helyezzünk el egy dynamic text mezőt, instance neve legyen: 'almenu'.

Az előzőhöz hasonlóan itt is mentsük el a kész mc-t 'almenu' néven, majd a library-ban válasszuk ki és a Linkage-Export for ActionScript beállítást használjuk, adjuk neki az 'almenu' nevet. Így már mindkét menü mc-je elérhető as-ből, minden készen áll arra, hogy megjelenítsük a menüt. Térjünk vissza a fő timeline-ra és ott az 'action' layeren folytatjuk a munkát.

Vezérlő ActionScript

Az ActionScript (ezután as) fogja beolvasni a txt-t, majd felbontja az adatokat, tömbbe rendezi és megjeleníti a menü elemeket. Végigmegyünk az egész kódon és szakaszonként előre hozzáfűzom a magyarázatokat a megjelenő részekhez. Az összes as kód a fő timeline action layerének frame-jén található. A kód kicsit hosszú és összetett lesz, de senkit ne riasszon el, ha elsőre nem érti meg, olvassa el többször, ha szükséges.

A menuLoad függvényben hozzuk létre az egész folyamatot. Kiürítjük a menuData változót, ez fogja fogadni az adatokat a txt-ből. Ezután a loadVariable függvény segítségével betöltjük a menü tároló txt fájl tartalmát.

function menuLoad() {
/* menü elemek tömbbe rendezése */
menuData = "";
this.loadVariables("menu.txt");

Az onData eseménykezelő segítségével figyeljük, hogy a txt-ből kapott adatok megérkeztek. A feltétel kontrollálja ezt, ha a menuData értéket kap, akkor lefuthatnak az eseményen belüli műveletek. A fmenu_mc-hez hozzárendeljük maszkként a mask_mc-t. Ezután létrehozunk egy új tömböt menuTar néven, ebben fogjuk tárolni az összes menü elemet és almenü összetevőt. A fomenuTar-ban elvégezzük az első felbontást, így a fomenuTar egy tömb lesz, aminek az elemei a főmenük és tartozékaik lesznek. Természetesen ezt még majd tovább kell bontani.

this.onData = function() {
if (menuData.length) {
// maszk hozzárendelése a menühöz
menu_mc.fmenu_mc.setMask(menu_mc.mask_mc);
// menü tároló tömb
menuTar = new Array();
// adat felbontása
fomenuTar = menuData.split("¤");
// menü elemek tömbbe rendezése

Ebben a részben rendezzük az összes adatot tömbbe. Lehetne külön tömbökben tárolni a fő és az almenü csoportokat, vagy az almenü adatokat felbontás nélkül egészben, de mi most másképpen csináljuk. Két for ciklust alkalmazunk. A külső megy végig a főmenü pontokon, a belső pedig az almenü pontokon. A tömbelemeken belül újabb tömböket hozunk létre, így egyszerűbb lesz a hivatkozás a későbbiekben. Szemléltetésképpen, ha az első főmenü nevére vagyunk kíváncsiak, akkor menuTar[0][0][0] módszerrel hivatkozunk rá, de ugyanebben a menuTar[0] elemben van az összes többi adat, ami az egyes főmenüponthoz tartozik. Az összes almenü és a hozzájuk tartozó swf-ek nevei. A ciklusok végén az almTar és a fomenuTar tömböket töröljük, mivel nincs rá szükségünk többé, hiszen minden adat a menuTar tömbbe került.

for (var a = 0; fomenuTar[a] != undefined; a++) {
menuTar[a] = new Array();
almTar = fomenuTar[a].split("$");
for (var b = 0; almTar[b] != undefined; b++) {
altartTar = almTar[b].split(",");
menuTar[a][b] = new Array();
menuTar[a][b][0] = altartTar[0];
menuTar[a][b][1] = altartTar[1];
delete altartTar;
}
//end for
delete almTar;
}
//end for
delete fomenuTar;

 
     
 
 

© 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 >>> : .. .