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.

Michael Gardner, will be showing this video during his presentation at DevLearn 08 at 1:30 on Wednesday 11/12 during his Practical Principles for Effective Learning Game Design (#206) session.

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.

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.

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.

A few months ago, I made a comment about spinning off my ramen player for use at work and turning it into a player for learning content. Well, my first project with it is about to go live, so it’s worth another mention.

I’m calling this player “Scientia.”  I’ve added a lot of code for progress, tracking and completion. I’ve also integrated Pipwerks excellent SCORM wrapper into it.

The project is a system walk-though that’s presented to the learner with an avatar character. I’ve written up a short explanation of how the avatar SWF and audio player SWF work together. It’s pretty brief - post a comment if you want more information on it and I’ll see what more I can write.

Using XML events in a Flash player system

Also, I’m presenting at this month’s Bank of America Flash CoP meeting on Flash and SCORM communication. I’m going to create a very simple WBT/SCORM framework using Pipwerk’s wrapper. I’ll post the files and how-to when I get it written.

Someone asked me how I the background animation on my new site. Here’s the code. You’ll need to download TweenLite and have it in the class path. This is a Flash 9 FLA with AS3.

Nudoru.com Site BG

I just uploaded an update to my personal web site after 3 years “I’ll do it later.”

http://nudoru.com/

Creating this version was a bit of a struggle for me - not only as a fight against procrastination but trying to figure out what I wanted to “say,” if anything, about myself. The result is something simple and subdued overall with a strong grid layout and a little flair. I’m not really sure what that “says” about me - but I think that it’s fitting for where I am at this point. I also wrote my first bio in over 7 years and took out a lot of old crap from my portfolio. So much of what I’ve done these past 5 years has been code - I have little to show visually.

I created it using my ramen player. There are a few things that I still want to add - like sound effects - but I’ll get around to it later.

Saw this post on StudioBanks’ blog referring to the chalk board effect on the Starbucks Coffee At Home site. I thought it was pretty cool too, and that I can see using something like this in a future e-learning app. So, I spent a little time creating a demo of it. It’s pretty straightforward, and could be modified to show an external SWF instead of the circles - which would make it actually useful.

Chalk Board Effect Demo

Chalk Board Effect Source

Little utility of the month (I swear I want to to more of these to post): Mouse positioning debugger. This is a little utility script that will be part of ramen to help position items on the screen. Turn it on and it displays cross hairs showing the current position relative to the stage and a child MC of your choosing. Can also draw boxes and it’ll track the width and height.

Mouse Position Debug Demo

Mouse Position Debug Source

Ryan Taylor point’s to an article on Grant Skinner’s blog about a bug in FP9 where loaded SWFs are not removed from memory when you tell Flash to.

This is a problem that I’m seeing with ramen just as Ryan is seeing with his PGA app. I was watching the memory usage of a current project and it was taking up  >90mb of ram, GC ran and then it went down to 60mb. Still to high, but damn! I was pretty careful when I was coding it null out references and stop listeners/timers - but I think that I need to make another pass as it.

The BAC Wii project has come to an end for now - we delivered our final report yesterday. Hopefully word of what we’ve done will spread and we’ll be ask to share it with more groups. It was a really cool project to be on - the potential of the Wii and kinesthetic learning is an interesting area - and I don’t think that many people are doing much with it yet. Replacing the mouse with a Wii remote is a great way to increase engagement - I wonder if I could find a way to apply to compliance training? Would make for an interesting course assessment.

Anyway, I’m posting my outline of the Wii controller class that I spent all of January developing. It makes programming for WiiFlash super simple - just instantiate it and boom - Wii support in any Flash app. Works with all typical mouse events.

Wii Controller Engine

• Is an interface between Wii controllers (Remote and Nunchuk) WiiFlash and the application or game
• Enables quick ramp up for a developer without having to learn the intricacies of the Wii controllers or their data
  • Can add simple Wii controller to an app in as little as 3 lines of code
  • Contains about 1000 lines of code (not including virtual mouse or WiiFlash itself)
  • WiiFlash returns raw data – engine normalizes it up to make it useful for a developer
  • The Wii controllers return small, but long numbers – 0.000000007199879823173
  • “Smoothing” out the data – eliminates the hand jitter by throwing out small changes and/or averaging data over time
  • Accesses the cursor’s X and Y position – WiiFlash gives you the location of the IR points (prefers 2 of them) as the Remote sees them on a scale from 0-1 – not in relation to your screen area.  Engine handles switching from 2 IR points visible to 1 IR point and convert the data to exact X and Y coordinates of where you’re pointing
• Creates a secondary “virtual mouse” that allows the Wii mote to act as your normal mouse (separate from WiiFlash’s built-in “mouse control” mode) within the boundaries of your Flash movie
  • Uses Senocluar’s VirtualMouse class
  • A button is single click, B is double click
  • Makes it simple to add Wii capabilities to your app since it works with the mouse controls that you’re used to developing for
  • Allows for custom mouse cursors and the ability to switch between them with 1 line of code
  • Mouse cursors are contained in an external SWF
• Creates a standard way to getbutton press and release state information for the Remote and the Nunchuk.Provides “isDown” data for major buttons on the Remote and Nunchuk: A, B,C and Z
• Controls rumble – set the duration
• Provides Nunchuk data in the same way as the Remote: rotation, acceleration, etc.
• Nunchuk thumb stick – returns the position of the nub from -100 to +100
  • Also can use the 8 corners as buttons, names represent a compass: N, E, S and W
• Created (but not tested) with multiple Wii motes in mind – should easily scale to up to 4 Wii motes

WiiFlash 0.4 has been released today! New features include: 4 IR points on the sensor bar, tracking the size of the IR points (for determining depth), and battery information from the Wii remote.

Since Jason has been busy trying to get a good depth (z-axis) reading with the 0.3.2 release - this is very welcome news. I’d wondered how Nintendo managed to get this information and it never occured to me that the size of the IR point would be it - but it makes perfect sense.

Sadly our Wii research project ends tomorrow - we give our final presentation to the sponsors at 1pm. I hope that we get to keep the Wii motes and sensor bars - there are a few minigames that I’d like to make. It would be cool to make some WiiFlash games that Sophie could play.

This is a short presentation that I gave to the Bank’s Flash Platform Developer Community group 2 weeks about. Its about the event bubbling system in AS3 and includes an example of how I’m using it to trigger events in ramen Player. Also includes a screen shot of my current project at work - a demo for the new LMS system using an avatar character.

AS3 Event Bubbling Deck

The more I learn about events the better they get and more possibilities appear. I’ve added an audio player page object type that can control the avatar SWF by events. The whole thing is setup using XML - so it’s completely customizable.  You can do so much more than was ever possible in AS2 and with much less code. Probably doesn’t sound impressive, but they fact that they are all separate SWFs running though a player SWF with XML defined event data responding to custom events being passed from SWF to SWF, blah, blah, blah makes it sound more way more exciting.

I’ve finally gotten around to writing a short page about my ramen Player that I’ve blogged about over the past few months. At least the posts have a little context now.

Greensock has released TweenMax. Looks really sweet - I don’t do many bezier tweens, but having the ability to do that, filter and color tweens in one class is appealing. I’m going to try to integrate it in to Ramen so that I can use it for my rebooted Nudoru site.

Draw Logic has a good list of the availble animation packages. Matt Przybylski comments and links to an article on his blog on getting started with animation packages.

A user on the FlashTiger list asked how to load classes dynamically at run time - this Adobe live doc covers it nicely. I’d thought of trying something like this before but was never clear on how to do it. Anyway, linked so that I’ll remember to look at it later