OK Flash games are so much fun not only to create but also for the end user as they make the web so interesting. So here I am going to show you how to create a simple Actionscript 3.0 scratch card game that can be used for an ad or game or just for fun.
The first elements are the movieclips which are going to be used in the game. Now for my version I am going to use three panels which will be displaying one of three different images. This is very simple and after creating the actual images themselves, you need to create a movieclip which would contain each of these images on their own frame. This movieclip would then need to be associated with a class file. So in the linkage section (right click on the movieclip in the library and choose linkage) add a name for your associated class, in my case I just called it Image. We then create an actionscript file called “Image.as” to add some variables and functions to so that we can control which frame it would stop on each time the swf is opened. This is very easy and is done like so:
-
public class Images extends MovieClip
-
{
-
-
public var frameNumber:uint = (Math.ceil(Math.random() * 3));
-
-
public function Images()
-
{
-
this.gotoAndStop(frameNumber);
-
}
-
}
This just creates a random number between 1 and 3 and gets the movieclip to stop on that frame, Simple. This movieclip then needs to be added to a parent movieclip by putting three instances of it onto the stage and then converting them into one movieclip. Each instance will then need to be given their own instance name, I have just called them image_one, image_two etc.
Now we need to create the scratch card effect so that the user can scratch the screen to reveal the images "underneath". To do this I have created a movieclip which is the same size as the images and made it look like a silvery wax by adding a nice grey / dark grey gradient fill. This would then need to be added to its own parent movieclip, exactly the same as the previous images were, spaced evenly and similarly to the images so that if they were laid over the top they would cover them nicely. We then need to create a new movieclip with two layers. On the bottom layer we need to put the movieclip containing the silvery circles and on the top layer we need to put the movieclip containing all of the Images movieclips. This whole movieclip then needs to be linked to so that we can control it with actionscript.
To get the effect of the "wax" being scratched off we simply add a new sprite to the class file and add it as the top layer images mask like so:
-
public function All_Images_mc()
-
{
-
-
addChild (Mask);
-
-
Images_Masked.mask = Mask;
-
-
Mask.graphics.moveTo(mouseX, mouseY);
-
-
addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
-
addEventListener(MouseEvent.MOUSE_UP, MouseUp);
-
}
What essentially is going to happen here is that we have added an event listener so that when the mouse is clicked over the movieclip it wall start to draw some graphics to the screen, as the "mask" starts off as an empty sprite and a masked image is shown in the graphics displayed within its masker, the images start off displaying nothing and as the graphics are drawn the images are shown, giving the illusion that the layer below it is actually being scratched off.
-
private function Scratch (e:Event):void
-
{
-
Mask.graphics.beginFill(0xff00ff);
-
Mask.graphics.drawCircle(mouseX, mouseY, 10 + (Math.random() * 20));
-
Mask.graphics.endFill();
-
}
The mouse up listener has been added so that when the user releases their mouse it checks to see which frame number the images are on and looks to see which ones match to display a winner or loser message.
-
private function MouseUp(event:MouseEvent):void
-
{
-
removeEventListener(Event.ENTER_FRAME, Scratch);
-
-
if(Images_Masked.image_One.frameNumber == Images_Masked.image_Two.frameNumber ||
-
Images_Masked.image_Two.frameNumber == Images_Masked.image_Three.frameNumber ||
-
Images_Masked.image_One.frameNumber == Images_Masked.image_Three.frameNumber)
-
{
-
parent.parent.gotoAndPlay("Win");
-
}
-
else
-
{
-
parent.parent.gotoAndPlay("lose");
-
}
-
}
If the user loses they are given an opportunity to restart, which has simply and crudely been done by sending the application back to frame one which is just a blank frame, thus re-adding and re-setting everything.
Get the source and FLA here


Posted in
Tags: 



![Validate my RSS feed [Valid RSS]](http://www.ultravisual.co.uk/blog/images/valid-rss.png)

