package actionscript{

    import flash.display.MovieClip;
    import flash.display.Graphics;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.events.*;

    public class KeyButton extends MovieClip {

        public var keyWidth:uint = new uint;
        public var keyHeight:uint = new uint;
        public var code:uint = new uint;
        public var char:String = new String;
        public var shiftChar:String= new String;
        public var keyColor:uint= new uint;
        public var charColor:uint= new uint;
        public var lineColor:uint= new uint;
        public var charTextField:TextField = new TextField;
        public var shiftCharTextField:TextField = new TextField;
        private var charFormat:TextFormat = new TextFormat();
        private var backGround:MovieClip = new MovieClip;

        public function KeyButton() {
            // Setup the default for the variables.
            keyWidth = 25;
            keyHeight = 35;
            code = 0;
            char = '';
            shiftChar = '';
            keyColor = 0xCCCCCC;
            charColor = 0x000000;
            lineColor = 0x888888;
            addEventListener(MouseEvent.CLICK, clicked);
            addEventListener(MouseEvent.MOUSE_OVER, hover);
            addEventListener(MouseEvent.MOUSE_OUT, leave);
            addEventListener(Event.ENTER_FRAME, checkStatus);
                        addChild(backGround);

        }
        public function build():void {
            defaultState();
            addTextFields();
            CustomKeyboard.textScreen.text = "";
        }
        private function reDraw(mouseStatus:String = ''):void {
            if (char == "Shift") {
                if (CustomKeyboard.shift) {
                    hoverState();
                } else {
                    defaultState();
                }
            } else if (char == "Caps Lock") {
                if (CustomKeyboard.caps) {
                    hoverState();
                } else {
                    defaultState();
                }
            } else {
                if (mouseStatus == "over") {
                    hoverState();
                } else if (mouseStatus == "out") {
                    defaultState();
                }
            }
        }
        private function hoverState() {
            backGround.graphics.clear();
            backGround.graphics.beginFill(keyColor-0x222222,1);
            backGround.graphics.lineStyle(0, lineColor-0x222222, 1, true);
            backGround.graphics.drawRect(0, 0, keyWidth, keyHeight);
            backGround.graphics.endFill();
        }
        private function defaultState() {
            backGround.graphics.clear();
            backGround.graphics.beginFill(keyColor,1);
            backGround.graphics.lineStyle(0, lineColor, 1, true);
            backGround.graphics.drawRect(0, 0, keyWidth, keyHeight);
            backGround.graphics.endFill();
        }
        private function addTextFields():void {
            charFormat.font = "Verdana";
            charFormat.color = charColor;
            charFormat.size = 12;

            charTextField.width = keyWidth;
            charTextField.y = 15;
            charTextField.htmlText = char;
            charTextField.setTextFormat(charFormat);
            charTextField.autoSize = TextFieldAutoSize.CENTER;
            charTextField.selectable = false;
            charTextField.mouseEnabled = false;

            charFormat.size = 10;

            shiftCharTextField.width = keyWidth/2;
            shiftCharTextField.text = shiftChar;
            shiftCharTextField.setTextFormat(charFormat);
            shiftCharTextField.autoSize = TextFieldAutoSize.CENTER;
            shiftCharTextField.selectable = false;
            shiftCharTextField.mouseEnabled = false;

            addChild(charTextField);
            addChild(shiftCharTextField);
        }
        private function addText(string:String, shiftString:String) {
            if (CustomKeyboard.shift) {
                CustomKeyboard.textScreen.appendText(shiftString);
                CustomKeyboard.shift = false;
            } else if (CustomKeyboard.caps) {
                CustomKeyboard.textScreen.appendText(shiftString);
            } else {
                CustomKeyboard.textScreen.appendText(string);
            }
        }
        private function clicked(event:MouseEvent):void {
            switch (char) {
                case "Space Bar" :
                    CustomKeyboard.textScreen.appendText(" ");
                    break;
                case "Tab" :
                    CustomKeyboard.textScreen.appendText("\t");
                    break;
                case "Backspace" :
                    CustomKeyboard.textScreen.replaceText(CustomKeyboard.textScreen.text.length-1, CustomKeyboard.textScreen.text.length,'');
                    break;
                case "Enter" :
                    CustomKeyboard.textScreen.appendText("\n");
                    break;
                case "Shift" :
                    CustomKeyboard.shiftToggle();
                    break;
                case "Caps Lock" :
                    CustomKeyboard.capsToggle();
                    CustomKeyboard.shift = false;
                    break;
                default :
                    addText(char, shiftChar);
            }
        }
        private function checkStatus(event:Event) {
            reDraw();
        }
        private function hover(event:MouseEvent) {
            reDraw("over");
        }
        private function leave(event:MouseEvent) {
            reDraw("out");
        }
    }
}


Once again we start with creating the package and importing the needed files and starting our class file. In the construtor KeyButton() we setup our variables. These varialbes are the default variables for our class. When an instance of the class is created these variables will be used. If we want to overwrite them we just access them through the dot "." operator. Example: KeyButton.char = "Example". Now the char data for this button will read "Example". This will be displayed on top of the button for it's label.
Event Listeners
There are a few event listeners we are using here. MOUSE_OVER, MOUSE_OUT and and ENTER_FRAME. These are all used to redraw the buttons. The only one that isn't envolved is MOUSE_CLICK. This is used to write the KeyButton's char or subChar value to the textField.
addEventListener(MouseEvent.CLICK, clicked);
        addEventListener(MouseEvent.MOUSE_OVER, hover);
        addEventListener(MouseEvent.MOUSE_OUT, leave);
        addEventListener(Event.ENTER_FRAME, checkStatus);

        private function checkStatus(event:Event) {
            reDraw();
        }
        private function hover(event:MouseEvent) {
            reDraw("over");
        }
        private function leave(event:MouseEvent) {
            reDraw("out");
        }
        private function clicked(event:MouseEvent):void {
            switch (char) {
                case "Space Bar" :
                    CustomKeyboard.textScreen.appendText(" ");
                    break;
                case "Tab" :
                    CustomKeyboard.textScreen.appendText("\t");
                    break;
                case "Backspace" :
                    CustomKeyboard.textScreen.replaceText(CustomKeyboard.textScreen.text.length-1, CustomKeyboard.textScreen.text.length,'');
                    break;
                case "Enter" :
                    CustomKeyboard.textScreen.appendText("\n");
                    break;
                case "Shift" :
                    CustomKeyboard.shiftToggle();
                    break;
                case "Caps Lock" :
                    CustomKeyboard.capsToggle();
                    CustomKeyboard.shift = false;
                    break;
                default :
                    addText(char, shiftChar);
            }
        }



The reDraw() function is used to change the look of the buttons. It uses the boolean variables from the main class to see how to draw the special keys (Shifht and Caps Lock) and also controls how the normal buttons look. This function is called when a user hovers over and leaves a button. 
private function reDraw(mouseStatus:String = ''):void {
            if (char == "Shift") {
                if (CustomKeyboard.shift) {
                    hoverState();
                } else {
                    defaultState();
                }
            } else if (char == "Caps Lock") {
                if (CustomKeyboard.caps) {
                    hoverState();
                } else {
                    defaultState();
                }
            } else {
                if (mouseStatus == "over") {
                    hoverState();
                } else if (mouseStatus == "out") {
                    defaultState();
                }
            }
        }


addText(string:String, shiftString:String) is used to add the right character to the textScreen object. It adds the char string if the caps lock or the shift key are not activated, otherwise it adds the shiftChar. 
private function addText(string:String, shiftString:String) {
            if (CustomKeyboard.shift) {
                CustomKeyboard.textScreen.appendText(shiftString);
                CustomKeyboard.shift = false;
            } else if (CustomKeyboard.caps) {
                CustomKeyboard.textScreen.appendText(shiftString);
            } else {
                CustomKeyboard.textScreen.appendText(string);
            }
        }



Well what is a button whitout a label? Well this is where addTextFields() comes in to play. It adds two textFields to the button. One for the char and one for the subChar.
private function addTextFields():void {
            charFormat.font = "Verdana";
            charFormat.color = charColor;
            charFormat.size = 12;

            charTextField.width = keyWidth;
            charTextField.y = 15;
            charTextField.htmlText = char;
            charTextField.setTextFormat(charFormat);
            charTextField.autoSize = TextFieldAutoSize.CENTER;
            charTextField.selectable = false;
            charTextField.mouseEnabled = false;

            charFormat.size = 10;

            shiftCharTextField.width = keyWidth/2;
            shiftCharTextField.text = shiftChar;
            shiftCharTextField.setTextFormat(charFormat);
            shiftCharTextField.autoSize = TextFieldAutoSize.CENTER;
            shiftCharTextField.selectable = false;
            shiftCharTextField.mouseEnabled = false;

            addChild(charTextField);
            addChild(shiftCharTextField);
        }



Now on to the functions that make the look of the buttons. This is where hoverState() and defaultState() come in. These functions use the graphics class to draw rectangles in the backGround movieclip. The graphics.clear() function clears all of the graphics objects from the backGround movieclip. then we use the drawRect function to draw a box. We use the class variables to set the width, height and colors of the rectangle.
private function hoverState() {
            backGround.graphics.clear();
            backGround.graphics.beginFill(keyColor-0x222222,1);
            backGround.graphics.lineStyle(0, lineColor-0x222222, 1, true);
            backGround.graphics.drawRect(0, 0, keyWidth, keyHeight);
            backGround.graphics.endFill();
        }
        private function defaultState() {
            backGround.graphics.clear();
            backGround.graphics.beginFill(keyColor,1);
            backGround.graphics.lineStyle(0, lineColor, 1, true);
            backGround.graphics.drawRect(0, 0, keyWidth, keyHeight);
            backGround.graphics.endFill();
        }