Erase an image using your mouse in AS3
I recently had to create a simple Flash application that allowed the user to ‘erase’ an image using their mouse. I couldn’t find any examples of the exact effect I wanted, so I cobbled together my own. The effect I came up with is similar to using the eraser tool in Photoshop.
Demo
Click and drag your mouse on the image below to erase it. Press the reset button to start over.
Download
Download FLA (includes code comments explaining how everything works)
Credits
My effect is based on the masking techniques shared by surferboy in an Ultrashock forum discussion and a Flash & Math tutorial explaining how to use Flash’s drawing API to draw using the mouse.
The gorgeous photographs used in this demo are by wabberjocky and ex.libris and are available under a Creative Commons license.
10 thoughts on “Erase an image using your mouse in AS3”
Comments are closed.
Good one. congrats!
So so cool!! Really love it!!!
Thanks for sharing.
How to mask a bee picture in masked image? help me please
how can i use separate erase tool, i can use mouse for drawing but i can’t use erase tool
Very simple and elegant solution. I know this may be a shot in the dark but how can I detect when the Unmask is complete? I want to make a graphic appear when the user finish erasing the image on top. I declare the image invisible at the top of the script and I have a function to make it visible but I just don’t know what method to use to detect that the image below shows completely.
@Edu Sorry, I haven’t worked with Flash for a couple of years.
Me neither! lol Thanks anyways.
Thanks! Small improvement
add casheAsBitmap = true to eraserClip
function initEraser():void {
eraserClip.graphics.lineStyle(lineSize,0xff0000);
eraserClip.graphics.moveTo(stage.mouseX,stage.mouseY);
eraserClip.cacheAsBitmap=true;
}
and you can get rid of drawnBitmapData
erasableBitmapData.draw(eraserClip, new Matrix(), null, BlendMode.ERASE);
and no smooth alpha edges now
how do i detect end of the cleaning process ?? (erasing) to start animation if the erasing end
thank you very much
can we achieve the same in AS2…