Using the Mouse Class

With ActionScript, you can emulate custom mouse pointers (that is, the graphic shown for the mouse pointer) by using the startDrag() behavior (with lock to center true) on Movie Clips containing icon graphics. However, this technique does not hide the original mouse pointer — it appears directly above the dragged Movie Clip instance. ActionScript features a static Mouse class, which has the following two simple methods:

• show(): This method reveals the mouse pointer. By default, the mouse pointer appears at the start of a movie.

• hide(): This method turns off the mouse pointer's visibility. To reveal the mouse pointer again, execute the show() method.

Once the Mouse object (that is, the mouse pointer) is hidden, you can lock a MovieClip object containing a new icon graphic to the position of the mouse pointer. In this section, you create a Flash movie with a large circle MovieClip object. When the mouse pointer moves into the area of this object, you attach a smaller circle to the mouse pointer's position. The hitTest() method will be used to determine when the mouse pointer moves into the area of the large circle, and the attachMovie() method of the MovieClip object will affix the small circle to the mouse pointer's position.

1. Create a new Flash document (Ctrl+N or ?+N). Rename Layer 1 to mcCircle_big.

2. Select the Oval tool, and draw a circle. In the Property inspector, set the circle's size to 25 x 25.

3. With the circle artwork selected, press the F8 key to convert the artwork into a Movie Clip symbol. Name the symbol circleClip.

4. Name the instance on the Stage mcCircle_big in the <Instance Name> field of the Property inspector. Increase the size of this particular instance to 200 x 200, and apply a Tint effect to fill the instance with a different solid color. Center the instance on the Stage using the Align panel.

5. Now you have to link the circleClip symbol in the Library panel to the exported Flash movie file (.swf). Right-click (Control+click on the Mac) the circle symbol, and choose Linkage. Select the Export for ActionScript check box, and the Identifier field auto-fills with the text circleClip, as shown in Figure 27-2. Click OK to accept these settings.

   Once the circle symbol is linked, you can dynamically insert the symbol into the Flash movie with ActionScript. Remember that you want to attach the circle to the mouse pointer when it enters the space of the mcCircle_big instance.

6. On the Main Timeline (that is, Scene 1), create a new layer and name it actions. Select frame 1 of this layer, and open the Actions panel. Type the code shown in Listing 27-1 into the Script pane as follows. Do not type the character, which indicates a continuation of the same line of code.

   Listing 27-1: The onMouseMove() Handler for the circleLarge_mc Instance

    1. var mcCircle_big:MovieClip; 2. 3. mcCircle_big.onMouseMove = function():Void { 4.    if (this.hitTest(_root._xmouse, _root._ymouse, true)) { 5.       var mc:MovieClip = !(mcCircle_sm instanceof MovieClip) ? 6.          _root.attachMovie("circleClip", "mcCircle_sm", 1) : mcCircle_sm; 7.       mc._x = _root._xmouse; 8.       mc._y = _root._ymouse; 9.       Mouse.hide(); 10.      updateAfterEvent(); 11.   } else { 12.      if(mcCircle_sm instanceof MovieClip)   mcCircle_sm.removeMovieClip(); 13.      Mouse.show(); 14.   } 15. }; 

   Here, you use the event handler onMouseMove() for MovieClip objects. This handler is assigned to the mcCircle_big in line 3. When the mouse moves in the Flash movie, the function(){} code executes in lines 4 through 15.

   If the X and Y positions of the mouse pointer intersects with the mcCircle_big instance, the if condition in line 4 executes. Line 5 checks to see if the new graphic (that is, the circleClip symbol in the Library) exists in the movie. If it doesn't, the symbol is attached to the Main Timeline (_root) in line 5 as well. The new instance is named mcCircle_sm.

   Note 

   For more information on the ?: conditional operator, search for the phrase "?: conditional operator" in the Flash Help panel (Help ⇨ Flash Help). This operator enables you to check a condition before assigning a value to a variable.

   Lines 7 and 8 position the X and Y coordinates of the mcCircle_sm instance by referencing the current position of the mouse pointer (_root._xmouse and _root._ymouse). Line 9 hides the mouse pointer icon, while line 10 uses the updateAfterEvent() function to force a video refresh of the Flash movie. This enables the mcCircle_sm to move very smoothly across the Stage.

   Lines 11–14 execute if the mouse pointer is not within the space of the mcCircle_big instance. Line 12 checks to see if mcCircle_sm exists in the movie — if it does, it is removed. The mouse pointer will also reappear when the mouse moves outside of the mcCircle_big instance (line 13).

7. Save your Flash document as mouse_hitTest.fla, and test it (Ctrl+Enter or ?+Enter). In the Test Movie window, move the mouse pointer into the space of the large circle. When the mouse enters this area, the small circle from the Library attaches itself to the position of the mouse cursor and hides the original pointer. When you move the mouse out of the large circle, the small circle disappears and the original mouse pointer returns. See Figure 27-3 for these comparisons.

Figure 27-2: The circle symbol is now linked to the Flash movie.

Figure 27-3: The left image shows the mouse outside the large circle, whereas the right image shows the mouse inside the large circle with the small circle attached.

That might seem like a lot of work to hide a mouse pointer, but in the process, you have learned how to attach your own icons to the mouse pointer. You can use this same methodology to add any custom graphic to the mouse pointer. Simply add a different linked symbol to the Library, and change the linkage ID in the attachMovie() method.

On the CD-ROM 

You can find the completed example, mouse_hitTest.fla, in the ch27 folder of this book's CD-ROM.