My Google Code page has been updated! After what has seemingly been forever.

I've created a widget that I'd like to share with everyone. A small for keyboard for use in Flash TUIO multitouch (experiments) projects. The form I based off of my Google Android Phone and iPhone style.

You may be asking, why? Especially where the is enough space on a table top for a full sized keyboard. I'll answer you with this observation I've noticed. In the experiences of seeing my table used in public, typical users will first and formost use a single finger to start their interactions. Even when a full keyboard is displayed, the user functionality behind it is flawed because it just isn't an actual keyboard. There is no typing feedback, no ability to rest your fingers on the keys without getting a response, it seems to me to be a flawed object for to use in surface computing interaction.

With that out of my mind finally and on screen, I feel that touch screen mobile phones have a good thing going. Not only does this small form keyboard free up visual space for the rest of your app, since the keys are closer, users can type just that little bit faster.

The key selection doesn't happen until the user lifts their finger off the key, so that can make that quick shift around the pad if they are off a few pixels. The preview window makes sure that users know which key they are about to enter. The preview window also helps to let the app developer keep the keyboard size even smaller if needed.

The end result of the app is that it's sole function is to fill a TextField with a String. The next step of using that filled out TextField is then left to the developer to complete outside of the widget.

You can see a very basic implementation using the SmallKeyboard-UseDemo.fla file. And here is the code to implement the small keyboard.

  1. package app{
  3. import;
  4. import;
  6. import flash.display.*;
  7. import;
  8. import;
  9. import flash.text.TextField;
  11. public class KeyboardDemo extends MovieClip {
  12. public var newKeyboard:MovieClip=new MovieClip ;
  13. public var anyTextField:TextField=new TextField ;// connects TextField on Stage to this AS Script
  15. public function KeyboardDemo() {
  16. TUIO.init(this,'',3000,'',true);
  18. var request:URLRequest=new URLRequest("SmallKeyboard.swf");// loads Keyboard into Flash
  19. var loader:Loader=new Loader ;
  20. loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
  21. loader.load(request);
  23. }
  25. private function completeHandler(loadEvent:Event):void {
  26. trace("completeHandler: "+loadEvent);
  27. addChild(loadEvent.currentTarget.content);
  28. var newObj:Object=loadEvent.currentTarget.content;
  29. trace(newObj);
  30. newObj.x=300;
  31. newObj.y=100;
  32. newObj.attachedTextField=anyTextField;
  34. }
  36. }
  37. }

Here are the important things:

  1. public var newKeyboard:MovieClip = new MovieClip();
  2. public var anyTextField:TextField = new TextField(); // connects TextField on Stage to this AS Script

These are the variables needed to connect the keyboard to a TextField the first one is the new keyboard itself and the other is the TextField. It can be one that is already on stage (which is done in the file example) or a TextField that is generated dynamically.

The Keyboard is called in through a URLRequest, so you don't even need to import a new class or anything. It's all self contained.

  1. private function completeHandler(loadEvent:Event):void {
  2. trace("completeHandler: "+loadEvent);
  3. addChild(loadEvent.currentTarget.content);
  4. var newObj:Object=loadEvent.currentTarget.content;
  5. trace(newObj);
  6. newObj.x=300;
  7. newObj.y=100;
  8. newObj.attachedTextField=anyTextField;
  10. }

As for the rest, newObj.attachedTextField = anyTextField; connects the text fields together, which could also be changed later within the code to connect one keyboard to different textfields.

One thing it won't do is connect one TextField to multiple keyboards or vise verse.

So give it a test run, suggest features that could be concidered.

Download Just the SWF here [right click, save as...]

And of course.
Happy Experimenting