Sunday, 27 July 2008

Hidden mask game

This Flash tutorial will teach you how to create a simple hidden mask game. This tutorial uses dynamic masking, so be sure you are familiar with that tutorial. In the hidden mask game you have to locate the hidden objects from the dynamic mask. A message will be displayed when all the objects are located. This tutorial uses Actionscript 2.0 and an image of owl is available from: www.sxc.hu

Hidden mask game

Step 1

Open a new flash document and set an appropriate stage size.


Step 2

On the timeline name layer 1 “Bg”. This is now the background layer for your dynamic masking.

Using the rectangle tool (r) with no stroke, drag a rectangle shape the same size as the stage. And then choose a colour to fill the rectangle. I used a grey colour but you can choose whatever you wish.

Select the text tool (t) and type your title on the stage “Click on any owls you find”. This will be placed near the top of the stage.


Step 3

On the timeline insert a new layer called “maskedbg”. This is the layer where the objects will be placed. I used owls as my objects, but you can use whatever you wish. You could alternatively create your own objects on the stage.

Import your object on the stage by selecting File > Import > Import to stage select your object then click ok. Convert your object into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip button and click ok.

Now copy and paste as many object instance as you wish. I use five instances. And give each instance as instance name eg owl1, owl2 etc. You stage should look something like below:




Step 4

Hold down shift key and select each of your object instances. Convert all the instances into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip button and click ok.



Using the selection tool (V) select your movie clip and give it an instance name “maskbg_mc”.


Step 5

On the timeline insert a new layer called “Mask”. This layer acts as the mask layer where a movie clip object reveals the layers below.

For the mask I will use a circle object. Using the oval tool (O) drag a small circle shape on the stage. The colour of circle does not matter as it the mask and will not be seen.

Convert your circle into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip button and click ok. Using the selection tool (V) select the circle movie clip and give it an instance name. eg mask_mc




Step 6

On the timeline insert a new layer called “message”. This layer will display a message when all objects are found.

Select the text tool (t) and type your message on the stage. I typed “Welldone, you found all the owls”, but you can type whatever you wish.

Convert your text into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip button and click ok. Using the selection tool (V) select the circle movie clip and give it an instance name. eg message_mc


Step 7

On the timeline insert a new layer called “actions”. Right click on the first frame and select actions and enter the following code:

var Hits:Number = 0;
message_mc._visible = false;
mask_mc.onEnterFrame = function() {
this._x = _root._xmouse;
this._y = _root._ymouse;
if (Hits == 5){
maskedbg.setMask(null);
message_mc._visible = true;
}
};

function hideowl() {
this._visible = false;
Hits++
}

maskbg_mc.owl1.onPress = hideowl;
maskbg_mc.owl2.onPress = hideowl;
maskbg_mc.owl3.onPress = hideowl;
maskbg_mc.owl4.onPress = hideowl;
maskbg_mc.owl5.onPress = hideowl;

maskbg_mc.setMask(mask_mc);
**This code basically hide the mask and shows the message when all objects are clicked. The hideowl function hides each object when they are clicked and increment the counter by 1.
The SetMask method make the movie clip in the parameter mask_mc (circle object) reveal the movie clip maskedbg_mc (owls).



You should now have a hidden mask game.

Update: For those who prefer using Actionscript 3, below I have provided the code.

var Hits:int = 0;
message_mc.visible = false;
maskedbg_mc.mask = mask_mc;


mask_mc.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);

function moveHandler(e:Event):void{
    e.target.x = mouseX;
    e.target.y = mouseY;
    if(Hits == 5){
        maskedbg.setMask = null;
        message_mc.visible = true;
    }
}
                        
maskbg_mc.owl1.addEventListener(MouseEvent.MOUSE_DOWN, hideowl);
maskbg_mc.owl2.addEventListener(MouseEvent.MOUSE_DOWN, hideowl);
maskbg_mc.owl3.addEventListener(MouseEvent.MOUSE_DOWN, hideowl);
maskbg_mc.owl4.addEventListener(MouseEvent.MOUSE_DOWN, hideowl);
maskbg_mc.owl5.addEventListener(MouseEvent.MOUSE_DOWN, hideowl);

function hideowl(e:Event):void{
    e.target.visible = false;
    Hits++
}

5 comments:

manuel 3 September 2008 at 08:23  

can this be done on macromedia flash pro 8??

coz i've tried it and i can't click every owl.. i followed everything you said but it don't work =(

iliketo 18 October 2008 at 07:43  

@Manuel

Yes, this game is made in Adobe Flash Pro 8. Make sure you give each of your owls different instances names: owl1, owl2, owl3 etc.

Sagetheboss 1 February 2009 at 07:47  

Nice one! I've made similar, but this is much more simple :)

YASH LONDHE 6 February 2009 at 05:45  

nice man

YASH LONDHE 6 February 2009 at 05:46  

gud work

i dint even think its so simple

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP