bravemouse

A while ago, I wrote a post about Mask Layers.  Here is the answer to the second challenge in that post: Create a Spotlight Effect using a mask layer. (Click on the play button below to see the animation.)

Create the Images

First you need two versions of the same image.  Use an image editor like Photoshop to make the one a bit darker than the other, like this:

Setting up the Layers

• Create three layers.
• Turn the top layer into a Mask layer
  • Right click on the little "page" icon next to the layer's name.
  • Tick "Mask" from the drop down menu.
  • You should see the icon of that layer change, and (this is important) the one below it as well.
  • The top layer is the "Mask" layer,and the one below the "Masked" layer.
  • The layer just below the masked layer is a normal layer (In the screenshot below its called "dark")
• Put the lighter image in the masked layer.
• Put the darker image in the normal layer just below the mask layer. Make sure they are exactly lined up above one another.

Making the Mask

• Create a shape in the mask layer.  In this example I've used a simple disk.
• The shape must have a fill – strokes don't work in a mask.
• Your movie will look something like the screenshot below, with the red disk being the mask:

Test the mask by locking the mask layer and the masked layer:

• click on the little dot next to the layer name, under the "lock" icon to lock a layer.
• With both the mask and masked layers locked, you will be able to preview the spotlight masking effect:

Animate the mask: You can create animation in the mask layer.  In the example below, I used a motion tween, but you can use classic or shape tweening as well.

This tutorial was adapted from a tip in Russel Chun and Joe Garraffo's "Macromedia Flash MX Advanced" which is an excellent book for learning actionscript.   There is a more up to date version as well.

Tags:   mask layerNo Comments