I’ve previously posted a piece demonstrating handwriting recognition in flash. While I think gesture recognition is a great way to engage people with a unique interface, it’s probably not the quickest and most accurate way of getting user input. Keyboards are still the preferred method of user input. Unfortunately there are many situations in which a user does not have access to a physical keyboard.
Console video games are constantly requiring users to enter text but require users to do so using a controller rather than a keyboard. There are also many touch screen and motion tracking kiosks which do not provide users with a standard keyboard. In most of these cases, an on-screen keyboard (a.k.a. a virtual keyboard) of some sort is presented to the user. The on-screen keyboard can either mimic the standard keyboard layout, or it can be customized to match the type of input which is required. For example, if a user is asked to enter their email address, it is probably better to place the “@” symbol on a prominent button rather than make a user select Shift-2.
I’ve created an on-screen keyboard in flash to use in some of the kiosk demos I’ve been working on. It was built in such a way to allow you to redesign the keyboard by simply positioning and resizing movieclips on the stage. The source code is provided below under a creative commons license.
Andi Gibson says:
nice, basic neat and tidy. well done like the way you design.
Dante says:
when I try to load fla to flash MX 2004 Proff I got this error
Unexpected file format
I’m using Windows XP
Noel says:
The source file is Flash 8, which is probably why you are having difficulty.
I saved it down to Flash MX 2004 and placed it here:
http://www.dncompute.com/sandbox/sandboxItems/onscreenkeyboard/onscreenkeyboard_mx2004.fla
I don’t have Flash MX 2004 installed, so I am unable to test if it actually works.
BlarG says:
Quite good, though you’ve doubled-up on “&.” when you press shift, the key “1″ should be replaced with “!”
Rodney says:
Fantastic,
Can you tell me how the standard keys work ie a, b, c, d, A, B, C, D etc.
I can see the mappings for all the numbers and symbols, but can’t see any mappings for the standard letters.
Noel says:
Every key on the stage is given an instance name.
The instance name is a unique key used to grab the label out of the LABEL_MAP object.
If no label is found in the map, the instance name itself is used as the label. I did this as a shortcut rather than building a bunch of mappings that look like the following:
a:”a”,
b:”b”,
…
Also, when a key is shifted, it simply checks the SHIFT_MAP object to see what to transform the key into. If the key’s instance name is not found in the SHIFT_MAP, it simply sets the label to the uppercase version of the instance name. Again, this was to avoid having to build the following into the SHIFT_MAP
a:”A”,
b:”B”,
…
You could, if you wanted to, add all of these items into the LABEL_MAP and SHIFT_MAP and it theoretically should work just fine. For instance, if you wanted “a” to shift to “z” instead of “A”, you should be able to do this within the existing framework. I have not tested this, but I don’t see any reason why it shouldn’t work.
Rodney says:
Thanks for you help.
If you don’t mind I have one further question to get this keyboard to achieve my objectives.
I need to be able to reset the cursor position after each letter is typed to the left of all the text, essentially creating a situation where it is typing backwards.
I would use some code similiar to the following:
output.onChanged = function(){
Selection.setSelection(0,0); // set text cursor to left of all text
}
This works on a textbox if I add it to your keyboard tester movie, but it doesn’t seem to work if I add it to your output box.
Any help or suggestions much appreciated.
Thanks
Rodney
Rodney says:
Hi Noel, please ignore my previous posts, I have worked out a solution.
thanks
Rodney says:
Thanks for the help on the mapping question.
This product is awesome.
I also posted something regarding typing backwards, (hence my previous comment), but they don’t seem to have gotten through. You can delete this post and the one where I asked you to ignore previous posts.
Thanks again for an fantastic product.
Noel says:
Something about your posts got them caught up in the Akismet spam killer. I dug through it’s drag net and pulled your comment out. I get so many spam comments that it’s not practical for me to regularly review what Akismet kills, sorry about the confusion.
Noel says:
In case anyone was curious as to how they would get the output to display in reverse, they would need to edit the following lines in “KeyboardTester” class:
if (evnt.data == “backspace”) {
text = text.substring(0,text.length-1);
} else {
text += evnt.data;
}
to the following:
if (evnt.data == “backspace”) {
text = text.substring(1,text.length);
} else {
text = evnt.data + text;
}
Errow says:
It’s great! Thanks for designing this cool stuff!
Alex says:
Hi there,
Is it possible to use your flash keyboard to enter information in an iframe? Example we have a submit form we pulled from our website and we want to use the touchscreen to enter the text into it. Do you know if this will work?
Noel says:
I think what you are asking is if it’s possible for the keyboard output to appear in HTML so it could be submitted as part of a form.
This is absolutely possible, but it would require a little work on your part. You could easily add code into the actionscript that passes the output from the keyboard to javascript, and use javascript to enter the text into the form.
You can send data from Flash to Javascript using the old getURL or the more modern ExternalInterface.
http://livedocs.macromedia.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002200.html
http://livedocs.macromedia.com/flash/8/main/00001730.html
Victor Hernandez says:
Hi Noel,
Your keyboard is great! Thanks for sharing.
I am having this problem. I have a FLASH movie with a main scene and several additional scenes. I am adding your keyboard to one of the additional scenes (scene name “requestForm”).
On “mainScene” I have a button with:
on (press) {
gotoAndPlay(”requestForm”, 1);
}
And every time I press the button, the keyboard is initialized and takes several seconds to build on the screen. It is too slow.
I am a seasoned VB programmer but newbie to ActionScript. Any ideas on how to manage this?
Thanks a lot in advance for your help.
Regards
Victor
Vijaya Srinivasan says:
Thanks a lot it is realy a cool keyboard.
Thanks,
Vijayan
AG says:
Hello Nice Keyboard!
Look really cool, but does any if you knows how to make this keyboard working with form submiting for the remote sites, which will be opened in the frame??
If some one has any ideas, i will be very appreciated.
Thanks in advance,
AG
Noel says:
AG:
I’m not quite sure I understand your question. If you could describe more clearly what you are trying to accomplish and what your difficulties are, I would be happy to point you in the right direction.
If you are asking if the Keyboard output could be submitted as part of a standard HTML form, I’ve addressed that to some degree earlier in the comments. If this is a common enough request, I could spend some time putting together an example.
AG says:
Hello Noel.
Thanks for your reply.
I will try to be mo detailed:
1) we have a touch screen application : it is a combination on HTML+Flash+ASP.NET
2) evrything is looking fine untill one thing: we have a flash keyboard (this keyboard is mostly used to make a search requests to a server) then if request is not empty results are shown in the Frame like a simle HTML page.
As soon as we have localhost pages evrything is working fine, but imagine such situation:
We need to give a ability for Touch Users use our Flash Keyboard to fill such forms like LOGIN or Registration Form (from aother sites) in a FRAME or what ever.
So in short: we need Flash Keyboard which can be like a real keyboard.
If you need more information, let me know.
Thanks,
Best Regards.
bhuta says:
hi,
do you have any idea about on screen keyboard which supports all fonts and which is free.
all the fonts r not seen properly in windows on screen keyboard.i tried some other but thr r some problems in all.
i just want that all fonts should be accessible from screen kb and it should b read conviniently.
thank u
palnudb says:
I am very interested in making this onscreen keyboard work with a flash form I have built. I am very interested in seeing how to make the keyboard work with the multiple fileds in my form. I would be happy to send my form to use as an example if that would help.
TIA
palnudb
sscoder says:
This is perfect! One question, same as the question above. I would like to use this keyboard on a kiosk but would like for it to be able to fill out multiple fileds on a flash form. Any way to do this?
wrybread says:
Nice work. For the people trying to use this to fill in iFrames or whatever non-flash applications, you might look into a non Flash based keyboard, such as this one:
http://www.virtual-keyboard.com/
I’ve tried a bunch of keyboard and that’s the best one I’ve found. If anyone finds a better one, please post, since it definitely has its flaws.
But for a kb to enter data from and into a flash app, the kb on this page rocks.
Eivind says:
Hi. Im not an advanced user of flash, so I dont understand much of the talk above, or the source files. But I want to make a simple on-screen keyboard. I dont need upper and lower case, just all the letters and numbers, backspace and enter. Is it possible to add an action to a button saying something like: “on release type (a) in selected input textbox”. Does anyone know a tutorial on this?
Thanks
Naren says:
Great Work. But I am in developing a on screen keyboard which contains print scrn button. Is it possible to do that using java script. Pl advise.
Scott says:
Not sure if this was already covered but it seems that the less than character ‘
Scott says:
Not sure if this was already covered but it seems that the less than character “
Qubic says:
Hi I was trying to capture the ENTER key to use it for Submit, so I wrote this:
myListener = new Object();
myListener.keyPressed = function(evt) {
trace(”**** event keyPressed ****”)
trace(evt.type+”triggered”+newline+key_mc.output.text);
};
key_mc.keyboard.addEventListener(”keyPressed”,myListener);
but can´t make it work…
=(
am I doing somethig wrong?
thanxs in advice, the keyboard is great!
Sampl says:
If u allowed to detect keyboard input also. It should be pretty good.
Matt says:
Hi Noel,
This is probably the only flash based keyboard i have found that is ideal for my application. However as previously asked by someone else i would wish to be able to use this keyboard to input data into a standard html form. I have looked at the previous links but as im totally new to flash and AS i am lost with where i would start to implement this.
Any help/guidance of any sort will be most welcome.
Many thanks in advance Mat.
Denis says:
Would you mind giving me an insight on how to have the first letter inputed capitalised?
Thanks for your time
Sam says:
A great piece of coding, thanks very much.
Like some others above I am trying to use this to enter information into different fields on a flash form. I have managed to duplicate the scripts so that I can enter information into the different fields using the keyboard, but every time I move from one field to the other the previous entry is reset to nothing.
How can you implement different fields on one page?
Thanks again.
Rac says:
Hi, I am trying to create a TouchScreen Keyboard for user to input information into a flash form that comes with numerous input field.
I would appreciate if you can advise me how to do that.
Thanks a lot :)
Rac
simon says:
HI,
The keyboard is great. I have been trying to do a few things with it (as a novice) but I cannot solve the following. I have loaded “onscreenkeyboard.swf” into a movie clip “holder”. I am trying to take output into a dynamic text box in my root movie with no success. Can you offer some guidence? Many thanks,
Simon
Coz Shaq says:
good work
masardi says:
Noel said :
” If you are asking if the Keyboard output could be submitted as part of a standard HTML form, I’ve addressed that to some degree earlier in the comments. If this is a common enough request, I could spend some time putting together an example. ”
-> Yes, I need this example. I’m not expert in flash. Thank you.
Carl says:
Hi!
Really cool keyboard! But would there be possible to have multiple textfields to jump between?
Something like this “Comment form” I’m filling in right now, but with use of the on-screen keyboard?
Best regards
Carl
PCA says:
okay – i’ve got a question for you:
(first off this is awesome noel, there aren’t any around like this).
i need to be able to navigate through each letter using the arrows on the keyboard. has anyone done anything like this or have ANY idea where i can find something like what i’m describing?
any help would be totally appreciated.
DataVAMP says:
Any ideas of how to get the keyboard to pass to multiple fields? Has anyone found a solution?
George says:
Hello,
How can i take the typed value from the search field of on-screen keyboard so as to make a search on an xml file;
Virtual Keyboard says:
Good work. I know one more a non Flash-based keyboard. But it’s great: http://hot-virtual-keyboard.com/
You can operate this keyboard from HTML code with ActiveX.
manicgenius says:
Hey Noel,
Great work, man. Was wondering…I’m using this keyboard on a touchscreen kiosk. It’s being used in place of a keyboard to collect form data. When the user hits my “Submit” key, I want to delete the keyboard from the screen, flash a “Thanks” message, then cycle back to the beginning of my presentation.
I’ve tried using “removeMovieClip” to get rid of it, but that doesn’t seem to work. Can you offer some thoughts?
Jericho says:
Hi there.
Great keybord, I was wondering anyone have a solotuion with this keyboard and some submit form, so you can send via php or somehow detials that user will input to the email.
Also how to duplicate text fileds and that would work – should I create KeyboardTester2 class and repeat most of the things inside or there is any other solution.
also – how to do bigger keys and that are shown properlly?
Phil says:
Great work Noel.
Lots of people asking for Submit key functionality.
Any chance you can explain how to add this.
Or how to assign a custom function to a key, thats called when that key is pressed.
For example if I add a submit key I would want it to call mySubmit()
thanks
ash says:
hi guys please please someone give me tutorial or a demo or something which i could use on screen keyboard to fill up a form.
i am really battling with this now..and about to pull my few strands of hair that left on my head.
Servi says:
Awesome, just what I was looking for.
I like the fade effect that confirms which button you pressed.