flash en xml <XML> lezen vanuit flash
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
<tag> |
|
|
<een>Dit gaat over het getal EEN</een> |
|
<twee>Dit gaat over het getal TWEE</twee> |
<tag> |
|
|
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> |
|
|
|
|
|
<crew> |
|
|
|
|
|
<naam> |
een naam hier |
</naam> |
|
|
<status> |
een status hier |
</status> |
|
|
<bouwjaar> |
het geboorte jaar hier |
</bouwjaar> |
|
</crew> |
|
|
|
|
<crew> |
|
|
|
|
|
<naam> |
een naam hier |
</naam> |
|
|
<status> |
een status hier |
</status> |
|
|
<bouwjaar> |
het geboortejaar hier |
</bouwjaar> |
|
</crew> |
|
|
|
</tutorial> |
|
|
|
|
|
<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.
note |
als er in de xml feed ook hyperlinks etc voorkomen dan zal
flash de complete string parsen, om deze tekst naar behoren weer te geven
kan men beter de _root.***.text veranderen naar _root.***.htmlText (met
dank aan stuifie voor het attenderen hierop) |
Tot zover deze tutorial, bij vragen, doet het forum wonderen :-)
Andere dingen die ik deed met xml en flash
Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek
dan mijn website voor een
eventuele geupdate tutorial.
mvg vinTage
|