Create a scratch card in Actionscript 3

In this tutorial you will learn how to create a scratch card effect in Actionscript 3. This effect will allow you to click and drag the mouse to reveal the image below, like a real scratch card. This tutorial uses masks to create the scratch card effect. You will also need an image to be revealed. I have used a free stock image, but you can use whatever image you wish.

In AS2 the scratch card effect would have been quite difficult, as there were no shape classes to create the masked shape. You would have to manually write lots of code to create simple shapes like a circle. This is because there were only the lineTo() and curveTo() functions which meant you would have to use complicated maths to create any advanced shapes. However, in AS3 there are new shapes classes which reduce the code you need to write, and makes the process of the creating the scratch card easier.

Scratch card in Actionscript 3

Step 1

Open a new Flash AS3 file.
Set an appropriate stage size I have selected 400 x 200 dimensions, but you can use whatever size you wish.
Select the rectangle tool (R) with any colour and drag a rectangle shape to fill the entire stage area.
Now select the text tool (T) and type the message “Have a scratch” on top of your rectangle shape. I have used impact font type with #666666 colour.




Step 2

On the timeline lock “layer 1” and insert a new layer.
Then import your image on the stage by selecting File > Import > Import to Stage. Make sure your image fits exactly on top of your rectangle. You can use the free transform tool (Q) to adjust the image size.




Step 3

Select your image on the stage and convert it into a symbol by pressing F8. Give it an appropriate name, check movie clip and click ok. Now select your movie clip and give it the instance name: maskedbg_mc.




Step 4

On the timeline insert a new layer called “Actions”. Right click on the first frame and select Actions and enter the following code:

//1.
var mouseclick:Number=0;

//2.
var mask_mc:Sprite = new Sprite();
maskedbg_mc.mask = mask_mc;
addChild(mask_mc);

//3.
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseD);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseM);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseU);

//4.
function mouseD(event:MouseEvent):void {
mouseclick = 1;
}

//5.
function mouseM(event:MouseEvent):void {
if (mouseclick == 1) {
mask_mc.graphics.beginFill(0x000000);
mask_mc.graphics.drawEllipse(mouseX, mouseY, 70, 60);
mask_mc.graphics.endFill();
}
}

//6.
function mouseU(event:MouseEvent):void {
mouseclick = 0;
}

Code:
1. Creates a variable called “mouseclick” and sets the number value to zero.
2. Creates a new sprite called “mask_mc” and sets the masked objects to the background image. Also adds the sprite onto the stage.
3. Adds three event listeners for the mouse down, move and up events. Each of the three event listeners has different functions.
4. This function gives the “mouseclick” variable a value of 1, when the mouse is depressed.
5. This function checks whether the mouse has been depressed. If the mouse has been depressed, then any mouse movements will revealed the image below. The mask_mc is an ellipse shape with the position at the mouse x and y location; the width = 70 and height = 60. (Checkout the Actionscript 3.0 graphics component reference for more details)
6. This function returns the “mouseclick” variable to 0, which stops the image being revealed below.


Step 5

Test your scratch card Ctrl + Enter. Now use your mouse to click and drag, you should see the image below.



You should now have a scratch card effect. The source files can be downloaded here.
Checkout part 2 where you can have a random background.