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


 
 
SEGÉDLETEK Flash+XML

Flash + XML alapú képgaléria készítése
  feltöltve: 2003.10.15 | szerző: kiskp | olvasva: 23850 alkalommal

           
 

Menürendszer elkészítése

XML file-unkat sikeresen betöltöttük, most már ideje lenne 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. Na most ha ez az mc a timeline-on korábban helyezkedik el, akkor a kis script-ünk nem fog tudni végrehajtódni mert nincsenek még(!) meg bizonyos változók.

Most már kezdhetünk rajzolni. Rajzoljunk egy 20*20 pixeles négyzetet (mindegy, hogy hová a színeket is rátok bízom én sötétszürkét csináltam 50%-os fehér kerettel), 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 (4. kép)!

Convert to Symbol (F8)
4. kép - 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 valamire... (csak az átláthatóság kedvéért:)) legyen mondjuk "btn" úgyis 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). Ide jön a lényeg azaz, az összes gombot létrehozó script ami nem más mint egy for ciklus. No lássuk:

duplicate = _parent.entryCount; //ennyi másolatunk lesz. Ezt ugye a 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). Szuper. 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. (5. kép)

A menügombok tulajdonságai
5. kép - 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" (6. kép)


6. kép - 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. Nekünk ugye 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 kis mé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
}

Most már frankón meg vannak a gombjaink, nevük is van, meretük is oké, de olyan széles lett a menürendszer, hogy nem fér be 640 pixel széles mozinkba. Ennek kiküszöbölésére olyan megoldást fogunk alkalmazni, ami itt az swf.hu-nál is látható. A kurzor pozicióától függően fog csúszkálni a menürendszer is jobbra-balra.

 
           
 
 

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