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.

One of the most frustrating things for me to learn in AS 3.0 was being able to find my movie clips in the code. I usually work on a single Flash timeline with lots of nested movie clips that make up my elearning: Frame 1 has an intro movie clip, Frame 2 introduces the course, etc.

My frustration with AS3.0 is that I couldn't figure out how to control my main movie from within my nested movie symbol. For example, in Frame 1, my intro movie plays, and then ends on a screen that explains the learning objectives. There is a big "Start the Training" button, and when the user clicks on it, the ROOT of the Flash movie advances to frame 2, where a new movie symbol plays.

Not that hard right? Old ActionScript code:

_root.play();

Not any more. I'm stubborn...I want AS 3.0 to work like AS 2.0. Suck it up buttercup, it won't. The reality is AS 3.0 doesn't see the "stage" or even the "timeline", relative to the objects. Think of it this way...in AS 1.0 and 2.0, objects added to your movie existed on the timeline, and Flash knew where they were at based on where on the timeline you placed them. They were "happyBall instance on frame 1 of the main timeline(root)."

In AS 3.0, movie clips just "are". Very zen like, I know, but in AS 3.0, they are defined as themselves. It doesn't matter where they are on the timeline - their identity is not connected to where they are placed. So, trying to add "root" to an AS 3.0 object is like trying to tell a book to go back to the printing press where it was created. Can't do it on its own - it has no awareness of its location.

After searching around the web, and finding a ton of different solutions (some of which seemed overly complicated, especially the ones that said to replace

_root

with just

root

...doesn't work...nice try), the kind developers at Yahoo found a working solution. It goes back to the day when you were able to identify anything based on its location, relative to the root. The code looks like this:

MovieClip(this.root)

So, in our example, in the movie clip, we have a button that advances to the next frame of the main timeline. There is a movie with some text and a button (named clickMe) in it. In the Movie clip, you would add this code:

clickMe.addEventListener(MouseEvent.CLICK, goClickMe);

function goClickMe(event:MouseEvent):void {
	MovieClip(this.root).play();
}

You can control the main timeline from within movie clips using that bit of code.

I hope this helps you as much as it helped me. Maybe its no longer a best practice to embed ActionScript in movies that control other things besides that movie symbol, but for a guy like me that wants to move from AS 2.0 to 3.0 quickly, I'm going to hang my hat on these little tricks to help me rapidly develop my projects.

Oh...and if you want to download a sample to see this in action click here. Its a Flash CS4/AS 3.0 file that shows you the controls I'm talking about.

This tutorial was my presentation at the ASTD TK 08 show in San Antonio Texas. While running the creation stations at this year's conference, many people asked me about the materials I used for last year's session. Yes, the main interface is CS3, not the current CS4, but ActionScript hasn't changed. Therefore, this manual can be very helpful if you are making the bridge to AS 3.0 from AS 2.0, or you want to just get started with AS 3.0.

Foundational ActionScript 3.0 with Flash CS3 for the Online Learning Developer
ASTD TK 2008

Module 1: Communicating with ActionScript
Module 2: Using and Writing Functions
Module 3: Basic Interactivity
Module 4: Decision Making
Module 5: Text and Text Fields
Module 6: Video and Audio
Module 7: Creating Online Learning

In Module 7, I have created two (2) sample AS 3.0 eLearning interfaces that can be used to easily drop in content. The first one (Template 001) is a single .swf file and it is a time-line based, "menu on the left" driven course. It is a single file which is quick and easy to use. Functions included in interface 001:

• Clicking on a button and going to a URL
• Clicking on a button and going to the next frame
• Clicking on a button and going to a previous frame
• Dynamically pulling data about frame position and total frame numbers
• A movie clip code changing properties of the parent movie

The .fla and .swf code is in the module 7/template001 directory.

The second interface is a bit more advanced. It consists of a single .swf file containing the menu and interface elements. However, when the user clicks on the menu, it dynamically loads the new module .swf files into itself. I used to use this technique in AS 2.0 all the time:

loadMovieNum

It was my favorite function!

Unfortunately, they killed it in AS 3.0. This template contains the code for building eLearning using AS 3.0 that mirrors the functionality I used to enjoy in AS 2.0. Functions included in Interface 002:

• Clicking on a button and going to a URL
• Clicking on a button and going to the next frame
• Clicking on a button and going to a previous frame
• Dynamically pulling data about frame position and total frame numbers
• Dynamically loading new .swf files into the main file
• Independent controls existing inside of a loaded .swf
• A movie clip code changing properties of the parent movie

The .fla and .swf code for the start page and all the additional pages is in the module 7/template002 directory.

This course took a lot of time and work to complete. I offer you these two templates so that they can potentially shave a ton of time off of your eLearning development, or provide you with code snippets to use in your own projects. Please feel free to download and use as you see fit.

However I ask you:

1. Please don't mass distribute in your office - don't make a ton of copies and give them to all your friends
2. Please don't use it to teach a class - don't download it and then use it as your own course materials
3. Please don't use download it and then distribute it off of your web site
4. If you found it useful and it saved you time, please add a comment to this page - it helps my SEO
5. If this was crazy helpful and it saved your bacon at 3:00 am, please consider a donation. It encourages me to continue posting these types of tutorials and helpful files, as well as creating new ones for your use as an eLearning developer

Thanks and enjoy the tutorial! And if you donate, thank you very much for the contribution!

Download the file - 23 MB zip file