Configure your Flash application using XML

If you’re anything like me, you don’t particularly enjoy having to launch Flash for a quick little fix, export again and deploy it on a website.

Well using the power of XML you can make your life a lot easier. What I’ll be discussing in this article is the concept of a configuration XML file and how to use it most efficiently for your Flash projects.

Getting started

What exactly is a configuration XML file I hear you saying? It’s not difficult at all; in simple terms what it does is define some properties and corresponding values that overwrite the default values in your Flash application.

Let’s look at an example of such an XML file:

The XML file above shows a typical configuration XML file that allows you to change the companyName and companyLink variables without having to recompile the Flash application.

This XML document is saved as config.xml and placed in the root folder of your Flash application. Of course that’s not enough to get it to work; we need a little bit of code in the Flash application to load in the XML and get hold of the configuration parameters which we’ll look at next.

Configure your Flash application using XML

If you're anything like me you don't particularly enjoy having to launch Flash for a quick little fix, export again and deploy it on a website.

Well using the power of XML you can make your life a lot easier. What I'll be discussing in this article is the concept of a configuration XML file and how to use it most efficiently for your Flash projects.

Getting started

What exactly is a configuration XML file I hear you saying? It's not difficult at all; in simple terms what it does is define some properties and corresponding values that overwrite the default values in your Flash application.

Let's look at an example of such an XML file:

<?xml version="1.0" ?>
<config>
  <param id="companyName" value="DMXzone" />
  <param id="companyLink" value="http://www.dmxzone.com" />
</config>

The XML file above shows a typical configuration XML file that allows you to change the companyName and companyLink variables without having to recompile the Flash application.

This XML document is saved as config.xml and placed in the root folder of your Flash application. Of course that's not enough to get it to work; we need a little bit of code in the Flash application to load in the XML and get hold of the configuration parameters which we'll look at next.

Building your Flash application

Now we'll go into Flash and build ourselves an application. In this case we'll make a little customizable video player application.

The first thing we do is set up the layers. Create a new layer in the timeline named actionscript and lock it. This is where we'll be putting all code for the application. Next rename Layer 1 to interface as this is the layer where we'll put all interface elements.

With that done the next step is getting some interface elements onto the stage. What I've done is draw a rectangle with rounded corners as the base graphic and put a dynamic textfield near the top to hold the company name. This dynamic textfield is given the instance name companyName_txt.

Finally we'll put a video instance on top of the rectangle to play the video in. To do this open up the Library panel, click the little icon on the title bar and select "New Video".

The video instance is given the instance name videoPlayer_vid so we can target it later on via ActionScript code.

In the same root folder for the Flash application we'll now put some FLV video files (video1.flv and video2.flv) which we can later use to play back.

Writing the code

Select the actionscript layer in the timeline and open the Actions panel so we can start writing some code.

The first thing we'll do is set up the default values of the application:

var companyName:String = "My Default Company";
var companyLink:String = "http://www.visitmehere.com";
var videoFile:String = "video1.flv";

Those default values are what the application will fall back on if the configuration XML file doesn't have a specific value defined. Notice that we use exactly the same variable names here as those that are specified in the id attribute of the XML file.

What we'll do next is write the code that loads In the configuration XML file.

var configXML:XML = new XML();
loadConfig = function(xmlFile:String) {
  var scope = this;
  configXML.ignoreWhite = true;
  configXML.load(xmlFile);
  configXML.onLoad = function(success) {
    if(success) {
      scope.initApplication();
    } else {
      trace("Error loading XML file ("+xmlFile+")");
    }
  }
}

The code above probably looks scarier than it should be. What the loadConfig function does is create a new XML class instance and load in the file passed through the xmlFile argument (which in our case will be config.xml).

When the onLoad function is triggered on the configXML instance a boolean success variable determines whether or not it was successful in parsing the XML. If the XML was parsed correctly the initApplication function is called.

The local scope variable is used to store a reference to the scope of the _root which in turn in the onLoad function gets used to trigger the initApplication method.

This approach is preferred over using _root.initApplication because it doesn't rely on this code running on the _root of your Flash application. If you move this all inside a movieclip it will still work as expected.