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




 
 
SEGÉDLETEK Flash+XML

Alap XML betöltés és kezelés (AS3)
  feltöltve: 2008.03.15 | szerző: Ducky | olvasva: 1491 alkalommal

 
 

Ebben a segédletben egy egyszerű XML kezelést fogunk elkészíteni lépésről lépésre AS3 alkalmazásával. Az XML fájlból beolvasott szöveges tartalmat egy dinamikus szövegmezőben jelenítjük meg. A szövegmező tartalmához készítünk egy egyszerű scrollozást is, így a beolvasott tartalom tetszőleges hosszúságú lehet. A megoldást elkészítjük frame-re írt verzióban és külső osztályal használatával egyaránt. Ha még nem dolgoztál AS3-al, akkor javaslom, hogy indulásnak olvasd el Reider Actionscript 3.0 alapok Adobe Flash CS3-ban című segédletét. Lássunk is hozzá.

Alap összetevők elkészítése

Na ez az, amivel nem lesz sok dolgunk ebben a segédletben. Amire szükségünk lesz a moziban, az egy dinamikus szövegmező és két scroll gomb. Készítsünk egy új AS3 mozit, azaz az új mozi készítésekor CS3-ban adjuk meg a Flash file (ActionScript 3.0) beállítást. Az új mozi paramétereit állítsuk be a lenti képen látható módon. Szélesség 550 pixel, magasság 300 pixel, egy tetszőleges világosabb színű háttér és 30 fps Frame rate.

Kép 1

A mozin belül hozzunk létre három réteget, a lenti képen látható elrendezéssel és elnevezéssel. A rétegeken egy-egy kulcskocka lesz, amikre az összetevőket és az AS kódot fogjuk elhelyezni.

Kép 2

A Scroll rétegen helyezzünk el két scroll gombot, ami egy nyíl grafikát tartalmaz. A felső scroll gomb instance neve legyen upGomb, míg az alsó scroll gomb instance neve legyen downGomb. A Text rétegen helyezzünk el egy dinamikus szövegmezőt, amelynek instance neve xmlKiirText. Beállításai a Properties panelen a következőek, Line type: Multiline, Font: Arial, Font size: 12, Text align: Justify. Jelöljük be még a Selectable és a Render text as HTML lehetőségeket is, szintén a Properties panelen.

Kép 3

XML fájl elkészítése

El kell még készítenünk az XML fájlt is, amit a mozink be fog tölteni és megjelenít. Készítsünk egy új XML fájlt és másoljuk bele a lent látható XML struktúrát, majd mentsük el az FLA fájlal azonos mappába autosHirek.xml néven.

<hirek>

    <hir>
        <datum>2008. 03. 05.</datum>
        <cim>Padlógázra ölni tud</cim>
        <szoveg>
Játsszunk nyílt lapokkal: az új C6-os Corvette igazából nem is új, hiszen 2005-ben mutatkozott be. Hogy most mégis tele vannak vele az autós újságok, annak köszönhető, hogy reszeltek és erősítettek egy kicsit a blokkon, átfésülték a kormánymechanikát és a futóművet, valamint javítottak a beltér kidolgozásán. Aki szeret és tud főzni, pontosan tudja, hogy néha egy-egy csipetnyi fűszer, öt perccel több (vagy éppen kevesebb) sütés vagy párolás hiányzik ahhoz, hogy tökéletes legyen az étel, amely a legtöbbször megreked annál a fázisnál, hogy "finom, finom drágám, de ettem már jobbat is". Ez a buta példa nagyon jól ráhúzható a 2008-as Corvette-re is, amely ugyan ezután sem fogja reggelire megenni a hasonló kategóriájú Porschékat és Ferrarikat, ám sokkal élvezetesebben vezethető autó lett.
        </szoveg>
    </hir>

    <hir>
        <datum>2008. 03. 02.</datum>
        <cim>Pfeifhofer úr szentélye</cim>
        <szoveg>
A Porsche nevet minden bizonnyal a világ egyik féltekéjén sem kell bemutatni. Ez a sportautók történelemkönyvébe örökre bevésett fogalom a tervezőzsenihez, dr. Ferdinand Porschéhoz fűződik. De mi köze van a leginkább téli kikapcsolódásról ismeretes környékhez? A válasz nagyon egyszerű: a Porsche tervezőiroda székhelye a stuttgarti főhadiszállás kialakítása előtt, 1944-től 1950-ig a karintiai Gmünd városkában volt. Itt tervezték és építették a legendás, 356-os típusjelzésű gépjárműcsodák korai változatait - kézzel.
        </szoveg>
    </hir>

    <hir>
        <datum>2008. 02. 29.</datum>
        <cim>Audi TT dízelmotorral</cim>
        <szoveg>
Miután elkészült a kétliteres TDI közös-nyomócsöves változata, az Audi már a Győrben készülő sportkocsit is elérhetővé tette a dízellel. A dízelmotor és a sportosság már régóta összetartozó fogalmak az Audinál, elég csak Le-Mans-i 24 órás versenyen diadalmakat arató versenyautóra, vagy a Detroiti Autószalonon bemutatott dízel R8-ra gondolni.
        </szoveg>
    </hir>

    <hir>
        <datum>2008. 02. 28.</datum>
        <cim>Forradalmi tető a Webastótól</cim>
        <szoveg>
A Genfi Autószalonon mutatja be új, szuperkönnyű kabrió tetőszerkezetét a német Webasto. A technológia bemutatására szolgáló sportkocsi formáját a hetvenes évek Fiat 124 Sport Spidere inspirálta. A német Webasto igazi nagyhatalom a nyitható tetők világában, és új rendszerükkel forradalmasítani kívánják az autóipar ezen területét.
        </szoveg>
    </hir>

    <hir>
        <datum>2008. 02. 26.</datum>
        <cim>Terepre termett osztrák hibrid</cim>
        <szoveg>
Egy kisméretű, környezetbarát terepjáróval lepi meg a genfi Autószalon közönségét az osztrák Magna Steyr. Jelenleg a Magna Steyr a BMW X3, a Jeep Grand Cherokee és az európai piacra készülő Chrysler 300C-k összeszerelésével foglalkozik Graz mellett, de állítólag a közelgő Mini szabadidő-autó készítésével is őket bízzák majd meg.
        </szoveg>
    </hir>

    <hir>
        <datum>2008. 02. 24.</datum>
        <cim>Dízel-hibrid Golf a Volkswagentől</cim>
        <szoveg>
A Volkswagen genfi standján az új Scirocco és a Sharan Bluemotion mellett a Golfból készített környezetbarát tanulmányautó lesz a fő attrakció. Korábban még csak a PSA kísérletezett a dízel-elektromos hibriddel a Citroën C4-ben és a Peugeot 308-ban, azonban most már kiderült, hogy a Volkswagen is előrehaladott kutatásokat végez a témában. Genfben állítják ki először egy Golfba szerelve a rendszert, amely egy ismeretlen lökettérfogatú TDI dízelmotort, egy elektromotort és egy hétfokozatú DSG-váltót házasít össze.
        </szoveg>
    </hir>

</hirek>

AS kód elkészítése

Most térjünk vissza az FLA fájlhoz, és készítsük el a vezérlő AS kódot. A kódot az AS réteg kulcskockájára írjuk, tehát jelöljük ki a kulcskockát, majd nyissuk meg az Actions panelt és a lenti kódot írjuk bele.

// alap összetevők
var loadKontroll:URLLoader = new URLLoader();
var xmlFajlNeve:String = "autosHirek.xml";

// betöltés és eseménykiosztás
loadKontroll.dataFormat = URLLoaderDataFormat.TEXT;
xmlKiirText.htmlText = "XML betöltése ...";
loadKontroll.load ( new URLRequest( xmlFajlNeve ) );
loadKontroll.addEventListener ( Event.COMPLETE, xmlToltesKesz );
downGomb.addEventListener ( MouseEvent.MOUSE_DOWN, downEsemeny );
downGomb.addEventListener ( MouseEvent.MOUSE_UP, upEsemeny );
upGomb.addEventListener ( MouseEvent.MOUSE_DOWN, downEsemeny );
upGomb.addEventListener ( MouseEvent.MOUSE_UP, upEsemeny );

// XML betöltés COMPLETE függvény
function xmlToltesKesz ( event:Event ):void {
    xmlKiirText.htmlText = "";
    var xmlAdatok:XML = new XML( event.target.data );
    var xmladatLista: XMLList = xmlAdatok.hir;
    for (var i: int = 0; i < xmladatLista.length(); i++) {
        var dt1:String = xmladatLista[i].cim;
        var dt2:String = xmladatLista[i].datum;
        var dt3:String = xmladatLista[i].szoveg;
        xmlKiirText.htmlText += "<b>" + dt1 + "</b> ( " + dt2 + " )<br>" + dt3 + "<br><br>";
    }
}

// scroll MOUSE_DOWN függvény
function downEsemeny ( event:MouseEvent ):void {
    event.target.addEventListener ( Event.ENTER_FRAME, enterEsemeny );
}

// scroll MOUSE_UP függvény
function upEsemeny ( event:MouseEvent ):void {
    event.target.removeEventListener ( Event.ENTER_FRAME, enterEsemeny );
}

// scroll ENTER_FRAME függvény
function enterEsemeny ( event:Event ):void {
    if ( event.target.name == "downGomb" ) {
        xmlKiirText.scrollV ++;
    } else if ( event.target.name == "upGomb" ) {
        xmlKiirText.scrollV --;
    }
}
//

Nézzük meg mi is van ebben a viszonylag egyszerű kódban. Létrehozunk egy új URLLoader-t, ez kell majd az XML betöltéséhez. Ezután az xmlFajlNeve változóban eltároljuk az XML fájlunk nevét. A dataFormat segítségével meghatározzuk, hogy milyen formátumot fogunk betölteni, számunkra most a TEXT lesz a megfelelő. A szövegmezőben kiírjuk az "XML betöltése ..." feliratot, jelezve, hogy a betöltés folyamatban van. Ezután a load segítségével betöltjük az XML fájlt, aminek elérését eltároltuk az xmlFajlNeve változóban. Most pedig kiosztjuk az egyes eseményeket. Az Event.COMPLETE esemény akkor fog lefutni, ha az XML betöltése befejeződött, hozzárendeljük a xmlToltesKesz függvényt. A két scroll gombhoz a MOUSE_DOWN és MOUSE_UP eseményeket rendeljük, amelyek a gombok lenyomásakor és felengedésekor érvényesülnek. A MOUSE_DOWN függvénye a downEsemeny lesz, míg a MOUSE_UP az upEsemeny függvényt kapja.

A xmlToltesKesz függvény, ahogyan azt fentebb említettük, az XML fájl betöltésekor fog lefutni. A szövegmezőt kiürítjük, majd feldolgozzuk az XML fájlból kapott adatokat. Az xmlAdatok-ba kerül a beolvasott XML adat, majd az xmladatLista változóhoz rendeljük a híreket, tehát minden elemet ami elemek közé került. Ezeknek az elemeknek a számát határozza meg az xmladatLista.length(). Ezzel az értékkel határozzuk meg a for ciklus végét, tehát a ciklus addig fut, amíg vannak hir elemek az XML dokumentum tartalmában. A dt1, dt2, dt3 változókban tároljuk el az aktuális hír elemeit, tehát a címet, dátumot és szöveget. Ezután a szövegmező tartalmához hozzáadjuk a kinyert elemeket. A címet félkövér formázással emeljük ki, a dátumot zárójelbe helyezzük és alattuk lesz a szöveg.

A downEsemeny függvény akkor fut le, amikor egy scroll gombot lenyomunk. Mivel mindkét gombhoz ezt a függvényt rendeltük, így mindkét gomb lenyomása esetén ez a függvény fut le. A lenyomott gomb, azaz az esemény kiváltója, célpontja (event.target) kap egy ENTER_FRAME eseményt, ami majd a scrollozást végzi és az enterEsemeny függvény tartozik hozzá. Az upEsemeny függvény akkor érvényesül, ha valamelyik scroll gombot felengedjük. Itt szintén mindkét gomb MOUSE_UP eseményéhez ezt a függvényt rendeltük. A függvény törli az ENTER_FRAME eseményt, ami éppen a scrollozást végzi.

Végezetül az enterEsemeny függvény következik, ami maga a scrollozás folyamata és a scroll gombok lenyomása aktiválja. Az esemény kiváltójának neve (event.target.name) határozza meg az elágazásokban, hogy a szövegmező scrollV értékét növeljük, vagy csökkentjük. Ez természetesen attól függ, hogy éppen felfelé, vagy lefelé scrollozást választottunk. Ezzel a kód el is készült, mentsük el az FLA fájlt és teszteljük a programot. Ha mindent jól csináltunk, akkor a lecke elején megjelenő formában fog működni az alkalmazásunk. Kicsit bonyolítsunk a dolgon, készítsük el külső osztállyal is a programot.

Külső osztály elkészítése

A külső osztály verziót elkészíthetjük úgy, hogy ezt a meglévő FLA-t módosítjuk, vagy készíthetünk egy teljesen új flash mozit ugyanezekkel a paraméterekkel és összetevőkkel. A változás a következő lesz. Az AS réteget töröljük, mert arra nem lesz szükségünk. Készítsünk egy új ActionScript fájlt a főmenü File / New menüpont segítségével. A megjelenő ablakban válasszuk az ActionScript file lehetőséget. Az új AS fájlt mentsük el az FLA fájlal azonos mappába AlapXmlBetoltes.as néven. Most jöhet az osztály megadása a flash moziban. A Properties panelen a Document class mezőben adjuk meg az AlapXmlBetoltes osztályt. Ha megvan, mentsük el a fájl módosításait.

Kép 4

Most térjünk vissza a külső ActionScript fájlhoz. El kell készítenünk a külső vezérlő osztályt, ami ugyanazt a szerepet fogja betölteni, mint a fentebb megismert frame kód. Írjuk a lent látható kódot a külső AlapXmlBetoltes.as fájlba, majd mentsük el.

/* AlapXmlBetoltes.as */
//

package {

    // szükséges csomagok
    import flash.display.*;
    import flash.events.*;
    import flash.text.TextField;
    import flash.net.*;

    // AlapXmlBetoltes osztály
    public class AlapXmlBetoltes extends MovieClip {

        // tulajdonságok
        private var loadKontroll:URLLoader = new URLLoader();
        private var xmlFajlNeve:String = "autosHirek.xml";

        // konstruktor
        public function AlapXmlBetoltes () {
            // eseménykiosztás és betöltés
            loadKontroll.dataFormat = URLLoaderDataFormat.TEXT;
            xmlKiirText.htmlText = "XML betöltése ...";
            loadKontroll.load ( new URLRequest( xmlFajlNeve ) );
            esemenyKioszt ();
        }

        // eseménykiosztó metódus
        private function esemenyKioszt ():void {
            loadKontroll.addEventListener ( Event.COMPLETE, xmlToltesKesz );
            downGomb.addEventListener ( MouseEvent.MOUSE_DOWN, downEsemeny );
            downGomb.addEventListener ( MouseEvent.MOUSE_UP, upEsemeny );
            upGomb.addEventListener ( MouseEvent.MOUSE_DOWN, downEsemeny );
            upGomb.addEventListener ( MouseEvent.MOUSE_UP, upEsemeny );
        }

        // XML betöltés COMPLETE metódus
        private function xmlToltesKesz ( event:Event ):void {
            xmlKiirText.htmlText = "";
            var xmlAdatok:XML = new XML( event.target.data );
            var xmladatLista: XMLList = xmlAdatok.hir;
            for (var i: int = 0; i < xmladatLista.length(); i++) {
                var dt1:String = xmladatLista[i].cim;
                var dt2:String = xmladatLista[i].datum;
                var dt3:String = xmladatLista[i].szoveg;
                xmlKiirText.htmlText += "<b>" + dt1 + "</b> ( " + dt2 + " )<br>" + dt3 + "<br><br>";
            }
        }

        // scroll MOUSE_DOWN metódus
        private function downEsemeny ( event:MouseEvent ):void {
            event.target.addEventListener ( Event.ENTER_FRAME, enterEsemeny );
        }

        // scroll MOUSE_UP metódus
        private function upEsemeny ( event:MouseEvent ):void {
            event.target.removeEventListener ( Event.ENTER_FRAME, enterEsemeny );
        }

        // scroll ENTER_FRAME metódus
        private function enterEsemeny ( event:Event ):void {
            if ( event.target.name == "downGomb" ) {
                xmlKiirText.scrollV ++;
            } else if ( event.target.name == "upGomb" ) {
                xmlKiirText.scrollV --;
            }
        }

    }// osztály vége

}// csomag vége
//

Maga a kód és annak működése ugyanaz, mint a fentebb elkészített frame-re írt verziónak, így nem szorul különösebb magyarázatra. A változás alapvetően annyi, hogy itt a szükséges csomagokat importáljuk a kód elején, majd létrehozzuk a publikus AlapXmlBetoltes osztályt a MovieClip-ből származtatva. Az alap tulajdonságok ugyanazok. A konstruktor fog automatikusan lefutni, tehát abban töltjük be az XML fájlt és elvégezzük az eseménykiosztásokat is. Az eseménykiosztások itt egy külön metódusba vannak rendezve, de a szerepük és létrehozásuk ugyanaz marad. Teszteljük le most is a mozit, az eredmény ugyanaz lesz, csak az elkészítés módszere változott. Ezzel el is érkeztünk a segédlet végéhez, remélhetőleg egy érthetőm alapot adott az XML fájlok kezeléséhez.

 
 
 
 

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