AS3: XML, the easy way


Haven’t been able to find a tutorial on how to make XML objects that would be worth writing about in a “XML for Dummies™” book.

So hopefully after this you’ll be able to writting XML strings like crazy 😀

XML is already part of Flash globaly, so you don’t need to import it.

To make this easier to understand, I’ll use a ComicBook as an example since I’m currently working on that project which requires the usage of XML objects.

In my project a ComicBook consists of the following:

  • Comic Object
  • Comic object contains an Array of Pages
  • A Page object contains an Array of PageObjects (Sprites… MovieClips… etc….)

Now as you could assume, all these objects are nested inside our Comic object. Using nested for-loops, you can access all the information and perform different sorts of operations.

Comic will therefor, be our main Node. A Parent of sorts.

We create our first XML object tag:

var comicNode:XML = new XML(“<Comic/>”);

People who know a little bit of XML and/or some knowledge about xHTML, will recognize <Comic/> as being a closing tag.

Infact, when we try to view the resulting string, we get this:

trace( comicNode.toXMLString() ); // –>  <Comic/>

This is perfectly normal and you shouldn’t worry yet that the output isn’t  like  <Comic><Comic/>

Later when you’ll be adding elements to the Comic Node, you’ll see that Flash will automatically adapt the XML structure to what you’re feeding it.

A really nice thing is that you can dynamically add properties to your nodes, like giving it an ID, or a Name.

For example, every Comic book I generate needs to have a name. I can do so like this:

comicNode.@name = comic.Name; // –>  <Comic name=”TheNameOfMyComic” />

As you can see, using  node.@ we can generate any attribute name we want! comic.Name happens to be a String variable in the field of my  Comic class where I store the name of it.

Now for the real work! Adding different Nodes to our Parent Node.

Because Comic  contains an Array of Pages, we need to create a For-Loop which runs through all the objects within our Array. The creation of our PageNode, is exactly the same as our ParentNode.

for (var index:Number = 0; index < comic.Length; index++) {
var pageNode:XML = new XML(“<Page/>”); // –>  <Page/>
pageNode.@id = index; //  –>  <Page id=”0″ />
……
comic.Length is simply the length of my Page Array.
Now! We add our PageNode to our ComicNode!
comicNode.appendChild(pageNode); //  –>  <Comic name=”theNameOfTheComic”>
//   –>         <Page id=”0″/>
//   –>  <Comic/>
If you understand all this, then you’ve done it!  You should now be able to easily make your own XML structures 🙂
Here’s a complete excerpt of my code so you get the general picture:
//Create XML
comicNode = new XML(“<Comic/>”); // <Comic/>
comicNode.@name = comic.Name;    //Adding attibute -> <Comic name=”theNameOfTheComic”/>
//Add the Page objects
for (var index:Number = 0; index < comic.Length; index++) {
var page:XML = new XML(“<Page/>”); // <Page/>
page.@id = index; // <Page id=”0″/>
comicNode.appendChild(page); //<Comic name=”theNameOfTheComic”>
//   <Page id=”0″/>
//<Comic/>
//Add the PageObjects
for (var index2:Number = 0; index2 < comic.getPageByIndex(index).Length; index2++) {
var pageObjNode:XML = new XML(“<PageObject/>”);
var pageObj:PageObject = PageObject(comic.getPageByIndex(index).getChildAt(index2));
pageObjNode.@id = pageObj.name;
if (pageObj.movieClip.inputField != null) pageObjNode.@input = pageObj.movieClip.inputField.text;
pageObjNode.@type = pageObj.Type;
pageObjNode.@posX = pageObj.x;
pageObjNode.@posY = pageObj.y;
pageObjNode.@posZ = pageObj.z;
pageObjNode.@Width = pageObj.width;
pageObjNode.@Height = pageObj.height;
page.appendChild(pageObjNode);
}
}
Advertisements

One thought on “AS3: XML, the easy way

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s