Flash scratch out effect

1. Create a Flash document with 400x300 dimensions. Choose a dark gray color for the background. Save it as what name you want.
2. Insert two new layers. Rename layers actions, picture, background like in the picture below.



3. In the first frame of the picture layer go to File>>Import>>Import to Stage (Ctrl+R) and insert a picture with 400x300 dimensions or take the one below.

4. Select the picture an choose Modify>>Convert to Symbol (F8). In the Convert to Symbol window choose MovieClip as Type, choose center for registration point and give it bgMC name.
Now go in the Properties panel and give it an instance name of bg_mc.

5. In the first frame of the background insert another picture with 400x300 dimensions or take the one below:

6. Now comes the ActionScript part. In the first frame of the actions layer put the following ActionScript code:

this.createEmptyMovieClip('mask_mc',0);
bg_mc.setMask(mask_mc);
var contor:Number=0;

// function drawCircle draws a circle on mask_mc MovieClip of radius r and having center to mouse coordinates
function drawCircle(mask_mc:MovieClip):Void{
var r:Number = 50;
var xcenter:Number = _xmouse;
var ycenter:Number = _ymouse;
var A:Number = Math.tan(22.5 * Math.PI/180);
var endx:Number;
var endy:Number;
var cx:Number;
var cy:Number;

mask_mc.beginFill(0x000000, 100);
mask_mc.moveTo(xcenter+r, ycenter);
for (var angle:Number = Math.PI/4; angle<=2*Math.PI; angle += Math.PI/4) {
xend = r*Math.cos(angle);
yend = r*Math.sin(angle);

xbegin =xend + r* A *Math.cos((angle-Math.PI/2));
ybegin =yend + r* A *Math.sin((angle-Math.PI/2));
mask_mc.curveTo(xbegin+xcenter, ybegin+ycenter, xend+xcenter, yend+ycenter);
}
mask_mc.endFill();
}

// contor variable is used to hold if the mouse is pressed (contor is 1) or not (contor is 0)
this.onMouseDown=function(){
drawCircle(mask_mc);
contor=1;
}

// if the mouse is hold and moved then we draw a circle on the mask_mc
this.onMouseMove=this.onEnterFrame=function(){
if (contor==1){
drawCircle(mask_mc);
}
}
this.onMouseUp=function(){
contor=0;
}

7. Now test the movie (Ctrl+Enter) and see the result. Hope this flash tutorial is helpful!

You need to Register in order to download the FLA file.

Subscribe now via RSS feed and get all the new tutorials

written by Rajeeshkumar , August 10, 2007

can u please help to make a world clock .World means in my page i'll keep four clocks in that one will be local time and the other three will be three different countries

written by paul owen , August 13, 2007

it is good but dose not work properly it seems that when everything is complete and you test your movie it seems to rub out everything on the page only to reveal a black background which is'nt what i had on my back ground???????

written by AnaSt , August 13, 2007

Maybe you did't respect the order of the layers. The layers should be like in the picture from the tutorial. Put the picture you want to display first in the background layer and the picture ou want appear after scratch out on the picture layer.

written by Michael Hutchison , August 13, 2007

The instructions are pretty simple. I did every step very slowly and double-checked that I've done them right. I even pasted the coding in again to make sure it wasn't incomplete.

When I test, I get this error:
Location: Scene 1, layer 'actions', Frame 1, Line 6
Description: "1046: Type was not found or was not a compile-time constant: Void."
Source: "function drawCircle(mask_mc:MovieClip):Void{"

Then I get an image of the flower showing, and nothing happens if I click on it.

written by AnaS , August 14, 2007

what version of flash do you use? This code is for Flash 8 and ActionScript 2.0

written by Michael Hutchison , August 14, 2007

Ah. I have Flash CS3 and was using 3.0
I'll try doing this as a 2.0
(I thought it would be forwards-compatible.)

written by Michael Hutchison , August 14, 2007

I redid this in 2.0

GOOD NEWS: No error when I test the movie.
BAD NEWS: I got the same result as Paul Owen. The flower appears, and the circle reveals the grey background.

Are you sure your instructions are correct? Did you perhaps miss a step? I notice that you never have us turn the background image ("erase this...") into a library item.

written by Manoj , August 19, 2007

Could anyone provide me with the code to work it in Flash 5?

written by Sara , August 23, 2007

**Error** Scene=Scene 1, layer=actions, frame=1:Line 7: Syntax error.
 var r:Number = 50;

**Error** Scene=Scene 1, layer=actions, frame=1:Line 8: Syntax error.
 var xcenter:Number = _xmouse;

Total ActionScript Errors: 2 Reported Errors: 2

I get this error every time I try and make this work. I am using Flash mx 2004. Does anyone know how to help me?

written by benoît lenglin , August 24, 2007

This works fine, I also have a question : can you have the percent of the picture you've revealed ?

written by Jit , August 25, 2007

I want to learn ActionScript but i do'nt know plz help me sir.
plz send easy tutorial to me. I have some basic scripting knowledge.

thnaks

written by rajat , August 30, 2007

i am a student of enigineering.
very much interested in learning flash.

can you please send me some more tutorials step by step methods on flash.


i will be very thankful to you.

please send it as soon as possible.

written by roberto , September 03, 2007

it must be a nightmare writing tutorials for specific things for free and not asking for anything in return then you get all these idiots asking for free tutorials and help into a career in actionscripting and flash. for all you guys - GO BUY A BOOK OR SIT DOWN YOURSELF AND LEARN THIS STUFF!!!!

written by Kavitha , September 08, 2007

I read your tutorial and I found it's very useful to improve my knowledge in Flash.
Further I would like to learn about cartoon animations and I would like to create a cartoon series. Please let me know the step-by-step procedure, please.

written by Kim , November 29, 2007

I completed every step as outlined in the tutorial. However, I noticed in the code provided that a "mask_mc" is mentioned. Was this step left out? When I preview my document and I click on the screen, my picture is erased and just a color shows up.

written by Neil , December 04, 2007

I want the same outcome except without the "onMouseDown" but "onMouseMove". When I do that the flashmovie reacts or to slow or it begins already with a whole gap in the picture. Could anybody help me?

written by Bhagya , December 14, 2007

can you please send me some more tutorials with rotation images step by step methods on flash.

Thankinyou,
Bhagya

written by Renee Maslikhov , February 02, 2008

This tutorial is fantastic. You should give people the option to pay you something via PayPal because you definitely deserve it.

Now, is anyone having a problem with this working in Explorer? It works fine in Safari and Firefox, but my image doesn't show up at all in Explorer, which is weird because it's a .swf file.

If anyone has an idea of what's going on, I would appreciate the feedback

Thanks in advance

written by marieke , March 18, 2008

It works alright.
I only hava quick question.
I used a larger picture than you and it starts running slow after you've 'scratched' for a while..Is it because I combined it with a drag and drop script? Or do large pictures make this run slow? I also made the mouse area smaller.
To make things clear you can have a look on my site under: multimedia>websites>peek2
thanks

written by David Greenwell , April 08, 2008

Great Tutorial! Very Useful.

I'm just wondering if there is any of the actionscript that can be changed in order to change the size of the circle, so that it 'scratches' less off?

Thanks once again for the great tutorial.

written by Gorden , April 16, 2008

absolutly spot on,

quick, simple and effective,

How would i go about changing the mask shape from a circle to a custom image, or would that just be to much?

written by if else , April 21, 2008

NICE! But,how to determine when scratch off is done. I would like to execute another function.

written by Eba Ussher , May 22, 2008

i want to learn actionscript from the scratch can you please help me since i don't have knowledge about it.

Thanks.

written by Rob , June 13, 2008

I registered and logged in, but I cannot see where I can download the tutorial for FLASH SCRATCH OUT EFFECT.

Thanks,
Robarts

written by sandra muñoz , July 14, 2008

how can i include a sound effect?

written by mack_j , July 22, 2008

great tut, works perfectly

written by Kovács Marcell , November 07, 2008

Great tutorial, thanks!

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (27)