Wednesday, 1 July 2009

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.

39 comments:

Peter 28 September 2009 04:21  

Doesn't work for me - throws out the error: "1120: Access of undefined property maskedbg_mc.

iliketo 28 September 2009 06:50  

@Peter

This error message means you have not given the instance name 'maskedbg_mc'. Make sure you have done Step 3.

emmy 29 September 2009 13:26  

I tried this today and had a box over it with a line of code inside. The scratch card worked but had the writing over the top. Any advice on how to stop this?

iliketo 29 September 2009 14:55  

@emmy

I don't understand what you mean. Can you explain more?

Alex 3 October 2009 21:10  

I think emmy means the code behind a box of color were both on the stage and the layer with the code was above the layer with the box.

@emmy

make sure whatever is going to be seen when the cover is scratched off is on a layer beneath the scratch off layer.

Justin 15 October 2009 14:28  

Is there a way to put a link on the revealed layer? Can the scratch off work without having to click down, thus saving the click for a link?

iliketo 4 November 2009 02:43  

@Justin

You basically need to modify the code by removing the click event listener and the function.

Gardengnomes 14 November 2009 20:59  

I have entered all coding correctly, no errors, and the scratch card effect isn't working. help?

iliketo 15 November 2009 05:28  

@Gardengnomes

Are you clicking and dragging?

Gardengnomes 15 November 2009 09:28  

Yup, I'm clicking.

iliketo 15 November 2009 10:39  

@Gardengnomes

Since, you have no coding errors. You must have missed out something from the tutorial. In step 2, have you inserted a new layer on the timeline.

Gardengnomes 18 November 2009 16:51  

I have the three layers required. still nothing.

iliketo 19 November 2009 03:05  

@Gardengnomes

It probably something very simple. Have you converted the image into a movie clip (F8) and given it the instance name maskedbg_mc.

Gardengnomes 20 November 2009 20:43  

Oh, haha, I forgot to add the second part of the coding. :) Thanks anyways, it's good to see that you respond asap. Kudos! :D

Have a nice day.

ossscar 29 November 2009 02:11  

It doesnt work with me.. I have done everything you said in the tutorial, (i did it twice) but it doesn't work. I have exactly the same image, but it doesn't scratch :-(. Please help me!

thanks

iliketo 29 November 2009 08:09  

@Ossscar

You need to be more specific, are there any error codes? It is not a difficult tutorial it has only 4 steps.

Mostafa Berg 2 December 2009 04:54  

Hey there =]

Very cool tut, Helped me alot !

I've done it exactly but got a little problem here, when i try to test the movie i get this error:

**Error** Scene=Scene 1, layer=Actions, frame=1:Line 5: The class or interface 'Sprite' could not be loaded.
var mask_mc:Sprite = new Sprite();

**Error** Scene=Scene 1, layer=Actions, frame=1:Line 15: The class or interface 'MouseEvent' could not be loaded.
function mouseD(event:MouseEvent):void {

**Error** Scene=Scene 1, layer=Actions, frame=1:Line 20: The class or interface 'MouseEvent' could not be loaded.
function mouseM(event:MouseEvent):void {

**Error** Scene=Scene 1, layer=Actions, frame=1:Line 29: The class or interface 'MouseEvent' could not be loaded.
function mouseU(event:MouseEvent):void {

Total ActionScript Errors: 4 Reported Errors: 4


Is that my AS version ? I'm using flash 8 !

thanks,
Mostafa Berg

iliketo 2 December 2009 05:57  

@Mostafa Berg

This tutorial is created in Actionscript 3.0. It looks like you are using Actionscript 2.0. This effect will only work in Actionscript 3.0, so it is giving you errors.

Mostafa Berg 2 December 2009 05:59  

I just noticed that !:(

Too bad i can't use this technique, but good news i'm already working on a different one and it's working great for me in AS2 =]

Thanks alot !, and thanks for your great quick response :)

Mostafa

BoG 2 December 2009 08:33  

Nice trick, but how would I go about to check weather of not everything was scratched correctly?

BoG 2 December 2009 08:58  

don't worry :) solved it myself

Best wishes

Ize 8 December 2009 13:10  

Hey there iliketo,
great tutorial! it helped me a lot!

I just wanted to ask, in case u ca help me, is there any way to understand if a sprite has the same color in all its surface?

My intention is after all img is scratched to make a video play-button appear!
Any idea how to do that?

thnx in advance

Ize

Ry 4 February 2010 19:24  

nice! done it and works fine... its a start for me in flash. Thanks for this tutorial

Aruna 29 March 2010 14:14  

Thanks for this great tutorial ... I tested it and it's working like a charm .. but got a little problem ..
when I try to embed the exported swf file in a HTML page the scratch effect just doesn't work! .. I set stage.scaleMode = "noScale"
but still, it's not working when it's embedded into HTML page..

BTW I'm using external image loaded by load function but as I mentioned before it's working properly in flash player but it doesn't work when it's embedded in HTML page..

Thanks alot!

Debra 2 April 2010 07:40  

Great Tutorials, they're such a great help! But with this one, when i test it, all thet comes up is the image, rather than the scratch card! I'm pretty sure i've done everything as I was meant to, I was wondering if you could help! thanks :)

Silvi 19 July 2010 06:44  

Hi there,
Thanks for the tutorial. It is great.
I am just wondering if it's possible that randomly appears a winner (let say one out of ten).
Can we do that in AS3?

Speakingbuzz 28 October 2010 19:43  

Hi this is really helpful, are you able to add a scratching sound to this to make it seem real?

Filipa 15 January 2011 11:04  

Hi,
I just complete the tutorial and it's turned great. But I thought that I could add a reset button, I tryed:

RESET.addEventListener(MouseEvent.CLICK, FILL);

function FILL(event:MouseEvent):void
{
trace("click");
mask_mc.graphics.beginFill(0xFFFFFF);
mask_mc.graphics.endFill();
}

But doesn't work... Someone can help me? Thanks ;)

iliketo 16 January 2011 14:49  

@Flippa

What do you want the reset button to do?

jennifer 7 March 2011 06:22  

hi
can it scratch without mouse click?

how can i customize so i dont need to mouse click to start scratching

can i scrath just by moving the mouse?

iliketo 12 March 2011 01:22  

@Jennifer

Remove the mouse down event listener and remove the code with 'mouse click'

dima 7 April 2011 14:32  

hi iliketo
is it possible to dynamically calculate the visible ratio of the bg image ?
thanks dima

link_man96 8 April 2011 14:01  

Is there a way to have it so that every time you scratch, it is a different image each time?

iliketo 8 April 2011 14:59  

@link_man96

I've created part 2 of this tutorial. You can see the link at the end of this tutorial.

purple1545 30 June 2011 05:34  

keep up the good work
help us from coding!!:)

iliketo 30 July 2011 06:59  

@Dima

I believe you can use the Bitmap.historgram().

css117 17 October 2011 13:28  

Well it works greats ! Many thanks

Small improve that can turn it more realistic : use dropshadow filter on your image sprite, and set it rather thin and check inside/inner box..

And voilà !
You reveal what seems to be under :)

jønne 18 June 2012 12:53  

I’m new to as 3 ad I have the mask revealing working. But how do I check if the picture is 80% revealed?

iliketo 19 June 2012 11:39  

@Jonne

I believe you can use the Bitmap.historgram().

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP