Tutorial details:
Written by: Fabian Mejia, , www
Time: 35 minutes
Difficulty Level: Beginner

Download FLA

Being wondering how does work XML on different applications and languages, I found this was possible also on Flash MX.

The next question is: what can I do with XML in Flash? Well, there are a lot of uses using this on Flash.

Let's take for example the Menu on the bottom of this page. What happens if I want to add some new links to that menu. The most obvious choice is to open the Flash MX program to modify or add code to include the new links. After that I have to compile the flash movie and upload it again to the website.

It's not too useful if you are in a computer where Flash MX is not installed. Well, in that case, download the trial version. Hmmmmm.... boring, isn't it?

Fortunatelly there's XML. XML is a file where data is defined inside tags with a tree-like structure. An specific version of XML is html, the standard for web content streaming. You can defined structured information inside XML, data types, an standard format for your application, etc. If you need more information visit: www.xml.org

In our example, we will use XML to define the structure of the menu.

This is the xml file used for the menu:

<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
<links>
<link name="Main" ref="home.html"/>
<link name="Pictures & Videos" ref="#">
<inLink name="Image Gallery" ref="pictures.html"/>
<inLink name="Photoshop Tutorial" ref="photoTut.html"/>
</link>
<link name="Programming" ref="#">
<inLink name="XML flash tutorial" ref="xmlflash.html"/>
<inLink name="Flash games" ref="flashgames.html"/>
</link>
<link name="3D Design" ref="#">
<inLink name="Blender 3D" ref="blender.html"/>
<inLink name="3D Studio" ref="3dStudio.html"/>
<inLink name="Lightwave" ref="lightwave.html"/>
</link>
<link name="University" ref="photoTut.html"/>
<link name="LW Plugin" ref="tvplugin.html"/>
</links>


This document has a principal node: The "links" tag. Everything inside this tag is known as "child" of the "links" node.

So, the "links" node has 6 nodes with the name "link". In the same way, some of the "link" tags have their own childs. For example, the link named "3D Design" has 3 childs named with the "inLink" tag. As you can see, each node has an opening tag <links>, and a closing tag </links>. This means that every tag inside this pair are childs of this node.

There are som tags with no closing tag. <inLink /> tag for example, means that this is an opening and closing tag, so there's no need to define a closing tag.

Tags have attributes. The --name="Programming"-- text means that the tag has an attribute named "name" and a value "Programming". A tag can have several attributes.

Also, a node can have a value, for example the well-Known tag <center> in this example:

<center>This is a centered text </center>


has a value "This is a centered text".

The rest of information about XML can be found over the internet. Our main point of discussion is the usage of XML on Flash. Moreover, if you are not familiar with Actionscript (the native language for flash) you must first learn the basics in order to continue with this tutorial.

The main object in Flash to manage XML file is the XML object:

var linksXML = new XML();


This sentence creates a new XML object, and It has several methods,properties and events, as you can see in the Flash Help.

Let's go through some of them.

linksXML.ignoreWhite = true;


This instruction ignores the value for tags that only contain this whitespaces, for example:

<onlyWhite> </onlywhite>


will be converted to:

<onlywhite/>


linksXML.load("links.xml");


This method loads an XML structure from a file.

linksXML.onLoad = checkLoading;


This event is called whe the XML file is being loaded. Only after the file finished loading the object can be accessed. Why this?

Remember that flash was built to stream content over the Internet, so if you have a big XML file it will take some time to load. In that case if you were able to access the Object it would be empty because it can only process when the last tag (the closing tag for the main node) is loaded.

function checkLoading(success) {
        if (success == true) {
                /*Process here the xml*/
        }
}


The funcion associated to the onLoad event receives a success parameter that indicates if the file was successfully loaded. So, in success=true I can safely process the file.

I usually load all xml files at the first frame of the animation. And when alll files are loaded I jump to the next frame, just like this:

if(success == true) gotoAndPlay(2);


So, when animation goes to frame 2 all data is consistent.

Now, how to access data inside the XML object?

To access the attributes value for a node:

<person FirstName="fabian" lastName="Mejia">Born in 1975</person>


trace (aNode.attributes.lastName);
will print "Mejia"
trace (aNode.attributes.firstName);
will print "Fabian"
trace (aNode.nodeValue);


will print "Born in 1975"

To access the tree structure for the XML file you must first get the root not, and then navigate through its children:

in our example:

var rootNode = linksXML.firstChild;


Will assign to the variable rootNode, the root node of the XML file, here <links> node.

var total = rootNode.childNodes.length;


Returns on the variable total, the number of childs for the <links> node. Here, the value returned is 6. The next step to read the XML object is the possibility to iterate through the node's children.

var tLink = rootNode.firstChild;
To get the first node's child.
tLink = tLink.nextSibling;


Assigns to the tLink variable the Sibling for the actual node. The order the next sibling is assigned depends on the XML file structure.

I expect this short tutorial will introduce you to the usage of XML on flash.

There are some other uses for XML. on the Flash games links for example, it's possible to write an script for each game level on the [Arkanoid Clone] wrote few years ago.