|
Hasonló menüt készítünk, mint Ducky fa-szerkezetes segédletében, csak a menü adatait nem txt-ben, hanem egy XML fájlban tároljuk. Mivel a kész menünket egy movie clipbben helyezzük el, később könnyen felhasználhatjuk más alkalmazásunkhoz. Lássuk mi lesz a végén:
A mozink előkészítése
Kezdjünk egy új moviet, én 200*400-as mérettel, 24 fps mellett fehér háttérrel csináltam. A fő timelineon elég lesz csak egy layer, ahova rakjuk a fő movie clippünket.
Csináljunk egy pl 200*25-ös téglalapot, konvertáljuk szimbólummá (mc), a regisztrációs pontja legyen a bal felső sarok, adjuk neki a menuelem_mc nevet. Az advanced lenyíló menüt válasszuk ki, és jelöljük be az export for actionscriptet, Identifier névnek adjuk a "menuelem" nevet. Ez azért fontos, mert ha töröljük a színpadról a clippet, ezen a néven érhetjük el a könyvtárból!
Ha ezzel megvagyunk, lépjünk be a létrehozott moziklippbe, és rajzoljunk egy kicsit:
Most a főmenü gombunkat fogjuk elkészíteni, nem kell ilyennek lennie, van ugye ezer mód arra, hogy gombot készítsünk, ez csak az egyik.
Szükségünk lesz öt rétegre, a legalsó rétegünk legyen a már megrajzolt téglalap, a második rétegre én egy fehér téglalap alakú grafikát raktam, aminek az alpháját 15%-ra állítottam. A harmadik rétegre tegyünk egy dinamikus szövegdobozt "menucim" instance névvel. (Ez a szövegbox hivatott megjeleníteni a menünk címét.) A negyedik réteg legyen az actionsok rétege, az ötödik pedig a labels.
A második rétegen lévő kis grafikánkat animáljuk a második frame-től. Az első frame-en ne legyen, a másodikon legyen 1 pixel széles a 0,0 pontban, a nyolcadik frame-en legyen teljes szélességü (200 pixel), a 14. frame-en ismét 1 pixel, a 0,0 ponban. Készítsük el a mozgáshoz tartozó motion tween-eket!
A szövegdoboz és az alap grafikánk legyen végig látható a 14 frame alatt. Az actions réteg első képkockájába tegyünk egy stop() utasítást, a nyolcadik frame-re szintén egy stop() utasítást, a 14. frame-re pedig egy gotoAndPlay(1) utasítást. A labels réteget is cimkézzük fel. A második frame neve legyen up, a kilencedik frame neve legyen down. A layereid valahogy így néznek most ki:
Hasonló elgondolással csináljuk meg az almenü gombjait is. Én annyiban változtattam meg, hogy a szélessége ugyanúgy 200 pixel, a magassága csak 20 pixel, a színe nem olyan erős mint a főmenüé, hogy elkülönüljön. Amikor az export for actionscriptet bejelöltem, Identifiernek "menuelem2" nevet adtam. Amúgy az animáció, a framek, actionsok, labelsek ugyanazok.
Ha megvan mindkét gomb, nyugodtan törölhetjük őket a színpadról, majd később actionscripttel vezéreljük őket.
Az első képkockára csináljunk egy üres moviet, én ezt keretnek neveztem el, "keret_mc" instance névvel. Ez lesz a keret mozink, amin belül dolgozunk.
Ebben a moziban csináljunk négy réteget. A legfelső (nálam) réteg nem is igazán kell majd, csak, hogy lássuk a menü működését csináljunk a szinpad aljára egy dinamikus szövegdobozt, adjuk neki a "status" instance nevet. (Ezt látod működés közben, ide íródik ki, hogy minek kéne történnie)
Az ez alatti réteg az actions réteg, ide írjuk majd a kódot.
Felülrűl a harmadik rétegre tegyünk egy üres mc-t, regisztrációs pontja a bal felső sarok, és a 0,0 pontban legyen. Instance neve legyen "menu_mc".
A legalsó rétegre szintén egy üres mc kerül, lehet ugyanaz, mint az előző, csak az instance neve legyen "menu2_mc".
Ez pedig így néz ki:
Megvagyunk az összes rajzolási, elhelyezési dolgunkkal, a többit elvégzi az actionscript.
Az XML
Nyissunk pl egy notepadot, és töltsük így fel, vagy másoljuk bele az alábbi szerkezetet:
<?xml version="1.0" encoding="utf-8" standalone="yes?>
<menuk>
<fomenu cime="Főmenü 1">
<almenu alcim="Almenü 1/1" link="al1.swf"/>
<almenu alcim="Almenü 1/2" link="al2.swf"/>
<almenu alcim="Almenü 1/3" link="al3.swf"/>
<almenu alcim="Almenü 1/4" link="al4.swf"/>
<almenu alcim="Almenü 1/5" link="al5.swf"/>
<almenu alcim="Almenü 1/6" link="al6.swf"/>
</fomenu>
<fomenu cime="Főmenü 2">
<almenu alcim="Almenü 2/1" link="al7.swf"/>
</fomenu>
<fomenu cime="Főmenü 3">
<almenu alcim="Almenü 3/1" link="al8.swf"/>
<almenu alcim="Almenü 3/2" link="al9.swf"/>
<almenu alcim="Almenü 3/3" link="al10.swf"/>
</fomenu>
<fomenu cime="Főmenü 4" link="al11.swf">
</fomenu>
<fomenu cime="Főmenü 5">
<almenu alcim="Almenü 5/1" link="al12.swf"/>
<almenu alcim="Almenü 5/2" link="al13.swf"/>
</fomenu>
</menuk>
Amit itt láttok, az a fenti kész verziónak az XML állománya. A főmenü címével adjuk meg a főgombok címeit, az alcímek az algombok címeit jelentik. A link a betöltendő movie, kép elérési útját jelenti. Ahol nincs almenü, oda betettem egy link="elérési út", mert oda nem kerül almenü, csak a hozzá tartozó linkkel kell dolgozni. Ezt az állományt töltjük be, majd dolgozunk vele a flashben. Ha később pedig a menün változtatunk, akkor elég csak ezt megváltoztatni...
Mentsd el menum.xml névvel oda, ahol a flash forrás van.
Az ActionScript kód:
Az actionscriptet a keret_mc második layerén az első framre helyezd, úgy ahogy végigvesszük.
// A fomenu gombokig, majd az almenu gombokig a hivatkozas
foLeut = _root.keret_mc.menu_mc;
alLeut = _root.keret_mc.menu2_mc;
// Az XML betolto
xmlMenuData = new XML();
xmlMenuData.ignoreWhite = true;
xmlMenuData.onLoad = loadXML;
xmlMenuData.load("menum.xml");
A foLeut és alLeut az elérési utakat jelenti a gyökerünkhöz képest, ha más a rendszerünk ezt mindenképpen módosítani kell, de elég is ezt, mert ez alapján dolgozunk. Elkészítjük az XML betöltőt is.
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
//A tombjeink (fomenu, almenu, linkek) A foGombok tömb később lesz aktuális, amikor rendezzük a gombokat. Amúgy csak annyi történik, hogy elkészítjük a tömböket, ahova az XML adatok lesznek sorolva
foMenuCim = [];
foMenuLink = [];
alMenuLink = [];
alMenuCim = [];
foGombok = [];
// A fomenuk szama
totalMenuk = xmlNode.childNodes.length;
// A gombok elkeszitese
for (i=0; i<totalMenuk; i++) {
// A fomenuk cimei
foMenuCim[i] = xmlNode.childNodes[i].attributes.cime;
// Ha nincs almenu, csak link
foMenuLink[i] = xmlNode.childNodes[i].attributes.link;
// Kiszedjuk a konyvtarbol a gombokat a fomenuhoz
gomb = foLeut.attachMovie("menuelem", "menuelem"+i, i);
// A letrejott gomb mc-ket tombbe rakjuk
foGombok[i] = gomb;
// Megcimkezzuk a gombjainkat
gomb.menucim.htmlText = foMenuCim[i];
// Az almenu nelkuli gombok linkje
gomb.foLink = foMenuLink[i];
// Fomenu gomb ala tartozo almenuk darabszama
gomb.almenuszam = xmlNode.childNodes[i].childNodes.length;
gomb.number = i;
// A gombok sokszorozasa
gomb._y = i*gomb._height;
// Fomenu gombok actionjai, itt mozgatjuk a lejátszófejet a gomb mc-ben a rollOverekben
gomb.onRollOver = function() {
this.gotoAndPlay("up");
};
gomb.onRollOut = function() {
this.gotoAndPlay("down");
};
gomb.onRelease = function() {// Ha pedig rákattintunk jöhet az almenü
// Elkeszitjuk az almenu tarolo mc-t, ezzel ki is toroljuk, ha volt ott
alLeut.createEmptyMovieClip("algombtar", 0);
// Ide igazitjuk az almenut
gombNumber = this.number;
menupont = (gombNumber+1)*gomb._height;
// Az almenuben levo gombjaink szama
alMenu.length = almenuszam;
// Az almenu elkeszitese
if (this.foLink != undefined) {
// Ha csak a link van a fomenuben, akkor ide keruljon a loadMovie...
status.htmlText = "Betöltöm a "+this.foLink+" moviet"
} else {
for (i=0; i<this.almenuszam; i++) {
// Az almenuk linkjei
alMenuLink[i] = xmlNode.childNodes[this.number].childNodes[i].attributes.link;
// Az almenuk címei
alMenuCim[i] = xmlNode.childNodes[this.number].childNodes[i].attributes.alcim;
// Kiszedjuk a konyvtarbol a gombokat az almenuhoz
algomb = alLeut.algombtar.attachMovie("menuelem2", "menuelem2"+i, i);
algomb.alLink = alMenuLink[i];
// Az almenu gombjainak sokszorozasa
algomb._y = i*algomb._height;
algomb.almenucim.htmlText = alMenuCim[i];
// Az almenunk gombjainak actionsai, szintén a gomb lejátszófejét mozgatjuk
algomb.onRollOver = function() {
this.gotoAndPlay("up");
};
algomb.onRollOut = function() {
this.gotoAndPlay("down");
};
algomb.onRelease = function() {
// Ide kerüljön a loadmovie, az almenükhöz...
status.htmlText = "Betöltöm a "+this.alLink+" moviet";
};
}
}
// Vele rendezzük a menu moziainkat, gombokat
menuIgazit();
};
}
}
}
Szóval betöltöttük az XML-t, létrehoztuk a fő gombokat, megvan a rollOver-Out eseményünk, onReleasere kéne rátennünk a mit töltsön, és hova actionst. Ha rákattintunk egy olyan menügombra, ahol van almenü, akkor csinálunk egy mc-t, amit feltöltünk az almenügombokkal, amik szintén megkapták a rollOver-Out eseményt, valamint nekik is meg kéne mondanunk mit csináljanak onRelease-kor. (Most csak kiiratom a linket ugye...) Még egy függvény van hátra, mégpedig a Főgombok, és az almenü rendezése. Itt kap szerepet a foGombok tömbünk!
menuIgazit = function () {
// Az almenü el is van intézve, mert az őt tároló mc-t odaküldjük, ahol lenyomtuk a gombot.
alLeut._y = menupont;
// A lenyomott gomb feletti gombok egymáshoz igazítása
for (i=0; i<=gombNumber; i++) {
foGombok[i]._y = i*foGombok[i]._height;
}
// A lenyomott gomb feletti gombok almenu alá, és egymáshoz igazítása
for (j=gombNumber+1; j<totalMenuk; j++) {
foGombok[j]._y = j*foGombok[j]._height+alLeut._height;
}
};
Ennyi, meg is van. Késznek még nem nevezném, mert így nem sokat ér, de ötletet adhat, és rugalmas. Továbblépési lehetőségnek javaslom, hogy a keret_mc-hez scrollt, maskot készítsetek, mert, akkor tényleg bővülhet a menü. Így egy idő után már lelógna, és nem látszana. Sok segédlet van az oldalon ebben a témában... :)
|
