Monday, December 15, 2008

ScreenBoard in AIR

Guys, this is an extension of whiteboard application. there is not much of a difference here in both the thing is here the application is transparent and gives the user a feeling that the application is drawing actually on the screen. Alright so lets see how the thing is being done..I assume the reader have some basic idea about flex/AIR. if not its not a big deal..

Actual code is very simple and hence i am not going to let it get complicated, because every one likes it simple right?

Firstly u can begin with a new AIR project
type the script tag and inside that type the following code.

import mx.core.UIComponent;
import flash.display.*;

private var spBoard:Sprite = new Sprite();

private function init():void
{
var win:NativeWindow = systemManager.stage.nativeWindow;
var cont:UIComponent = new UIComponent();
win.maximize();
win.visible = true;
}

/*In this function the mouse position is taken and the graphics function starts drawing
you can set the line style from 3 to any number u like or u can get it from a UI text
box or anything u like , u can use a colour picker to set the color of the line but i am
using a simple black line with 3 brush points.
*/
private function onMouseDown():void
{
dboard.graphics.lineStyle(3, 0x000000);
dboard.graphics.moveTo(stage.mouseX, stage.mouseY);
}

/*
Here the lines end point is calculated from the x,y of mouse. What this actually doies is draws tiny straight lines to each place u move your mouse
*/
private function onMouseMove(e:MouseEvent):void
{
if (!e.buttonDown)
{
return;
}
dboard.graphics.lineTo(stage.mouseX, stage.mouseY);
e.updateAfterEvent();
}

important to note:

*board is the canvas id and set its attributes as alpha=.08,
*call the onmousedown function on the mouse down event in the canvas (i.e board) and onmousemove on the mousemove event of canvas

* dboard is another canvas over which u are actually drawing set its height and width to 100%
* u cn add a button and on its click event type {dboard.graphics.clear()} to clear the screen.
And DONT FORGET TO SET THE showFlexChrome="false" in your windowedApplication tag
If that even doesnt work under any circumstances u may edit the xml file and set the transparency to true and also the showChrome tag to false Which is inside the "initialWindow" tag
thats it..have a nice time sracthing ur desktop...

No comments:

Post a Comment