How to create basic "fog of war" effect in Actionscript 3?

Question

Hey all. I'm working on a little flash game, that is a top down game. Your character is placed in a 600x800 pixel area, and you can use the arrow keys to walk around (in 8 directions). The object of the game is to avoid getting eaten by the enemy.

To make the game more interesting, I want to create a "fog of war" effect, so you can't see the entire map, but rather, only a small area around your character. I'm thinking of keeping things very basic, what I'm looking for is the entire map to be blacked out, but a "circle of visibility" around your character. Like this:

Of course, as the player moves around the map, the circle of visibility would move with him. If there were obstacles, they would come "into view" as the player moved toward them.

I am not sure where to begin on implementing this feature. I'm using actionscript 3 and would really appreciate your help on giving me ideas on how to implement it! Thank you!

Answer 1

You are looking to apply a "mask" to your visual. You then need to update the properties of that mask at runtime as your character moves around. Should be pretty straight forward.

See this tutorial on masks for more.

EDIT I realized I gave you a Flex example of using masks. It seems you are are trying to do this with Flash. The concept still applies... you want a mask. See this example or something similar for doing it in Flash.