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




 
 
SEGÉDLETEK Flash+XML

Egy szintű fa-szerkezetes menü XML fájlból
  feltöltve: 2005.08.28 | szerző: mrksky | olvasva: 9432 alkalommal

 
 

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

 
 
 
 

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