Trainers Talk Tech

I love Flash. In my opinion, regardless of skill level, Flash CS4 is still the best overall development tool for eLearning. Yes, I am a fan of some of the eLearning suites, but for me, developing from a blank slate where anything is possible is a wonderful thing.

When I first started out, however, a blank slate was scary. I was clueless on where to begin let alone best practices. Coming from a web background, I knew how to design for the web, but to use Flash as the main development platform opened up a wide range of choices. Over the years, I've narrowed down my development methods to three option. Everything I currently design follows one of these three methods.

Method One: HTML Pages
For SCORM based projects and for very large projects, I use a simple strategy of creating Flash "pages", attach it to a single HTML page and then link all those "pages" together. This allows me to use HTML linking to move from page to page, and results in very small Flash files. A single "screen" or concept appears on each "page", and the user moves from HTML page to HTML page. The benefit to this method is that the file sizes are small and SCORM tracking can be easily implemented. The downside to this is that you have to be very creative when passing variables from HTML page to HTML page and that there are a TON of files to keep track of. Each "page" consists of a single HTML document and single .swf file. I would say 25% of my current development uses this methodology.

Method Two: One Large .SWF file
My most popular method is to create one large SWF file that has the entire eLearning program contained within it. I use each frame of the movie as a single "page", and use lots of embedded movie symbols on the timeline. Even though users are moving from frame to frame, using movie symbols allows me to cram lots of content onto each of those frames. The benefit is that it is really easy to edit and implement, but the .fla file gets huge if you have lots of media. Also, Flash CS4 chokes on embedded movie symbols (on my Mac only it seems...) I compensate for the larger .fla files by externally calling the video and audio files and keeping them out of the final .swf. SCORM can be a pain to implement (especially if you want to track each module as a separate SCO), but its possible with some hard work. About 70% of my eLearning is built using this method.

Method Three: One .SWF that Loads Additional .SWFs
I used to build the majority of my eLearning using this method, but AS3 has made the strategy code intensive. Rather than fight it, I've adopted my methods and learned some workarounds, but this is still a great methodology used by developers. Basically, a single .swf is loaded in a single HTML page. This single .swf file contains navigation elements and the basic interface for the eLearning project. At launch, the single .swf loads a second .swf file, displaying content and information. As the user clicks on different pages and modules, the second .swf file is replaced by new .swf files as the user navigates through the project. The benefits include smaller overall files, faster load time and sleek user experience. The down side is that this loading and unloading used to be easy in AS2, but is a chore in AS3. Also, similar to method one, you have lots and lots of .swf files to keep track of.

These are the methods I use every day to build my programs for my customers. I'm sure that there are others out there, and I'd be interested in hearing those! Let me know what you think!

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.