Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Animated Masks


006
Beginners
Flash Compatibility: MX     For Flash 8: click here     For Flash MX04: click here

Written by: Phil Schulz

Length: 800

 

The aim of the tutorial is to show you how to make a simple animated mask in Flash.

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

My Example: Download the Flash file  Beg 006a

Step one: Create a New Movie

  1. Create a new movie and Modify > Document size and colour.
    I set my movie size to: 550 x 170 Pixels and background to : White.
  2. In the Timeline re-name Layer 1 to: Background
  3. Create an image or text to go on the first Layer. You could also import a photo. My Background Layer looks like this:



    The dark gray background is drawn onto the stage then the text typed over the top. If I did not paint a background you would not see the shape of the gray circle but only the letters.

    Note: The text must be set to Static text. If you are not sure if your text is static select the text with your Arrow tool and look at the settings in the Property Inspector (Windows > Properties). It should say


    Text set to Static.

  4. Save the file. I called mine: animated-mask
    For file names do not use spaces or any punctuation. You may use letters, numbers, underscore _ and hyphen - only! You can use capitals if you want, but they are a pain, so I never do.

Step two: Create a symbol to animate

  1. Go to Insert > New Symbol
  2. Name the symbol: circle
  3. For Behavior select: Graphic
  4. Click ok.
  5. Draw a circle (or whatever). The colour of the circle makes no difference.
  6. Return to the main stage by clicking on the tab on the top left of the stage.

Step three: Create the mask layer

  1. Create a new Layer above your background layer.
  2. Name the layer 'mask'.
  3. Open your Library: Window > Library.
  4. Drag the circle symbol into the new mask layer.

Step four: Create the animation

  1. Align the circle to the left of the stage by opening your align panel: Window > Align.
  2. Click on the align to stage button.
  3. Click on the align vertical centre button.
  4. Click on the align left edge button.


    Your file should look like this.

Step five: Creating the animation

  1. Right click (Mac: Command click) on frame 60 of the mask layer and select Insert Keyframe.
  2. Right click on frame 30 of the mask layer and select Create Motion Tween.
  3. Drag the circle from the left side of the stage to the right. This will automatically place a keyframe in frame 30.
  4. If need be use the Align panel to nudge the circle into place.


    Note that the background has disappeared!

Step six: Adding frames to the background

  1. Right click on frame 60 of the background layer and select Insert Frame. Your background should re-appear.

Step seven: Creating the Mask

  1. Right click on the frame label 'Mask' and select mask from the menu.

    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 it makes no difference. To make the mask appear again (at least on stage) re-lock the layers.

Step eight: Test your Movie

Either: Go to Control > Test Movie.
Or: Drag the red play head to see the animation move.
Or: Press 'Enter' on the keyboard to see the animation play on stage.

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!

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


26964 visitors to this page since Jan 04

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

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.