One of the biggest improvements AS3 has over AS2 is the way xml is now handled. The old node syntax has been replaced with the more intuitive ECMAScript (E4X). This short tutorial introduces you to key concepts of working with xml in AS3.

Step 1: Create the xml file.

<?xml version="1.0" encoding="utf-8"?>
<data>
	<news date="07-04-2009">
		<title>
			Here is title of our message.
		</title>	
		<message>
			Here is our message. 
		</message>	
	</news>
	<news date="06-04-2009">
		<title>
			Here is another title of our message.
		</title>	
		<message>
			Here is our another message. 
		</message>	
	</news>
</data>

Copy the code into a text editor (we recommend notepad plus) and save as news.xml.

At the top of the xml file we have the header which contains the xml version and encoding information, under the header we have our data element (the root element). Inside we have the news elements, each one containing an attribute called date and two elements called title and message. If you have ever worked with xml before, none of this will be news to you.

Step 2: Loading the xml

Create a new fla named xmlLoader.fla and a new class named xmlLoad.as with the code below. Link the two files by using the document class in xmlLoader.fla. This is found in Properties > Publish, type “xmlLoad” in the class field.

package {
        
    // import needed classes  
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.display.Sprite;

    // we extend sprite instead of movieclip as no timeline is needed    
	public class xmlLoad extends Sprite {
 
        // our xml object
		private var xml:XML;  
 
		public function xmlLoad(){
			readXML();
		}
      
		private function readXML():void {
           // load the xml file using the URLLoader class
			var loader:URLLoader = new URLLoader(new URLRequest("news.xml"))
           // call our xmlLoaded function once the xml has loaded 
			loader.addEventListener(Event.COMPLETE, xmlLoaded);
		}

		private function xmlLoaded(e:Event):void {
           // assign loaded xml structure to our xml object
			xml = new XML(e.target.data);
            xml.ignoreWhitespace=true;

        }
       }
}

To read a xml file in actionscript 3 we need a URLLoader, URLRequest, XML object and a event listener that will listen for the complete event.

We will focus on two function’s, readXML and xmlLoaded. In the first function we create the loader variable which is assigned to URLLoader which we pass the name of our xml file (in this case it`s news.xml), then we assign the Complete event listener with the xmlLoaded function as a second parameter. So when the loading of xml is completed the xmlLoaded function will be called. In the xmlLoaded function the data from the loader (e.target.data) is assigned to our xml object. After this assignment we can break the xml data down further.

Step 3: Extracting data

Here are some examples showing how to read elements and attributes from our xml file. These go inside the xmlLoaded function (line 30).

trace(xml.news[0].title);
// output = Here is title of our message.

Returns the first title element by simply using the names of the elements xml.news.title (our xml object is now the root element) The number [0], defines which news element we want to target.

trace(xml.news[1].@date);</p>
// output = 06-04-2009

Returns the second date attribute using the @ symbol followed by the name of the attribute

var i:Number;
for (i=0; i < xml.news.length(); i++) {
  trace(xml.news[i].message);
}
/* output = Here is our message.
            Here is our another message */

Loops through all nodes using a for loop and returns each message element.

Conclusion

Elements are targeted using the same names and hierarchy as in the xml file. If you want to read an element use ‘.’ plus the name, if you want to read an attribute of an element use ‘.@’ plus the name.

Download source files