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




 
 
SEGÉDLETEK Flash+XML

Xml adatok beolvasása és kezelése
  feltöltve: 2008.10.30 | szerző: Heryos05 | olvasva: 1279 alkalommal

   
 

A következő segédletben részletesen értelmezzük az xml (teljes nevén: Extensible Markup Language) adat tömb beolvasását és a kapott adatok használatát. A segédlet célja, hogy mindenki számára egyértelmű és megérthető módon legyen értelmezve az XML adat állomány.

Az xml adat tömb,  adatainkat beszédes, egyedileg választott  kulcsszavakkal rendszerezhessük. Az XML feladata, hogy elkülönítse az adatot és annak felhasználását. A HTML - hez hasonlóan az XML is tagokat (szavak '<' és '>' jelek között) és attribútumokat (név="érték" formátumban) használ. Azonban míg a HTML előre definiálja, hogy az egyes tagok és attribútumok mit jelentsenek, s hogy a tagok közötti szöveg a böngészőben miképp jelenjen meg, addig az XML a tagokat csak az egyes adatcsoportok elválasztására használja, az adatok értelmezését meghagyja az alkalmazások számára, amelyek az XML-t olvassák. Másképp megfogalmazva: ha egy "<p>" tagot látunk egy XML fájlban, akkor ez nem feltétlenül jelenti egy új paragrafus kezdetét. A kontextustól függően ez jelölhet pénznemet, pártot, paramétert, p... (és egyáltalán, ki mondta, hogy a jelölt adatnak "p" betűvel kell kezdődnie?). Szóval egy adott xml fájlba nem csak képek hivatkozását szöveget vagy akár a kettőt egybe tárolhatjuk. Hanem a kívánt flash vagy bármilyen más honlap működéséhez tartozó segédkódokat. (háttérszín, pozícionálási pontokat, idő intervallumokat, méretezést, stb...)

  1. Nézzük a szabványos XML felépítését.

<root-node>
<child-node attribute="value">sub-child-node</child-node>
<child-node attribute="value">sub-child-node</child-node>
<child-node attribute="value">sub-child-node</child-node>
<root-node>

Első ként <root-node>  tagot használjuk igazából elnevezés bármi lehet a <> jelek között de természetesen az angol ABC betűivel. Majd ugyan ezt a <root-node> taggal zárjuk az XML-t.

A kettő közti tartalom lesz nekünk az XML tömbünk. Amit aztán hasznosítunk, akár képgaléria akár menü készítéshez vagy teljes oldal elkészítésében. Az egyes Child - nodokba írt attribute-okat írunk a html nél jól bevált " " jelek közé. Igazából a felépítés szülőkből (<root>), gyerekekből (<child>), és játékaikból (<sub-child>) áll. Majd az egyes <child-node> ot bezárjuk ugyan ezzel a taggal csak egy / jellel kiegészítve </child-node> .

Nézzünk egy alap kép kezelési tömböt

<gallery>
<image neve="school">image1.jpg</image>
<image neve="garden">image2.jpg</image>
<image neve="shop">image3.jpg</image>
</gallery>

A fenti példában 3 kép található névvel ellátva.  

  1. Hívjuk be a flashbe.

Nyissunk meg egy üres Flash fájlt as 2 be.

 

az első frame -re hozzunk létre két layert ezen a módon

rajzoljuk meg a kisképet tartalmazó négyzetet a kiskep layer -re. vékony keretes 80*80 fehérkitöltésü négyzetet. Majd a belső fehér kitöltésre egyszer kattintva majd megnyomjuk az F8 billentyűt és konvertáljuk át MovieClip -pé. Névnek adjuk a tn_kep_mc .

Enter lenyomás (illetve az ok gombra kattintva) meg kapjuk a második négyzetet  kék kerettel. Ezután beállítjuk az InstanceName (hivatkozás) részét.

Majd ezt a fehér négyszöget és a fekete keretet is kijelöljük és egy újabb MovieClipet hozunk létre az előbbiek szerint csak most kep_mc névvel és Intance névvel. A program kódban már ezt fogjuk kezelni. Majd ezen a kep_mc MovieClipen belől válaszuk layerekre a keretet és a tn_kep_mc és koé hozunk létre egy új layert a szövegnek. Dinamikus textbox és az istance neve szoveg.

Következik a programozás (AS2)

Kattintsunk az első _as elnevezésű layerünkre majd nyomjuk meg az F9 gombot és elő ugrik a program konzol.

Ide írjuk a következőket:

Ezzel meghívtunk egy új XML tömböt.

var myXML:XML = new XML();

Az adott xml kompatibilis és értelmezni tudja a Flash.

myXML.ignoreWhite=true;

Az xml fájl neve és hivatkozása, betöltése a .load() paranccsal.

myXML.load("alap.xml");

Ellenőriztessük, hogy sikerült e az if() fügvénnyel (ha) a trace() parancsal ki írjuk az xml nevét magunknak.

myXML.onLoad = function(success) {
            if (success) {


// az XML tartalom lekérdezése és egyesitése a változóval


            var myImage = myXML.firstChild.childNodes;


// ciklus inditása


           for (i=0; i<myImage.length; i++) {


//változó


                 var imageNumber = i+1;


//XML adat tömbök velállítása


                 var imageName = myImage[i].attributes.neve;
                 var imageURL = myImage[i].firstChild.nodeValue;


//duplikáció


                kep_mc.duplicateMovieClip("kep_mc"+i,i);


// sorszám meghatározása


                _root["kep_mc"+i].num = i;


// x és y tengely elhelyezés


               _root["kep_mc"+i]._x = 70+88*i;
               _root["kep_mc"+i]._y = 50;


//alpha csatorna vissza állítása


             _root["kep_mc"+i]._alpha = 100;


//kép adat kinyerése és behelyezése a duplikált gomba a felállított XML tömből


             _root["kep_mc"+i].tn_kep_mc.loadMovie(imageURL);


//kép pozicionálása


            _root["kep_mc"+i].tn_kep_mc._x =-40
            _root["kep_mc"+i].tn_kep_mc._y = -40


//kép mérezetése


            myTween = new mx.transitions.Tween(_root["kep_mc"+i].tn_kep_mc, "_width",   mx.transitions.easing.Regular.easeInOut, _root["kep_mc"+i].tn_kep_mc._width, 80, 12, false);
            myTween = new mx.transitions.Tween(_root["kep_mc"+i].tn_kep_mc, "_height", mx.transitions.easing.Regular.easeInOut, _root["kep_mc"+i].tn_kep_mc._height, 80, 12, false);


//kép nevének adata kinyerése és behelyezése a duplikált gomba a felállított XML tömből


             _root["kep_mc"+i].szoveg.text = imageName;


//duplikált gomb eseménye


         _root["kep_mc"+i].onPress = function() {


//készítcsen egy üres mozit("neve", mélysége)
 

_root.createEmptyMovieClip(nagykep, i) egy üres MovieClip() létre hozása a _root targeten, nagykep inctance névvel, és  i mélységben.

         _root.createEmptyMovieClip("nagykep",i);


//mit töltsön be a gomb lenyomására this.num a fentiekben meghatározott szám lesz


        _root.nagykep.loadMovie(myImage[this.num].firstChild.nodeValue);


//pozicionálás


        _root.nagykep._x= _root.kep_mc0._x -42
        _root.nagykep._y= _root.kep_mc0._y +88
         };

       }
     }
};

Végeredmény:


 
   
 
 

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