In this post, I’ll cover the transfer of data stored in an external XML file into a Flash Actionscript 3 application. In Actionscript 3, handling XML files has been vastly improved – and simplified – with two new classes: the XML and the XMLList classes.
In the example XML file below, the root element gallery contains two child nodes: setup and thumbnails; the setup section node contains text values only (4, 3, 115…) while the thumbnails section holds both node values (image titles) and attributes (url, width, height) which are named data.
<?xml version="1.0" encoding="utf-8"?> <gallery> <!-- set up data for portfolio grid --> <setup> <rows>4</rows> <columns>3</columns> <width>115</width> <height>115</height> <spacing>8</spacing> <lineColor>0xCCCCCC</lineColor> </setup> <!-- list of thumbnails - each with url, width, height & title --> <thumbnails> <thumb url='thumbs/facade-with-green.jpg' width='115' height='77'>Facade with green</thumb> <thumb url='thumbs/fenced-driveway.jpg' width='115' height='77'>Driveway</thumb> <thumb url='thumbs/gray-garage.jpg' width='115' height='77'>Gray Garage</thumb> <thumb url='thumbs/facade-with-awning.jpg' width='115' height='77'>2930</thumb> <thumb url='thumbs/entrance-with-sculpture.jpg' width='77' height='115'>Entrance with sculpture</thumb> <thumb url='thumbs/entrance-with-radial-gate.jpg' width='77' height='115'>Entrance with radial gate</thumb> </thumbnails> </gallery> |
The code below processes the setup section of loader.xml. The first thing we have to do is load the external xml file and notify Flash when the XML has finished loading. This is accomplished with the URLLoader class, the load method and an event listener. When the XML file loading is completed the onXMLLoaded function is called; this where the XML data is to be parsed.
If we examine the data sent to the function (e.target.data), we’ll see that the variable contains the entire XML file including the declaration. Next a new instance of the XML class is used to get the parent node gallery and its child nodes setup and thumbnails each with their subchildren. To traverse further into the XML, the XMLList class is used. In the code below, a new variable grid is created that contains only the setup node and its subchildren. Finally, the data from each subchild is obtained e.g. the number of rows.
// new instance of URLLoader class var xl:URLLoader = new URLLoader(); // add event listener to instance to issue event when finished loading xml xl.addEventListener( Event.COMPLETE, onXMLLoaded ); // load xml file at specified path xl.load( new URLRequest( 'xml/loader.xml' )); // function called when xml file loadin is completed function onXMLLoaded ( e:Event ) : void { trace( e.target.data ); // displays entire xml file including declaration // new instance of xml object var gallery = new XML( e.target.data ); trace( gallery ); // displays all nodes including root element // use XMLList object to filter child nodes of setup var grid:XMLList = gallery.setup; trace( grid ); // displays setup node & subchildren // new var to store data from rows node var rows:int = grid.rows; var columns:int = grid.columns; var width:int = grid.width; var height:int = grid.height; var lineColor:uint = grid.lineColor; trace( rows ); // displays 4 } |
Now, we’ll process the thumbnails node and save the data in an associative array. After processing the setup node, as we did above, a new XMLList instance is created to traverse the gallery.thumbnails subchildren. To do this, a new function length() is introduced which gets the number of child nodes – in this case, thumbList.thumb.length(). We can then loop through the thumbList.thumb list to get data from each subchild node. Here, the code thumbList.thumb[n].@url yields the url specified in nth subchild node (like arrays, the index of the first child is always 0). For each subchild, the url, width, height and title are read from the XML and transferred to the array thumbArray.
If you have not read my previous post on adding data into an associative array, please click here.
// declare new array to store thumbnail data var thumbArray:Array = new Array(); // new instance of URLLoader class var xl:URLLoader = new URLLoader(); // add event listener to instance to issue event when finished loading xml xl.addEventListener( Event.COMPLETE, onXMLLoaded ); // load xml file at specified path xl.load( new URLRequest( 'xml/loader.xml' )); // function called when xml file loadin is completed function onXMLLoaded ( e:Event ) : void { // new instance of xml object var gallery = new XML( e.target.data ); // use XMLList object to filter child nodes of setup var grid:XMLList = gallery.setup; // new var to store data from rows node var rows:int = grid.rows; var columns:int = grid.columns; var width:int = grid.width; var height:int = grid.height; var lineColor:uint = grid.lineColor; /* new code to add xml data from thumbnails node into an associative array */ // use XMLList object to filter child nodes of thumbnails var thumbList:XMLList = gallery.thumbnails; // transfer data from each thumb node into associative array for ( var i:uint=0; i<thumbList.thumb.length(); i++ ) { thumbArray.push( { url:thumbList.thumb[i].@url, width:thumbList.thumb[i].@width, height:thumbList.thumb[i].@height, title:thumbList.thumb[i] } ); } } |
If you found this post helpful, please consider a Retweet, thanks!
Pretty lucent example.
You might check out “for-each” as a sweet alternative to “for”
Thanks
I’ll do that and add to post. Thanks for the suggestion.
Hi Charles, in order to get the best possible performance in actionscript and most other languages i have been coding in you should avoid using a for each loop since this is the most expencive loop performance wise
I prefer the for.. loop myself because I can get several different xml values for each loop by getting the indexed values of both attributes and node.