Simple Flash Blog

Hi there! This is a basic tutorial about masks in Flash that I wrote especially for Flash beginners. Is you are intersted in masks, how to put a text as mask or how to dynamically create a mask in Flash then this tutorial may be really helpful.

What is a mask? The definition from dictionary tells us that a mask represents a covering for conceal the face. In Flash masks does the same: they show only some areas we want to from one or many layers.

Enough talk, let’s do some flash masks now and learn from the example!

STEPS TO FOLLOW:

Simple mask

1. Create a new Flash document and save it as flashmasks.fla. Go to the Properties Panel or choose Modify >> Document (Ctrl + J) and set dimensions to 400×300 px.

2. Insert a new layer and rename the bottom layer picture and the top layer mask.

3. In the first frame of the picture layer insert a picture having dimension 400×300: go to File >> Import >> Import to Stage (Ctrl + R), choose the picture from your computer and then press the Open button. Select the picture, go to the Properties panel and assure yourself that it has width:400 and height: 300 then go to the Align panel and align the picture to center of the Stage both horizontal and vertical.

4. Now lock the picture layer and go to the first frame of the mask layer. Using the oval tool (O) draw here three circle of different dimensions, doesn’t matter which is the Fill color.

5. Now go over the mask layer name, right click and choose Mask from the contextual menu. Now your layers should look like in the picture below and their icon has changed:

You must blocked both the mask and the picture layer if you want the mask effect to be displayed.

6. Now test the movie and you’ll see that only the areas of the picture behind the circles from the mask layer are displayed. This is your first flash mask. Let’s go further!

Text as mask in Flash

1. What is really nice is that you can use text for masking. Take the .fla document you did before, go to the mask layer and unlock it. Delete the circles from here (click the first frame of the mask layer and press Delete key to delete all the shapes at a time).

2. Now write some text using the Text Tool (T). I used font Comic Sans MS having size 180.

3. Block again the mask layer and test the movie.

Create masks dynamically

1. You also may create mask dynamically using ActionScript. Create a new flash documenthaving dimensions 400×300. Insert two new layers and rename it from top to bottom: actions,mask, picture.

2. In the first frame of the picture layer insert a picture having dimesions 400×300. Selectthe picture and go to Modify >> Convert to Symbol (F8). From the Convert to Symbol windowthat appears choose MovieClip as Type, center for Registration point and give it a name of dogMC. While the movie clip is still selected go to the Properties panel and give it an instance name of dog_mc.

3. Go now to the first frame of the mask layer and draw here whatever you want. Select all you draw here and go to Modify >> Convert to Symbol (F8). In the Convert to Symbol window choose MovieClip, center for Registration Point and give it a name of maskMC. While it is still selected go to the Properties panel and type mask_mc in Instance Name field.

4. Great! All you have to do is to add the ActionScript. In the first frame if the actions layer open the Actions panel (F9) and put in the following ActionScript code:

dog_mc.setMask(mask_mc);

Yup, just a line of code.

5. Test the movie and see your dynamically masked dog

This entry was posted on Friday, November 9th, 2007 at 10:16 am and is filed under Flash tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.