SOURCECODE : here
APPLICATION: here
The application looks like:
As I told to release the source code I am sharing it here.If you want to compile it on your own extract the ‘src’ folder and put it along with your ‘ext’ and ‘int folder’ of FlashDevelop’s project. If you are very new you can look at my first post on how to use FlashDevelop for this purpose. Basically the external AS3 classes needed for this are flash.events.TouchEvent and app.core.action.RotatableScalable and of course flash.events.TUIO . Just make sure that you have them.
The code consists of the 5 files (5 classes). They are
- MTButton.as
- MTCustomKeyboard.as
- MTKeyboard.as
- MTEditor.as
- Main.as
This is the order in which i made this . I will describe about all of them in this post
1.MTButton.as:
Creates a button sprite which responds to touch events.This extends the RotatbleScalable class so can be rotated and scaled with touch events. We also can set the noMove,noRotate and noScale property of the instance to restrict the behavior of RotatableScalable class.
public function MTButton( htmlText:String, width:Number, height:Number,formatter:TextFormat=null,replacementText:String=null )
The constructor of MTButton class .
htmlText : the text on the button (can be <b>B</b> i.e in html form)
width,height : The width and height of the button
formatter : The to format the buttonText as per your wish, This is not required if you dont want to format the text
replacementText : The text as a replacement of original text so as to replace the button text using just one method. can be null.
public var buttonState:String;
Gives the button’s state , basically returns the state as string (i.e “upstate“,”downstate“,”overstate” or “outstate” as per button’s state)
public function getWidth():Number public function getHeight():Number public function setText(replacementText:String):void public function getText():String public function replaceText(text:String=null):void
These are the public methods of this class . As the first two methods name say they return the height and width of the button sprite respectively. The next two methods set the text on the button’s textfield(html text) and get the text (normal/non-html text) respectively. The last method replaces the text . If no parameter is given it replaces the text given in the constructor as replacementText.
These were the public methods of the class.
2.MTCustomKeyboard.as:
Creates a keyboard object(RotatableScalable) with the buttons with the names given in the argument array.Also it has two more keys,”Fix keyboard” and “Fix Keys” which respectively toggles fixing of the movable keyboard and movable buttons.No public variables involved.
public function MTCustomKeyboard(args:Array,_width:Number=800,_height:Number=260)
The constructor of the keyboard. “args” is an array of Strings like [“A”,”B”,”C”,”D”]._width and _height represent the height and width of the base of the keyboard which contains the buttons. Initially the buttons are aligned in a random way. You can use the getButtonByName(arg:String) to get the button instance and play with its position or property.
public function getButtonByName(name:String):MTButton public function addKey(key:String,_width:Number,_height:Number):void
The first method returns the MTButton object named as the parameter we provide. In case the button does not exist, it throws error stating “Cannot access a property or method of a null object reference“.
The second method adds a key with the name as key(1st parameter) with width ans height provided in the parameter.
3.MTKeyboard.as:
This extends the MTCustomKeyboard.as which extends RotatbleScalable and uses MTButton.as .
The constructor is
public function MTKeyboard()
The public variables are
public var shift:Boolean = false; // Is shift key pressed ? public var ctrl:Boolean = false; //Is ctrl key pressed ? public var alt:Boolean = false; //Is alt key pressed ? public var capslk:Boolean = false; //Is caps lock On ?
They behave as they say it in the comments .
There is only one public method in this class.
public function getAllButtons():Array
This returns the array containing all the buttons in the keyboard. In this class i was confused what public methods to implement. If you want any method please let me know and i will do that .
Then coming to main thing. Just creating the keyboard is not enough if we can not use it for correct purpose .Actually what we want it is to receive the events and process data according to it . To make it simple I am sending the normal keyboard events. So as you press a key on the keyboard it will send a keyboard event of type KeyboardEvent.KEY_DOWN . SO if we add a listener for this event and use handler to process the data . The event.Charcode will be the same as normal KeyboardEvent.e.g
package
{
import flash.display.Sprite;
import flash.ui.Keyboard;
import flash.events.*;
public class Main extends Sprite
{
var rect:MTButton = new MTButton("MY Button", 100, 100);
public function Main()
{
//--------connect to TUIO-----------------
TUIO.init(this,'localhost',3000,'',true);
trace("Application Initialized");
//----------------------------------------
var kb:MTKeyboard = new MTKeyboard();
rect.x=100;
rect.y=100;
addChild(rect);
addChild(kb);
stage.addEventListener(KeyboardEvent.KEY_DOWN, move);
}
private function move(event:KeyboardEvent):void
{
if(event.charCode==Keyboard.LEFT)
{
rect.x = rect.x - 10;
}
else if(event.charCode==flash.ui.Keyboard.RIGHT)
{
rect.x = rect.x + 10;
}
}
}
}
So this shows how to use the keyboard.
4.MTEditor.as:
This class creates the main editor (includes the keyboard). This has no public methods (of course without the constructor) and no public variables .
The constructor is
public function MTEditor(_width:Number=900,_height:Number=600,fontSize:Number=20)
_width = the width of the editor
_height=the height of the editor
fontSize=Initial font size
The demo of this class is present in the Main.as file. (That itself is demo :P)
5.Main.as:
This is the main class which creates instances of the editor .
Well that was the documentation (whether you call it or not :P) .I am planning to include one more class to demonstrate the usage of these classes.Well for using these classes this much will be enough but to change anything inside the classes you need to read up the comments in the class files. If that does not help just let me know. I will try my best to make it clear.
So as I am releasing the source code and documentation i encourage people to use these classes whenever and wherever necessary so that i can be of any help to them. Any doubts or help please get back to me. Thanks 🙂
Amit's Blog 