Home Contact RSS

XML and Flash Actionscript made Easy | Parse XML to Object | Tutorial

April 11, 2008 at 10:31 pm · 3,274 views · Filed under tutorial

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5 out of 5)
Loading ... Loading ...

XML and flash is something that always seemed to be more complicated than it needed to be. Then I had an idea to parse the xml nodes into actionscript as objects, that would make working with xml tons easier for me, I could just parse it once and then forget about the xml, I could refer to something with the familiar dot syntax rather than worry about firstChild and nextChild and so forth…

And then I found someone who’d already done that with XML2Object.as, here it is:

XML@Object.as Class

Actionscript Class:

  1. //////////////////
  2. // - Derived from code written by Alessandro Crugnola - http://www.sephiroth.it/file_detail.php?id=129#
  3. // - Refactored and documented by Phil Powell - http://www.sillydomainname.com
  4. // - 25 July 2006 - Added helper method to sanitize Windows line breaks.
  5. //////////////////
  6. // Convert an XML object to an object with nested properties.
  7. //
  8. // Example usage:
  9. //
  10. //   import net.produxion.util.XML2Object;
  11. //   var contentObj:Object;
  12. //   var xml:XML = new XML();
  13. //   var xmlLoaded = function( success:Boolean )
  14. //   {
  15. //    if( success )
  16. //    {
  17. //     contentObj = XML2Object.deserialize( this );
  18. //     this['timeline'].play();
  19. //    }
  20. //   }
  21. //
  22. //   xml.ignoreWhite = true;
  23. //   xml['timeline'] = this;
  24. //   xml.onLoad = xmlLoaded;
  25. //   xml.load( 'some.xml' );
  26. //
  27. /////////////////
  28. // What do you get back?
  29. //
  30. //   <content created="22-May-2006">
  31. //       <title>My Title</title>
  32. //       <links>
  33. //           <heading>Here be links!</heading>
  34. //           <link>http://somewhere.com</link>
  35. //           <link>http://somewhere-else.com</link>
  36. //       </links>
  37. //   </content>
  38. //
  39. //   Becomes:
  40. //
  41. //   contentObj.content.title.data => "My Title"
  42. //   contentObj.content.links.title.data => "Here be links!"
  43. //   contentObj.content.links.link => [Array]
  44. //   contentObj.content.links.link[0].data => "http://somewhere.com"
  45. //   contentObj.content.attributes.created => "22-May-2006"
  46. /////////////////
  47. class XML2Object {private var _result:Object;
  48. private var _xml:XML;
  49. private var _path:Object;
  50. private static var xml2object:XML2Object;public function XML2Object()
  51. {
  52. this._result = new Object();
  53. }
  54.  
  55. public static function deserialize( xml:XML ):Object
  56. {
  57. xml2object = new XML2Object();
  58. xml2object.xml = xml;
  59. return xml2object.nodesToProperties();
  60. }
  61.  
  62. public function get xml():XML
  63. {
  64. return _xml;
  65. }
  66.  
  67. public function set xml( xml:XML ):Void
  68. {
  69. this._xml = xml;
  70. }
  71.  
  72. private function nodesToProperties( parent:XMLNode, path:Object, name:String, position:Number ):Object
  73. {
  74. var nodes:Array;
  75. var node:XMLNode;
  76.  
  77. path == undefined ? path = this._result : path = path[name];
  78. if( parent == undefined) parent = XMLNode( this._xml );
  79.  
  80. if( parent.hasChildNodes() )
  81. {
  82. nodes = parent.childNodes;
  83. if (position != undefined) path = path[position];
  84.  
  85. while( nodes.length &gt; 0 )
  86. {
  87. node = XMLNode( nodes.shift() );
  88.  
  89. if ( node.nodeName != undefined )
  90. {
  91. var obj = new Object();
  92. obj.attributes = node.attributes;
  93. obj.data = sanitizeLineBreaks( node.firstChild.nodeValue );
  94.  
  95. if( path[node.nodeName] != undefined )
  96. {
  97.  
  98. if( path[node.nodeName].__proto__ == Array.prototype )
  99. {
  100. path[node.nodeName].push( obj );
  101. }
  102. else
  103. {
  104. var copyObj = path[node.nodeName];
  105. delete path[node.nodeName];
  106. path[node.nodeName] = new Array();
  107. path[node.nodeName].push( copyObj );
  108. path[node.nodeName].push( obj );
  109. }
  110. position = path[node.nodeName].length - 1;
  111. }
  112. else
  113. {
  114. path[node.nodeName] = obj;
  115. position = undefined;
  116. }
  117. name = node.nodeName;
  118. }
  119.  
  120. if( node.hasChildNodes() )
  121. {
  122. this.nodesToProperties( node, path, name, position );
  123. }
  124. }
  125.  
  126. }
  127. return this._result;
  128. }
  129.  
  130. private function sanitizeLineBreaks( raw:String )
  131. {
  132. if( raw.indexOf( "\r\n" ) &gt; -1 )
  133. {
  134. return raw.split( "\r\n" ).join( "\n" );
  135. }
  136. return raw;
  137. }
  138. }

Example:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Source:

Here is my example file. But since you cant really see Objects in the code on the stage, I’ve included a recursive trace function to loop through the object and print the data.

  1. import XML2Object;
  2.  
  3. var xmlObject:Object;
  4. var xml:XML = new XML();
  5.  
  6. var xmlLoaded = function( success:Boolean ){
  7. if( success ) {
  8. xmlObject = XML2Object.deserialize( this );
  9. this['timeline'].play();
  10. recurseTrace(xmlObject, " ");
  11. myTrace("\n\n")
  12. myTrace("xmlObject.catagories.catagory[10].name.data = "+xmlObject.catagories.catagory[10].name.data);
  13. }
  14. }
  15.  
  16. xml.ignoreWhite = true;
  17. xml.onLoad = xmlLoaded;
  18. xml.load( 'sampleXML.xml' );
  19.  
  20. function recurseTrace(info:Object, indent:String) {
  21. for (var i in info) {
  22. if (info[i] == null){}
  23. else if (typeof info[i] == "object") {
  24. myTrace(indent + i + " -");
  25. recurseTrace(info[i], indent);
  26. }
  27. else {
  28. myTrace(indent + i + " = " + info[i] +", ");
  29. }
  30. }
  31. }
  32.  
  33. function myTrace(myLine:String){
  34. feedback.text += "|"+myLine;
  35. trace(myLine);
  36. }

And here’s my sample xml file: (it’s the same one I use in my Dynamic Flash Scrolling Link List files)

  1. <catagories>
  2. <catagory>
  3. <name>3D</name>
  4. <url>http://blog.circlecube.com/tag/3d/</url>
  5. </catagory>
  6. <catagory>
  7. <name>abstract</name>
  8. <url>http://blog.circlecube.com/tag/abstract/</url>
  9. </catagory>
  10. <catagory>
  11. <name>actionscript</name>
  12. <url>http://blog.circlecube.com/tag/actionscript/</url>
  13. </catagory>
  14. <catagory>
  15. <name>animation</name>
  16. <url>http://blog.circlecube.com/tag/animation/</url>
  17. </catagory>
  18. <catagory>
  19. <name>blog</name>
  20. <url>http://blog.circlecube.com/tag/blog/</url>
  21. </catagory>
  22. <catagory>
  23. <name>book</name>
  24. <url>http://blog.circlecube.com/tag/book/</url>
  25. </catagory>
  26. <catagory>
  27. <name>CG</name>
  28. <url>http://blog.circlecube.com/tag/cg/</url>
  29. </catagory>
  30. <catagory>
  31. <name>charcoal</name>
  32. <url>http://blog.circlecube.com/tag/charcoal/</url>
  33. </catagory>
  34. <catagory>
  35. <name>circle cube</name>
  36. <url>http://blog.circlecube.com/tag/circle-cube/</url>
  37. </catagory>
  38. <catagory>
  39. <name>collage</name>
  40. <url>http://blog.circlecube.com/tag/collage/</url>
  41. </catagory>
  42. <catagory>
  43. <name>color</name>
  44. <url>http://blog.circlecube.com/tag/color/</url>
  45. </catagory>
  46. <catagory>
  47. <name>css</name>
  48. <url>http://blog.circlecube.com/tag/css/</url>
  49. </catagory>
  50. <catagory>
  51. <name>drawing</name>
  52. <url>http://blog.circlecube.com/tag/drawing/</url>
  53. </catagory>
  54. <catagory>
  55. <name>dreamweaver</name>
  56. <url>http://blog.circlecube.com/tag/dreamweaver/</url>
  57. </catagory>
  58. <catagory>
  59. <name>experiment</name>
  60. <url>http://blog.circlecube.com/tag/experiment/</url>
  61. </catagory>
  62. <catagory>
  63. <name>film</name>
  64. <url>http://blog.circlecube.com/tag/film/</url>
  65. </catagory>
  66. <catagory>
  67. <name>final cut</name>
  68. <url>http://blog.circlecube.com/tag/final-cut/</url>
  69. </catagory>
  70. <catagory>
  71. <name>flash</name>
  72. <url>http://blog.circlecube.com/tag/flash/</url>
  73. </catagory>
  74. </catagories>

Download:

Here’s the XML2Object.as class: XML2Object.as class
Here’s a zip containing everything and the working example: xmlToObject.zip

Tags: , , , , , ,

Related posts

flashden banner

Leave a Comment