Thanks to a wonderful confluence of events and great timing, I’m able to turn this in to a project for work – there are a handful of solutions in the queue that can use this starting next month – so I’m working full time on it over the month of Feburay.

After a few days, this is what I’ve got: click. It’s a pretty straight forward scenario, but it demonstrates all of the features that I’ve got working.

I’ve been able to keep up with my “play” metaphor and it’s working out great by providing many more opportunities for gaming rather than typical multiple choice branching.

One of the projects brought up a requirement that started a new idea – an inventory system. All I really need to do is allow the learner to reference a screen shot to get some data, but I think it can be taken farther. But more on that later.

Well, done that!

Multiple Sliders

I had a requirement to for an interaction for learners to rate up to six criteria for a given scenario. I thought of 3 different ways to do it: 1) that, 2) text entry and 3) drop down menus.

Text entry was the first idea. But that’s commonplace – can you call that an idea? I had a slider component that I’d coded for a project a year ago that was never used – so why not? The result, while interesting, fails miserably on many levels with visual clutter being the main one. I still think that it would work for up to 3 or 4 items, but it just doesn’t for this many.

So go back and do something more simple – with drop downs. I’d coded the slider to use the same basic properties as the native AS3 ones so, there wasn’t that much more effort to make this change. It’s much easier for the learner to use and saves a lot of space – so much that the scenario can be on the same screen as the question.

When I started Ramen, one of the goals was to allow the page templates/interactions to be used outside of the system – in a Lectora course for example. This has even become more important as my day job standardizes on Lectora as the shell for any tracked learning content. Over the past year, I’ve been able to write a whole lot of really easy to use APIs for creating learning interactions. Creating a new interaction takes just a few hours using the Ramen page template API and borrowing functionality from existing templates.

The biggest benefit of this is quick and easy reusability. Just change the XML file and it’s a new page. I don’t want to even think about how hard  some of these would be to pull of in Lectora. It gets really confusing when the action icons start to pile up.

I’m helping out on a project now that needs a few learning interactions developed – quickly. So I spent today working on these. Here they are in the Ramen player:

• Drag and Drop Fill in the Blank
• Scenario Checklist

These aren’t the fanciest interactions ever created, but not bad for a few hours work.

So far, I’ve gotten a basic schema defined for the structure file and a good start on most of the base data classes.

I’ve been planning to go down the most familiar path: a page-branch-page-branch-etc. architecture/flow. It’s the one that any elearning developer would be most familiar with. Each page contains pictures of the people and if it’s an interaction a few choices to click on. Just repeat that over and over and you have it. It’s a fairly “dumb” system.

But then I had a new idea on how to make this thing operate … had to dig out my Moleskine and start taking notes (for the first time in nearly 2 years).

What’s a better metaphor for this thing? How about a play? In this case my characters are actors. And what about all of the text? It’s generated from the actors! What about logic – is it in the page interaction or the controller? No – it comes from the actors reacting to a spoken line from another character.

Probably a small thing – but in the scope of what I want to do – it’s ground breaking. Now we have persistent actors on the stage (which now really is a stage) who drive the dialog and their reaction to it. Pages are now the “script” that is fed to the actors and look/feel of each page is the “set.” We don’t have a dumb template system we have a set of intelligent programmable avatars.

In code, each actor will be a component in the library following a MVC model. The sim. engine controller will handle the event listening and dispatch it to the correct actor. The logic will be part XML defined and part variable driven and will be in the actor’s controller. The look of the actor will be driven by logic (change based on emotion/score!) and the appearance of the dialog will come from the actor. Any narrative text (instructions, etc.) would be narration driven by the engine/narrator character. Interaction on a spoken line will cause a reaction in the targeted actor (you could speak to the mentor!) and will direct the play to a new page in the script. The page script will control the actor’s position, the look of the set, and feed new dialog to the actors.

This tips the possibilities towards the complex end of the scale – more complicated scenarios will be easier to play out while a linear scenario would be more difficult. It also opens the door towards making it more of a game. Actors can have different personalities by tweaking their logic and their automatic reactions. Point modifiers for certain actors and certain lines. Maybe you could flirt with the other actor. Maybe you could ask the mentor for help – or earn a “smooth talking” bonus? I’m thinking of a lot of new ideas here …

So what’s first? I’ve got the requirements down, so now I need to start translating that in to code.

The most basic thing I’ll need to build is a player. I like to use a simple MVC pattern for this. It’ll need to be a very scaled down version of my Ramen player so that should be easy enough.

The player/controller will have the model load an XML file that contains the information for the characters, the structure of the sim and some settings (ui, speed, don’t know at this point). Model will do a little parsing and then the view will take over and draw the UI. After we’re all set up, the player will show the first page.

Each page will be a movie clip in the library of the player. In ramen, each page is an external SWF, but I’d like to keep this player simple. Having everything in one place will make it easier to keep a consistent UI and make it easier to edit. The content for each page will be stored in an XML file. I’ll need a class for the page that handles loading the XML and then kicking off any interaction specific interaction code. So a base template class and a few subclasses for each specific type.

Also need to come up with a schema for the XML and keep it as human readable as possible. Keeping the structure separate from the content of the questions should help a little. But as the complexity of the simulation goes up so will the mark up. I’m not quite sure how the variables and evaluations of the dynamic state will even be defined yet.

All of that will probably take me a week or so to get though. I’ll have screen shots up as I make progress.

So this topic has come up off an on at work for nearly a year now. We need a good reusable player to create engaging social simulations for training employees on customer interaction. People have looked around and the best off the shelf solution seems to be Nexlearn’s SimWriter. I’ve taken a quick look at it and it does seem like it has a lot of features, but has the same problem most other “learning development” tools have – the look/feel of the output leaves a lot to be desired. And from what I’ve heard it’s a pretty expensive product.

I spent way too much time thinking about this today, and have some free time, so … I’ll build one and document the process on this blog. Not an overly complex one, and I’m not going to be posting all of the source but it’ll be a nice thought experiment.

So what are my requirements?

• Produce 3 levels of simulation: 1) Linear/low, 2) Branching and 3) “Dynamic State”/complex based on previous branches or other data.
• Minimum of 3 characters: antagonist (customer), protagonist (you) and a coach/mentor/guide
• Learner character choice – pick the protagonist who you identify with (age, race, sex, etc.)
• Scoring – possibly represented as antagonist “mood”
• History states – go back and review/change past choices
• Possible branching to other tasks – system/mechanical sim?
• Basic flow: Introduction, protagonist selection, conversation tree, resolution, summary
• Tie learning objectives/goals to places in the scenario to measure success/failure.
• Photos of the characters in different states
• Audio?
• Video?
• Fully Flash based (rich media, etc.)
• Easy to edit by moderately technical people (XML driven)
• Possible SCORM tracking: score, answers, performance, time

Not a small list! Not quite sure how long it’ll take me and it will definitely be a phased solution. And I don’t know if  it’ll every be used for anything in production, but it’ll be a nice little way to keep busy in the evenings.

So, let’s get started …

Ok, so you know this used to be pretty straightforward in AS2:

var mc:MovieClip = attachMovie(linkageid, newname, depth);

By in AS3, all of you linked library objects are now classes, so you need to do this with the class name:

var mc:Thingy = new Thingy();

What if you want to attach any random movieclip at runtime but you don’t know what class it will be ahead of time. Maybe its driven by an external data source? You could have a nice if/else or switch block and call the class based on a variable, but that’s a pain in the ass.

So, here is a function that I came up with to make it easier:

function getArbitraryLibraryObject(n:String):Object {

var objC:Class = Class(this.loaderInfo.applicationDomain.getDefinition(n));

var obj:Object = Object(new objC());

return obj;

}

var mc:MovieClip  = getArbitraryLibraryObject(linkage) as MovieClip;

Let me know if there’s an easier way to go about it, but I haven’t run across one.

In my Ramen player, I’m using this to call sound effects and page to page transition effects.

So, I had a really time with Articulate today. Something that should have taken 15 minutes stretched into hours due to a few mistakes. Here’s what went wrong and how I fixed it. I received a lot of help from Twitter – links below.

Problem: I needed to update a few Flash movies embedded in a straightforward Articulate ’09 course, then publish and upload. Simple enough, right?

Updating Flash movies embedded in an Articulate course

When you update a Flash movie that’s embedded in an Articulate course, Articulate picks up the new file since has a link to it on the hard drive.  But it wasn’t doing this with the Flash movies that I had. And I couldn’t figure out why – I didn’t want to reimport them all.

So, I tweeted the problem and Dave Anderson replied with a Screenr showing how this is supposed to work. Well, ok – I had the right idea. But I’d forgotten that when I installed Windows 7, I’d moved all of my working files – so the project was in a completely different location than it had been when I created it. Doh! Articulate stores absolute references to embedded Flash, not relative. Moved the files back to where I had them and that problem was fixed.

Dave later directed me to a Screenr by James Kingsley showing good Flash/Articulate workflow techniques.

Presenter locking up when publishing

So, next problem that I had was presenter stopped publishing the deck. It always stopped on the “Saving files to disk” operation. At first it seemed random as to which slide it got stuck on, and then finally settled on slide 18. It just would not go past this point. I rebooted, which has resolved this issue in the past, but no luck.

Back to Twitter. Brian Batt offered to help and directed me to download and run the Articulate debug tracer, and then send the results back to him. With this running I could see that the SWF on that slide was causing the freeze. I republished the SWF. Not fixed. Reinserted the SWF. Not fixed. Deleted the slide and rebuilt it. Still no luck.

Out of ideas, I uninstalled Articulate, rebooted and reinstalled it. I’d seen that anti virus programs can also interfere with this so I turned it off while I was at it. One of these fixed it. Not sure which since I didn’t follow good troubleshooting procedures, but it publishes just fine now. Which is all I cared about.

The trace window is pretty cool – they should include something like this in the tool under a “More Details” button  - I’m not a fan of processes that take >10 minutes to run with little information. This fixes that for me.

Uploading to a FTP site

I uploaded it to my site and went to preview it. I got the dreaded “Slide 100 of 160″ blank screen error. This means that either I’m using Articulate 4 with Flash 10 (which I’m not) or something didn’t upload correctly. I deleted the files and tried again. Same issue. Articulate has a built in FTP option, so I used that. It failed twice saying “Cannot upload file, unknown error.”

I’m just a little mad at this point </sarcasm>.

I started looking at options in my FTP program. I noticed that the file transfer type was set to “auto.” I’d seen problems in the past where binary files has been uploaded as ASCII, so I changed it to binary. Re-uploaded and viola!

Lessons learned

So here’s what I got out of this:

1. Articulate doesn’t use relative paths to imported Flash movies. Don’t move things around!
2. Turn off your virus scanner if you have problems publishing
3. Always upload Articulate courses in binary mode
4. Articulate has awesome support via Twitter

Part 2 coming the next time I have to go through something like this!

Wow, it’s really be a year since I posted here! I’ll have some new content up soon – I have a few ideas and Flash things to share.

Ok, break’s over. Time to start working again. Of course, if Gabe was sleeping better, it might be easier to stay up late and do something. (Would also help if I wasn’t being lazy.)

I haven’t created anything new in AS3 in a few months now. That’s not good.

I was finally able to record a round of my SCOMaster game! Recap – It’s a multiplayer WiiFlash game designed to be played with teams in an instructor lead classroom setting. The object is to assemble a learning program structure the fastest – but watch out, because your opponent can take one of your SCOs and reuse them in their own program. Developed in Flash CS3 in about 150 hours.

SCOMaster Gameplay

Casey’s gone back to school and things are settling down with the new baby, so I’m finding myself with a little free time again. When I posed the Creating a Flash WBT Framework post, I had planned to follow it up shortly with a few learning interactions, but I never found the time. Now I have some of that time. And being inspired by this conversation on the Pipweks board, I think that it’s something that would help out a lot of people.

I don’t plan to make them drop dead simple to use, like the old ones that were included with Flash, but I’d like to ask my (very few) readers: “What would you like me to do?” Are there interactions that you’d like to see?

I plan on making them class based, following the MVC pattern, with the data stored in an XML file. Should make it easy enough to modify, but the AS3 code would be intermediate level so it would require some effort there.

If I don’t receive any comments, I’ll just start wandering in a random direction and post what I come up with.

Update, 1/21/09: Well, things didn’t go as easily as I’d planned. Work was crazy and then I took a break for the holidays and just couldn’t get motivated to start on these. Excuses. But I’ve finally gotten around to turning the computer back on in the evenings, so I’ll be picking up on a few odds and ends soon.

Also – thanks for all of the comments!

I don’t get to use Photoshop for illustrations very often anymore, so it’s fun when I do. I created this little thing to replace some uglier images on the same theme in a WBT we’re working on. Origional is here.

I’ve been playing around with using gestures with WiiFlash as an alternative input scheme. As a first step, I’ve taken the Flash Gesture recognition code from Didier Brun and modified it to work with a Wii remote instead of the mouse. It works pretty well – some of the letters aren’t easy to hit – but not bad for a first try. I’d like to modify with further have more “shapes” rather than “letters” to match. More to come on this when I get extra time.

It’s been quieter than usual around here be cause on July 9th, our son Gabriel James was born.

Casey went to the hospital with chest pains – and it turned out that she was in labor! After 14 hours of labor, Gabe arrived, 3 weeks early, at 11:21am. He was pretty big at 7lbs 2oz and dispite being early, everything was OK and we went home on time.

Sophie’s getting used to him, and we’re getting used to the two of them.

After a week and a half I finally finished my first real WiiFlash game – SCOMaster. It’s a competative, 2 player learning game designed to be played in a group setting. It illustrates the concepts of assembling a course in an LMS system. Bonus points are awarded for content reuse – they are SCOs after all! Unneeded objects and faulty objects can be sent back to the development team to be reworked – but at a cost.First one to build a completed activity tree wins.

Ben Hutchens, our graphic designer, created the art work for it. It took about 60 hours to program it using the WiiFlash classes that I had developed earlier in the year.

In February, I posted about using the Wii remote as a virtual mouse in Flash. While that approach seems to work just fine in a simple single player application, I found that it breaks really badly when you another player to it. I just completed my first two player WiiFlash game and I’ll document a few things that I had to differently.

Originally,  based all of the interaction with the cursors off of the typical mouse events (rollover, rollout, etc.), but this did allow for find out which player rollover the sprite or which player “clicked” on the sprite.

Each player’s cursor is just a sprite itself, so I switched to using the hitTestObject function against each players cursor sprite and the object sprite on a mouse event. This returns which of the cursors interacted with the object. Additionally, since the cursor sprites are big, you do have to see them from a distance, I found that I needed to add an additional sprite to the cursor – the cursor “point” – at 0,0 and use that for the hitTest rather than the actual big cursor sprite. If the “tail” of the cursor arrow is still over the object sprite, you shouldn’t count that as a roll over, since the point of the arrow is the important part.

So here are the functions for a rollover:

 private function onItemOver(e:MouseEvent):void {
var wm:Array = whichWiiMotesAreOverMe(Sprite(e.target))
for (var i:int = 0; i < wm.length; i++) {
_WiiMotes[wm[i]].doRumbleSeconds(.1);
_WiiMotes[wm[i]].cursorState = WiiCursorView.CURSOR_POINT;
}
}

// returns array of which wiimote cursors are over the sprite
private function whichWiiMotesAreOverMe(tgt:Sprite):Array {
var a:Array = new Array();
// _WiiMotes is an array of Wii controller objects
for (var i:int; i < _WiiMotes.length; i++) {
if (tgt.hitTestObject(_WiiMotes[i].cursorPoint)) {
a.push(i);
}
}
return a;
}

The functions for a mousedown are:

private function onItemDown(e:MouseEvent):void {
// gets the index of the _WiiMote object that clicked the sprite
var wm:int = whichWiiMoteClickedMe(Sprite(e.target));
}

// returns index of which wii mote cursor is over with the A button down
private function whichWiiMoteClickedMe(tgt:Sprite):int {
var wm:Array = whichWiiMotesAreOverMe(tgt);
for (var i:int = 0; i < wm.length; i++) {
if (tgt.hitTestObject(_WiiMotes[wm[i]].cursorPoint)) {
if (wm.length == 1) {
// simple test if only one cursor is over
if(_WiiMotes[wm[i]].isADown) return wm[i];
} else {
// little harder if 2+ are over, _LastClickWMIdx is the last Wii mote to have pressed a button
if(_WiiMotes[wm[i]].isADown && _LastClickWMIdx==wm[i]) return wm[i];
}
}
}
return -1;
}

This method, while probably not the best way, turned out to work really well in the game.

I’m presenting to the Bank’s Flash Community of Practice this Thursday on how to create a basic Flash WBT that includes SCORM  tracking. Below is the PPT deck that I’ll be using and below that is the sample file.

SCORM and Flash WBT Overview

This is an example file of a Flash WBT on the timeline, where my previous example was pure script. SCORM 1.2 compliant using my wrapper and Pipwerks SCORM API.

Timeline Based WBT Demo

I’m releasing the source code to the 2nd WBT framework that I created for Wachovia in mid-2004. Essentially, it works just like the example demo that I posed a few days ago: 1) an array of page IDs and 2) pages are movie clips in the library attached as the learner progressed though.

This version is pretty complicated, so it’ll be a challenge to figure out how it all works. But there is value in seeing the code for the individual page interactions. It’s not SCORM or AICC compliant – but it did track as a Docent Outliner module – those files aren’t included.

The framework file is the main file for a course. It loads an structure XML file (xml\framework.xml) that defines the list of modules for the course. The blank file what each lesson is built from. It contains all of the templates and is capable of running a course from an XML document.

These are Flash 7 FLAs. The code is Flash 6/MX level Actionscript. There aren’t really many comments in the code since I coded it for myself. But I did train a few coworkers how to use it. I haven’t worked in the code for over 3 years, so if you ask a question about it, I probably won’t remember what I did.

Here’s a preview of the interactions in the blank file:

http://www.nudoru.com/assets/portfolio/experimentalflash/ft2_samp.htm

Here’s the code:

Flash Template 2 Code

I put together part 1 of what I plan on being a multi-part series documeting the creation of a Flash WBT framework for creating SCORM compliant courses. This first once starts with an interface created in Flash CS3 and goes though the steps of adding the code to make it all work – and track on a SCORM 1.2 LMS. I’m using a custom wrapper class that I made for Pipwerks’ SCORM class. You need to know a bit about programming in Actionscript 3 – nothing advanced, but this isn’t in a tutoral format.

I’m hoping to fill a void with this – I know that there are a lot of people trying to develop WBTs in Flash and they have no idea where to start. I’ve been doing this for 4 years, and I know that I would have loved something like this when I started.

Example Documentation

Example Source Files

Please let me know if you find a bug, have a question, or have a comment or suggestion on what to cover next or how to make this better.