Adding the Rotating Cannon
Many Flash applications include animation that responds to mouse-cursor motions. In this section, we discuss how to make the cannon’s barrel follow the cursor, allowing the player to aim at the moving target. The skills you learn here can be used to create many effects that respond to cursor movements.
Add a keyframe to the second frame of the Cannon layer and drag the cannon object from the Library onto the stage. Set its x- and y-coordinates to 0 and 200. Give this cannon instance the name cannon. The cannon should appear in the middle of the stage’s left edge (Fig. 17.8).
Coding the Cannon’s Rotation
Now, add the code from Fig. 17.9 to the second frame of the Actions layer. This code ro-tates the cannon barrel to point toward the cursor. The x- and y-coordinates of the cursor are directly accessed using the stage.mouseX and stage.mouseY properties. The code ex-
1 // Fig. 17.9: Register mouseInHandler as MOUSE_MOVE event handler.
2 stage.addEventListener( MouseEvent.MOUSE_MOVE, mouseInHandler );
4 // rotate cannon when mouse is moved
5 function mouseInHandler( args : MouseEvent ) : void
7 // rotates cannon if cursor is within stage
8 if ( ( stage.mouseX > 0 ) && ( stage.mouseY > 0 ) &&
9 ( stage.mouseX < 550 ) && ( stage.mouseY < 400 ) )
11 // adjust cannon rotation based on cursor position
12 var angle = Math.atan2( ( stage.mouseY - 200 ), stage.mouseX );
13 cannon.rotation = angle * ( 180 / Math.PI );
14 } // end if
15 } // end function mouseInHandler
Fig. 17.9 | Register mouseInHandler as MOUSE_MOVE event handler.
ecutes any time the player moves the cursor, so the cannon always points toward the mouse cursor. The addEventListener function of the stage object registers the mouseInHandler function as the event handler of the MOUSE_MOVE event (line 2). Inside the mouseInHandler function, an if statement (lines 8–9) checks whether the cursor is within the stage. If it is, the code adjusts the cannon’s rotation so that it points toward the cursor (line 13). The rotation property (line 13) controls an object’s rotation, assuming its natural orientation to be 0 degrees.
ActionScript’s Math class contains various mathematical functions and values that are useful when performing complex operations. For a full list of the Math class’s functions and values, refer to the Flash Help in the Help menu. We use the Math class to help us compute the rotation angle required to point the cannon toward the cursor.
First, we need to find the cursor’s coordinates relative to the cannon. Subtracting 200 from the cursor’s y-coordinate gives us the cursor’s vertical position, assuming (0, 0) lies at the cannon’s center (Fig. 17.10). We then determine the desired angle of rotation. Note the
right triangle created by the cannon and the cursor in Fig. 17.10. From trigonometry, we know that the tangent of angle α equals the length of side y divided by side x: tan(α) = y/x. We want the value of α, though, not the value of tan(α). Since the arc tangent is the inverse of the tangent, we can rewrite this equation as α = arctan(y/x). The Math object provides us with an arc tangent function: Math.atan2(y, x). This function returns a value, in radians, equal to the angle opposite side y and adjacent to side x (line 12). Radians are a type of angle measurement similar to degrees that range from 0 to 2π instead of 0 to 360. To convert from radians to degrees, we multiply by 180/π (line 13). The constant Math.PI provides the value of π. Since this rotation adjustment is performed every time the mouse moves within the stage, the cannon barrel appears to constantly point at the cursor. Test the movie to observe this effect.
Hiding the Cannon Layer
We won’t make any other changes to the Cannon layer. Hide the Cannon layer by selecting the show/hide selector (dot) in the portion of the Timeline to the right of the layer name (Fig. 17.11). A red x should appear in place of the dot to indicate that the layer is hidden while editing the movie. The layer will still be visible when the movie is viewed. Clicking the show/hide x again makes the Cannon layer visible.
Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.