Creatively sharing Flash Creations, News, and Tutorials

Flash Tutorials Animated Masks

August 1, 2008 3:08 pm t. m. Uncategorized

 

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.

… Read More of this tutorial at WebWasp.co.uk Tutorials