Swami Charan's Blog My personal blog…

Vitual Keyboard for FlashLite for Digital Home – II

Continuing from the Part I of this tutorial, hope you are ready with the keyboard layout and key labels as both 'smallcase_mc' and 'caps_mc'. Now your layer structure should be something like this (dont worry about 'actions' layer, which we will create now in next step).

Layer Structure

smallcase_mc._visible = true;

caps_mc._visible = false;

The text Field at the top i.e. search_txt should be empty. So, initialise the contents with empty string.

search_txt.text = " ";

To check if the CAPSLK is ON or OFF, we will use a variable 'caps', which will be 'false' bye default as we will go with normal keyboard at start until CAPSLK is made ON.

var caps = false;

To read the button pressed and to add the key value to search_txt, we will use another variable 'key'.

var key;

Once this is done, this how ur initial code should be:

smallcase_mc._visible = true;

caps_mc._visible = false;

search_txt.text = " ";

var caps = false;

var key;

Now its time to write events for all the buttons to add the label of the clicked button to search_txt. The logic is something like this. If 'caps' is false, it means its a normal keyboard. And if 'caps' is 'true', it means CAPSLK is ON and the label should either Capitol Letter or other corresponding symbol of the key.

For example, the event for button below letter 'a' will be something like this, the id of this button being 'a_btn'.

a_btn.onRelease = function(){

      if(caps)

          key = "A";

      else

          key = "a";

      search_txt.text += key;

}

What we are doing here is according to the value of 'caps' variable, we will decide on the character to be assigned to the variable 'key'. Once the key value is decided, we will append this key value to the existing contents of the 'search_txt'.

Similarly, we need to write events for all the buttons of all the alphabets, symbols etc. You can find the corresponding mapping for all the keys on any QWERTY keyboard.

Coming to the special keys like SPACEBAR, CAPS, BACKSPC and ENTER, we will work on them now.

SPACEBAR:

This will be relatively simple compared to any other button event. We just need to append a SPACE character to the 'search_txt'.

space_btn.onRelease = function(){

    key = " ";

    search_txt.text += key;

}

CAPS:

This key wil be used to Toggle keyboard label on our keyboard i.e. we will be toggling the value of 'caps' variable on clicking this button and we have to make the corresponding movieclip to visible state. If 'caps' is false, 'smallcase_mc' should be visible and 'caps_mc' should be invisible. If 'caps' is true, 'smallcase_mc' should be made invisible and 'caps_mc' should be made visible.

caps_btn.onRelease = function(){

   if(caps){

       caps = false;

       smallcase_mc._visible  = true;

       caps_mc._visible = false;

   }

   else{

       caps = true;

       caps_mc._visible = true;

       smallcase_mc._visible = false;

   }

}

BACKSPACE:

On clicking this button, we will have to remove the last character of 'search_txt'. This can be done by truncating the last character of this textbox as follows:

search_txt.text = substring(search_txt.text, 0, search_txt.length-1);

ENTER:

Enter key is used here to read the text from 'search_txt' and assign it to whatever variable which requires the TextInput from this keyboard. For now, we are just tracing the text of  'search_txt'.

enter_btn.onRelease = function(){

   if(search_txt.text != ""){

        trace(search_txt.text);

   }

}

 Once the 'onRelease' events are written for all the buttons, we are good to go for our virtual Keyboard.

Here is a simple keyboard i have created  - keyBoard.swf

You can also download FLA.