Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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
  • 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.


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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
The goal of the tutorial is to teach the user how to how to record live broadcast.
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.
Suggested Courses

572 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