Working with XML in Actionscript 2.
When it comes to loading data in a Flash application, most Flash developer think about XML. The reason is, Actionscript has many built in classes for XML manipulation that are efficient and easy to use. It's not rare to see a Flash developer make their server script create an xml and then have Flash read and parse the XML while they could have just loaded the data directly from the server script into Flash. Again, the reason is: it's easier to do it like that! In this tutorial, I'll show you how to load a XML and then use the data loaded from it.
1. First let's create a basic xml document, open your favorite XML editor (like the fancy Notepad) and write that:
<example>
<Flash>myFlash.swf</Flash>
<image>myGraphic.jpg</image>
<text>I can write a text too, why not?</text>
</example>
I save this as "example.xml", then I create a little swf named "myFlash.swf", and a little jpg named "myGraphic.jpg".
2. Open your Flash software, select "new", "Flash document", click "Ok", then go to "Modify", "Document", enter 300 for the width and heigth and enter 30 for the frame rate, save the document as "xml.fla" (Note: for this example all document and file must be in the same folder).
3. Go to "window", "Components", then click on "User Interface" to open it, then drag 3 button component onto the stage. You should have this:
.
4. Now go to "window", "Component Inspector" to open it.
5. Click on each button on the stage, you will see their properties displayed in the component inspector.
6. With one button selected, on the component inspector, there's a line named "label" with a value of "button", change the value to "SWF", for the first button, then "JPG" for the second button, then "TEXT" for the last one, now you should have this:
7. Now for each of these buttons we need to give an instance name.
8. Select the "SWF" button and give it an instance name of "swf_btn" , repeat this for the "JPG" button, give a name of "jpg_btn" , and for the "TEXT" button, "text_btn".
9. Now copy and paste this code in the Actions panel:
function Textclicked(){
loadText();
}
text_btn.addEventListener("click", Textclicked);
function swfclicked(){
loadSwf();
}
swf_btn.addEventListener("click", swfclicked);
function jpgclicked(){
loadJpg();
}
jpg_btn.addEventListener("click", jpgclicked);
We define an event listener for our 3 buttons, when they are clicked, they call a function that we will write later.
10. We create an array that will hold the XML.
var theXML:Array = new Array();
We will use it to store all the information coming from the XML. Now let's load the XML:
var XMLtoLoad:XML = new XML();
XMLtoLoad.ignoreWhite = true;
XMLtoLoad.onLoad = function(success) {
theXML=XMLtoLoad.childNodes[0].childNodes;
};
XMLtoLoad.load("example.xml");
We create an XML object (XMLtoLoad), we get rid of any white space the XML might have, we define a function that will trigger when the XML is fully loaded (onLoad), in this function we assign the XML data to the array we created earlier, finally we load the XML.
11. Now we have our data so let's parse it, we are going to create the functions that the buttons call:
function loadText(){
var theText:String = theXML[2].firstChild.toString();
this.createTextField("my_txt", 10, 75, 200, 300, 22);
my_txt.text = theText;
}
function loadJpg(){
this.createEmptyMovieClip("my_jpg", 10);
my_jpg._x=50;
my_jpg._y=150;
my_jpg.loadMovie(theXML[1].firstChild);
}
function loadSwf(){
this.createEmptyMovieClip("my_swf", 10);
my_swf._x=50;
my_swf._y=150;
my_swf.loadMovie(theXML[0].firstChild);
}
Our application is now finished! the loadText function first creates a string variable and assign to it the third element in the theXML array, it also converts it to a string. Then it creates an empty textfield, position it and assign in it the text from the XML. The loadJpg function creates an empty movie clip, position it and load into it the jpg defined in the XML. The loadSwf function does the same.
Click on each buttons to display the swf, jpg, or text.
TIP: When you click on a button, what was displayed before disappears but I did not write any code for that so why is it doing that?
When you create a textfield or an empty movieclip, you need to assign a depth value (I gave a depth of 10 to all of them), but in Flash only one object can occupy a certain depth, so if you assign the same depth to another object, the object that was at the same depth before is removed automaticaly!