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!

Recently, several people have sent me emails asking how I've learned my web skills. I joke and talk about the painful process of trial and error, of late night hair pulling sessions and emails to online experts, begging for assistance. However, the reality is I am self taught - relying on books and projects to drive my learning.

I have never taken a single course on web design, graphic design or eLearning design. I probably could have been much better, much faster if I had, but the reality is that everything I've learned has come from a book or from a project. I never bothered to learn a technology until I accepted a project that required it. JavaScript, PHP, mySQL, SCORM, Flash and others were learned because I had received a contract to deliver a web application or site using these technologies and had to learn it or die trying!

I prefer to learn from books - nothing feels so good that to crack open a bound volume of knowledge and apply it. To me, its a rush to get a new book and then work through it.

Notice that I didn't say read it. I work through it. You don't learn web design or graphic design or eLearning design by reading a book. You need to use it as a workbook to push you into the learning and really DO the activities and projects in the book. In fact, when learning a technology, I seek out the books where the entire book is a series of activities and projects to learn.

So, what's my list? Here are my top publishers to whom I owe my success!

Friends of Ed
If you want to learn anything Adobe (in the past, Macromedia too!) you must, must, must visit the site and make a purchase. They are a small group out of the UK that publishes materials the way I like to learn - very project based. Flash, Dreamweaver, Fireworks, generic Web Design, CSS... all of it is there! Their Foundation series of books are phenomenal. I highly recommend these books and this publisher.

Peach Pit Press
After I've learned it, I need reference materials at the tips of my fingers. While Friends of Ed teaches me, the Peach Pit stuff gives me the instant info I need to solve a specific problem or find a solution for accomplishing a task. Their Visual Quickstart Guides are amazing. They provide you with the info you need very quickly. When you are armpit deep in the code and its 2:00 am, the Quickstart Guides come to the rescue. Think of a web technology, and they have a Quickstart Guide for it.

SitePoint
Lately, I've been reading a ton of books from SitePoint. While most of their materials cover specific web technologies, I've been finding gems in their theoretical books. Things like Freelancing, Web Marketing, Project Management and Principles books have all rounded out my rough edges - provided the missing practical knowledge I didn't have by not going to design school. You can review their site and see what kind of things they offer (lots of webby stuff!), but their books are short, fun to read and incredibly practical.

There you go! That's my list. Of course, I have benefited from Adobe Press, RapidIntake (when they were producing books) and the Missing Manual books, but the lion's share of my learning has come from my three favorites above.

I hope this helps you on your learning journey. Remember, good eLearning programming comes from a strong foundational knowledge of web technologies.

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!

This past week I finished up my last ASTD Essentials Webinar Series and again had a "virtual" room full of highly engaged, highly interested learners. It was interesting hearing from this group: they are all going to be the eLearning Obmudsmen I commented on in an earlier post. As I was going through the software examples and demos, I started getting some really good questions about process. I have a standard routine that I use when building my eLearning project from scratch, and I thought that it might be of benefit to my reading audience.

After meeting with a client and getting my first installment check (!), we start the following process:

1) Instructional Design Phase

Some of my clients have at least an outline of the content to the site, some have complete storyboards, but most are somewhere in between. Its my team's responsibility to take what they have and build out a storyboard for their review. We use a PPT based storyboard to document screens, activities and simulations in a way that makes it easy for the client to see how their program will function and flow.

Read more »

During my ASTD Essentials webinar series this past week, several people asked about the fundamentals of good eLearning design and where they could go to learn the basics of good eLearning design. I joked that I can teach you to mash buttons in Flash, Dreamweaver and Photoshop, but I can't teach you to have that "eye". However, there are some resources that can give you a jump start.

Technology for Trainers
by Thomas Toth (Me)
Yeah, I have to start with my book. Sorry about the shameless plug. It's really a great foundational book that's easy to read. It's only 182 pages and I have a whole chapter dedicated to the elements of a good interface. However, if you want to dive into a monster of a book, then:

Designing Web-Based Training: How to Teach Anyone Anything Anywhere Anytime
by William Horton
This is a monster book - 640 pages - but its really good stuff. This book has been called a good reference book, I find it chock full of ideas on developing good eLearning.

Multimedia Based Instructional Design
by William Lee and Diana Owens
While a bit dated (original printing was 2000, this is the 2004 update), this book provides you with the templates, storyboards and other paper-based tools to help you organize your multimedia and online learning elements. I used this quite a bit during my early years.

Anything by Michael Allen
Michael Allen is widely considered to be an eLearning guru. I find his books excite me and challenge the way I think. Although I challenge some of the things he says, suggests and does, I find that anyone who can make me think is someone I enjoy associating with.

There are also some very good books on web design in general, but from an eLearning perspective, these are good places to start!

Would anyone be interested in videos, tutorials or seminars on the elements of good eLearning design? I hope to put some of this stuff on myelearningguru.com (the stinky Joomla project...still in development...grr...), but what about synchronous sessions? Maybe an online class or two? Let me know if you would be interested in something like this. Post a comment or contact me directly!

Now, go build something cool!