How to Load Data and Use it From XML
http://www.actionscript.org/resources/articles/571/1/How-to-Load-Data-and-Use-it-From-XML/Page1.html
Victor Gaudioso
Victor Gaudioso is a Sr. Application developer for an advertising firm in Hollywood, CA. He specializes in Flash / ActionScirpt but also programs in other languages including but not limited to C#, XAML, WPF and ASP .NET. He has engineered Flash sites for the major entertainment studios including Disney, Universal, TouchStone, Mattel and Warner Bros. among others. Victor is known as dvlnblk in the http://actionscript.org forums and has recently been appointed a site moderator. AIM: dvlnblk2004 Yahoo: victoratdeadline By Victor Gaudioso
Published on March 12, 2007
This is a very simple tutorial on how to create an XML document and pull the data from that document into Flash and make use of it.
Time: 10 minutes
Skill Level: beginner
Time: 10 minutes
Skill Level: beginner
Create the XML document
I see this question over and over again in the forums so I decided to create a very quick and simple tutorial that shows how to load data in from an xml page and use it in Flash.
First I create a simple xml document called images.xml. Here is the code:
[as]
<images>
<image image="img/img1.jpg" caption="Victor Gaudioso - Flash Programmer"/>
</images>
[/as]
We are only going to use one simple xml node to keep it simple. Save this file in a directory called xml.
Create the FLA
Create an FLA and call it Main. Put a dyncamic text field on the stage with an instance name of myText, be sure to embed the font, uppercase, lowercase and punctuation. Then draw a rectangle and hit F8 to make it a movieClip and give it an instance name of myImageHolder.
Then create an AS layer and paste in this code:
[as]
// create the XML variable
var xml:XML = new XML();
// you must ignore whitespace
xml.ignoreWhite = true;
// the function that is called when the xml is loaded
xml.onLoad = function() {
// tells you the number of child nodes
var nodes = this.firstChild.childNodes;
// tells you how many items you have
numOfItems = nodes.length;
// attach icons
for (var i = 0; i<numOfItems; i++) {
// attach image to the myImageHolder MovieClip
myImageHolder.loadMovie(nodes[i].attributes.image);
// set the text
myText.text = nodes[i].attributes.caption;
}
};
// load the xml
xml.load("xml/images.xml");
[/as]
If you run this you will see that the content is now populated from the xml page.
Simple as that.
Then create an AS layer and paste in this code:
[as]
// create the XML variable
var xml:XML = new XML();
// you must ignore whitespace
xml.ignoreWhite = true;
// the function that is called when the xml is loaded
xml.onLoad = function() {
// tells you the number of child nodes
var nodes = this.firstChild.childNodes;
// tells you how many items you have
numOfItems = nodes.length;
// attach icons
for (var i = 0; i<numOfItems; i++) {
// attach image to the myImageHolder MovieClip
myImageHolder.loadMovie(nodes[i].attributes.image);
// set the text
myText.text = nodes[i].attributes.caption;
}
};
// load the xml
xml.load("xml/images.xml");
[/as]
If you run this you will see that the content is now populated from the xml page.
Simple as that.