Trainers Talk Tech

On July 11th, 2007 the term Crapid eLearning was introduced by Tom Kuhlmann from Articulate. He introduced the term in his blog post Myth 1: Rapid eLearning is Crapid eLearning. I love this article because it defends the tools and attacks the design. This is one my Thomas mantras - focus on the LEARNING part of eLearning. It also gave me a great new word I could use in casual conversations with my team!

For me, Crapid also means visually barren. Sure, you can have a great eLearning design doc, great objectives and some cool interactions and simulations, but if it looks unprofessional or amateurish, then you have some usability issues to overcome. Now, there are lots of folks who may disagree with me, but out of the box templates, buttons, ready made flash "interactions" all fall short of what a professional graphic designer can create. They may help you quickly put together a program, but the user may view the content in a bad light if the interface and visuals are shoddy. They may have a hard time seeing the diamond in the rough. Visuals must be stimulating and professional looking until they fade into the background and the content takes over. Think of it as a first impression - it takes a long time to get past a bad first impression, just like it may take a user a while to get past an ugly, awkward interface.

I've created Crapid eLearning. I've also created bad eLearning projects. Because clients want what they want and paid me to deliver it. I've worked hard to talk people out of design decisions or instructional choices that I didn't agree with, but because they are the client, I build it to match THEIR vision, not mine. I've also done Crapid work because the client just wanted to check a box and push the project off their to-do list.

In this blog, a little more than a year ago, I predicted an eLearning regression and others agreed with me. Now, a year later, using my own observations and interviews with participants at the ASTD TK 10, my clients and others in the industry, I believe it came to pass. eLearning software development companies are selling the heck out their software and upgrades are popping out like crazy. Instructional designers who don't know a thing about graphic design or coding are whipping out SCORM compliant programs with ease. Template sites and pre-coded sample bundles are popping up (yes...mine are coming too) on the web and people are buying them like beanie babies. It's now easier than ever before to develop eLearning and non-tech, non-graphic and non-programmers are doing it using these tools.

Now...here's my ethical dilemma. I've had it before in June of 09, but its back with a vengeance. At that time, I called it "Should I advertise the tools" and I was wondering if I should advertise that I develop in Lectora, Captivate and others. I received lots of interesting feedback on that one, and today I have the answer.

Yes. I should. And here's why: My clients now own them. My clients like them. It provides me with an edge. I can now offer high-end completely custom, partial custom or templated eLearning.

Just this week, I have two clients with real money who want me to develop within Captivate and within Unison.

My ethical dilemma: I don't want to develop Crapid eLearning because I will be using these tools. I have to convince my clients to create custom Flash elements they can drop into these tools. They have to allow me to take the time to create unique templates and interfaces and buttons and other elements to make it look custom even though its using an eLearning tool. In Captivate, I can be extremely creative with the tool. In Unison, I can, but I have to do some serious code cracking to bring it up to my level of what a "professional" eLearning program looks like. I need to take these tools to new levels. I need to push the envelope regarding software capabilities and be creative within the limitations of the tools so that I don't just quickly schlop the project together.

Or, I could just develop Crapid.

The opposite of professional eLearning is Crapid eLearning. However, as you read this, you or your company may have these tools installed. They may be installed on the very machines you are using to read this blog. My challenge to you is this: Follow my lead and don't create Crapid. Look at the work you admire and instead of saying "I could never do that with my tool" or "You have to be a good graphic person to do that" or "I can only do that with Flash" go out and LEARN to do those things. Take it to the next level. Don't settle on mediocre or Crapid. Maximize what you know about the tool. Call the software developers and get into the weeds to bend the software to YOUR will. Buy a good book on graphic design like The Non-Designer's Design Book or Graphic Design School so you can learn what makes graphics, fonts, colors and other elements look nice on the screen.

Even though I am now adding these tools to my professional designers toolbox (and kind of feel like a sell out), I am going to keep my head high and not lower my standards. I don't want to ever turn down business, but I don't want to damage my reputation as a designer by producing Crapid. I'll post samples to this blog as I develop so you can tell me if you think they are awesome or if I fell into the Crapid crack.

I was doing some work for a client and had to load in some .swf files generated by a 3rd party program. I admit it - I LOVE text effects. I like fades, but when the text can bounce or flip or swirl in, sometimes it adds a bit of snazz to the eLearning project. As long as you don't overdo it, I think the learner's get a kick out of the occasional bits of visual eye candy.

On my Mac, I use a program called Text-Osterone, from a company called Vertical Moon. The software allows you to create a bunch of editable special effects you can apply to text. The current version only seems to export to an AS 2.0 version .fla, so I export the file to a .swf and then dynamically load it in. (I am working ever so hard to leave AS 2.0 behind me...)

Of course, in AS 3.0, it requires a bunch of code lines to load the external .swf, but my solution below pares it down to the bare basics.

First, make sure the .swf you want to load is in the same directory as the .swf loading it. You can play with paths if you like, but for this code, just keep the whole shebang together.

When you want to load the .swf, add a key frame and then add the following code:

var swfRequest:URLRequest = new URLRequest("connect.swf");
var swfLoader:Loader = new Loader(); 

The first line sets up a variable called swfRequest and it points to the .swf you want to load. In my example, the .swf I want to load is called "connect.swf". The second line preps a variable called swfLoader to...well...initiate a load...(insert random inappropriate comment here)...

Next lines:

swfLoader.load(swfRequest);
addChild(swfLoader); 

This next line loads the connect.swf into the variable swfLoader. The addChild line plops the .swf onto the stage. That's it. Sure, its a lot more work than the old LoadMovie(); AS 2.0 command, but it does the job.

Now, if you want to place the .swf in a particular location on the stage, you can manipulate it's coordinates once its been loaded into your main .swf.

swfLoader.x=10;
swfLoader.y=120;

This sets the X and Y placement of the .swf after its been loaded in. Of course, you can place it wherever you want. Remember, that the X and Y coordinates are relative to the main timeline (if this is where you dropped this code) or relative to the coordinates INSIDE a movie symbol (if you drop this code into a movie symbol.) The final code looks like this (with comments added):

// Load the SWF into the Variable swfRequest
var swfRequest:URLRequest = new URLRequest("connect.swf");
var swfLoader:Loader = new Loader();

// Bring the SWF into the SWF
swfLoader.load(swfRequest);
addChild(swfLoader);

//Position the SWF
swfLoader.x=10;
swfLoader.y=120;

There are some other tutorials online, but I am a big fan of keeping things simple. If you need to load a .swf and position it on the stage, this ActionScript 3.0 code sample will work every time. Have fun!

There have been reports leaking to the web that hint of an April release date for the Adobe CS5 suite of software. Although Adobe goes out of their way to keep these release dates a secret, reports keep coming out. I'm keeping my fingers crossed. I've had lots of buggy situations with Flash CS4 and with Dreamweaver CS4 on my Mac, so I'm hoping that in addition to those new features which are coming, Adobe has taken the time to clean up the code a bit.

And, because I cannot wait, here are some CS5 Videos and a dedicated CS5 website that should keep you enticed:

Flash CS5 : Export to iPhone
Flash CS5 : New Features

Photoshop CS5 : Sneak Peek
Photoshop CS5 : Patch Match
Photoshop CS5 : Spot Healing

GREAT CS5 Site: http://cs5.org/

It's that time of the year again, when Vegas calls the educational technologists out from their dark work rooms, and when instructional designers and facilitators alike decide to figure out this eLearning stuff and come out to Las Vegas for the ASTD TechKnowledge Conference.

This is going to be another great year with ASTD, and I wanted to let everyone know that I will be presenting three separate sessions regarding Flash CS4.

I'll be presenting a "Getting Started with Flash" pre-conference session on 1/26/10! Its a fun primer to get you up and running using Flash, but is targeted towards the eLearning professional. It's for the new learners, but will be a full day of Flash related fun. (Can you say "Flash Related Fun" ten times fast?)

Also, I will have two Creation Stations on Flash called "Flash Animation: Basics of Making Things Move" on Wednesday the 27th and Friday the 29th of January. This is a 90 minute hands-on session where you will learn the basics of symbols and tweening in Flash CS4. Yes, it's pretty basic, but will be a blast, especially if you are brand new to Flash CS4.

I'll be blogging and podcasting from the General Sessions and sometimes from the concurrent sessions I'll be attending.

I am coming into Vegas on Monday night and leaving on Friday afternoon, and I am usually walking the floor or expo when I'm not in session. Feel free to say "hello" if you see me wandering around! Also, I will be attending the "Meet to Eat"sessions in the evenings, so if you want to connect with me ~ I'd love to talk tech!

Just an FYI...I lost about four hours development time today because Flash CS4 continually crashed after a 2 second live time. Yep...open a file and then 2 seconds later it would close down.

Here were my steps to resolve it on my Mac with OS X:

1) Repair Disk Permissions
2) Reset preferences
3) Reset user settings
4) Uninstall and then reinstall

None of this worked.

5) 45 minutes on hold with tech support who directed me to a web page, FOUR TIMES, that resulted in a 404 error each time.

Finally, the solution that worked is to

6) Turn off all my fonts. Yep, turn all of them off in Font Book, and then turn them back on as the system calls for them, or as Flash needs them.

Turn off my fonts!!! Since when do fonts cause an expensive and complex program like Flash to crash. Whatever.

It's easy to turn off fonts in Font Book (right mouse click on Computer and choose Disable Fonts) and the Mac asks permission to turn them on as you need them, but here's the kicker.

It worked fine last night. Today, I didn't install any fonts, I just opened Flash files and wanted to work. What mystical creature got into my Mac last night and played with font settings?

I don't know, but man, I hope this saves you a call to Adobe tech support...Adobe, I love ya, but please get me a stable version of Flash.

I wanted to announce that I just installed the Flash 10.0.2 update for Flash CS4 and my bugs are fixed! I have been crabbing about it for months, and after downloading the patch, all the slowdowns, errors, font issues and interface bugs are no longer there!

Thank you Adobe for letting me fall in love with Flash again. Maybe now I can uninstall Flash CS3...

Download the patch here: http://www.adobe.com/support/flash/downloads.html

I am finishing up a series of web based eLearning projects where video segments play a major role in the delivery of the content. My client did not invest in a super expensive video camera, lights or sound system, but the video elements look good and the content more than makes up for the lower production quality. The challenge has been that each elearning project uses 6-8 video segments and I received 30 .MOD files all at the same time. How can I rapidly develop this eLearning with so much video to edit?

The .MOD files are the pure video files that get downloaded from the video camera's hard drive to your local computer. They are huge based on the amount of video recorded. My workflow for the conversion process is this:

1) Convert the MOD to MOV
2) Put into iMovie to edit out start and end content, and add fade to black at the start and finish
3) Convert the MOV to FLV

On my Mac, I convert the .MOD file to the .MOV file using an incredible piece of freeware software called FFMPEGX. It does a great job of converting the files and has a huge set of preset conversion settings. It reads a ton of formats and exports to a ton of formats. Its truly amazing bit of software for the Mac.

Why convert the .MOD to .MOV? Because I want to do some quick and dirty video editing and on my Mac, iMovie won't bring in the .MOD files. If I had the camera, I could download direct, but I don't so I have to convert. Also, the .MOD to .MOV conversion takes the file size down by 50%! A 30MB .MOD file is a 14MB .MOV file. For web distribution, the smaller the better.

In iMovie, I upload all my .MOV files and then do the simple cuts and video fades. iMovie is great - it allows me to tweak color, brightness and other simple settings without cracking open the serious video editors. When I am done, I export out of iMovie using Quicktime and reduce the overall screen pixel size. My client sends me large video segments and I have to reduce them down to a more web friendly size. Doing it out of iMovie using Quicktime allows me to have yet another file size reduction. The 14MB video file is only 4.8MB now!

Then, I open up Quicktime Pro on its own to convert to .FLV. For some reason, a straight export to .FLV out of iMovie doesn't work for me, so I open up Quicktime directly to convert to the Flash video file. Converting from the .MOV to the .FLV is also yet a fourth reduction in overall file size. The 4.8MB .MOV file is now a 3.1MB Flash video file. WOW! From 30MB .MOD to 3.1MB .FLV in about 20 minutes.

Why don't I use the Adobe FLV Video Converter instead of Quicktime Pro? For me and my system, it takes twice as long to convert using the Adobe product than Quicktime Pro. When I am on a deadline, an extra 5 minutes per conversion can save me hours. As someone who stays up until the job is done, that can mean the difference between going to bed at 11 and going to be at 2:00 am!

This video process is quick and dirty and inexpensive. This "mini studio" I have on my Mac costs less than $150. iMovie comes with my iLife on my Mac, but I upgraded to iLife for $79, Quicktime Pro is $29.99 and FFMPEGX is FREE! That's a ton of video editing power for a little bit of money. Does it look professional? You bet! Is it the best solution for all situations? Nope. For longer video segments (these project segments are 2-3 min in length) then the big boy applications will be the ticket. But, for these quick video jobs, the "mini studio" is all I need.

In the past week, I've received three emails regarding linking to MS Word Docs and PDF files from within a Flash movie. It's relatively easy, but the differences between doing it in ActionScript 2.0 and 3.0 are significant.

In ActionScript 2.0

In ActionScript 2.0, linking to a file uses the

getURL

function. Now, normally you'd use the

getURL

to launch a web page or open a new browser window by attaching the following code to a button symbol:

on (release){
    getURL("http://www.thomastalkstech.com");
}

This tells Flash that when the user has clicked on and released the mouse button, launch the web site in the same browser window. If you wanted to open it in a new window, you would need to append the command like so:

on (release){
    getURL("http://www.thomastalkstech.com","_blank");
}

The addition of the target variable (_blank) tells the browser to open in a new window.

Because the .swf sits in an HTML file, it thinks its part of a web site. Regardless of whether or not you have the files sitting on a web server, when you launch the .swf it runs in the browser. This means that the files that sit in the same directory as the .swf are accessible using the

getURL

function.

So, if you had a .pdf file on the web server and you wanted to link to it from your Flash movie, you would use this code:

on (release){
    getURL("myCoolFile.pdf","_blank");
}

and Flash would link to the PDF from within the Flash movie. Absolute and relative pathing work as well, so if you had stored the .pdf file in a directory called /pdf, you could use this code:

on (release){
    getURL("/pdf/myCoolFile.pdf","_blank");
}

IMPORTANT NOTE: The pathing in the Flash file needs to be from the HTML file holding the .swf file. It gets confusing and frustrating, but if you path the ActionScript from the HTML file holding the .swf, it will find the document without a problem. It used to kill me because sometimes I'd path from the .swf, then move the .swf to a new directory and it would mess up my links. If you use root relative pathing it won't be an issue, but if you use relative pathing, be sure to path from the HTML file holding the Flash.

You can link to any file using the getURL code outlined above.

In ActionScript 3.0

Of course, in AS3 they had to go out of their way to make it more difficult...instead of three lines, its now seven lines of code. Again, not difficult, but more details need to be added to launch the URL.

First, create a new variable for the URL. We are calling the variable 'request'.

var request:URLRequest = new URLRequest("http://www.dwebstudios.com");

Then, create a button instance and call it whatever you'd like. In the example below, the button's name is called myButton. You are going to create the function call for myButton using EventListener.

myButton.addEventListener(MouseEvent.CLICK, goWeb);

So, we've created the listener to launch the function goWeb, so we create that next:

function goWeb(event:MouseEvent):void {
     navigateToURL(request, "_blank");
}

So, the entire code block is:

var request:URLRequest = new URLRequest("http://www.dwebstudios.com");

myButton.addEventListener(MouseEvent.CLICK, goWeb);

function goWeb(event:MouseEvent):void {
     navigateToURL(request, "_blank");
}

To link to a document, replace the variable in the URLRequest object with your .pdf name or file name and it will launch as expeted. The same rules apply for the target string and pathing as in AS2, but the entire code block is longer and more dramatic.

var request:URLRequest = new URLRequest("myCoolFile.pdf");

myButton.addEventListener(MouseEvent.CLICK, goPDF);

function goPDF(event:MouseEvent):void {
     navigateToURL(request, "_blank");
}

So that's it! I hope this helps!

P.S. If you want to link to an email address you use the same code as above in AS 2 and 3 but you replace the object with 'mailto:yourMail@yourEmail.com'.

AS 2

on (release){
    getURL("mailto:yourMail@yourEmail.com");
}

AS 3

var mail:URLRequest = new URLRequest("mailto:yourMail@yourEmail.com");

myButton.addEventListener(MouseEvent.CLICK, goMail);

function goMail(event:MouseEvent):void {
     navigateToURL(mail);
}

As I've spoken about in the past, almost all of my eLearning is programmed by hand using the Adobe suite of products and creating interfaces, buttons and eLearning elements from scratch.

As I get ready to roll out my new business venture (Catapult Training Group...YAY), I'm debating about whether I should advertise on the new web site and in my promotional materials that I use/have used/can use the off the shelf eLearning development tools like Unison, Lectora, Articulate and Captivate. As an eLearning developer, I've always prided myself on the fact that I write from the source and do not use these tools when developing. Several of my clients have asked me to use these tools and help them to learn these tools, however should I be advertising that these tools are within my capability?

Does it diminish my reputation as a developer to talk about my company using these tools? Even though most of these tools are great, they have serious limitations when it comes to high degrees of complex interactivity. I feel that I shouldn't want it featured that I sometimes use them on behalf of clients...am I right to feel that way?

On the other side of the coin, some of my current clients are using them and I've been able to offer my assistance to those folks and make a little money to boot. In fact, one of my clients ONLY uses these tools and has required me to design within the confines of these applications. Is that a value to other companies? Should I advertise it?

I'm seriously interested in knowing your opinion! Please comment or shoot me an email to let me know your opinion. Thank you in advance!

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.

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 »

I've been working with some print designers on making the transition from print to web media. I realized that many instructional designers may be facing the same situation, so I thought I should post about the differences between designing for print display and designing for web display.

The main difference between the two media is the way in which size and dimensions are measured. For print, the units of measurement is points and inches - on the web, its all about the pixels.

For your print work, you measure out your page size (8.5" X 11") and you know that a 4.25" image will take up half the page width and display at exactly 4.25" wide. On the web, you don't have that level of control. You have to set your picture to display at a certain size (400 pixels wide), but that's about all the control you have about the way it displays.

Let me talk a little bit about pixels for a second... A pixel is a single square of color, arranged on a grid - it is the smallest unit of measurement on a computer screen. The challenge we face as designers is that that the actual "unit of measurement" changes size based on the computer screen used to display the image.

Your typical computer laptop displays at 1280X1024. Do you ever wonder what that means? That means that there are 1280 pixels going lengthwise on your laptop screen, and 1024 pixels going along the height of the screen.

You probably know that the higher "resolution" is better, but all you are doing when you increase resolution is increase the number of pixels that are crammed onto the screen, resulting in smaller graphic files and smaller text and icons. Also, you may experience a distortion of your images on monitors that are working hard to display at a higher or lower resolution than "native" because it has to compensate for resizing the pixels.

An image that is 400 pixels wide will take up half the screen size on a monitor set to 800X600. An image that is 400 pixels wide will take a little more than a third when displaying on a monitor at 1024X768. The same image file will display differently depending on the computer screen that displays it.

That can be very frustrating to designers used to the concrete measurements of print. It is almost impossible to set a screen layout to display "a 1 inch border around the outside of the main content on the page." Instead, its possible to say display "a 100 pixel border around the outside of the main content on the page." That can be set easily, but know that depending on the user's machine and resolution settings, those 100 pixels will take up a lot of space, or just a little.

If you are a print designer, getting used to the abstract medium of pixels over exact measurements can take a bit of time. Know that getting it to look perfect on your screen can create a mash up of ugliness on a different screen. Experiment with different resolutions to ensure your final product looks close to your final vision.

Of course, users can change their browser settings to display different font types, turn off images and flash objects and disable link functions when surfing into your pages, but that's a topic for another time!

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.

I have to admit I'm a bit saddened by the face that I could not find a single WYSIWYG HTML writing software that works in the cloud. Maybe the requirements are too high for an online app...I don't know. However I did find some tiny footprint programs that can be downloaded from the web and installed on the Netbook. If you don't want to have the power of Dreamweaver installed on your Netbook (or the amount of space this application takes up - 500MB and counting), here are some software recommendations for you.

KompoZer
KompoZer is a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing. KompoZer is designed to be extremely easy to use, making it ideal for non-technical computer users who want to create an attractive, professional-looking web site without needing to know HTML or web coding.

KompoZer has both a WYSIWYG mode AND a coding mode, just like the big guys. It has a Site Manager function with built in FTP, and is available for PC, Mac and Linux machines. The best part is that KompoZer has a tiny download size (7.6 MB for Windows, 11.0 MB for Mac and 10.3 MB for Linux) - perfect for the Netbook!

SeaMonkey
SeaMonkey calls itself a "suite" of software packages built on the Mozilla source code. It contains a browser, email client, newsgroup client, HTML editor, IRC chat and web development tools. All I'm concerned about it whether or not it can write code in both a WYSIWYG format and code view. Composer is the name of the application included in the SeaMonkey application. It can do both, but they are not very robust. While utilizing a "tab" approach, the application does its job and nothing more. Many of the color cues in the code and basic features aren't there. It lets you write code and then preview it. Not bad, but just not interesting. It's just the basics.

SeaMonkey is larger than KompoZer (13MB for Windows, 23MB for Mac and 14MB for Linux) but contains all the applications in one download. Installation was easy. Check it out! At least the price is right!

Bluefish
The last one I want to bring to your attention is Bluefish. Although it is not a WYSIWYG writer (they call it a What You See is What You Need (WYSIWYN) interface!!!!!), it is an amazingly powerful text editor. If you started by writing your own code by hand, then this application will bring you back to those days. It's not only for writing web page code, but can also handle other programming languages as well. As a web guy, I appreciate the table and frame wizards and lots of tool-bars created especially for me. I loved this tool, but it can be intimidating for people who don't want to know code. I thought I would include it here for powerusers who may be thinking about a Netbook.

In my quest to find good Netbook software that runs in the "cloud" a friend told me about two sites that replace Captivate. Yes, the screen capture software, allowing you to record content on your computer screen. I am experimenting with this software now and cannot wait to report on it.

The first is called Screencast-o-matic.
http://www.screencast-o-matic.com/
From their home page: "Screencast-O-Matic is the free and easy way to create a video recording of your screen (aka screencast) and upload it for free hosting all from your browser with no install!" It looks like it needs Java, and seemed to work fine on my Mac using Firefox.

The second is called Jing
http://www.jingproject.com/
From their home page: "Jing is free software that adds visuals to your online conversations. Instead of typing a people, show them what you are talking about...pronto." Looks like it does screen capture in addition to "screencasting" and sharing of your video. Jing works on both Mac's and PCs.

Looks like this software may be a good alternative for Captivate, Camtasia or Snagit! Try these and tell me about your experiences or post a comment!

Special thank you to Ginger for sending these my way! You are a rock star!

Still looking for HTML writing software in the "cloud"...

I was reading this article in Wired Magazine The Netbook Effect: How Cheap Little Laptops Hit the Big Time and started to think about all the traveling I am going to do over the summer. I'm not concerned about being able to work from a hotel room, as I've outfit my MacBook Pro with a fully licensed version of the Adobe CS4 suite. Yes, its expensive to have such a nice laptop AND such nice software just to work remotely, and the idea of a Netbook and that article got me thinking about the potential of taking my online learning development completely, well, online. Through a browser. With NO installed software. Could it be done?

And so begins my quest...over the next few days, I'm going to attempt to find online software solutions that do everything I need to build eLearning programs so I can buy a Netbook and just go. Here is the types of software I will need to find:

• WYSIWYG HTML Editor: I use Dreamweaver in split view: code and design view. Is there browser based software that will allow me to create web pages?
• Graphic Editor: I use Photoshop to create graphics. The article refers to FotoFlexer as a browser based Photoshop alternative. I'll try it out and let you know this week.
• Animation Editor: As I've said in the past, Flash is my primary creator of content for my eLearning clients. Is there something out there that's browser based that will allow me to create Flash like interfaces, interactions and programs? I'm doubtful that any web based app will allow me to create like I do in Flash, but let's see what I can find!
• Content: My clients and I use Pages, Keynote, PowerPoint and Word to create our static content. I lift the content out of these pages and paste into Dreamweaver or Flash. Google Docs is out there as a browser based alternative, but I haven't tried it...I will and tell you how it goes.

That's the major functionality I will be looking for in online applications. I want to get a Netbook purely because its new and cool (and I have a problem with wanted all the tech I can get my hands on), but if I can validate it by finding these online solutions, well, then its a purchase worth making! I know...who am I kidding...

I'll keep you posted all week with what I find.

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

In fairness to some other good vendors, and because I covered some big tools a couple days ago, I wanted to point out a few other good eLearning development tools that people are buzzing about. Again, I prefer to build everything from scratch using the Adobe tools, but I am aware that there are people who don't want to dive that deep into the development red tape. I completely respect that and, considering I talked about Lectora, Captivate and Articulate, I thought I would throw two more onto your radar.

Read more »

As always, ASTD put on a great show in Vegas. I am looking forward to following up with all the new people I met and learned with. I cannot wait until '10!

I had three sessions I conducted: Two Creation Stations and a Tech Intensive. I have to say that the Tech Intensive was a blast. I had about 80 people in the room, and we talked at length about the Adobe CS4 Web Suite. 90% of it went well, but I had one SoundBooth snafu and one Flash ActionScript 3.0 snafu. Before the session, I said to myself that I'd create an interaction using ActionScript 2.0 because I know that cold, but then reminded myself that I made a pact to only program in ActionScript 3.0. I know how to get things built, but some of the calls are still new to me. I forgot to add the

(event:MouseEvent):void 

to my function call. Grr...Oh well. We laughed and got it working when I finally relaxed enough to think clearly. Building a site in the privacy of your office is much different than building in front of a room of learners!

Here are links to my materials from the sessions. If you were not able to attend, I understand! Here are the materials in PDF format:

Creation Station
Flash CS4: Get a Taste of ActionScript 3.0 Hands On! : PDF File

Tech Intensive
Integrating Adobe Creative Suite to Maximize E-Learning Development
PDF File
PowerPoint File

Also, if you attended my Tech Intensive, you remember that we built a "New Hire Orientation" online guide for Tommy Gun's Garage, a dinner theater and "speakeasy" out of Chicago. I thought you might like to see what I built for the client.

View the comp here.

Its just the prototype in a flat Photoshop file, but you can see what a little time and attention can do for good web design.

Thanks for talking with me, laughing with (at) me and having a great time in Vegas at the ASTD TK show.

Now, go build something cool!

P.S. I haven't forgotten to put the David Pogue Web 2.0 list up from the first day of the conference...It will be up soon...

If you haven't seen it yet, Adobe has created an eLearning Suite and bundled my favorite software together. It's a really sweet suite:

• Captivate - great for screen capture and for recording software demos. Really good tool and the current version is top notch
• Flash CS4 - great tool, but I'm still fighting with Flash CS4 on the Mac...long story, but nested movie symbols in ActionScript 3.0 movies are slowing down the function of the application...on both Macs...I'm not alone in this, but they are finally elevating my issue...see here, here and here. They are working on it which is encouraging - I trust Adobe will make it right!
• Dreamweaver CS4 - the best coding tool in the world!!!
• Photoshop CS4- the best photo editor in the world, hands down.
• Presenter 7 - Finally available at an affordable price (used to be $1500), this tool lets you use PowerPoint to create eLearning. I'm not a big fan of PowerPoint, so its great news for some, meh for me. However, it works really well Acrobat Connect Pro (formerly Breeze), so if you have that tool, you will love the way Presenter works with it. Note: It works in Office XP, 2003 or 2007. Great news!
• Soundbooth CS4 - create and edit audio...I really, really like this software. It's the first thing that has started pulling me away from Audacity which is an amazing piece of free audio software.

So...my only question...where is Fireworks in the suite? Photoshop rules, but for web distribution, Fireworks has tools that could help the eLearning developer rapidly develop interfaces, convert to PDF and perform lots of cool navigation and button effects. The price point is a little steep ($1799) but worth it if you want to do be able to do everything (no seriously...everything eLearning!) The upgrade price is great ($599) if you have purchased any other suite. I have to say that, overall, I like it quite a bit. There is a lot of software here that can create anything you, the eLearning developer, can think up. However, if you have an extra $299.00 laying around, I'd pick up Fireworks too!

Now...if I can just convince Adobe to fix the Mac bugs in Flash CS4 and give me a version of Captivate for the Mac, I would go back to raving non-stop about their software. I'll rave about everything but Flash CS4, but really, really want to! If Adobe fixes the Flash CS4 bugs, I'll be their biggest evangelist yet! I'll keep running Captivate in Parallels, but it's not the same.