Obscuring and Revealing Scenes with AS3

by Michael James Williams on May 6, 2011 · 0 comments

in Tutorial

One of the simplest game mechanics is to let the player find a hidden object. Games based on this take many forms: Where’s Waldo, Peek-A-Boo, Spot the Difference, Hide and Seek, and of course Hidden Object. I’ve written a Premium tutorial for Activetuts+ in which I’ll show you two methods for obscuring a scene so that the player can uncover it later.

Check out the final results. In this one, burst the balloons by clicking them with your mouse:

Balloons.png

In this, run your mouse over the screen to erase the foreground, like a scratchcard (click it to load the SWF first, though!):

WindowCleaning.png

Okay, in themselves those SWFs are hardly challenging games — but the core mechanics are solid.

What You’ll Learn

Though the final results are simple, the tutorials themselves cover a lot:

  • How to trigger an action once an animation has ended
  • The best way to share code between different symbols (note how the balloons look different, but behave the same)
  • Which blend mode is best for overlay effects — and what restrictions it has
  • The power of BitmapData for manipulating an image’s individual pixels
  • How to use any image as a “cookie cutter” to remove shapes from a picture

Each section starts from scratch and builds gradually on what you’ve already learned, with plenty of sample SWFs, screenshots, and code snippets to help you on the way. There are even a number of challenges to inspire you to go even further.

Check out this sample SWF from part way through the second section:

WindowCleaningStep6.png

And here’s another, using a smiley face (pictured) as a “cookie cutter” (or brush) to clear away the foreground:

SmileyBrush.png

How to Get the Tutorial

This is a Premium tutorial, which means I’m selling it on the Tuts+ Marketplace for $3. Buy it through this link.

Alternatively, you can get it as part of Tuts+ Premium; pay $9 and you get complete access to all the Premium tutorials from the Tuts+ network — that includes Photoshop tutorials, Illustrator tutorials, Audio tutorials, and more.

The Premium program is the better deal, if you’re willing to pay the $6. There are some awesome Flash game development tutorials on there. I can personally recommend:

..and that’s just three of them. There are also great tutorials on creating a Tetris game, a war game, and a spot-the-difference game, on creating a 3D game menu interface, and on animating a person using advanced body mechanics.

So, if you’re interested, sign up here for $9 :)

I’ll answer questions about the tutorial posted to this blog, to Activetuts+, or to its page on the Tuts+ Marketplace. I hope you like it!

Leave a Comment

Writing code? Write <pre> at the start and </pre> at the end to keep it looking neat.

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: