How To: Allow the user to enter text, such as their name
The on-screen keyboard
 Download sample files |
 This sample is designed for mediascapes that already have an Adobe Flash interface, and as such is probably most useful for those with Adobe Flash authoring experience. |
Contents of the download
| onscreenkeyboard2.fla | The FLA file that builds the onscreen keyboard component. You only need to open this if you want to customize the look-and-feel of the keyboard (see the OnScreenKeyboard MovieClip within this FLA) |
| onscreenkeyboard2.swf | The swf for the keyboard component. This must be included in your mediascape |
| UseInFlashDemoHost.fla | A demo Flash app that hosts the keyboard. This is a simple flash movie that demonstrates how to pop up the keyboard at a particular point in the movie, and get the return value. Click the S shape to pop up the keyboard. |
| UseInFlashDemoHost.swf | The swf for the hosting app demo. This is used in the demo mediascape. |
| KeyboardTester.as | Source file for keyboard. You shouldn't need to change this. |
| StandardKey.as | Source file for keyboard. This can be used to customize the text that appears on the space shift del ok buttons. |
| OnScreenKeyboard.as | Source file for keyboard. You shouldn't need to change this. |
on(press)
{
_global.TextEntry_Title = "Enter your name";
mcTextEntry.loadMovie(_global.swfDirectory + "onscreenkeyboard2.swf");
}
mcTextEntry is a movieclip defined on the stage that is used to define the location of the keyboard (0,0). _global.TextEntry is used to set the title that appers at the top of the keyboard screen ('Enter your name').
When the user clicks OK, the function TextEntry? _Complete is run on the main timeline (at _root)
Here's the definition..
function TextEntry_Complete(text)
{
unloadMovie(mcTextEntry); // get rid of the keyboard
trace(text); // print the text entered out to the log
}
Example Mediascape
The example mediascape included in the package is called keyboardTest and simply plays the UseInFlashDemoHost flash movie. Note that the onscreenkeyboard2 swf file is also included - this is essential. The way that the mediascape knows what text was entered is via the OnFSCommand event. Important: It's actually the UseInFlashDemoHost swf that will fire the OnFSCommand NOT the onscreenkeyboard2 swf. Here's the contents of the OnFSCommand event for UseInFlashDemoHost..
if (Command == "TextEntry")
{
Logger.Log("User entered " + Parameters[0]);
UserName.Value = Parameters[0]; // save the text that was typed into the variable called UserName.
}
contents of the example mediascape If you run this on your mobile device, then clicking the S will open the on-screen keyboard. Type your message and click OK to hide the keyboard. The text you have types will be output to the log file. To view the log on mscape player
- Enable 'Designer Tools' from the main menu
- Click back to return to the mediascape
- Click the paintbrush icon
- Click View / Debug
- The lower panel shows the log, scroll it to the bottom to view the latest entry.
Using the on-screen keyboard for mediascapes without an existing Adobe Flash interface
The example mediascape demonstrates how to use the on-screen keyboard when you already have an existing Adobe Flash interface. If this is not the case, here's how to build a mediascape that uses the component..- Add onscreenkeyboard2.swf to your project (right-click Media, select Add Flash Movies, then click Flash on the main toolbar).
- Add a Text variable called UserName to your project. (right-click State, select Add Text)
- At the point you want the keyboard to pop up, e.g. entering a region type:
onscreenkeyboard2.Play();
- To save the text they've typed in to the state variable, select onscreenkeyboard2, select the OnFSCommand event and type in:
if (Command == "TextEntry")
{
Logger.Log("User entered " + Parameters[0]);
UserName.Value = Parameters[0];
}
Comments
This article is new, please leave comments if something is wrong or unclear. -- BenClayton? - 02 May 2008
