The Back Room

I am not going to make this a huge run-down of how to use XML in Flash, but instead share a few tips I’ve come across while incorporating it into my applications. If you’re looking for a place to start from the beginning and get the basics of using XML with Flash, then I’d go here to kirupa.com

Use a Configuration File

Since we mostly develop stand-alone exhibits for public spaces, there is some basic configuration information that we want in all of our programs and so each application has its own config XML with some standard parameters, and some that are specific to the application. The file we load at the start of each program has a config node, which will hold much of the items we use for every application. It might look like this …

<config>
<timeout>90</timeout>
<attractScreen>attract.swf</attractScreen>
<showMouse>0</showMouse>
</config>

It loads values that the application will use to determine the time the program waits to go to the attract loop, the location of the attract loop file, and whether or not the mouse should be shown at program startup. Another common thing that is done with our config XML is loading any dynamic text into the program, so it’s easy to change this text and it won’t have to be done by a programmer. There’s a text node and it holds a few different items that we may use.

<text>
<intro>Please Choose a category</intro>
<menuInstructions>Now, select a submenu below to start exploring.</menuInstructions>
<outro>Thanks for visiting, we hope you enjoy the rest of your day!</outro>
</text>

It’s important to pull that stuff out of the code and into easily configurable external files. It’s very common to have a client call and let you know that they think wording should be changed, or that the timeout happens too fast on a particular exhibit, and the ability for that change to be made by them is valuable.

Deleting an XML Node

So, to add a node to an existing XML instance in Flash, the most basic function is appendChild(). If you have two variables holding XML, and want to add one to the other, it could be as simple as …

myXML.appendChild(myXML2.copy());

This will vary depending on what you want to do specifically, but that’s the basic idea. So, if you want to delete a child from XML, you’d think you would just use a function like removeChild() or deleteChild(). Sorry, that’s not how it works. You actually have to use the fairly odd delete command. And, it doesn’t even get values fed like a regular function. If you had your XML that held photo nodes and wanted to delete the second item, it would look like …

delete myXML.photo[1];

It is not intuitive at all, and I am sure there is some reason it’s done that way based on the object model and available functions in the different classes, but it’s still a bit difficult to figure out.

Creating XML in Flash

For some applications, you may want to create a variable that holds XML for whatever reason. Now, if you’re just making a copy of or adding to some existing XML, it’s pretty straightforward. But, if you create the XML from scratch, there’s one important step that if you skip, will cause your XML not to work properly. You have to create a top level <data> node in it to hold your child nodes. If you don’t do that, it may not act as it should. So, if I am doing some sort of searching or sorting, and want to create a brand new XML that holds photo nodes from another XML document that fit certain search criteria, I can’t just say …

var newXML:XML = new XML();
newXML.appendChild(photoXML.photo[2]);
newXML.appendChild(photoXML.photo[5]);
//try to trace out the new XML, but you’ll see nothing
trace(newXML);

What you have to do is create a <data> tag when you make that new XML, so that it will have a node to append the children to. So, instead try …

var newXML:XML = <data></data>
newXML.appendChild(photoXML.photo[2]);
newXML.appendChild(photoXML.photo[5]);
//Now you’ll see the new XML nodes reflected
trace(newXML);

So, make sure you create that top level to allow items to be manipulated with code.

I have recently been working on a web project that requires getting data from a database and loading it into a flash application that is embedded within a php-based web-page.   My weapon of choice for this project has been including the data in a flashvar inside the embed code.  There are two other methods that I wanted to highlight in this article as well.  So to summarize I will be highlighting the following methods of getting data into a web-embedded flash application.

1. Use the server-side language to place your data inside a flashvar in the embed code
2. Have flash do a URLRequest to a server-side script that returns straight xml/plaintext..etc
3. Have flash do a URL Request straight to a html page and parse the html!

Using the server-side language to place your data inside a flashvar

Because a server-side languages like ASP or PHP runs before any of the client side scripts of a web-page are loaded, you can use it throughout a page to insert data wherever you want; even in the <head> section of the html.  So what I am doing in the latest web project I am working on is using a php function to print a large chunk of database extracted text directly into the embed code.  Let’s take a look at the embed code.  I am using the popular swfobject script too.


<script type="text/javascript">
var flashvars = {};
flashvars.photoDataInput = "<?php echo( $TrailController -> Get_XML_For_Flash() );?>";
var params = {};
var attributes = {};
swfobject.embedSWF("FlashImageViewer.swf", "myAlternativeContent", "800", "560", "9.0.0", false, flashvars, params, attributes);
</script>


The magic part is down in the script that includes the “FlashImageViewer.swf”.  See the line that is “flashvars.photoDataInput=”<?php echo( $TrailController -> Get_XML_For_Flash() );?>”;”  This function inside of my php script will actually print out a HUGE string of xml that I read into my flash application then cast to xml.  Lets view the source of the page so you can see what I mean:

In the source I have highlighted the xml that php is printing.  An excerpt is: “<VRTrail><config><photos><singlePhoto><path>http://localhost/g2OCTAAug2009/g2data/albums/Wyoming/Independence_Rock/Media/Location/Ind_rocktouristsIMG_7260.jpg</path><caption>Vi”.

So how do we get this inside of the flash application?  Inside of the main class of the flash image viewer I have a function that loads the flashvars variable:

private function loadFlashVars():void {
var tmpObj:Object = LoaderInfo(this.root.loaderInfo).parameters;


if( tmpObj["photoDataInput"] != undefined) {
PhotoXML = XML(tmpObj["photoDataInput"]);
}
}

See how I am casting it to XML?  I can then use the great xml parsing in Actionscript 3 to take care of loading the photos!

Have Flash do a URL Request to a server-side script that outputs straight xml
This is a fundamental principal of how Asynchronous JavaScript programming (AJAX) works on the web.  You can also use flash to do it as well.  However, if you do it this way, search engines wont have an opportunity to index your content.

Have Flash do a URL Request Straight to a html page and parse the html
Based on my previous work in SEO, and from what I have read, it really seems like this is the best way to load data into flash on the web; although it can be a bit annoying at times.  Let me give you an example too.  On the In Pursuit of a Dream Movie site, the “Now Showing” page actually uses this technique to load the show times!  Take a look at the flash site:

You’re going to need to disable meta redirection to look at this.  Now, take a look at this URL: http://www.octa-trails.org/In-Pursuit-of-a-Dream/Now-Showing.html If you happen to stumble on this page through a search engine, you’ll be auto-redirected to the index where the flash application is.  Now, how do we parse the html in Flash?

The secret is to actually transform the html into XML!  You can do this by removing everything above and below the body tags.  This is the Actionscript 3 function that I use to parse the html on the now showing page AFTER I have extracted everything between the html <body> tags.

/*
* DATE: 7/13/2009
* AUTHOR: Charles Palen
* NAME: parseForNowShowing
* DESCRIPTION: Call this to parse for the Now-Showing.html page.  Inserts all the parsed items into the array
* Now showing page has the following html format
*     <h2>March 12-14, 2010
Great Western Film Fest</h2>
<h3>Wrangler Hall
23 Fordham Street
Somewhere, Ohio 01772</h3>
<a href=”http://www.bostonproductions.com”>Visit website for more info</a>
*
*
*     <h2>October 25, 2009
7:30PM
WGBH – American Experience</h2>
<a href=”http://www.fileplanet.com”>Visit website for more info</a>
*
* May or may not contain a h3, h2, AND link
*/
private function parseForNowShowing(_InputString:String):void {
var convertedXML:XML = new XML(_InputString);

// These get used over and over as we parse
var MainHeadline:String;
var OptionalSubHeading:String;
var OptionalLink:String;
var OptionalLinkURL:String;

for each(var container:XML in convertedXML.div) {

// Blank everything for each round
MainHeadline = “”;
OptionalSubHeading = “”;
OptionalLink = “”;
OptionalLinkURL = “”;

for each(var heading:XML in container.h2) {
MainHeadline = heading.text()[0].split(”\r\n”).join(”\n”);
}

for each(var subHeading:XML in container.h3) {
OptionalSubHeading = subHeading.text()[0].split(”\r\n”).join(”\n”);
}

for each(var link:XML in container.a) {
OptionalLink = link.text()[0].split(”\r\n”).join(”\n”);
if (link.attribute(”href”) != “”) {

OptionalLinkURL = link.attribute(”href”);
}
}

var TmpTextField:TextField = new TextField();
TmpTextField.selectable = false;
TmpTextField.embedFonts = true;
TmpTextField.antiAliasType = AntiAliasType.ADVANCED;

var HeadlineFormat:TextFormat = new TextFormat();
HeadlineFormat.size = 12;
HeadlineFormat.bold = true;
HeadlineFormat.font = HeadingFont.fontName;
HeadlineFormat.color = 0xFFFFFF;

var SubHeadlineFormat:TextFormat = new TextFormat();
SubHeadlineFormat.size = 9;
SubHeadlineFormat.color = 0xFFFFFF;
SubHeadlineFormat.font = SubHeadingFont.fontName;

var OptionalLinkFormat:TextFormat = new TextFormat();
OptionalLinkFormat.size = 9;
OptionalLinkFormat.color = 0xFFFFFF;
OptionalLinkFormat.font = SubHeadingFont.fontName;

var currentSize:int = 0;

// Append and format the main headline
if(MainHeadline != “”) {
TmpTextField.appendText(MainHeadline);
TmpTextField.setTextFormat(HeadlineFormat, 0, TmpTextField.length);
}

// Append and format the Optiona SubHeading
if (OptionalSubHeading != “”) {
currentSize = TmpTextField.length;
TmpTextField.appendText(”\n” + OptionalSubHeading);
TmpTextField.setTextFormat(SubHeadlineFormat, currentSize, TmpTextField.length);
}

//Append and format the OptionalLink
if (OptionalLink != “”) {
currentSize = TmpTextField.length;
TmpTextField.appendText(”\n\n” + OptionalLink);
TmpTextField.setTextFormat(OptionalLinkFormat, currentSize, TmpTextField.length);
}

HoldingArray[0].push(TmpTextField);
HoldingArray[1].push(OptionalLinkURL);

// If the element had a link make it clickable
if (OptionalLinkURL != “”) {
addLinkClickListenerToItem();
}
/*
trace(”—– ROUND ————”);
trace(”Main HL:” + MainHeadline);
trace(”Optional HL:” + OptionalSubHeading);
trace(”Optional Link:” + OptionalLink);
trace(”Optional Link URL:” + OptionalLinkURL);
*/
}

// Parsing finished notify people data is ready
notifyDataIsReady();
}