Basic Flash Tutorial – Loading XML Data

Flash with XML Loaded Data

This Tutorial has been prepared with relation to Flash 8, although the principles covered apply to all versions; the code used is mainly ActionScript 2.0 with notes for using ActionScript 3.0

This tutorial introduces the use of externally loaded XML data in Flash; basic knowledge of XML structures is assumed.

Creating Flash components using data stored in XML format is a common task. For example, Flash galleries are often designed in such a way that the selection of images can be changed without having to alter the .fla source file itself; loading the image data in via XML is an ideal solution in this case. ActionScript has built-in libraries for processing XML documents, although there are significant differences between ActionScript 2.0 and 3.0 in this regard.

To demonstrate, we will load some text into Flash from an XML document and display it.

The XML document has the following structure and is called mydata.xml:

Select All

<data> <note colour="0xFF0000">
some red text </note> <note colour="0x00FF00"> some green text </note>
<note colour="0x0000FF"> some blue text </note>
</data>

Create the above document and then create a new flash document in the same directory (remember to save your .fla to the directory before testing it). Select the default layer (Layer 1) and open the Actions Panel (press F9 or choose Window > Actions).

Your approach now will differ according to whether you are using ActionScript 2.0 or 3.0. For 2.0 you use the XML class to load and process the data, whereas with 3.0 the methods of loading external data have changed in general, and as such you use URLRequest and URLLoader objects to actually load the data, then pass it to an XML object for processing; please note however that the XML class is different in AS3, while the AS3 XMLDocument class provides much the same processing functionality as the XML class in AS2.

For ActionScript 2.0, type the following code into the Actions panel:

Select All

//create the XML object
var my_xml:XML=new XML();
//tell it to ignore whitespace in the document
my_xml.ignoreWhite=true;  

//define the function to execute when the data has been loaded
my_xml.onLoad=function(success)
{
if (success)
{
	//first get the data from my_xml into an array
	//'this' is my_xml - the object on which the onLoad function is being called
	var my_array:Array=this.firstChild.childNodes;

	//setup textformat object for text colour
	var tf:TextFormat=new TextFormat();

	//each element in the array will be a <note> element - loop through
	for(var i:Number=0; i<my_array.length; i++)
	{
		//create textfield for each element (name, depth, x, y, width, height)
		_root.createTextField(("field"+i+"_txt"),
			_root.getNextHighestDepth(), 10, ((i+1)*20), 100, 50);

		//assign the value (firstChild) of the current 'note' element to the textfield
		_root["field"+i+"_txt"].text=my_array[i].firstChild.toString();

		//get the element's 'colour' attribute
		var colourAttribute:Number=Number(my_array[i].attributes["colour"]);

		//assign the colour
		tf.color=colourAttribute;

		//format the textfield
		_root["field"+i+"_txt"].setTextFormat(tf);
	}
}
};
 //load the data - this will call the above function
 my_xml.load("mydata.xml");

This code will load the XML document and trigger the function for processing. To process the XML, we write each ‘note’ element into a textfield and colour the text according to its ‘colour’ attribute. To access the root node (<data>) we use my_xml.firstChild; to access the children (<note> elements) we use .childNodes, which are returned in an Array. To access the attributes of a given element, we use the property: attributes[attribute name]. movie, it should look something like this:

Please note: depending on your own XML file, you may also need to strip out the newline characters, you can do this as follows:

Select All

 var plain_data:String = loseReturns(my_array[0].firstChild.toString());

function loseReturns(xml_str:String):String
{
	var plain_str:String = xml_str.split("\n").join("");
	return plain_str.split("\r").join("");
}

For ActionScript 3.0, you use the URLLoader and URLResource classes to load the XML data into Flash, then pass it to an XML object (and optionally to an XMLDocument object – see above). The URLLoader object fires an event on loading the data; as such you need to create a function for processing it, passing this to an event listener.