How to Make the Wiimote Work in Flash

January 3rd, 2007, 04:00 Posted By: wraggster

via quasimondo

As you might know by now the Nintendo Wii is now able to run Flash 7 files. Unfortunately the Flash player that comes with the current beta is a somewhat stripped down version - and especially one very important feature is missing from the native functions: the ability to use the keys of the Wiimote controller. But as it turns out the controller keys are made available to Javascript. So Aral Balkan has already tried a lot of methods in order to pass the key information from Javascript into Flash - but it looks like that all the classic approaches either do not work at all or they come with too much delay in order to be usable in games.

Well - I think that I have found yet another a method that works pretty okay. Especially the reaction time feels good to me - the only downside is an optical glitch which I still hope to get rid of. Check the demo here - ideally on a Wii: http://www.quasimondo.com/flashhwiimote.php
BTW - you will not see anything on Firefox since I just use the OBJECT tag to embed the swf - I also tried to use SWFObject first for embedding, but somehow when using it the Wii scroll arrow started appearing above the Flash file - so it looks like the layer got a bit higher than the desired 500 pixels.

Now how does this work? Since all direct Javascript to Flash communication is either impossible or too slow I'm using an indirect method: I use the Stage.onResize event of one Flash file as a trigger and communication device. When a keypress is received by the Opera browser I scale the layer which contains a sender swf to a width that is equal to the detected key code. This triggers a resize event inside the sender swf which reads out its new width and sends that number via LocalConnection to the main swf. There it is processed by a Wiimote class which can then be similary used like a Key object.

Some things to be noted:
- in order to get the full 800 x 500 size for the main Flash file I put the sender swf and the receiver swf into two absolute positioned layers. Unfortunately the Opera browser uses the Wiimote's navigation keys also for navigating inside the html page and thus interferes with the flash file by highlighting the object with the keyboard focus with a black outline. And it looks like the browser does not respect the z-index of the layers here so the outline of the supposedly hidden sender swf gets visible. I have not yet found a way how to at least tint the outline in a less visible color or hide it completely via CSS - maybe someone else finds a solution for that.

- The Wii browser includes a very nasty feature: Flash files that are not inside the visible screen area or are on a hidden layer do not work at all - they get deactivated. Which means it's not possible to simply put the sender swf on an invisible layer.

- When you point the Wiimote to the screen and the mouse pointer gets visible the behaviour of the page changes: keypresses are not registered anymore and only the "A" button gets directed to the flash file, but in a very slow and unpredictable way. So if you want reliable control do not point the mouse to the screen. In games it would probably be a good idea to trigger a pause when the mouse appears.

- I don't know if that is a problem with the LocalConnection or with the browser's internal key detection, but it looks like sometimes some key events get lost which means that a keyDown event is detected, but the keyUp for the same key doesn't fire. Of course that's not ideal.

You can download the example files and the Wiimote class here: FlashWiiMote_v10.zip

There are 0 comments - Join In and Discuss Here