Handling XML within Flash

Handling XML within Flash


This tutorial will show you how to handle XML within flash, this can be used for handling output from another program or even a flash content management system.

For flash, XML can be a vital tool and is extremely useful, especially for making such things as a flash Content Management System (CMS) and loading in dynamic data from other systems such as a php website or even output from a camera.

So, in this tutorial, i will teach you how to make a news section and hopefully teach you the basics of handling XML data within flash:

Firstly you need to set up the XML file, open notepad or a similar text editor. Inside here you will write the xml to be read by flash,

here is how the xml file should be layed out:
(for an in-depth explanation of how xml works, go to http://www.w3schools.com/xml/)
<?xml version="1.0" encoding="ISO-8859-1"?>
<news>
<article>
<title>News Title 1</title>
<date>05/09/2006</date>
<content>News content 1 here</content>
</article>
<article>
<title>News Title 2</title>
<date>06/09/2006</date>
<content>News content 2 here</content>
</article>
</news>

all the parts between "" are the parts that can be edited. To add a new news item just copy everything between and and paste it above then change the parts between " and ". In my CMS tutorial later, this will be done much more dynamically.


Now save this file as 'news.xml'. If you need to edit this file, just reopen the xml file in notepad and change it.

How to save the XML File
http://www.tutorialhelpcentre.com/images/tutorialimages/fx_1.jpg
Now the flash part:

Open a new document, press "T" to bring up the text tool, drag a text box onto the document (make it as large as you want), at the bottom of the document, click the "Properties" tab. On the properties tab change where it says "Static text" to "Dynamic text", make sure "multiline" is selected, not "single line". Give it an instance name of "newstext". On the properties panel, press "embed" and select everything between "Uppercase" and "Punctuation" then press "OK".

How to create the dynamic textbox
http://www.tutorialhelpcentre.com/images/tutorialimages/fx_2.jpg
Now the code (fully annotated to help you), click on the current frame (the one with the text box in), and then open the actions panel(F9).

Insert the following code:
/* Loading XML into flash tutorial by Matt Davenport - www.tutorialhelpcentre.com */


stop(); //stop the movie from playing

newstext.html = true; //set up the text box to allow HTML to be input
newstext.htmlText = " Loading News..."; //display "Loading News..." until news has loaded

function loadXML(loaded) {
/* the next block of code is splitting the xml code up into variables, ready to be put into a text box. it creates a loop which loops

through all the xml file and finds as many news items as have been entered automatically*/
if (loaded) {
xmlNode = this.firstChild;
newstitle = [];
newsdate = [];
newscontent = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
newstitle[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
newsdate[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
newscontent[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
}
firstNews();
} else {
trace("file not loaded");
}
}

//loading the XML Document
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("news.xml"); //this is your xml file
xmlstring = " "; /*inserting 2 blank spaces at the top, delete this if text isn't appearing where you want it*/
function firstNews() {
for(p=0; p<total; p++){//loop through variables and turn into string
xmlstring += "<b>"+newstitle[p]+"</b> - </i>"+newsdate[p]+"</i><br>"+newscontent[p]+"<br><br>"; //convert to string
}
newstext.htmlText = " "+xmlstring;// display the string in the text box
}



Submit Comment

Comments

Unfortunately no comments have been left on this tutorial. Be the first using the form above.