Swami Charan's Blog My personal blog…

Virtual Keyboard for FlashLite for Digital Home (FLDH) – I

Adobe Flash Lite for Digital Home (FLDH) is Flash Player optimized for hardware and software architecture of digital home devices like Televison Sets, SetTop Box etc. All the events that can be performed on FLDH is only using TV Remote Control. As you all know, Remote Control's navigation is Four-Way (Up, Down, Left and Right) with OK (of Enter) button.

On FLDH, when arrow keys are pressed on Remote, the focus will move from one active object to the next. In this way, we can navigate to all the active objects present on the stage.

Currently there are not many digital home devices which has support for keyboard input. All the inputs possible through remote are Numerals (0 through 9), Directional Keys (Up, Down, Left, Right) and OK (Enter). So, there is no way that we can input alphabetical characters from Remote.

All the applications which are being developed for FLDH have this limitaion of input. This can be overcomed by using a Virtual Keyboard, created in flash, as part of the application when and where there is any input needed. All the keys in Virtual key board can be navigated using the directional keys of remote.

Once we have such Virtual Keyboard, it would be a bit easy in dealing with TextInput. This post is on how to create a very simple Virtual Keyboard in Flash (of course AS2.0).

We will try to incorporate only alphabets, all symbols, CAPS (to shift to Capital Lettering), BackSpace. We wont need keys like Shift, Alt, Tab, Control etc.

Create a new Flash AS2.0 Document with Stage Size set to 1280X720. (As this will be resolution for all the Full Screen FLDH Apps)

First decide on the layout of Keyboard you want to design. We can go with standard QWERTY keyboard or any custom keyboard. But for this post, we will stick to QWERTY keyboard.

First, set the background color of the Stage to 'Black'.

Create a button, which represents the key, and decide on your desired Up, Over and Down states. I have created a button something like this:

 

 

 

 

 

 

Now arrange an array of these buttons on the stage in the following fashion:

 

 

 

 

 

 

 

Once the layout is done, create a new movieClip for letters in a new Layer, name something like 'smallcase_mc'. In this movieClip, create as many textfields as the buttons as the labels of the keys. Arrange all the textfields as if they are like the labels to the keys. (as follows)

 

 

 

 

 

 

Similarly, create another movie clip say 'uppercase_mc' in new Layer, which has all the capital letters, and other symbols corresponding to each key. Somthing like this below:

 

 

 

 

 

 

Goto layers with buttons, give id to each button like the button below number 1 as '1.btn'  and so on. Make sure all the buttons are given appropriare  id's.

So, your Timeline should have about three layers(in the order 3-2-1):

1. A layer with buttons layed out
2. A layer with movieclip 'smallcase_mc', which has text field with normal key labels
3. A layer with movieclip 'caps_mc', which has textfields in the similar fashion as layer2, with text field labels as Capital letters and other symbols accordingly.

Once the keyboard layout is done, we need to have a textfield at the top, to read the kep inputs.

Create a new layer 4, at the top, and add a dynamic textfield with id 'seach_txt' and place it just above the keyboard layout.

 

 

 

 

 

 

 

 

This is all about the layout of the keyboard.

In the next part (Part II) of this tutorial, we will deal with the ActionScripting part of this, like writing events for all the buttons.