Scratch card (erase effect)

Posted on 2010-01-11
Medium Priority
Last Modified: 2013-11-11
Hey, im struggling trying to achieve a "scratch card effect". Like when you're scratching a lottery ticket, and it will slowly reveal a layer underneneath.

The attached flash file is somewhat doing what I want it to do, however im looking to make it a bit more smooth - but a bit clueless on how.
Swf live: http://cg-jung.dk/class/temp/EraseEffect.html

1. Right now when you erase, a solid circle will "scratch" off. Would there be way to make it more realistic, so some opacity would be applied to the edges (see the attached jpg as an example)

2. When "erasing" would there be a way to somehow simulate erased pieces "falling off" of the card as you're erasing. I'm thinking, having an animated movieclip (or it could be something scripted) which will play from the registrationpoint of the cursor.

3. Is it possible to erase on rollOver and not on click?
Question by:mrsam
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3

Accepted Solution

NiklasMoller earned 2000 total points
ID: 26285779
I couldnt download your file so I recreated an example from scratch (excuse the pun :)

see code.
For simplicity I just put this code right on frame 1 of the flash file, but you could put it somewhere else
it does points 1 and 3 that you describe.
It doesnt do the "bits falling off" stuff. that I cant help you with.
var areaWidth:Number = 200;
var areaHeight:Number = 200;
var scratchCircleRadius:Number = 10;

//bg sprite:
//this is the sprite that will be revealed as you scratch
//you can load an image into it or whatever

var bg:Sprite = new Sprite();
bg.graphics.beginFill(0xFF00FF, 1);
bg.cacheAsBitmap = true;
addChild( bg );

//create the mask for above sprite:
var maskSprite:Sprite = new Sprite();

//make the edges blurred, this will create your wanted effect:
var blurFilter:BlurFilter = new BlurFilter();
blurFilter.blurX = 20;
blurFilter.blurY = 20;
maskSprite.filters = [blurFilter];
//add the mask inside bg to make its positioning relative to bg:
bg.addChild( maskSprite );
//assign mask:
bg.mask = maskSprite;

//on every frame change, draw into the sprite
//this will reveal the underlying sprite:
stage.addEventListener( Event.ENTER_FRAME, doScratch );
function doScratch(evt:Event){	
	//draw into the mask sprite:
	maskSprite.graphics.drawCircle(stage.mouseX, stage.mouseY, scratchCircleRadius);

Open in new window


Author Comment

ID: 26287225
Hey NiklasMoller.

Thanks a lot for your response!
Ofcourse I forgot to tell that im working in AS2 - but ill try and see if I can use this - my bad :/
Would u mind showing me how I add an image from my library to the bg sprite?
Currently i've exported my image to actionscript and it has a class named: "imageExample"

This just got a little more complicated for me.
4. I'm also trying to hide the original cursor and replace it with an image of a coin (so it seems that the coin is scratching). The custom mouse is applied, but its a depth below the scratching part - so it looks weird. Tried changing the depth, but its not working right.

5. Lets say that I only want the cursor to turn into the custom image, when im within a certain area - could be the scratching surface + 50px on the y and x axe. How would i achieve that? Should I do a hitTest?

Sorry for the extra questions, I wasn't really thinking when I created the topic :/

Author Comment

ID: 26287251
Ah yea, I tried with the following code to change the cursor and depth.
//Hide mouse and attach custom cursor

//Change depth - bring cursor in front
setChildIndex(cursor_mc, 1);

Open in new window

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Expert Comment

ID: 26287452
ok Im off the case. cant help you in AS2. I have some working knowledge there but it would take me way too much time. sorry.
hopefully I could help you with some thinking. good luck!

Author Comment

ID: 26287790
Hey Niklas,

Well like I said, it  doesn't necessary have to be AS2, im sure I can get this to work in AS3.
But thanks for contributing.

Expert Comment

ID: 26292066
just a tip:

when you keep on adding complexity to the question like above
(adding points 4 and 5) you will not be popular with the experts... because the question just keeps growing endlessly. Keep the questins/problems separated and you might have more fortune with getting them answered.
just my 2 cents...

Author Comment

ID: 26293225
You're quite right, you did more than enough by answering my original question - 4,5 really got nothing to do with them, so ill think about creating a new topic for them individually.

Thanks so much for your help NiklasMoller

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I come across a lot of question about how to access things in the document class from a movieclip, or accessing something from a movieclip in the document class. It took me a while to figure this out but once I did it makes life so much easier. …
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
Suggested Courses
Course of the Month12 days, 6 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question