6.5. Menürendszer elkészítése

iDevice ikon

XML file-unkat sikeresen betöltöttük, ideje létrehozni az egyes menüpontokat is. Kattintsunk a - már korábban létrehozott - "navigation" nevű réteg "createNavigation" nevű frame-jére (ez nálam a 38.) és üssünk "F6"-ot. Ezzel létrehoztunk egy új kulcskockát aminek annyi a jelentőságe, hogy ha most elkezdünk rajzolni, akkor az nem az egész rétegre fog hatni, csupán ettől a kockától a következő kulcskockáig (esetünkben a timeline végéig). A mi esetünkben ez azért volt fontos, mert a navigation nevű réteg fogja tartalmazni a menürendszer mc-jét, ill. ez az mc az gombokat létrehozó script-et, ami a "FinishedLoading" cimkéjű frame-en definiált változókat használja fel.

Most már kezdhetünk rajzolni. Rajzoljunk egy 20*20 pixeles négyzetet, ha kész van és kijelöltük, akkor konvertáljuk át szimbólummá (F8 - Convert to Symbol). Adjuk meg a nevét (navSystem), típusát (Movie Clip) és a nulla pozicióját (Registration) a bal felső kis kockába!

Convert to Symbol (F8)
28. ábra
Convert to Symbol: a nulla pozició (Regisrtation) azért fontos mert később így könnyeb lesz pozicionálni, igazítani egymáshoz a script-tel láétrehozott gombokat.


Amennyiben kész az mc-nk, adjunk neki egy instance nevet is - ami most legyen ugyanaz mint a saját neve, tehát "navSystem" - és kattinsunk rá kettőt, hogy szerkeszteni tudjuk.
A meglévő egy réteget nevezzük át "btn" névre, ebből lesz majd a tényleges gomb. Jelöljük ki ismét a négyzetünket és csináljunk belőle egy újabb mc-t (Name: btn, Instance Name: btn_left). Ezt az mc-t fogjuk sokszorosítani. Csináljunk egy új réteget (actions).

Az alábbiakban a gombokat létrehozó szkriptet láthatjuk:

duplicate = _parent.entryCount; //ennyi másolatunk lesz. Ezt ugye az egy szinttel feljebb a "FinishedLoading" résznél definiáltuk.


//a többi másolat létrehozása
for (i=0; i<duplicate; i++) {
btn_left.duplicateMovieClip("btn"+i, i);
this["btn"+i]._x = i*this["btn"+i]._width;
}


Mivel ezt a pár sort fogjuk egy darabig szerkeszteni, nyomjuk le a Pin current script gombot http://www.swf.hu/old/tutorials/xml/xml001/pin_current_script.gif, ezzel bármikor, ha megnyitjuk az Actions panelt (F2), akkor ez a rész lesz aktuális, ezt tudjuk majd szerkeszteni, addig amíg ki nem kapcsoljuk a rajzszöget.

Ha most megnézzük alkotásunkat (Ctrl+Enter), akkor annyi mc-t látunk amennyi az .xml file-ban meg volt határozva (ha azt használjátok amit mellékeltem, akkor pont 10 darabnak kell lenni). Most lépjünk vissza egy szintet és az egészet (navSystem) mozgassuk el a bal felső sarokba, mondjuk x=1, y=30 pozicióba. A másolatok meg vannak, jöhet a végleges kialakításuk.

Nézzük a gombok szélességét. Kattintsunk kettőt a "btn_left" movie clip-ünkön, és a négyzetünkből csináljunk egy újabb szimbólumot, de ezúttal a Behavior-ját állítsuk Button-ra, névnek pedig adjunk "btn_nav"-ot. Csináljuk meg hozzá a szükséges Up, Over, Down állásokat, de mindegyik esetben az Outline szélességét tegyük a legvékonyabbra (Hairline) máskülönben, ha méretezni fogjuk a gomb szélességét akkor a körvonalak is méreteződni fognak és ez nemkivánt hatásokhoz vezet. Ha ez megvan jelöljük ki és az instance névnek adjunk szintén "btn-nav"-ot.

 

A menügombok tulajdonságai
29. ábra
Flash MX-ben már lehet a gomboknak, sőt textfield-eknek is instance nevet adni, ami igen hasznos dolog mindjárt látni fogjuk


Most készítsünk egy új layer-t, amire kreáljunk egy dinamikus szövegdobozt, x=1, y=1 pozicióba. Nem kell hogy túllógjon a gomb területén, a szövegdoboz méretét is actionscript-tel fogjuk szabályozni. Színnek azt adjuk meg amit az .xml file-ban megadtunk (main_offColor), esetünkben szürke (#CCCCCC), Variable név legyen "btnName", instance név pedig "tf_btnName"

http://www.swf.hu/old/tutorials/xml/xml001/btn_text.gif
30. ábra
gombjaink feliratának tulajdonságai


Nyissuk meg az Actions palettát (F2), ahol szerkeszteni tudjuk a másolatok létrehozásához szükséges programsorokat. (Ha nem használtuk a Pin current script gombot, akkor lépjünk feljebb egy szinttel és ott az Actions nevű rétegünk első frame-jére kattintsunk kettött). Kezdjük a gombok méreteivel. Minimum olyan széles gomb kellene, mint amilyen hosszú a gombunk felirata. Ezt a szélességet az imént létrehozott textfield-ünk fogja meghatározni. Igen ám, de mi csak egy kisméretű szövegdobozt hoztunk létre, amibe nem igazán férnek bele a hosszabb feliratok (pl.: Lamborghini Murciélago). Itt jön a képbe egy másik új, nagyszerű textField object tulajdonság az "autoSize". Ezzel akkora méretűek lesznek a textField-jeink amilyenekbe pont beleférnek az .xml file-ban megadott nevek (Entry name). Ebből aztán könnyedén meghatározhatjuk a gombok szélességét. No lássuk! Íme, a módosított programrész, pár új tulajdonsággal:

duplicate = _parent.entryCount;
//ennyi másolatunk lesz. Ezt ugye az egy szinttel feljebb a "FinishedLoading" résznél definiáltuk
defWidth = btn_left._width-1;
//a legelső gomb szélessége, ez kell a többi pozició meghatározásához
xPadding = 8;
//ez is gomb szélességéhez kell, ezt az értéket fogjuk hozzáadni a textField szélességéhez
btnPos_array = new Array();
//egy tömb ami a gombok x pozicióját fogja tárolni

//a többi másolat létrehozása
for (i=0; i<duplicate; i++) {
btn_left.duplicateMovieClip("btn"+i, i);
this["btn"+i].btnName = _parent.categoryNode.childNodes[i].attributes.name;
//a gombok neve (.xml file-ból)
this["btn"+i].tf_btnName.autoSize = true;
//engedélyezzük a textField-ek méretezését
this["btn"+i].btn_nav._width = this["btn"+i].tf_btnName.textWidth+xPadding;
//a gombok méretezése a textField-ek szélességéből és az xPadding értékéből
this["btn"+i].dirName = _parent.categoryNode.childNodes[i].attributes.dirName;
//innen veszi majd a képeket a slideshow, ezt a változót minden másolat megkapja a hozzá tartozó értékkel, amit az .xml fileból határozzuk meg
btnPos_array[i] = this["btn"+i].tf_btnName.textWidth+xPadding;
//új elem hozzáadása a tömbhöz
currentPos = currentPos + btnPos_array[i-1] + 1;
//az aktuális pozició meghatározása a "poziciós tömbünk" segítségével
this["btn"+i]._x = defWidth+currentPos;
//végül pedig megadjuk az egyes másolatoknak, hogy hol helyezkedjenek el
}

A kurzor pozíciójától függően fog csúszkálni a menürendszer is jobbra-balra.