Free Flash Tutorials	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash Tutorial - Mask Attached to the Mouse

007 Beginners
Flash Compatibility: MX          For Flash MX 2004 click here

Written by: Phil

Length: 800 words

The aim of the tutorial is to learn how to create a mask which follows the mouse.

There is another tutorial explaining how to create an animated mask. Click here for the other tutorial.

Example: Download the Flash file  Beg 007a

Step one: Creating the graphics

1. Set up the document size and colour by going to Modify > Document. The movie above is set at: 550px x 280 pixels and the background colour is white.
2. Click ok.
3. Draw a rectangle on stage which is slightly larger that the white rectangle (representing your page). I drew a dark blue rectangle.
4. Draw any text or graphics that you want to be hidden and then reveled by the mask. Make sure that the rectangle, text and graphics are all in layer 1.
   
   Note: Use standard typefaces only. Do not use any font that starts with underscore ( _ ) or other unusual characters such as brackets etc.
   
   
   Graphics on Layer 1

Step two: Attaching the circle to the mouse

1. Create a new layer by clicking on the Insert Layer button .
2. Draw a circle (or similar) on this layer.
3. Delete the outline by double clicking on the outline and pressing delete on your keyboard (outlines cause all sorts of errors in masks).
4. Select the centre of the circle by clicking on it with the arrow tool .
5. Go to Insert > Convert to Symbol.
6. Name the circle.
7. Select Movie Clip as a behavior.
8. Click OK.
9. Right click (Mac - control click) on the circle and select Actions.
10. Select Normal Mode from the View Options button .
11. Click on the Plus button .
12. Select Actions > Movie Clip Control > onClipEvent.
13. In the options above select Enter Frame.
14. Click on the Plus button .
15. Select Actions > Movie Clip Control > Start Drag.
16. In the options go to target and type: 'this'.
17. In the options select the target as an Expression.
18. In the options select Lock mouse to centre.
    
    
    Your script and options should look like this.

Step three: Creating the mask

1. Right click on the frame Label where it says:
   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 it makes no difference. To make the mask appear again (at least on stage) re-lock the layers.
   
   It is probably worth saving and testing your movie at this stage.

Step four: Hiding the cursor

1. Right click on frame 1 of Layer 2 and select actions (you may need to unlock the layer).
2. Click on the Plus button .
3. Select Objects > Movie > Mouse> Methods > hide.
   Your script should look like this:
   
   Mouse.hide();
   
   Test your movie.

Step five: Creating the visible graphics

1. Click on the layer label: Layer 2.
2. Create a new Layer (Layer 3) by clicking on the Insert Layer button .
3. Create any graphics and text that you want to be visible and not affected by the mask.
   
   
   
   My third layer which is not affected by the mask.
   
   To make your text vertical:

• Type your text with the text tool:
• With the text still selected go to the Free Transformation tool:
• Pull the handles to make the text larger.
• Place your mouse just outside of the corner handles and your cursor will change to a rotate icon:
• When you see this cursor pull, and the text will rotate.

Step six: Test your movie

1. Go to: File > Save.
2. Go to: Control > Test Movie

Your mouse mask should now be ready to roll. Have fun with your new mouse tricks.

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