XML Importeren
We gebruiken een XML-file om de Flashmovie van data te voorzien. Je zou deze
XML ook kunnen genereren d.m.v. een PHP pagina, die de data uit een SQL database
haalt.
De XML-file bevat de data values en de labels voor een
Flash-component.
Methode om XML-file te lezen in flash
In de lessen van de lente hebben we een xml file omgezet naar een boom structuur. Flash bekijkt een xml file op dezelfde manier. Hij maakt een stamboom van het xml bestand. De eerste xml-tag is de basis. Een tag wordt in flash een node genoemd. Deze xmltag heeft kinderen, childs. Je kan de childnodes van de eerste xml-tag op vragen. Elk kind heeft misschien ook weer kinderen. En zo kan je de childnodes van een childnode opvragen. Voorbeeld:
Basis.childNodes[1].childNodes[0].value
Door een nummer toe te voegen aan de childNodes weet je of de eerste of tweede of derde tag uitgelezen moet worden. Je kan de value van een node op vragen of het attribute. Met value krijg je de waarde die tussen de openings- en sluitentag staat en met atribute["naam"] vraag je de waarde van een specifieke tag.
Flash maakt een object aan waar alle xml in wordt bewaard. Dit object gebruik je als Basis. Hiervandaan kan de dan de childNodes uitlezen.
Maak de XML-file
Gebruik de XML-file van de vorige les.
Verbinding maken met de XML-file
Nu de Flash movie is ingericht word het tijd om met de XML-file te
communiceren.
In het script op de actions-laag type je het volgende:
oXML = new XML();
oXML.ignoreWhite = true;
oXML.onLoad = plaatsData;
oXML.load("song.xml");
vervang de bestandsnaam chart.xml met de naam van jouw XML-file. LoadChartData is de naam van de functie die zal worden aangeroepen wanneer de XML-data geladen is.
Data laden in een tekstveld
Om te testen of de data geladen is, moet we de functie plaatsdata gaan maken. Met deze functie plaatsen we alle data in een tekstveld. Dit tekstveld maken we wel eerst geschikt voor HTML, door in het propertywindow <> aan te klikken.
function plaatsData(){
for(i=0; i<oXML.childNodes.length; i++){
txtSong.htmlText += oXML.childNodes[0].childNodes[i].firstChild + "<br>";
}
}
Het tekstveld heet txtSong. Met += symbool zeg je dat alle data 1 voor 1 achter elkaar moet worden geplakt. De '<br>' is om met behulp van html enters in de code te krijgen zodat wel alles netjes onder elkaar komt. Waneeer je ook nog een scrollbar aan het veld toevoegd kan het eigenlijk niet meer mis.
Data laden in movieclip met tekstvelden
Als je meer aandacht aan opmaak en dergelijke wil besteden kan je een movieclip maken met voor elke waarde een tekstveld. Zodat je een liedje in een opgemaakte omgeving kan plaatsen.
De teksvelden hoeft dan niet meer perse html aan te kunnen. De opmaak en verdeling bepaal je nu immers zelf. Voor het onderste tekstveld heb ik een textArea component gebruikt. Als je deze een instancename geeft dan werkt dit precies hetzelfde.
function plaatsData() {
mcSong.txtTitel.text = oXML.childNodes[0].childNodes[0].firstChild;
mcSong.txtArtiest.text = oXML.childNodes[0].childNodes[1].firstChild;
mcSong.txtAlbum.text = oXML.childNodes[0].childNodes[2].firstChild;
mcSong.txtRefrein.text = oXML.childNodes[0].childNodes[3].firstChild;
mcSong.txtSong.text = oXML.childNodes[0].childNodes[4].firstChild;
}
Data laden in een gedupliceerde movieclip
De plaatsData functie komt in de functions-laag. Deze functie zal de XML-data in de component laden.
function plaatsData(){
aSong = new Array();
for(i=0; i<oXML.childNodes.length; i++){
duplicateMovieClip(mcSong,"mcSong"+i,i);
_root["mcSong"+i]._y = mcSong._y + 220*i;
_root["mcSong"+i].txtTitel.text = oXML.childNodes[i].childNodes[0].firstChild
_root["mcSong"+i].txtArtiest.text = oXML.childNodes[i].childNodes[1].firstChil
_root["mcSong"+i].txtAlbum.text = oXML.childNodes[i].childNodes[2].firstChild;
_root["mcSong"+i].txtRefrein.text = oXML.childNodes[i].childNodes[3].firstChild;
_root["mcSong"+i].txtSong.text = oXML.childNodes[i].childNodes[4].firstChild;
}
}
Test de movie en je zal zien dat de movieclips gevuld worden met de values uit de XML-file.
Links
Als je hier verder mee wil zijn er allerlei goede tutorials op internet te vinden die zeker het proberen waard zijn:
XML combineren met Menucomponent: Adobe liveDocs
XML combinatie met XMLconnection component: Adobe LiveDocs
Flash, PHP en XML: Adobe DevNet
In plaats van XML is het goed mogelijk nu te kiezen voor andere tools als webservices met flash media server en flex.
http://www.adobe.com/devnet/flash/articles/ria_dataservices.html