XML with ActionScript 3.0 Examples

On a previous post I talked about the basics of XML so I thought I’d show some examples of how to incorporate XML with Flash.

Since XML is primarily used to store and transfer data, it makes for a nice flexible way to store data that Flash applications can use. Since it’s external to your SWF file, it can be easily updated. So whether your Flash application pulls in data for a News Reader or a Slide Show or Music Juke Box, any change will be dynamic and ready to go.

These examples use ActionScript 3.0, which allows for easier manipulation of XML data compared to previous versions of AS. I broke up the three examples into three parts so you can see the evolution of each example and can follow it better with a gradual change in the AS code (saved as Flash CS3).

News Reader

In this Flash example (like the other two as well), I show you how to pull information into Flash and parse the information needed into an text field, dynamically loop through the XML file, and add HTML and CSS styling to the text field.

Here is the finished version and the source files (.zip).

Slide Show

There are so many Flash slide shows on the web and most use an XML file to store the image properties (url, title, description, etc) of each. This way updating is separate from the re-publishing the FLA and anyone can do it.

This application not only uses the XMLList object, but the UILoader component and the Timer class (rotate image every 3 seconds).

note: You could create a custom loader for the loading of the images by either using the Progress Bar component or creating your own.

In AS 3.0, a simple pre-loader would look something like this:

loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
loaderInfo.addEventListener(Event.COMPLETE, onComplete);
 
function onProgress(e:ProgressEvent):void
{
     var loaded:Number = e.target.bytesLoaded;
     var total:Number = e.target.bytesTotal;
     var pct:Number = loaded/total;
     loader_mc.scaleX = pct;
     loaded_txt.text = "Loading... "; 
     loaded_txt += (Math.round(pct * 100)) + "%";
}
 
function onComplete(e:Event):void
{
    // show something
}

Here is the finished version and the source files (.zip).

Music Juke Box

Finally another use of XML would be to create a song Juke Box to play different MP3 files. This project uses previous techniques of the first two projects plus the Sound and SoundChannel class.

This project focuses a little more on programming since how to load and parse and XML file have been already covered in the first two projects so it’s a nice finishing project on how to create a simple Flash application.

Here is the finished version and the source files (.zip).

note: If you want a more robust example of a Music Juke Box (pause, volume slider, etc), then take a look at this example and source code (.zip) created by Craig Campbell.