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

April 11, 2008 • 16,294 views

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

//////////////////

// - Derived from code written by Alessandro Crugnola - http://www.sephiroth.it/file_detail.php?id=129#

// - Refactored and documented by Phil Powell - http://www.sillydomainname.com

// - 25 July 2006 - Added helper method to sanitize Windows line breaks.

//////////////////

// Convert an XML object to an object with nested properties.

//

// Example usage:

//

//   import net.produxion.util.XML2Object;

//   var contentObj:Object;

//   var xml:XML = new XML();

//   var xmlLoaded = function( success:Boolean )

//   {

//    if( success )

//    {

//      contentObj = XML2Object.deserialize( this );

//      this['timeline'].play();

//    }

//   }

//

//   xml.ignoreWhite = true;

//   xml['timeline'] = this;

//   xml.onLoad = xmlLoaded;

//   xml.load( 'some.xml' );

//

/////////////////

// What do you get back?

//

//   <content created="22-May-2006">

//       <title>My Title</title>

//       <links>

//           <heading>Here be links!</heading>

//           <link>http://somewhere.com</link>

//           <link>http://somewhere-else.com</link>

//       </links>

//   </content>

//

//   Becomes:

//

//   contentObj.content.title.data => "My Title"

//   contentObj.content.links.title.data => "Here be links!"

//   contentObj.content.links.link => [Array]

//   contentObj.content.links.link[0].data => "http://somewhere.com"

//   contentObj.content.attributes.created => "22-May-2006"

/////////////////

class XML2Object {private var _result:Object;

private var _xml:XML;

private var _path:Object;

private static var xml2object:XML2Object;public function XML2Object()

{

this._result = new Object();

}

public static function deserialize( xml:XML ):Object

{

xml2object = new XML2Object();

xml2object.xml = xml;

return xml2object.nodesToProperties();

}

public function get xml():XML

{

return _xml;

}

public function set xml( xml:XML ):Void

{

this._xml = xml;

}

private function nodesToProperties( parent:XMLNode, path:Object, name:String, position:Number ):Object

{

var nodes:Array;

var node:XMLNode;

path == undefined ? path = this._result : path = path[name];

if( parent == undefined) parent = XMLNode( this._xml );

if( parent.hasChildNodes() )

{

nodes = parent.childNodes;

if (position != undefined) path = path[position];

while( nodes.length &gt; 0 )

{

node = XMLNode( nodes.shift() );

if ( node.nodeName != undefined )

{

var obj = new Object();

obj.attributes = node.attributes;

obj.data = sanitizeLineBreaks( node.firstChild.nodeValue );

if( path[node.nodeName] != undefined )

{

if( path[node.nodeName].__proto__ == Array.prototype )

{

path[node.nodeName].push( obj );

}

else

{

var copyObj = path[node.nodeName];

delete path[node.nodeName];

path[node.nodeName] = new Array();

path[node.nodeName].push( copyObj );

path[node.nodeName].push( obj );

}

position = path[node.nodeName].length - 1;

}

else

{

path[node.nodeName] = obj;

position = undefined;

}

name = node.nodeName;

}

if( node.hasChildNodes() )

{

this.nodesToProperties( node, path, name, position );

}

}

}

return this._result;

}

private function sanitizeLineBreaks( raw:String )

{

if( raw.indexOf( "\r\n" ) &gt; -1 )

{

return raw.split( "\r\n" ).join( "\n" );

}

return raw;

}

}

Example:

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import XML2Object;

var xmlObject:Object;

var xml:XML = new XML();

var xmlLoaded = function( success:Boolean ){

if( success ) {

xmlObject = XML2Object.deserialize( this );

this['timeline'].play();

recurseTrace(xmlObject, " ");

myTrace("\n\n")

myTrace("xmlObject.catagories.catagory[10].name.data = "+xmlObject.catagories.catagory[10].name.data);

}

}

xml.ignoreWhite = true;

xml.onLoad = xmlLoaded;

xml.load( 'sampleXML.xml' );

function recurseTrace(info:Object, indent:String) {

for (var i in info) {

if (info[i] == null){}

else if (typeof info[i] == "object") {

myTrace(indent + i + " -");

recurseTrace(info[i], indent);

}

else {

myTrace(indent + i + " = " + info[i] +", ");

}

}

}

function myTrace(myLine:String){

feedback.text += "|"+myLine;

trace(myLine);

}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<catagories>

<catagory>

<name>3D</name>

<url>http://blog.circlecube.com/tag/3d/</url>

</catagory>

<catagory>

<name>abstract</name>

<url>http://blog.circlecube.com/tag/abstract/</url>

</catagory>

<catagory>

<name>actionscript</name>

<url>http://blog.circlecube.com/tag/actionscript/</url>

</catagory>

<catagory>

<name>animation</name>

<url>http://blog.circlecube.com/tag/animation/</url>

</catagory>

<catagory>

<name>blog</name>

<url>http://blog.circlecube.com/tag/blog/</url>

</catagory>

<catagory>

<name>book</name>

<url>http://blog.circlecube.com/tag/book/</url>

</catagory>

<catagory>

<name>CG</name>

<url>http://blog.circlecube.com/tag/cg/</url>

</catagory>

<catagory>

<name>charcoal</name>

<url>http://blog.circlecube.com/tag/charcoal/</url>

</catagory>

<catagory>

<name>circle cube</name>

<url>http://blog.circlecube.com/tag/circle-cube/</url>

</catagory>

<catagory>

<name>collage</name>

<url>http://blog.circlecube.com/tag/collage/</url>

</catagory>

<catagory>

<name>color</name>

<url>http://blog.circlecube.com/tag/color/</url>

</catagory>

<catagory>

<name>css</name>

<url>http://blog.circlecube.com/tag/css/</url>

</catagory>

<catagory>

<name>drawing</name>

<url>http://blog.circlecube.com/tag/drawing/</url>

</catagory>

<catagory>

<name>dreamweaver</name>

<url>http://blog.circlecube.com/tag/dreamweaver/</url>

</catagory>

<catagory>

<name>experiment</name>

<url>http://blog.circlecube.com/tag/experiment/</url>

</catagory>

<catagory>

<name>film</name>

<url>http://blog.circlecube.com/tag/film/</url>

</catagory>

<catagory>

<name>final cut</name>

<url>http://blog.circlecube.com/tag/final-cut/</url>

</catagory>

<catagory>

<name>flash</name>

<url>http://blog.circlecube.com/tag/flash/</url>

</catagory>

</catagories>

Download:

Here’s the XML2Object.as class: XML2Object.as class

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

Categories: tutorial
Tags: actionscript, as2, download, flash, open source, tutorial, xml

Free Tarot

Wow. Thank you! In the past I've been in too much of a hurry to even try to work with ActionScript's stupidly complicated XML handling. On one recent project, I just imported the whole XML file as text, and parsed it using string functions for the bits I needed. (Not very elegant at all, I know.. but in terms of coding time, it was much quicker).

This is extremely sweet though. (In fact, what you've done here is sort of how I thought XML handling in ActionScript *would* work before I found out otherwise).

Very nice. Very nice.

-Popo

Gold Coast Login

Very nice.

great for transferring info to and from Flash using xml and easily
being able to grab info.

Phil

Mark

Can any one help me with this

Create a Flash Movie: 550 x 400 pixels.
2. Write 2 external ActionScript files, one of which MUST be the Document
Class.
3. Code a Rectangle with a Blue border and fill it with a Red and Greed Gradient
at a 45 degree angle. (Use the second ActionScript file for this)
4. Add 10 instances of this Rectangle to the stage, randomly placing them along
the TOP of the movie, one per second, for 10 seconds.
5. As soon as a square is added, it should start falling to the bottom of the
movie, where it bounces before coming to a stop.
Â· There should be NO Timeline animation of any kind, in-fact, there should be
nothing on any Frame of the .fla file at all.
Â· The Library of the .fla file should also be completely EMPTY.
Â· You are allowed to use no more than 60 lines of code, spread over the 2
allowed ActionScript Files.
Â· You must send the .fla file, together with the 2 ActionScript files in for
evaluation.

circlecube

@Mark - Looks like a fun assignment! Good luck with that.

This post may help you and I'd definitely recommend Keith Peters for the background on gravity

Michael

Evan,
do you have an AS3 version of this?

Thanks.

tekkie

Yup, it's all ActionScript 2. Thinks like XMLNode are not working with only 1 parameter in AS3 etc.

Bart

Xml to Object, is that not what e4x does? wich is available in my Flex/Air projects

I am looking for a deserialize to a custom type

circlecube

@Bart - Yes, but note this is for as2, this xml to object is pre e4x, there are multiple ways to do it, but some as2 developers still could find uses for it. Good luck with the deserialiser.