Trainers Talk Tech

One of the most important elements to include in any eLearning project is a way to display current page numbers and total page numbers for your learners. Adults like finish lines, and there is something comforting about knowing how many pages you will need to work through when taking eLearning, as well as knowing where you are inside the eLearning program: "Page 10 of 100" feels different than "Page 98 of 100".

I used to do it all with regular old text fields in Flash, but with ActionScript 3.0, there are some calls you can make to identify where the user is at on the time-line. Combine this with a design methodology and a couple dynamic text boxes and you can create something that is quickly customized and scalable.

First, from a methodology perspective, you need to decide that each single frame of your Flash movie will be a single page in your eLearning project. You can have content and interactive media built into Movie Symbols, so you don't have to feel tied down to the single frame, but choosing to utilize the embedded symbols onto a single frame can help you better organize your overall project. This, by the way, is my preferred style of programming - a 30 frame eLearning project feels like 30 "screens" to the end user. Even though there is a ton of content dropped into Movie Symbols on each frame, this method works best for me and my development methodology.

Second, you need to add the ActionScript necessary to identify frame location. The ActionScript:

currentFrame

identifies where the user is on the time-line, while the ActionScript:

totalFrames

looks at the total number of frames in the movie.

Applying the code takes a bit of a twist, but once you think through it, its easy - when the user moves to a new frame (ala Next or Back button), then refresh the page counter and re-populate the current frame.

I create my page counter on a single layer with a Back button, Dynamic Text field (current frame), Dynamic Text field (total frames) and then a Next button.

I start with setting up the variable names like so:

var frames:Number;
var totals:Number;
frames=currentFrame;
totals=totalFrames;

This sets up the variables and then pulls the data from currentFrame and totalFrames into those variables.

Then, I have to set up my Dynamic Text variables:

myLocation.text=(String(frames));
myTotalPages.text=(String(totals));

I have two Dynamic Text fields named myLocation and myTotalPages. Variables called as numbers do not display in Dynamic Text fields, so I have to convert them to text by re-categorizing them as Strings. I know...silly step, but it is the only way to take the number variables and display them as text.

Then, I add the code for my Back and Next button listeners:

next_but.addEventListener(MouseEvent.CLICK, goNext);
back_but.addEventListener(MouseEvent.CLICK, goBack);

And then the functions for the Back and Next buttons:

function goNext(event:MouseEvent):void {
	nextFrame();
	frames=currentFrame;
	myLocation.text=(String(frames));
	
	
}
function goBack(event:MouseEvent):void {
	prevFrame();
	frames=currentFrame;
	myLocation.text=(String(frames));
}

Notice I use nextFrame() and prevFrame() to move the user back and forth. Also, I recall the

currentFrame

variable and then re-populate the Dynamic Text box with that updated data.

The

myTotalPages

doesn't update, as the user cannot control how many pages are in the total project, but if you, as the developer, want to add more frames, you don't need to reprogram the page counter. Some designers manually put the total number of pages in as a generic Text box, but adding and removing frames means you would need to change that number on each page. Using

currentFrame 

allows it to be dynamically generated at run time, regardless of the total size of the project.

I'm sorry I've been away for so long...traveling around the United States teaching and speaking keeps me busy, but I hope this entry is helpful to you.

If you want to see this in action, fully functional, download the Flash CS4 .swf and .fla file here!