December 31, 2006
How to Make the Wiimote Work in Flash

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

Posted at December 31, 2006 07:33 PM | Further reading
Comments

Please check out Adam Saltsman's Flash/WiiMote API MarioToo - which is based on my code but isa much improved version:

http://www.lastchancemedia.com/mariotoo/

Posted by: Mario Klingemann on June 4, 2007 01:01 PM

Hi Mario! I Just would like to say thank you for this great tutorial an your download sample ;-)

Cheers,
Michael

Posted by: Michael on July 4, 2007 12:58 PM

Hey Mario, thanks for this wonderful piece.

Posted by: Vini on July 5, 2007 04:25 AM

This is so easy to use, I modified a flash pong game in a little under an hour to optimize it for the Wii and use this. It can play both 1 and 2 player modes.

http://vicious1988.newsit.es/SynDev/wii/pong.html

Just goto this URL on a Wii, choose the game mode, turn the wii mote like an NES controller, and use the up and down on the D-Pad to move the paddle.

Posted by: Vicious1988 on August 5, 2007 11:31 PM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Thank you!

Most Visited Entries
Sketches, Works & Source Code
Lectures
Contact
Backlog
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german
Impressum


My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers