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

     
 

Ebben a segédletben egy dinamikusan generált menüszerkezet elkészítését fogjuk átnézni. A menü és almenü elemeket egy txt fájlban tároljuk és a mozi indulásakor abból olvassuk ki. A menüszerkezet a txt leírása alapján épül fel és működik, tehát a menü módosításához, bővítéséhez csak a txt-t kell változtatni, a mozi forrásához nem kell nyúlni. Mondhatjuk azt, hogy a segédlet közkívánatra készült. Sokan kerestek meg levélben a témával kapcsolatban és általában soha nincs idő részletesen válaszolni az ilyen jellegű összetett kérdésekre, ezért döntöttem úgy, hogy egy segédlet keretében mutatom be a módszert. A lenti példában látható, hogy mit fogunk elkészíteni. Lássunk is neki a feladatnak!

A txt fájl elkészítése

A txt fájl elkészítésével kezdjük a munkát. A menüelemeket egyetlen változóban adjuk át a flash-nek, ahol majd feldolgozzuk az adatokat. Először nézzük meg a txt jelenlegi tartalmát a lenti képen.

Mielőtt részletesebben értelmeznénk a txt szerkezetét, nézzük meg, hogyan fog működni a menü. A txt-ben eltároljuk a főmenük neveit, a főmenükhöz tartozó almenük neveit és az almenükhöz tartozó swf fájlok neveit. Minden adatot, adatcsoportot különböző karakterekkel választunk el egymástól. Ha egy almenüre kattintunk, az visszaadja a betöltendő swf nevét és azt, hogy éppen melyik főmenüt és almenüt választottuk ki. Ha egy főmenühöz nem tartozik almenü, akkor egyből a főmenü által betöltendő swf nevét kapjuk vissza.

A txt-ben látható, hogy a menuData változóban adjuk át az adatokat. A főmenüket és tartalmukat a '¤' karakterrel válasszuk el egymástól. A főmenü tartalmakon belül az almenüket a '$' karakter választja el, az almenük címét az swf nevétől pedig vesszővel különítjük el. Természetesen tetszőlegesen használható bármilyen más elválasztó karakter is, de akkor a flash-ben is azt kell alkalmazni. Nézzük meg az első fő menüpont adatait.

Főmenü-1,0$Almenü-1,fm1alm1.swf$Almenü-2,fm1alm2.swf$Almenü-3,fm1alm3.swf$ Almenü-4,fm1alm4.swf$Almenü-5,fm1alm5.swf¤

Látható, hogy a fentebb megemlített karakterekkel különítjük el az egyes adatokat. A főmenüt és a hozzá tartozó almenü pontokat a '$' karakter választja el egymástól. Az almenüknél a menü nevét és az swf fájl nevét a vesszők választják el. A sor végén látható a '¤' karakter, ami az egyes főmenü csoportokat különíti el. Ebben az első főmenü pontban tehát vannak almenük, ezt az jelzi, hogy a főmenü neve utáni érték nulla. Öt almenü pont van és mindegyikhez tartozik egy-egy swf. Ha egy főmenühöz nem tartozik almenü, akkor a második értéke nem nulla lesz, hanem a hozzá tartozó swf neve. Ebből fogja tudni a flash, hogy ennél a főmenünél nem kell almenü gombokat megjelenítenie, csak az swf-et. Mindent összevetve ebből a szerkezetből fogja az általunk megírt ActionScript kód felépíteni a menüt. A txt fájlt mentsük el utf8 kódolásban és ezzel el is készült.

Flash elemek elkészítése

Most elkészítjük azt a pár mc-t és gombot amire szükségünk lesz a menü megjelenítéséhez. Készítsünk egy új mozit tetszőleges paraméterekkel. A menü scrollozására használunk egy statikus scroll megoldást, erre nem térek ki, mivel két segédlet is van az swf.hu-n ami erről szól :

Statikus szöveg és moziklip scroll megoldások - 1.rész
Statikus szöveg és moziklip scroll megoldások - 2.rész

A mozi a fő timeline-on öt layerből és egyetlen frame oszlopból áll. A lenti képen láthatóak a layerek sorrendben és elnevezve.

Az action layeren lesz az összes script, ami a menüt létrehozza és a működésért felelős. A menu_mc layerre kerül a menüt tartalmazó movie clip, aminek a tartalmát később átnézzük. A text layeren találhatóak a jobb oldalt lévő text mezők, amik megjelenítik majd a kiválasztott menük neveit és a hozzájuk tartozó swf fájl nevét. Az eredmény layeren vannak a text mezők alatt található téglalapok. Végezetül a keret layerre kerül a mozit körülvevő keret. Az elrendezés a lenti képen látható.

Most nézzük meg a menüt tartalmazó mc-t. A mozi három layerből és egyetlen frame oszlopból áll. A scroll layerre tesszük a statikus scroll-t, aminek az elkészítését a fentebb említett segédletekből lehet elsajátítani. Ez a scroll fogja a menügombokat tartalmazó mc-t mozgatni a maszk alatt, instance neve 'yscroll_mc'. A maszk layeren van a maszk mc, instance neve 'mask_mc'. A maszk szélessége akkora legyen, mint a fő menü gombok szélessége, a magassága pedig akkora, mint a scroll mc magassága. A gombok layerre tegyünk egy üres mc-t, aminek az instance neve legyen 'fmenu_mc'.

Ezzel a megjelenítő elemek el is készültek. Szükségünk van még két menütípusra, az almenü elemekre és a főmenü elemekre...
 
     
 
 

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