Saturday, July 25, 2009

Loading XML data into Flash through AS 3.0

Hi, this is my first tutorial and so I will start with a very basic tutorial on how to load xml data into flash using action script 3.0. with E4X, it is very easy to deal with xml data if we compare to the previous version.

So without wasting time, lets get started. I am using an xml file which I have created for a dummy school and I have entered data for 10 students.

As we are only going to load the xml data in to the flash environment, I am not explaining too much about the xml structure and the details cause I want to keep this one real quick and simple.

var xmlLoader:URLLoader = new URLLoader();
var urlRequest:URLRequest = new URLRequest("schoolXML.xml");

Here we declare two variables. The first one is xmlLoader which is an “URLLoader”. And the second is urlRequest which is where we will store the url for the xml file. Var is a keyword used to tell the compiler that we are declaring a variable. Then we write the name of the variable which in this case is xmlLoader and urlRequest. URLLoader and URLRequest are classes in flash with specific function. URLLoader loads data from the url, and URLRequest is used to pass a url path.

The next part is where we define an event listener. This is where flash understands that the data in the variable is loaded and it acts as instructed when the event listener is triggered. In this case, we are instructing the event listener to run a function which will do a certain set if instruction.

xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedFunc);

But the event will not be triggered until the load is complete. And loading will not start until we give the command to load the data. So we instruct the complier to load the data.

xmlLoader.load(urlRequest);

before going to the function we do write a piece of code to declare a variable where we would like to keep all the xml data which will be loaded and also we set one property of the xml variable called ignoreWhitespace to true. This is active by default. But it is a good habbit to define that mannualy so that we are sure of the same. This is done because when we make the XML file, we tend to format them using a lot of tabs and spaces. But those tabs and spaces are just for visual reference and they are not important from the data point of view. So when we set the ignoreWhitespace property to true, all those spaces are taken care of automatically.

var schoolXML:XML = new XML();
schoolXML.ignoreWhitespace = true;

and then finally we write the function. The name of the function is already declared when we were defining the event listener.

function xmlLoadedFunc (evt:Event):void{
schoolXML = XML(xmlLoader.data);
trace (schoolXML);
}

In this function we define that the variable schoolXML will have XML kind of data from will come from the variable xmlLoader’s data property. And then finally we trace out schoolXML to see that all the xml data is beign traced out in the output window.

Get the xml file here

3 comments:

  1. I'm getting a

    Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: file:///E|/Tools%20and%20resources/Flash%20tutorials/xml%20loading/as3/schoolXML.xml
    at xmldata_fla::MainTimeline/frame1()

    when I compile it, any idea what's wrong?

    ReplyDelete
  2. my bad, my xml file name was mispelled, it's working fine now, how do I output this in a text box?

    ReplyDelete
  3. Well after looking at the error even i though so. Any ways its good that the problem was solved.

    ReplyDelete