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

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: , , , , , ,

Comments

Dynamic Flash Scrolling Link List XML driven Component on FlashDen

March 26, 2008 at 8:42 pm · 3,257 views · Filed under portfolio

Go get the file at FlashDen

Dynamic Scrolling Link List XML driven (No Wrap)

An interactive link list. Vertically scrolling list of links or just text. Could be used for a nav menu or a link list, or even just a scrolling list. Scroll speed calculated dynamically from mouse position to give not only scrolling control, but also speed control. Reads an external XML file containing just titles and url paths and creates this interactive click-able link list! On click the link is highlighted and on release loads the url either in a blank window or not (configurable). On rollover the list item grows with animation and is highlighted (all configurable, size speed etc). Once end of list is reached scrolling stops, another version is available with a wrap-around feature: Dynamic Scrolling Link List XML driven Auto wrapping

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

Tags: , , , , , , , , , ,

Comments

Dynamic Flash Vertical Scrolling Link List with XML download at Flashden

February 19, 2008 at 8:32 am · 3,432 views · Filed under portfolio

Go get the source files at Flashden

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

circlecube on FlashDen

Tags: , , , , , , , , , ,

Comments (8)

StomperNet Scrutinizer

December 28, 2007 at 7:58 pm · 260 views · Filed under portfolio, work

StomperNet releases Scrutinizer, software for viewing websites through a simulated fovea vision. Since not everyone could set-up, let alone afford a real eye-tracker. This software uses the mouse pointer as the user’s focal point, or foveal view. It blurs everything except where your focal point (the mouse) is. It is helpful because it forces you to re-think web design from an extreme usability standpoint. This browser software was built in conjunction with Nitobi using Adobe AIR and Flex. I had the chance to do the skinning of the browser in flex! I really hope to have a good excuse to play more with flex.

Scrutinizer Thumbnail

Anyways, check out the free software (master-minded by Andy Edmonds), this ‘Click Fu’ video created to explain it, and the many uses of Scrutinizer.

Tags: , , , , , , , , ,

Comments

Circle Cube on Free IQ

October 1, 2007 at 12:45 pm · 130 views · Filed under portfolio, work

Embedded player from Free IQ.
Nicholsong song by Dionysos, Music Video by Circle Cube Studio

Tags: , , , , , , , , , ,

Comments

Dynamic Flash Vertical Scrolling Link List with XML

August 20, 2007 at 10:39 am · 5,111 views · Filed under portfolio

As seen at Flashden. I’ve fixed it up a lot and made it much easier to incorporate into your own files.

A link list. Vertically scrolling list of links or just words. Scrolls and wraps automatically and interactively. Reads an external XML file containing just titles and paths and creates an interactive click-able link list!

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

Download the source files (linkList.fla, cats.xml, linkList.swf): Link List at Flashden.

Tags: , , , , , , , , ,

Comments (6)