Masks	Home • Members • Tutorials • Forum • iSnapChat • Contact Us

Flash Tutorial - Animated Masks

Free Flash Tutorial

This tutorial shows you how to make a simple animated Mask in Flash. A Mask is an object which hides something. In Flash Masks are used with layers and they provide a simple way to selectively reveal portions of the Layer or Layers below. Masking requires making one Layer a Mask Layer and the Layers below it become only partly visible or masked.

In the example below the top Layer has a circle which has been animated. This is the Masked Layer and you can see through this circle to the Layer below:

My Example: Download the Flash file  Beg 006a

Flash Movie with an Animated Mask.

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

 

Cross Ref: There is another tutorial explaining how to create a Mask which is attached to the movement of the Mouse. See: Masks Attached to the Mouse

Step One: Setting up the Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it:
3. Select Flash Document:
4. Click: OK

Note: You should now be able to see a new Flash document.

5. Go to: Modify > Document (Ctrl J)
6. Set the size. Mine is: 550 x 170px
7. If you wish select a: Background colour. I set mine to: White



8. Click: OK
   

Step Two: Creating the Text

1. If the Timeline is closed, Open it: Window > Timeline (Ctrl Alt T)
2. In the Timeline re-name Layer 1 to: Background


Rename the Layer to Background.

3. Select your Text Tool:
4. Click on the Stage and type: Animated Mask (or whatever you want)


My text.

Note: As an alternative to typing you could do a drawing or even import a photo.

5. Select the Selection Tool:
   
   
6. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
7. If your text is not selected: Select the Text
8. In the Property Inspector check that the text is: Static Text


Selecting Static Text.

9. Select a: Font, Colour or Style (ignore size)


My Font settings:

10. Select the Free Transform Tool:
11. Drag the handles so that the text just fits the Stage: Enlarge Text

Step Three: Creating the Circle's Colour

The gray colour of the circle is actually a separate object to the actual circle! This is because the circle is actual a Mask and a Mask is a transparent shape.

1. Select the Rectangle Tool:

Note: Sometimes the Rectangle Tool hides under the PolyStar Tool:

2. Draw a rectangle slightly bigger than the Stage: Draw a Rectangle
3. Return to the Selection Tool:
4. Click the fill of the rectangle: Highlight Rectangle Fill


The rectangle's fill goes 'Dotty' when selected.

5. Select a Fill Colour:

I selected a gray: #666666



Important: The colour of the rectangle fill must be different to the Movie's background colour!

If a second background colour is not made you would not see the shape of the circle. Have a look at the Movie Again:

My Example: Download the Flash file  Beg 006a


The gray rectangle becomes masked by the circle.

6. Save your file : File > Save (Ctrl S)

Step Four: Creating the Circle Symbol

The circle is animated using a standard Motion Tween. This means that you need to create a symbol to Tween.

Cross Ref: See the tutorial: Motion Tweening

1. In the Timeline lock the Background Layer:
2. Create a new Layer by clicking on the Insert Layer Button:
3. Name the Layer: Mask



4. Select the Oval Tool:
5. Drag out a large: Circle

Tip: To constrain the Oval Tool to drawing exact circles hold down the Shift Key whist dragging.

6. Select the Selection Tool:
7. Select the circles: Stroke (outline)


Circle's Stroke is highlighted.

Note: The color of the circle does not matter as it will become a Mask which is a transparent shape.

8. Delete the Stroke by pressing: Delete
9. Select the: Circle

   
   The circle's now selected.

   Note: If the circle is not the correct size use the Free Transform Tool to change it's size. Don't forget to return to the Selection Tool:

10. Go to: Modify > Convert to Symbol... (F8)
11. Name the symbol: Circle
12. For Behavior select: Graphic



13. Click: OK


New Circle Symbol.

Step Five: Animating the Circle

The circle starts it's animation on the left of Stage so the first thing to do is place it correctly:

1. If the Align Panel is closed, open it: Window > Align (Ctrl K)
2. In the Align Panel if the 'To Stage' option is off, turn it on:


Align To Stage is On when the To Stage icon has a white background:

3. With the circle selected click on: Align Vertical Centre
4. Click on the button: Align Left Edge

   
   The circle is now to the left of the Stage.

5. In the Timeline select: Frame 60


Frame 60 is selected.

6. Go to: Insert > Timeline > Keyframe (F6)


There is now a copy of Frame 1 on Frame 60.

7. Select: Frame 30



8. Go to: Insert > Timeline > Create Motion Tween



9. With Frame 30 selected go to: Insert > Timeline > Keyframe (F6)



10. If the Align Panel is closed, open it: Window > Align (Ctrl K)

Note: the Align to Stage button should still be selected:

11. With the circle selected click on: Align Right Edge
    
    
12. Save your file : File > Save (Ctrl S)

Your Movie should look similar to this:



13. If you wish you may want to test your Movie: Control > Test Movie (Ctrl Enter)


Nearly there!

Note: The gray background and text blinks and then disappears! That will soon be resolved.

14. Close the Test Window:
    
    
15. Unlock the Background Layer:
    
    
16. In the Background Layer select: Frame 60


Frame 60 of the background Layer is selected.

17. Go to: Insert > Timeline > Frame (Ctrl F5)

    Note: Your background should re-appear.

Step Six: Creating the Mask

1. In the Timeline right click (Mac: Ctrl click) on the Layer label 'Mask' select: Mask



Note that when you create a Mask the Layers become automatically locked. The lock icon appears next to the Layer labels. If you wish to edit the Layers you will need to unlock the Layers by clicking on the lock icon . The Mask will appear to be gone, in actual fact if you test the Movie you will find that the status of the lock make s no difference in the final Movie. To make the Mask appear again (in edit mode) re-lock the Layers.


See how the Layers are now locked and the Layer Symbols have now changed from: to:

2. If you wish you may want to test your Movie: Control > Test Movie (Ctrl Enter)
   
   
3. Close the Test Window:

   Here is an example of a Movie with multiple masks:

   My Example: Download the Flash file  Beg 006b

   
   Movie with multiple Masks

Have fun with your Masks. They are really easy to do! At least I hope they are now you have done this tutorial!

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here