Introduction to XML in Flash
       by senocular

Example: XML Portfolio
The squirrel finder maintains all of its content within the XML file. It's just text and easy to include. However, the XML file can't always facilitate all of your needed content. Take images for example. Let's say you want to have some jpegs loaded in for each item of interest within your XML document. What then? Well, then you can just include a reference (i.e. URL) to the image within the XML and have Flash include the image from that. Good news. This can also be applied to text. So, basically, your XML can consist almost solely of URLs. This XML portfolio(-esque) example does pretty much just that.

[ click on a thumb for more information ]

Download ZIP

Basically the same concepts apply here that did with the squirrel finder in terms of looping through children to add the content listed. This particular example simplifies the interface a little bit by having everything visible on screen at the same time but takes an additional step in content retrieval.

The advantage to doing this, aside from the fact that you can't have jpegs within your XML, is that it keeps your XML smaller and lets you load content on request. This means that the only data you need to initially load when your movie starts is a small collection of URLs. No other text or images are loaded prior to the point at which a viewer requests them. This ultimately saves on bandwidth and load time since it doesn't require everything to preload even when it might not even be seen.

XML Structure
The XML document contains mostly URLs aside from one attribute, title. Here's the document

portfolio.xml

Here it is in its entirety:

<?xml version="1.0"?>

<portfolio>

<picture title = "Tiny Disk"

thumb = "portfolio_images/thumbs/tinydisk.jpg"

description = "portfolio_text/tinydisk.txt"

image = "portfolio_images/tinydisk.jpg" />

 

<picture title = "Plug"

thumb = "portfolio_images/thumbs/plug.jpg"

description = "portfolio_text/plug.txt"

image = "portfolio_images/plug.jpg" />

 

<picture title = "Disk Collection"

thumb = "portfolio_images/thumbs/diskcollection.jpg"

description = "portfolio_text/diskcollection.txt"

image = "portfolio_images/diskcollection.jpg" />

</portfolio>

Simple. You got yourself a root element portfolio that contains a list of picture elements. Picture elements then contain a title and 3 urls to that picture's content. You got a thumbnail image, a description and a full sized image. To help with clarity, some indentation was used to present the attributes of the picture tags in a more readable manner. This will not affect the XML negatively in any way - Flash will read it just fine.

Preparing the Flash File
In terms of the setup of the movie, the main screen consists of only four elements. Two are movieclips for loading the images (one for thumbnails and the other for large versions). The other two are text fields (one to display the title and the other for the description text).

[ layout of portfolio movie ]

Nothing special there. Lets move on to the scripting.

ActionScript
The ActionScript is set up much like the squirrel finder. You load the XML and then have a function called that generates content based on that information. The only difference here is that the interaction added uses functions that call loadMovie and load with a loadVars object to reach out and retrieve the external content as specified in the XML document.

Setting some variables: here a spacing variable for laying out thumbnails is defined along with an instance of LoadVars to handle loading in text from a URL.

var thumb_spacing = 40;

 

var description_lv = new LoadVars();

description_lv.onData = function(raw_text){

description_txt.text = raw_text;

}

Notice that the LoadVars instance doesn't have an onLoad defined, but rather, an onData. The onData event is called with the raw contents of the file make it into Flash. When that happens, the call gets passed the raw data that was loaded loaded - direct text prior to parsing. This onData, by default, as it is defined initially in Flash, then takes that data and parses it as needed and then calls the onLoad event which you should have at this point have defined for the instance. You can, however, as shown above, write your own onData handler to catch that raw data as its loaded directly into Flash. This will prevent an onLoad call (since the internal onData is the method that calls onLoad) but it lets you deal directly with what the data loaded is before it is parsed. This applies to both LoadVars and XML where LoadVars parses the text into Flash variables and XML parses the text into XMLNode instances. Here, it is being used to load straight text files into a text field. (description_txt). If you wanted, you could also code your own XML parser and use an onData for your XML instance to intercept the raw XML text in order to parse it with your own parser and not Flash's. But why would you ever want to do a crazy thing like that? Ok, some over ambitious people out there probably have their reasons. But, for the most part, Flash's own parser does fine.

Next is the main function for setting up the portfolio based on the loaded content.

function GeneratePortfolio(portfolio_xml){

var portfolioPictures = portfolio_xml.firstChild.childNodes;

for (var i = 0; i < portfolioPictures.length; i++){

var currentPicture = portfolioPictures[i];

 

var currentThumb_mc = menu_mc.createEmptyMovieClip ("thumbnail_mc"+i,i);

currentThumb_mc._x = i * thumb_spacing;

 

currentThumb_mc.createEmptyMovieClip("thumb_container",0);

currentThumb_mc.thumb_container.loadMovie (currentPicture.attributes.thumb);

 

currentThumb_mc.title = currentPicture.attributes.title;

currentThumb_mc.image = currentPicture.attributes.image;

currentThumb_mc.description = currentPicture.attributes.description;

 

 

 

currentThumb_mc.onRollOver = currentThumb_mc.onDragOver = function(){

info_txt.text = this.title;

}

currentThumb_mc.onRollOut = currentThumb_mc.onDragOut = function(){

info_txt.text = "";

}

currentThumb_mc.onRelease = function(){

image_mc.loadMovie(this.image);

description_lv.load(this.description);

}

}

}

You got your basic loop which goes through the picture child nodes of the portfolio root element creating a movie clip for the thumbnail and adding actions to handle rollovers and releases. Two movieclips are actually created for the thumbnails. One represents the actual thumbnail movie clip and another is created within it used to load the external thumbnail jpeg. This is needed because whenever you use loadMovie on a movie clip, that movie clip loses all variables and functions assigned to it once the content (movie or image) loads. This means that without that inner movie clip to load the jpeg into, all the variables and event handler functions we assign to the movie clip right after the loadMovie call would be cleared once the jpeg has loaded itself in.

Attributes are assigned to each thumbnail movie clip and handlers for mouse interaction are then defined. The rollover functions manage the info_txt text field. which displays the title of the picture when the mouse is over the thumbnail while a release handler uses loadMovie to load the main image into the placeholder movie clip (image_mc) and load on the LoadVars instance to get text into description_txt (as instructed in its onData handler).

Then you setup and load your XML:

var portfolio_xml = new XML();

portfolio_xml.ignoreWhite = true;

portfolio_xml.onLoad = function(success){

if (success) GeneratePortfolio(this);

else trace("Error loading XML file");

}

portfolio_xml.load("portfolio.xml");

Now you got yourself a simple portfolio which is very dynamic and easily editable without the need for even touching Flash (thanks to XML and external content). Change a few text files, swap out a few images and you're set.