Masking Layers in Flash Games – Zombie Shooter


“Masking” is a tool used for selectively showing and hiding contents of layers. Mask layers are used all over in entertainment media, whether it be for film, AAA videogames, interactive web media, or in our case, a zombie shoot-em-up, whack-a-mole style flash game!

Just to prove the point, I saw the official trailer for Hanna (http://www.youtube.com/watch?v=qRUx88vRjIk) not to long ago, and a perfect example of masking can be found at about 0:15 seconds in to the clip. It is what allows us to go from this:


To this:

Pretty cool, eh?

Now lets do the masking in our zombie flash game.

As a teaser, here’s what the final zombie flash game looks like (HINT: Click to shoot the zombies!):

The most important thing to note in this game is the way our zombies "pop up" from behind the clutter in our flash graveyard scene.

We have got the zombie characters popping up from behind gravestones, trees, cliffs, and bridges. The weird and cool thing about it though, is that all those hiding spots are part of one single background image, we are just ‘tricking’ the player in to thinking they’re actually coming from behind the scenery, via a flash mask layer.

Following below are the steps to make this flash masking happen:

  1. Create a new layer in your game or flash file, name it what you like, and then right click and check off the “Mask” option.  The little thumbnail should now look like a blue-green checkerboard to indicate it has switched modes. It will look exactly as it does in this picture along the right:
  2. Now,  inside the masked layer, color does not matter.  All that you need to know is that anything solid or colored in will allow things to appear from below. Transparent parts of the image are the parts that do NOT shine through and do NOT allow visibility from the lower layers.
  3. What I typically do is fill the entire masked scene in with a bright red box, and the parts that I want to hide (such as the gravestone, bridge, trees, etc.. in my zombie flash game), I erase the red from.  I do each object, step by step, until I am left with something that looks like the image below:Flash Cove Masked Layer
  4. Once the mask layer is drawn and ready, we have to show it which other pieces and parts we want to be masked behind.
  5. In my game, I’ve got 8 instances of zombies on the screen (z1-z8), and all of the are in one layer I called “zombies”  All I had to do was left-click on that
    “zombie” layer title, drag it over to the “mask” layer until the marker indicated that I could drop them in as a sub-tab below, and release the mouse button.  The final result should look something like this:
  6. And that’s it!  Now anything you do with your zombies (or whatever other movieclips you are working with in flash), they will always mask against the background. No matter what position the zombies are tweened to, they will not appear behind the bridge, gravestones, or trees. No actionscript was required for the creation of this mask either, which makes it even easier.

Once final piece regarding flash masks, you can also use gradients for a blended effect.  If you mask is semitransparent, the object below it will be as well.  This is great to use if you are designing some reflection or fog effect in flash and want your characters and movieclips to fade in, or out to the distance.

If I get enough requests or approvals, I am considering making a multi-set flash cove tutorial covering the creation of a full zombie shooter flash game.  This would include all source code and designs above, in addition to scoring, zoom and sniper effects in flash, ammunition, sound effects, and a whole bunch of other things to make a fully-polished web flash game.  Let me know if you guys are interested either through the comments or by email at dave@flashcove.net.  Thanks for listening!

-Dave at the flash cove (flashcove.net)

About Dave

Hey Guys! I'm Dave, an Ohio State CSE alumni who just recently started work in the industry. I'm a flash hobbyist at heart, and love making flash games and tutorials when the time permits. Check out what flash tutorials are available on the site, and don't forget to "Like Us!" on Facebook!