Actionscript3 alpha masking?

Question

I was trying to apply a spotlight effect on a google map application. Specifically, I draw a circle that follows the mouse and set it as a mask over the map. The problem is only the map area within the circle shows up, I know it's what mask is supposed to look like, but is there a way to make the area outside the circle some kind of semi-transparent so that the map under it can also see through? That way people can still see the rest of the map when they navigate just the area within the circle is highlighted. Thanks!

Answer 1

Another option is to use blendModes (it could be a bit more cpu expensive in some cases, but you can do a lot more like gradients and stuff). You need a hierachy like this:

parent clip (blendmode="layer")
   -mask with different alpha values (blendmode="alpha")
   -background image (blendmode="normal")

In your case, you would have your map as the background image. Then, inside the mask clip (do not set it as mask) put a 10% alpha shape covering the entire background and a circular shape with 100% alpha that follows your mouse... you can even put some blur to the circular shape, so you get a nice gradient...

I did something very similar some time ago, so I uploaded an early test here (fla) if you want to have a look :)

Answer 2

To use alpha masking you need to do the following:

• apply the mask using actionscript, not the Flash authoring.

i.e. googleMap.mask = alphaMask;

• turn bitmap caching on(cacheAsBitmap = true);

That should do it.

Answer 3

Make the mask much larger than it needs to be and fill it with some 'gray' so the map will show through and put the circle in the middle.

There's an example here: http://www.flashandmath.com/howtos/alphamask/

The key is the cacheAsBitmap = true, bit.