Home | | **Internet & World Wide Web HOW TO PROGRAM** | | **Internet Programming** | | **Web Programming** | Adding the Rotating Cannon - Adobe Flash CS3

Many Flash applications include animation that responds to mouse-cursor motions.

**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 );

**3
**

**4
**// rotate cannon when mouse is moved

**5
**function mouseInHandler( args : MouseEvent ) :
void

**6
**{

**7
**// rotates cannon if cursor is within
stage

**8
**if ( ( stage.mouseX > 0
) && ( stage.mouseY > 0 )
&&

**9
**( stage.mouseX < 550
) && ( stage.mouseY < 400 ) )

**10
**{

**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.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

**Related Topics **

Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.