Pixel Acres

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.

Get Adobe Flash player

 

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.

9 Responses to “Erase an image using your mouse in AS3”

  1. grabek says:

    Good one. congrats!

  2. So so cool!! Really love it!!!
    Thanks for sharing.

  3. por says:

    How to mask a bee picture in masked image? help me please

  4. Bilge says:

    how can i use separate erase tool, i can use mouse for drawing but i can’t use erase tool

  5. Edu says:

    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.

  6. Jonathan says:

    @Edu Sorry, I haven’t worked with Flash for a couple of years.

  7. Edu says:

    Me neither! lol Thanks anyways.

  8. Maxim says:

    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

  9. aseel says:

    how do i detect end of the cleaning process ?? (erasing) to start animation if the erasing end

    thank you very much

Leave a Reply