Trainers Talk Tech

I have finally lost my battle with a client and am conforming to their request: "I want the text content to be stored in an external .xml file so we can edit easily."

I'm happy for the many tutorials out on the web that helped me to learn this stuff, but I was surprised that I didn't find a single one that did EXACTLY what I wanted. So, I banged it out and am sharing it so you can shorten your development cycle.

Goal: From an external XML file, load a page header and content into two separate dynamic boxes, and then have those boxes update as you move from page to page.

Sounds easy right? Here is what I did to create and test my solution.

1) I created a Flash CS4/AS 3.0 document with four layers: Actions, Buttons, Dynamic Text and Background
2) On the background layer, I created a color gradient background
3) On the buttons layer, I created a simple back and next button
4) On the Dynamic Text layer, I created two dynamic text boxes. I called the smaller one at the top titleText and the larger one for the content descText.

Ok...pretty straight forward.

I then created my button listeners for the back and next buttons and put this code on the Actions layer:

nextBut.addEventListener(MouseEvent.CLICK, goNext);
backBut.addEventListener(MouseEvent.CLICK, goBack);

function goNext(event:MouseEvent):void {
nextFrame();
}

function goBack(event:MouseEvent):void {
prevFrame();
}

From there, I wrote some sample XML and called it "course.xml":


<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<pages>
<page pTitle="Welcome">Welcome to dynamically loaded text.</page>
<page pTitle="How to Do It">Here is how it works.</page>
<page pTitle="Simple">Once you have it figured out, its easy.</page>
<page pTitle="Final Page">No really...its pretty easy</page>
</pages>


This is a simple set of four pages. In each page tag, I included an attribute called "pTitle" which is the page title. The content is between the page tags. So, page 1 is "Welcome" with the content "Welcome to dynamically loaded text".

Now, here is the AS 3.0 to load and parse the XML.

var myXML:XML = new XML();
var XMLURL:String = "course.xml";
var myXMLURL:URLRequest = new URLRequest(XMLURL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);

function xmlLoaded(event:Event):void
{
myXML = XML(event.target.data);
titleText.text=myXML.page[0].@pTitle;
descText.text=myXML.page[0];
}

The first line sets up a variable container for the XML file. The second line sets up the call to the .xml path. The third and forth line loads the XML and the fifth line waits for it to load. When it does, it loads the XML content into the variable myXML.

The next two lines of the function pick out the individual XML elements we want to use. In this case. the text field titleText gets the XML field page's first child's pTitle variable, and the descText gets the XML field page's first content.

But WAIT! Why are we calling string [0] instead of string [1]? Well, XML starts it count from 0...nuff said. When you want page 3's content, you look at the XML child[2]. Don't let it mess with you like it did with me...Accept it and move quietly on...

Now, if you want to add more pages, you add more frames. If you want to load the newer content into the subsequent text fields, you use the following code:

titleText.text=myXML.page[1].@pTitle;
descText.text=myXML.page[1];


on the Actions layer of frame/page 2...


titleText.text=myXML.page[2].@pTitle;
descText.text=myXML.page[2];


on page 3 and so on...

What happens is this...as the user advances to the next frame, the text box content changes to the new XML content. You have to change the string attribute, but as long as you do, the correct content will display.

And, if you want to digest this in some working files, all the code and .fla are available here. This zip file includes the final .fla, .swf and the .xml file.

I hope this saves you time as you develop your own XML driven eLearning projects.