Create highlither with AS3

[rahimhaji]

Dear Friends,

I want to create a highlighter with AS3. iam working with an elearning project LMS. when my application playing, I want to add a tool to highlight the screen wherever user wants and save it for future use. Please help me or suggest me to create highlighter (same like highlighter in snipping tool in our OS). Whenever user wants to delete the highlighter, he has to delete. pls help me.

pls check my ref screen : http://comptools.files.wordpress.com/2010/02/edit_screen.jpg.

Thanks and regards,

Syed Abdul Rahim

[rahimhaji]

hi friends given link is not working pls consider that as highlighter in snipping tool of windows OS.

[kglad]

your link is working for me.

you can use the drawing api to create a 'highlighter' tool that allows users to highlight items on display.  and you can create an eraser tool that allows users to undo their hightlight(s).

you can use the bitmapdata class to save the display (with and/or without highlights).

[rahimhaji]

Thks Mr.kglad,

Already I have used drawing api and created that highlighter, but it is giving some continuous circle shapes, it looks odd... it is not like our snipping tool. Please check my attached image. I have used the below code, pls check and help me:

//------------- DRAWING CODE STARTS----------------------------------------------
var isDrawingReady:Boolean;
var startX:Number,startY:Number;
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDrawReady);
stage.addEventListener(MouseEvent.MOUSE_UP, onDrawStop);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onDraw);
function onDrawReady(e:MouseEvent):void
{
startX = e.stageX;
startY = e.stageY;
isDrawingReady = true;
}

function onDraw(e:MouseEvent):void
{
if (isDrawingReady)
{
  this.graphics.lineStyle(30,0xff0000,.05);
  this.graphics.moveTo(startX,startY);
  this.graphics.lineTo(e.stageX,e.stageY);
  startX = e.stageX;
  startY = e.stageY;
}

e.updateAfterEvent();
}

function onDrawStop(e:MouseEvent):void
{
isDrawingReady = false;
}

function clear_screen(event:MouseEvent) {
this.graphics.clear();
}
//------------- DRAWING CODE END----------------------------------------------

[Colin Holgate]

You are using an alpha value of 0.05, so each mouse movement will just draw another almost seethrough red circle. If you mouse around slowly the circles will add up, and look less seethrough.

Is there a reason not to use an alpha of 1? The Windows snipping tool seems to use opaque lines.

[rahimhaji]

Dear Mr.Colin,

Greetings! thks for the reply. S, if I use alpha as 1, it is hiding the text behind the drawing we have created. That's why I used less alpha. In snipping tool we can create any shape like circle, square or lines...

Thanks and Regards,

Syed Abdul Rahim

[Colin Holgate]

You could put the drawing layer behind the text.

[Colin Holgate]

And for the shapes that's a different situation, because you would only draw one shape. Those could have some transparency, and be on top of the text. You would repeatedly erase and draw the shape as the user resizes it.

[kglad]

decrease your line thickness and increase your alpha.

[rahimhaji]

K, Thks Mr.Colin and Mr.Kglad. I will follow.. thks