Animated Masks	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: Animated Masks

Full Version: This is a shortened click by click version of a: Full Length Tutorial

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.

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
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
3. Select your Text Tool:
4. Click on the Stage and type: Animated Mask (or whatever you want)
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
9. Select a: Font, Colour or Style (ignore size)
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:
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
5. Select a Fill Colour:
6. Save your file : File > Save (Ctrl S)

Step Four: Creating the Circle Symbol

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
6. Select the Selection Tool:
7. Select the circles: Stroke (outline)
8. Delete the Stroke by pressing: Delete
9. Select the: Circle
10. Go to: Modify > Convert to Symbol... (F8)
11. Name the symbol: Circle
12. For Behavior select: Graphic
13. Click: OK

Step Five: Animating the Circle

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:
3. With the circle selected click on: Align Vertical Centre
4. Click on the button: Align Left Edge
5. In the Timeline select: Frame 60
6. Go to: Insert > Timeline > Keyframe (F6)
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)
11. With the circle selected click on: Align Right Edge
    
12. Save your file : File > Save (Ctrl S)
13. If you wish you may want to test your Movie: Control > Test Movie (Ctrl Enter)
14. Close the Test Window:
    
15. Unlock the Background Layer:
    
16. In the Background Layer select: Frame 60
17. Go to: Insert > Timeline > Frame (Ctrl F5)

Step Six: Creating the Mask

1. In the Timeline right click (Mac: Ctrl click) on the Layer label 'Mask' select: Mask
2. If you wish you may want to test your Movie: Control > Test Movie (Ctrl Enter)
   
3. Close the Test Window:

Full Version of this: Tutorial