flash en xml

In deze tutorial ga ik jullie uitleggen hoe je xml (extensible markup language) bestanden kan lezen vanuit flash.

XML lijkt een beetje op html met het grote verschil dat in html alle <tags> zijn vast gelegd, en in XML kan je ze in de wilde weg verzinnen.
Bijvoorbeeld in html is "<b> altijd bold </b>", terwijl in XML "<zomaar iets> ook al goed is </zomaar iets>".
Voor meer info over XML
Het XML document wat ik aan het einde van mijn tutorial ga gebruiken kan je hier zien

Zoals je kon zien waren er alleen maar <tags> te zien die je kan noemen zoals je zelf wilt (zolang je ze ook maar weer netjes afsluit)

Okay tot zover even het XML gedeelte, over naar flash nu.

Ik ga voor het begin even een lekker simpel opgebouwde XML gebruiken om het later uit te breiden zodat je ook de logica ervan gaat inzien.
Ik gebruik nu even dit XML bestand.(het heet overigens "nummers.xml")

Voor het volgende voorbeeldje hebben we een fla nodig met maar één keyframe ( en 2 lagen om het netjes te doen).
Om te beginnen heeft flash natuurlijk tekst vakken nodig om de data in te tonen,
Klik op de text tool, en maak een dynamisch textvak aan met de instance name tekstVeldje.

Zorg dat het text veld groot genoeg is om je data in te laten zien.

Op de andere laag nu, selecteer je het keyframe en open het AS panel.
Copy en paste daar de volgende code in

function leesXML(geladen) {
        if (geladen) {
                _root.tekstVeldje.text = this.firstChild.childNodes[0].firstChild.nodeValue;
        }
}
onzeGegevens = new XML();
onzeGegevens.ignoreWhite = true;
onzeGegevens.onLoad = leesXML;
onzeGegevens.load("nummers.xml");

Maar we hadden toch meer data in die XML staan ?...Jup, en die andere regel kunnen we bereiken door de 0 in de childNodes array op te hogen naar 1, een array begint altijd op 0, dus met de volgende code gaan we regel 2 uitlezen.

function leesXML(geladen) {
        if (geladen) {
                _root.tekstVeldje.text = this.firstChild.childNodes[1].firstChild.nodeValue;
        }
}
onzeGegevens = new XML();
onzeGegevens.ignoreWhite = true;
onzeGegevens.onLoad = leesXML;
onzeGegevens.load("nummers.xml");

Maar nu eerst wat uitleg over ons gebruikte action script

Eerst maakte we een nieuwe functie aan met de naam leesXML.
Bij deze functie hoorde de variabel "onzeGegevens" die we ook aan het nieuwe flash object meegaven.
In dit geval dus de new XML();

ignoreWhite
Deze functie is toegevoegd omdat flash 5 en ouder, enters, spaties etc ook als nodes zag, met deze functie sta je de flash player dus toe om wit ruimtes en lege tags te negeren.

onLoad
Dit is een "event handler" die zodra de frame is geladen, de functie uitvoert.

load("nummers.xml");
Dit leest dus onze xml uit.
Je kan hier ook url adressen gebruiken, maar door beveiligings redenen van XML werkt dat niet met "externe domeinen" (dat is ook de reden dat ik mn flash voorbeeldjes in een iframe heb staan).

Tot zover onze functie, dan was er nog een "if" statement maar die behoeft volgens mij weinig uitleg.

Dan de regel met code die onze data in de xml opsplitst.
_root.tekstVakje.text <= dat is het door ons gemaakte tekst veld, en dat moet gevuld worden met de xml data.

this.firstChild.childNodes[0].firstChild.nodeValue;
Om dit uit te leggen ga ik weer even naar de xml toe

firstChild in dit voorbeeld is de <tag></tag>, en alles wat daartussen zit noemen we childNodes.
Je kon ook zien dat childNodes[0] "dit gaat over het getal EEN" weergaf
en dat childNodes[1] "dit gaat over het getal TWEE" weergaf.
De nodeValue aan het einde van onze code haalt de tags weg, zonder "nodeValue" zou
er in de flash "<een>Dit gaat over het getal EEN</een>" komen te staan.

We kunnen dit natuurlijk ook gaan uitbreiden door er nog meer tags bij te verzinnen, bv

<tutorial> is onze firstChild, en die heeft weer 2 childNodes <crew>, en <crew> heeft weer 3 childNodes<roze dingen>.

Om dit uit te lezen in flash moeten we dus een extra childNode toevoegen aan ons action script.
Ook moeten we nog even 2 text velden bij maken om onze data is te laten verschijnen, dus hop, terug naar je texttool en maak even 2 dynamische textvelden bij en geef deze de instancenaam tekstVeldje1 en tekstVeldje2.
Voor onderstaande voorbeeld gebruik ik deze xml

function leesXML(geladen) {
        if (geladen) {
                _root.tekstVeldje.text = this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;
                _root.tekstVeldje1.text = this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
                _root.tekstVeldje2.text = this.firstChild.childNodes[0].childNodes[2].firstChild.nodeValue;
        }
}
onzeGegevens = new XML();
onzeGegevens.ignoreWhite = true;
onzeGegevens.onLoad = leesXML;
onzeGegevens.load("crew.xml");

Nu willen we natuurlijk ook nog de andere crewleden in onze flash kunnen zien.
Ik doe die dingen altijd door van het array nummer een variable te maken, en met een button verhoog ik die variable, dan moet flash een keer "lopen" om die waarde weer te verwerken, en als volgt komt de volgende node in beeld.

Als je mn fla download en opent zal dat met die knoppen etc ook wel duidelijker worden.

Tot zover deze tutorial, bij vragen, doet het forum wonderen :-)

Andere dingen die ik deed met xml en flash

• slideshow
• rss reader

Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek dan mijn website voor een eventuele geupdate tutorial. mvg vinTage