Saturday, September 11, 2010

Working with XML data using AS3: Part 2

In this tutorial we will load our XML file into Flash using Actionscript 3.

In the last tutorial we've created a simple XML file, ready to use with AS3. Here is my file, called catalog.xml. It is located in the same folder as the Flash file I'm working in:

<catalog>
  <product>
    <name>Chair</name>
    <description>Something to sit on</description>
    <price>$50</price>
  </product>
  <product>
    <name>Sofa</name>
    <description>Something soft to sit on</description>
    <price>$100</price>
  </product>
  <product>
    <name>Table</name>
    <description>Something to put stuff on</description>
    <price>$70</price>
  </product>
</catalog>

Now I'm going to write an AS3 code that can load this data into Flash.

I will need an URLLoader class object to load my catalog file and an XML class object to store my data in. Why can't I simply load the data straight from the file without using any URLLoaders? Because the file loads by pieces, and we only want to display the data once it is fully loaded. That is why we need an URLLoader.

var _loader:URLLoader = new URLLoader(); 
var _data:XML = new XML(); 

We can tell whether the data is fully loaded using an Event.COMPLETE listener. We will link it to a function that will display the data, I called it readXML. We need to tell our loader the path to the XML file. It can be absolute, or relative. I have it as relative (simply "catalog.xml"), because I have both .swf and .xml files in one folder.

_loader.addEventListener(Event.COMPLETE, readXML); 
_loader.load(new URLRequest("catalog.xml")); 

Now to display our XML data, we need to create the readXML function (the one, that was linked to in the Listener).

I need to give my function a parameter identifier, so that I can access the _loader object through an existing Listener using eventname.target.data. I called it simply "evt", and applied an existing _data XML object the data value of our loader. Then I simply trace the results.

function readXML(evt:Event):void { 
_data = new XML(evt.target.data);
trace("XML File:");
trace("-----------------");
trace(_data); 
}

So the whole code would be:

var _loader:URLLoader = new URLLoader(); 
var _data:XML = new XML(); 
  
_loader.addEventListener(Event.COMPLETE, readXML); 
_loader.load(new URLRequest("catalog.xml")); 
  
function readXML(evt:Event):void { 
_data = new XML(evt.target.data);
trace("XML File:");
trace("-----------------");
trace(_data); 
}

And the output window:

XML File:
-----------------
<catalog>
  <product>
    <name>Chair</name>
    <description>Something to sit on</description>
    <price>$50</price>
  </product>
  <product>
    <name>Sofa</name>
    <description>Something soft to sit on</description>
    <price>$100</price>
  </product>
  <product>
    <name>Table</name>
    <description>Something to put stuff on</description>
    <price>$70</price>
  </product>
</catalog>

However, we don't want to show the whole XML file with all the tags and nods to the user. We need to access its attributes and values, and then do actions with them. You will find out how in the next tutorial.

Thanks for reading!

Related:

Working with XML data using AS3: Part 1
Working with XML data using AS3: Part 3
Working with XML data using AS3: Part 4
Working with XML data using AS3: Part 5
Working with XML data using AS3: Part 6
Working with XML data using AS3: Part 7
Working with XML data using AS3: Part 8
Working with XML data using AS3: Part 9
Working with XML data using AS3: Part 10

1 comment:

klucik.ernest@gmail.com said...

Hi,

i wan to ask. I create catalog.xml in same folder as my *.fla file...insert your AS3 code, but compiler wrote error:Warning: unable to load SWC XML

do you know, where is problem?

Post a Comment