Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Mask Attached to the Mouse

Free Flash Tutorial

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: 550 x 280 px
   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. Create 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. The text should also be set to Static Text. If you are not sure if your text is static select the text with your Selection tool and look at the settings in the Property Inspector (Windows > Properties). It should say: Static Text.
   
   
   Blue rectangle and text on Layer 1
   
   Tip: To make the text fit exactly into a particular area you want resize it with the Free Transform Tool:

Step two: Attaching the circle to the mouse

1. Create a new layer by clicking on the Insert Layer button:
2. On this new layer draw use the Oval tool to draw a: Circle
3. Delete the outline by double clicking on the outline with the Selection tool and pressing delete on your keyboard (outlines can cause all sorts of errors in masks).
4. Right click (Mac - Ctrl click) on the Circle and from the menu select: Convert to Symbol...
5. You can leave the default name as it is: Symbol 1
6. For behavior select: Movie Clip
7. For Registration select centre:
8. Click: OK
9. With the new symbol still selected on your keyboard press: F9
   
   Note: This will open the Actions panel. At the top of the panel it will say:
   If it does not say this you do not have the correct circle symbol selected (or you did not select Movie Clip in the previous step). The most common error in using ActionScript is attaching it to the wrong object. Get into the habit of checking that you are attaching the script in the right place. Always see what is says at the top of the Actions panel.
   
   
10. Type in the following ActionScript:
    
        onClipEvent (enterFrame) {
            startDrag(this, true);
        }
    
    
    Your script and options should look like this.
    
    Note: All the text is in blue yours should be the same. If it is not you have made a typing error.

ActionScript Explained

onClipEvent (enterFrame) {
Do the following every time the Play Head enters the frame. This would normally be 12 times per second.

startDrag(this, true);
Start to drag this object (the circle symbol). The true centres the object to the middle of the mouse.

}
End of the clip event.

You want to test your movie: Control > Test Movie

Your circle should stick to the centre of the mouse cursor.

You may wish to try and test the movie without the true so that you can see the difference. Change the line of code so that it looks like this: startDrag(this); and test it again.

Cross Ref: You can only attach one object at a time to the mouse this way. If you wish to attach several objects to your mouse you will need to use a different method see the Intermediate tutorial: Creating a Magnifying Glass

Step three: Creating the mask

1. Right click on the frame Label where it says:
   From the drop down menu select: Mask
   
   Note: The Layer Symbols have now changed from: to:
   
   Note: 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.
   
   
   You can only see the objects that are under the circle - everything else is masked.
   
   
2. It is probably worth saving and testing your movie at this stage: Control > Test Movie

Step four: Hiding the cursor

1. If the Actions panel is closed, open it by pressing: F9
2. Click on Frame 1 of Layer 2
3. Check the top of the Actions panel. It should say:
4. Type the following ActionScript:
   
       Mouse.hide();
   
   This hides the default mouse cursor.
   
5. Test your movie.

Step five: Creating the visible graphics

1. Click on the layer label:
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 is not affected by the mask.

   Note: To make your text vertical:

   1. Type your text with the text tool:
   2. With the text still selected go to the Free Transformation tool:
   3. Pull the handles to make the text larger.
   4. Place your mouse just outside of the corner handles and your cursor will change to a rotate icon:
   5. 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.