Flash MX 2004 - External XML / XMLConnector

XML is a flexible markup language and although it has a similar structure to HTML, it is not meant to display data but a great way to store, carry, and exchange data.

Instead of having predefined tags like HTML, XML tags are user defined allowing for greater structured control. If you have no knowledge of XML then this tutorial would probably do you no good, but a search for XML will turn up more information than you could need. There's simply too much involved to try and explain it so this tutorial assumes you know about XML and why you need to import it into Flash.

This tutorial will teach you how to use the XMLConnector component (2004 Pro only) to import an external XML document and then bind the data to a List component. The XMLConnector lets you access any external data source that returns or receives XML through HTTP. Once loaded, the schema of your XML document will be broken down by structure giving you access to all of the data elements available. If you're unfamiliar with data binding, you can read up on it here. It's not necessary but it couldn't hurt.

Instead of having you create an XML file, I'll let you download the one I've created for this example to save you a little time. You can find it here: data.xml. Simply right click and save it to a work folder. If you view the contents you'll see that I've created a structure for my school, in which I have 3 students. These tags were defined by me, which is the genius behind XML. I've also included each student's location and age.

If you haven't already done so, open Flash and create a new document.

From the Components panel (Window > Development Panels > Components, or Ctrl+F7), under Data components, double click the XMLConnector to add an instance to the stage. This component will not be visible at runtime. In the Properties window (Window > Properties or Ctrl+F3) give the component an Instance name of dataxml. Now in the Component Inspector (Window > Development Panels > Component Inspector, or Alt+F7) click the Parameters tab. Ok, save the movie (but don't close it) to the same folder as your XML file. Now for the URL field you need to input data.xml for the value. Set the direction parameter to recieve, and the rest of the field should stay the same (ignoreWhite should be set to true by default).

Now click over to the Schema tab, select the results : XML field and then click the Import button (), browse to the location of your data.xml file and open/select it. You should now see a break down of the XML structure:



We now have use off all the XML data in that file, but now what do we do with it? Well for this particular tutorial we're going to bind it to a List component. Go back to the Components panel and double click the List component to add an instance of it to the stage. In the Properties window give the component an Instance name of datalist. Now it's time to bind the XML data to the listbox.

With the List component selected on the stage, go to the Component Inspector and click the Binding tab. Click the Add Binding button () and choose dataProvider : Array and click OK. The direction parameter should be set to in. Click the bound to value field and for Component Path select the XMLConnector and for Schema Location choose student : Array, because we want to grab the array of information for each student, obviously :).

Once that's done click OK to close the window, the bound to value should now read dataxml:results.school.student.

Now select the value field of the Formatter parameter. From the menu choose Rearrange Fields. This formatter creates a new array of objects based on the original [student] array in your binding. Finally, for the formatter options parameter, click the value field and for the Fields definitions add the following to assign the each array value to it's own variable:

label=student;data=location;data2=age

One final step is to trigger the XMLConnector. Go to your main timeline, select frame 1, hit F9 to bring up the Actions panel and add the line: dataxml.trigger();. That does exactly what it looks like, it triggers the XMLConnector to make the connection to the assigned XML file and import the data. From here you can pretty much do what you want with the data. If you test the movie now, you'll get the 3 students listed in the List component, but the data won't go anywhere since it hasn't been assigned to anything.

For testing, you can use a trace function (included in the working example), but since there are many directions you can go with the information I didn't pick any one specific thing. The trace function is below (add it after the trigger command). Note that the trace function only works IN Flash.

var userListener = new Object();
userListener.change = function(event) {
    trace(
        + event.target.selectedItem.label +
        " is a student from " + event.target.selectedItem.data +
        " and is " + event.target.selectedItem.data2
    );
};
datalist.addEventListener("change", userListener);

Working Example