6.5. Menürendszer elkészítése
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: 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 ,
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.
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"
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.