Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Replacing The Mouse Pointer

To make the interface more usable, you might want to change the mouse pointer (or cursor) when a user moves the pointer over a draggable instance. This helps users easily recognize the items that can or cannot be moved around on the Stage.

When you create a custom pointer, you might want to use that pointer for the entire duration of the SWF file. If so, you'll use code like the following:

Mouse.hide();
customPointer_mc.onMouseMove = function() {
customPointer_mc._x = _xmouse;
customPointer_mc._y = _ymouse;
updateAfterEvent();
};

This ActionScript takes a movie clip on the Stage with the instance name customPointer_mc and uses that movie clip as a custom mouse pointer. First, you hide the default system pointer (an arrow) using Mouse.hide() and then you define a onMouseMove event handler, which calls every time you move the mouse around the Stage.

In the next exercise you will add ActionScript that's similar to the previous snippet to change the mouse pointer when it hovers over and drags the three movie clip shapes in the SWF file.

Exercise 4: Creating your own mouse pointer

When you add custom mouse pointers in certain areas, you can greatly increase the usability of your SWF files. By default, Flash changes the pointer for buttons (or movie clips, which behave like buttons) to a hand icon to indicate that the particular instance is clickable. Without the hand icon, the user might never know what they can or cannot click. Nothing can frustrate users more than a SWF file that they have no idea how to navigate.

In this exercise, you add code to modify the mouse pointer when it moves over draggable instances on the Stage. This notifies users that they can drag certain movie clips.

1. You need to add or create a custom pointer in the Library. Select Insert > New Symbol to create a new symbol. Name it pointer, and select Movie Clip as the symbol's behavior. Click OK to enter symbol-editing mode, in which you can draw a graphic for the mouse pointer. Make sure that it's somewhat small (5 to 20 pixels in height and width), similar to the following figure.

Optionally, you can import graphics from shapes.fla. Open the file 06/start/shapes.fla from the CD-ROM and find the graphic inside the mouse pointer folder in the Library. Select the graphic, and copy and paste it into the pointer movie clip in your current project. After you finish, you should have a graphic similar to Figure 6.18 for the pointer symbol.

2. Drag an instance of the pointer symbol from the Library to the Stage. Open the Property inspector, and give the custom pointer an instance name of pointer_mc.

3. You use two custom functions that show the pointer when it's over an instance, and hide the pointer when it isn't. It makes more sense to create this code as its own function instead of putting it within an event handler. This is because you don't want to duplicate the same code multiple times unless absolutely necessary. When you use a function, you can call that same function many times.

Select frame 1 of the actions layer, and type the following code into the Script pane, after the other ActionScript on this frame:

function showPointer() {
Mouse.hide();
pointer_mc._visible = true;
pointer_mc.onMouseMove = function() {
pointer_mc._x = _xmouse;
pointer_mc._y = _ymouse;
updateAfterEvent();
};
}
function hidePointer() {
pointer_mc._visible = false;
Mouse.show();
delete pointer_mc.onMouseMove;
}

If you use a custom pointer in Flash, the default pointer is only hidden within the SWF file. After the mouse leaves the boundaries of the Stage, your operating system's default pointer will be visible again.

The first function showPointer()starts on line 1. The function begins by hiding the default pointer using the Mouse.hide() method.

Line 3 sets the visibility of the custom pointer to true, meaning that the pointer is visible within the SWF file. Lines 48 define an event handler for the onMouseMove event of the pointer_mc movie clip. Whenever the mouse moves, whether it is over the pointer_mc instance or not, the event handler executes the block of code. The block of code sets the _x and _y properties of the pointer_mc movie clip to the current coordinates of the mouse pointer (denoted by the _xmouse and _ymouse properties).

The second function, hidePointer(), begins by hiding the pointer_mc movie clip and showing the default system pointer. The last line of code within the function (line 13) deletes the onMouseMove event handler, which you create with the showPointer() function. It is always a good idea to delete event handlers when you no longer need them. This helps you save system resources on the user's computer while maintaining as high frame rates as possible. High frame rates help your SWF file play fast and smooth.

4. Now that you wrote functions to hide and show the custom mouse pointer, you need to find a way to call these two functions. To do this, you use the onRollOver and onRollOut event handlers in the MovieClip class. The onRollOver event handler calls when the user's mouse pointer rolls over an instance, similar to the onMouseOver event in JavaScript. The other event handler, onRollOut, executes when the mouse rolls outside the boundary of an instance. In this case, you add the event handler for each of the three shapes on the Stage.

Add the following code to frame 1 of the main timeline:

circle_mc.onRollOver = showPointer;
circle_mc.onRollOut = hidePointer;

Unlike the event handlers you used earlier, this code doesn't define its event handlers with an inline function. Instead, it uses the functions you defined in step 3. Because of this, you assign the function name as the event handler. It is important to make sure that you don't add parentheses after the function name, or else you'll experience unexpected results.

5. Repeat step 4 by duplicating the code snippet in step 4 for both the square_mc and TRiangle_mc instances. Add the following ActionScript after the code you added in step 4.

square_mc.onRollOver = showPointer;
square_mc.onRollOut = hidePointer;
triangle_mc.onRollOver = showPointer;
triangle_mc.onRollOut = hidePointer;

6. Make sure that the custom pointer instance on the Stage is not visible by default. To accomplish this, you need to set the _visibility property for the pointer to false by default, as shown in the following code:

pointer_mc._visible = false;

In this exercise, you added functions to your code that change the default mouse pointer to a custom one when the pointer hovers over each shape. This increases the usability of the project. In the next exercise, you modify the mouse pointer to have multiple states, which means it will look different depending on how the user interacts with the shapes. Save (File > Save) the changes you made to the document.

Exercise 5: Creating multiple movie clip states

If you want to make the game a bit more interactive, you can create multiple "states" for each of the shapes in your SWF file. For example, you could show different images for an object on the Stage when the mouse pointer hovers or drags over them, or after you drop a shape in a hole.

1. Double-click circle_mc on the Stage or in the Library to open the instance in symbol-editing mode.

2. Double-click Layer 1 on the Timeline in symbol editing mode. Rename the layer shape and then click Insert Layer two times. Rename the two new layers actions and labels.

3. Select frame 6 in the actions layer and press F6 to create a key frame. Then select frame 6 on the labels layer's Timeline and press F6 to create another keyframe.

4. Select frame 10 of the actions layer and the labels layer. Press the Ctrl (Windows) or Command key and click each frame to select them at the same time. Then press the F5 to extend the frames on each layer to frame 10.

5. Add the following ActionScript to both frames 1 and 6 in the actions layer (as you can see in Figure 6.19).

stop();

6. Select frame 1 of the labels layer. Open the Property inspector and type off into the Frame text field to add a label for this keyframe. This frame contains the graphic for the pointer when you drag it around the Stage.

Then, select frame 6 of the labels layer and assign the frame label on. This frame contains the pointer graphic when you placed over the hole and successfully hit tests. When you're finished, the Timeline should look similar to the following figure.

7. Select frame 6 of the shape layer and press F6 to insert a keyframe and modify the shape for the on state. For example, you might want to change the color of the graphic (Figure 6.20).

8. Click Scene 1 on the Edit Bar to exit symbol-editing mode and return to the main Timeline.

9. Select frame 1 of the actions layer and add the following boldface line of ActionScript to the existing code:

circle_mc.onRelease = function() {
circle_mc.stopDrag();
if (circle_mc.hitTest(circleHole_mc)) {
circle_mc._x = circleHole_mc._x;
circle_mc._y = circleHole_mc._y;
checkShapes();
circle_mc.gotoAndStop("on");
}
};

10. Repeat step 9, adding the equivalent ActionScript for the square_mc and TRiangle_mc movie clip instances as well. Remember to check the final FLA file (06/complete /shapegame.FLA) for guidance if necessary.

11. Because the movie clip states change when they collide with their matching "hole" movie clips, you need to reset the playhead to the default states when the user clicks the reset button. To return the shapes back to their original states, you need to modify the onRelease event handler for the reset_btn Button instance to what's shown in the following code. The new ActionScript is in boldface.

reset_btn.onRelease = function() {
circle_mc._x = circleInitX;
circle_mc._y = circleInitY;
square_mc._x = squareInitX;
square_mc._y = squareInitY;
triangle_mc._x = triangleInitX;
triangle_mc._y = triangleInitY;
circle_mc.gotoAndStop("off");
square_mc.gotoAndStop("off");
triangle_mc.gotoAndStop("off");
}

You add the three new lines of code (the lines in boldface), which you use to reset the playhead back to the off frame label when the user completes the game. This makes each shape return to its original position, and appearance. Now you have added all of the code necessary to make this file work, and all that remains is to see that it functions correctly when running in Flash Player.

Test the SWF file in either the Flash environment (Control > Test Movie) or an external browser (F12). When you test the SWF file, you can drag the three shapes around the Stage. You drag a shape over a corresponding hole and release the mouse button; the shape changes to its second state.

When all the shapes are in the proper holes, you then see your movie clip message display on the Stage. When you click the reset_btn Button instance, it returns each of the shapes to its original coordinates and its original state.

Make sure that you save the changes that you made to the file if you are happy with the results.