Swish-Designs.co.uk where imagination is the creation

Welcome, Have a Nice Friday

Scratch Card Masking Example

Learn how to create a scratch card masking effect with swishmax.

First Of All

Open swishmax and set the size for the movie, i have used 360 x 215

and frame rate of 50 fps..

Step.1

Click on the insert sprite button, and insert a blank sprite, then click on the transform tab situated to the left of the interface and set the x position to 0 and also the y position to 0.
Now name the sprite scratch_mask, this will be the mask for you scratch card. see fig.1 below.

Step.2

Now using the Elipse tool hold down the SHIFT button and drag out a circle aprox 72 x 72 pixels
choose the Linear Gradient Colour Fill and have it run from #999999 to #CCCCCC this will give you your scratch card foil look, name the shape scratch_pad. see fig.2 below.

Step.3

Using the Autoshape Tool press and hold untill the shapes apear select the star shape holding down SHIFT drag out a star aprox 35 x 35 pixels, name ithe shape star, use a solid colour fill on the shape #666666 now place it in the center of the circle you have just created.
you know have the design of your scratch card complete, see fig.3 below.

Step.4

Copy scratch_pad and paste in place twice, changing the fill colour from a Gradient fill to a solid White colour #FFFFFF on both the duplicated shapes, when you done that create the text you wish to display the the the surface is scratched off, for the example i have used WIN, make sure the text is centered inside the circle.
when you are happy with the look Group Together the 2 duplicated shapes and the text as a sprite and name the sprite scratch_items and check the box that says use bottom object as mask see fig.4 below.

Step.5

Copy scratch_pad and paste in place, this time use no colour fill but select a sinle line outlins with the colour of #CCCCCC and rename the shape as scratch_pad_outline you should have something now looking like fig.5 below.

Step.6

Now to create the Coin Or Something to scratch the film off with.
so using the Elipse tool press and hold SHIFT and drag out a circle aprox 20x20 pixels
it doesnt really matter about giving this shape a name. just group it as a sprite and name the sprite
scratch_remover click the transform tab and selct the anchor point as being bottom center.
OK thats the graphical layout dealt with. you should have the contents laid out like fig.6.

Step.7

Now to make it all work simply add the following code to Scene_1
explanation of which piece of code does what is in the script itself seperated by comment tags.

CODE:

onLoad () {
// The following create the scratch_mask sprite.
this.createEmptyMovieClip("scratch_mask", 0);
// this create the scratch_remover scratch line thickness and shape of it.
scratch_mask.createEmptyMovieClip("scratch_remover", 0);
// this sets the scratch width of the scratch_remover
w = 3.7;
/* this creates the scratch_remover sprite if you wish
to use a coin to scratch for instance*/
scratch_mask.scratch_remover.beginFill(0x000000, 109);
scratch_mask.scratch_remover.moveTo(w, 0);
for (var i = 0; i<190; i++) {
radians = i*Math.PI/180;
x = w*Math.cos(radians);
y = w*Math.sin(radians);
scratch_mask.scratch_remover.lineTo(x, y);
}
// this sets the mask to mask the images you wish to be revealed.
scratch_items.setMask(scratch_mask);
// set the position of the scratch_remover so it off screen at the start.
scratch_mask.scratch_remover._x = -w;
scratch_mask.scratch_remover._y = -w;
// checks if the mouse button is pressed.
_root.onMouseDown = function() {

/* this sets the position of scratch_renover to that of the mouse and duplicates
it within the mask*/
pressInterval = setInterval(function (arg) {
arg.i++;
arg._x = _xmouse;
arg._y = _ymouse;
arg.duplicateMovieClip("scratcher"+arg.i, arg.i);
updateAfterEvent();
}, 1, scratch_mask.scratch_remover);
};
// Checks if the mouse button is not pressed and stops the scratch function.
_root.onMouseUp = function() {
clearInterval(pressInterval);
};
//this starts the dragging of the scratch remover and hides the default mouse pointer.
scratch_remover.startDragLocked();
Mouse.hide();
}
onLoad() {
stage.showMenu = false;
}

 

Example