Parsing XML using AS3

I had a job interview the other day for a programming position with a local marketing company. They asked me to parse an XML file, and use the data to display different objects on the stage. I decided it would make for a nice and quick tutorial. AS3 has some very nice tools included in the language that make it very easy to use XML data in your code. E4X is a standard that AS3 has implemented, and it basically allows you to use XML data the same as you would an array. In this tutorial I'll show you…

• How to load data from an XML file
• Reference data using array functions
• Loop through XML data
• Briefly use Color Transform & open a webpage or URLrequest

First, download these files and take a second to look at what's in them. XML File & Flash Source

The Flash source file is very simple. It contains a symbol called main_button that holds a “label” text line and a “backgroundcolor” symbol. The XML file shows 3 buttons, each with unique label names, background colors, clicked background colors, and a URL. The goal is to have AS3 parse the XML file, and insert that data into different buttons on the stage. We will use a For() loop to determine the amount of buttons in the XML file, and assign each their respective properties.

I like to set a Document Class for each project. You can find this under the Properties window of your Stage (where you change background colors and stage size). To begin with this Class file (I named mine Engine.as), you will need to include these lines/files.

import flash.display.MovieClip;//Work with Movieclips 
import flash.events.Event;//Pass Event triggers 
import flash.events.MouseEvent;//Use Click functions 
import flash.net.URLRequest;//Download and/or open URLs 
import flash.net.navigateToURL;//Open browser 
import flash.net.URLLoader;//Load data from the XML file 
import flash.geom.ColorTransform;//Make things spicy

Next we will declare our variables to work with the XML file we want to load.

private var myXML:XML = new XML();
private var xmlloader:URLLoader = new URLLoader();

Now to load the actual XML file, we need to tell AS3 where to find it. The code below adds an event listener so we know when the file is completely loaded, and a 2nd line that loads the actual XML file.

xmlloader.addEventListener(Event.COMPLETE, parsexml);//Wait for the xml file to complete load then run the parsexml function
xmlloader.load(new URLRequest("http://www.sonsoftco.com/tutorials/AS3-XML-Parsing/as3-xml-parsing.xml"));
//To load a local xml file simply use ("/filename.xml") assuming the xml file is in the same folder as your .fla

At this point, our Flash project will load the XML file then try to run the function parsexml()…so lets create that function. The first thing we want this function to do is assign the XML data to our XML variable called myXML. As I mentioned before, the XML data can be accessed just like values in an array. The XML file we have sets an “array” of information called &. This is our parent node, and contains all of our child button nodes that we want to create in the project. Therefore, we can access each piece of information by using array type syntax. In XML the command would relate to these items like this: &.&.&
So in ActionScript we will connect with each piece of information like this: myXML.button.label[0]
This would give us the value of the 1st label instance. If you wanted the 2nd label name you would simply change the index of the array to 1, instead of 0.

It is literally that simple to parse XML using AS3. So to access each different node, just change where you want the array index to be as follows.
myXML.button[0] // myXML.button.id[0] // myXML.button.url[0]…and so on. Feel free to play around with it using the trace() function.

Back to parsexml(). We will assign our variable myXML to = the e.target.data from our loader event. Then we will need to create our for() loop to create each button. Last, but certainly not least, we will need to set each button to it's respective XML data inside the for(). Take a look at the complete function below.

private function parsexml(e:Event)
{
     myXML = new XML(e.target.data);//Take the loaded file and fill the myXML variable with the XML data
     var buttony:Number = 0;//Store the y value so we dont overlap buttons

     //For() Loop to create each button dynamically from the XML data...add more buttons, get more loops
     for(var i:Number = 0; i &< myXML.button.length(); i++)
     {
          button = new main_button();//the button variable is instanced to a fresh main_button symbol
          button.buttonMode = true;//Turn this on if you want a movieclip to act as a traditional button
          button.mouseChildren = false;//Keeps the children objects in main_button from being clicked, like label & background

          button.label.text = myXML.button.label[i];//sets the main_button.label text field to the XML data
          //Set default color
          color.color = myXML.button.backgroundcolor[i];//color variable is created with new ColorTransform()
          button.backgroundcolor.transform.colorTransform = color;//sets the main_button.backgroundcolor symbol to a new color

          button.addEventListener(MouseEvent.CLICK, clicked);//when clicked, the button will change color & open a URL

          //Next 2 lines are storing the values for when the buttons are clicked. You can name them button.anything
          button.myurl = myXML.button.url[i];
          button.clickedcolor = myXML.button.clickedbackgroundcolor[i];

          button.y += buttony;
          addChild(button);
          buttony += 75;//Move each new button down
     }
}

That pretty much covers working with XML in ActionScript. Just to finish up this project, here is the clicked() function code.

private function clicked(me:MouseEvent)
{
     color.color = me.target.clickedcolor;//Accesses the value stored in our arbitrary button.clickedcolor variable
     me.target.backgroundcolor.transform.colorTransform = color;//Changes the color of the clicked button

     var request:URLRequest = new URLRequest(me.target.myurl);//Accesses the stored URL just like the color above
     navigateToURL(request);//Opens the stored URL
}

To sum things up, you can access XML data just like you would any array data you've worked with before. You can use array functions like array.length(), and tons of other functions to manipulate or convert the XML data. Below is a full project zip & each individual file.

AS3 Parsing of XML Zipfile, Flash Source File, Engine.as Document Class File & XML File