Animate masks in Flash CS5

Macworld Australia Staff
17 December, 2011
View more articles fromthe author

Masking is a great way to add eye-catching and interesting effects to a project, from zoom and light effects, to more elegant transitions between images. Masks can be static or animated to add more excitement. They also enable content to be shown or hidden. Flash ignores colours, bitmaps, stroke styles, gradients and transparency information when creating a mask. As long as the mask is created from a filled object, symbol or text, it will work. The mask shape is used to ‘punch a hole’ through the mask layer to show the layer, or layers underneath. Any content outside of the masked area is hidden. Images, symbols, video and text can be masked.

1 New document

Create a new ActionScript 3.0 document via the Welcome Screen. The mask must be on a layer above the layer containing the contents it will mask. By default, a layer named Layer 1 will have been created in the Timeline. Double-click on the layer name, and rename it Image.

2 Layer on layer

Import an image onto the layer (File > Import > Import to Stage), and choose an image you want to import (see Bonus Tip). Click on the New Layer button at the bottom left of the Timeline to create a new layer, and rename the layer Mask. The mask layer will be placed above the image layer.

3 The mask itself

To create your mask select the Oval Tool in the Tools bar, hold down the Shift key and draw a circle on the left side of the Stage (document). Holding down the Shift key while you draw will ensure it’s a perfect circle, which is important to make the effect work.

4 Convert to Symbol

Convert the circle and image to Movie Clip symbol. It’s not strictly necessary, but will allow you to easily animate the mask and soften its edge later. Right-click on the circle and choose: Convert to Symbol, make it a Movie Clip type and name it Mask. Do the same to the image and name it ColouredImage.

5 Perfect timing

Let’s make the animation last four seconds. Flash, by default, works at 24 frames per second, so that’s 96 frames (4 x 24). Select frame 96 for both layers in the Timeline, holding down Shift, then right-click on a selected frame and choose Insert Frame. Insert Frame keeps layer content visible.

6 Animate it

Right-click on the grey bar in the Mask layer and choose Create Motion Tween, so the Mask symbol can be animated. Move the red playhead to frame 96, and then move the Mask symbol with the Selection Tool to animate it; a dotted motion path will appear showing the path the symbol will follow.

7 Mask it

Right-click on the Mask layer (near the layer name) and choose Mask, from the menu. The image will appear inside the circular mask; outside the mask the white colour of the stage will be shown. Test the movie by going to Control > Test Movie > Test, to see the effect currently achieved. Then close the test window.

8 Hard edges

By default, masks do not support transparency in Flash, so masks with feathered/soft edges aren’t possible. But with a little bit of code and know-how, that can be changed. Let’s soften the edge of the mask to create a feathered effect. First, click on both padlocks in the Timeline to unlock the layers.

9 Symbol editing

Using the Selection Tool double-click on the Mask symbol. Double-clicking allows the original artwork inside the symbol to be edited. In the Colour panel click on the Fill Color icon (paint bucket) and choose Radial gradient from the drop-down menu.

10 Gradient editing

The mask will now have a gradient applied. In the Color panel double-click on both colour pointers on the colour bar at the bottom, and choose black. Click on the right colour pointer and set the Alpha to 0% (usually set to A: 100%), to make that black transparent. Move the colour pointers as shown above.

11 Instance names

Click on Scene 1 to come out of symbol editing mode. Select the Mask symbol. In the Properties Inspector give the symbol an instance name of mask_mc. Select the ColouredImage symbol, give it an instance name of colouredImage_mc. This allows symbols to be controlled using ActionScript code. Relock the layers.

12 The code

Select the Mask layer, then create a new layer called ‘Actions’, then right-click on frame 1, choose Actions and type the code shown in the Actions panel: colouredImage_mc.cacheAsBitmap = true; mask_mc.cacheAsBitmap = true; colouredImage_mc.mask = mask_mc; Test the movie to see the code working.

13 Tweaks

Try importing a darkened version of the image used, onto a new bottom layer to enhance the torch effect. Also try adjusting the mask animation too, by moving the playhead, then moving the mask symbol, and resizing it with the Free Transform Tool – remember you’ll need to unlock the layer first.

14 More please

By default, only the layer underneath the mask layer is masked. To mask more layers, select the layers you want to mask and then drag the layers up underneath the Mask layer or a currently masked layer. An indicator will appear, then release the mouse. The additional layers will then be masked.


■ Naming layers and movie clips as you create them is good for organisation, and becomes very important when working as a team or solving problems. When naming items, use meaningful names and stay consistent.

■ When using ActionScript code, correct spelling is crucial, so tread carefully as this is a common reason why most code doesn’t work.

■ Always resize images and convert to RGB colour using programs like Photoshop before importing into Flash. Doing so can signifi cantly reduce the fi le size of the final published file.

Leave a Comment

Please keep your comments friendly on the topic.

Contact us