Học Actionscript 3.0 - p 21 doc

Geometry and Trigonometry
Chapter 7: Motion
179
storing the current angle in a variable (line 12) and incrementing the angle
to the next button position (line 13). The value of the angle is converted
from degrees to radians using
deg2rad(), the utility function we’ve discussed
before, at the end of the script.
The button is then created using the library symbol with the
SatelliteButton
linkage class, centered, and positioned on the circle defined by the mainButton
center point and radius. The same technique to move an object along a circu-
lar path is used here. The cosine of the current angle times the radius of the
circle determines the x coordinate, and the sine of the angle multiplied by the
circle’s radius calculates the y coordinate (lines 16 and 17).
Each button is then given a name in line 18, consisting of an uppercase “B,”
and the number of the button, taken from the loop counter. The first button,
for example, will be B0, the second B1, and so on. the last line of this code
block adds a mouse click listener to each button that calls the
onClick()
function found in lines 36 through 38. In this simple example, this function
just traces the button name. However, as discussed in Chapter 6, you can
change this instruction to update the playhead in a movie clip, and we’ll teach
you how to load external assets in Chapter 13.
Because the buttons in this example have text labels, Line 21 is very impor-
tant. Setting the
mouseChildren property of an object to false prevents the
content of that object from receiving mouse events. By default, the mouse
will automatically interact with the text fields in this example that display
the labels inside the buttons. This interaction includes text selection, cursor
feedback, and more. With

mouseChildren set to false for each button, the text
field child of the button won’t react to mouse events.
Line 22 is also important to this example because the navigation widget is
draggable. By adding each button as a child of mainButton, rather than the
main timeline, dragging the center button will also drag all its satellite but-
ton children.
The remainder of the function is consistent with our prior basic uses of text
fields in the Hello World! applications presented in earlier chapters. Line 24
creates the text field, line 25 sets the field’s width to the width of the button,
and lines 26 and 27 center the button horizontally and vertically, respectively.
Line 28 automatically scales the text field down to fit its text and is also a
simple way to center the text prior to learning more advanced formatting
options in Chapter 10. Line 29 is another formatting shortcut, making all text
in the field white. Finally, the button name is added to the text field in line 30
and the field is added as a child of the button to serve as its label.
10 function positionButtons() {
11 for (var i:int = 0; i < numButtons; i++) {
12 var radian:Number = deg2rad(angle);
13 angle += angleChange;
14
15 var btn:SatelliteButton = new SatelliteButton();
16 btn.x = Math.cos(radian) * radius;
N O T E
Although not strictly necessary in this
example, it’s good practice to convert the
int data type of the loop counter to a
String data type before adding it to the
button name.
Download from Wow! eBook <www.wowebook.com>
Part II: Graphics and Interaction

180
Geometry and Trigonometry
17 btn.y = Math.sin(radian) * radius;
18 btn.name = "B" + String(i);
19 btn.addEventListener(MouseEvent.CLICK, onClick,
20 false, 0, true);
21 btn.mouseChildren = false;
22 mainButton.addChild(btn);
23
24 var tf:TextField = new TextField();
25 tf.width = btn.width;
26 tf.x = -btn.width / 2;
27 tf.y = -btn.height / 4;
28 tf.autoSize = TextFieldAutoSize.CENTER;
29 tf.textColor = 0xFFFFFF;
30 tf.text = btn.name;
31 btn.addChild(tf);
32 }
33 }
34 positionButtons();
35
36 function onClick(evt:MouseEvent) {
37 trace(evt.target.name);
38 }
Lines 39 through 51 are responsible for creating the drag behavior of main -
Button. Lines 39 and 40 create a mouse down listener that triggers
onStart-
Drag()
, and lines 41 through 44 assign mouse up listeners to both mainButton
and the stage. The latter is important because it’s possible while dragging for

a mouse up event to not register on the button. Without allowing the stage to
catch that event, the draggable object would be stuck to your mouse.
The
onStartDrag() function (lines 46 through 48) is a great example of how
using
currentTarget in an event listener function can be very helpful. As dis-
cussed in Chapter 3, the
target property will tell you which button received
the mouse down event, but it will also make that single button draggable.
The
currentTarget property, on the other hand, refers to the object to which
the listener is attached. That means that no matter which button you mouse
down upon, mainButton will move, dragging all its child buttons along.
Finally, the
onStopDrag() function (lines 49 through 51) stops all dragging.
39 mainButton.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag,
40 false, 0, true);
41 mainButton.addEventListener(MouseEvent.MOUSE_UP, onStopDrag,
42 false, 0, true);
43 stage.addEventListener(MouseEvent.MOUSE_UP, onStopDrag,
44 false, 0, true);
45
46 function onStartDrag(evt:MouseEvent):void {
47 evt.currentTarget.startDrag();
48 }
49 function onStopDrag(evt:MouseEvent):void {
50 stopDrag();
51 }
52
53 function deg2rad(degree):void {

54 return degree * (Math.PI / 180);
55 }
Download from Wow! eBook <www.wowebook.com>
Geometry and Trigonometry
Chapter 7: Motion
181
This example shows how a little math can spice up even a simple naviga-
tion system, but without being too difficult to master. Best of all, this script
automatically positions your satellite buttons for you, even if the number of
buttons changes. If you’d rather have nine buttons instead of six, so be it! Just
change the value in line 1 and the script will evenly space the buttons around
the circumference of the circle.
Rotation Toward an Object
Determining points on a circle when you start with an angle requires sine
and cosine, as seen in the previous example. However, the opposite of that
task requires a different trigonometric method. Determining an angle when
starting with point data requires
atan2(). The atan2() method is a varia-
tion on the arctangent method and is especially useful when you want to
use rotation to point something at another location. For instance, the next
code example uses a frame event to continuously point a movie clip at the
mouse location, no matter where the mouse is on the stage, as simulated in
Figure 7-17.
The formula used to calculate the angle for the rotating object is:
Math.atan2(y2 - y1, x2 - x1)
There are two important issues to be aware of when using atan2(). As you
can see, the method always takes
y point data as its first parameter (instead of
x, which is more commonly placed in the first position). Second, the method
returns its angle in radians, not degrees.

With that in mind, let’s take a look at the following script, found in the
point_at_mouse.fla source file. It begins by creating a new instance of the
Hand
linkage class from the library, placing the hand and forearm shown in Figure
7-17 in the center of the stage, and adding it to the display list. The listener
that follows in lines 6 through 11 calculates the angle of rotation in radians,
and then converts it to degrees, the unit required by the movie clip’s
rotation
property. The conversion takes place in the utility function
rad2deg() at the
end of the script.
The
atan2() method in line 8 subtracts the mouse location from the hand
location (in y and x components) to get the angle the hand must use to point
at the mouse. Think of the location at which you want to point as the origin
of the system. In other words, point back to home base. That will help you
remember that the rotating object is point 2, and the mouse (in this case) is
point 1.
1 var hand:MovieClip = new Hand();
2 hand.x = stage.stageWidth / 2;
3 hand.y = stage.stageHeight / 2;
4 addChild(hand);
5
Figure 7-17. Using atan2(), you can
continuously point a movie clip at the
mouse no matter where it’s on the stage
Download from Wow! eBook <www.wowebook.com>
Part II: Graphics and Interaction
182
Geometry and Trigonometry

6 addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
7 function onLoop(evt:Event):void {
8 var rotationRadians:Number = Math.atan2(hand.y - mouseY,
9 hand.x - mouseX);
10 hand.rotation = rad2deg(rotationRadians);
11 }
12
13 function rad2deg(rad:Number):Number {
14 return rad / (Math.PI / 180);
15 }
This example points one movie clip at the mouse, but the effect can be
adapted in many ways. One obvious variant is to point a movie clip at
another movie clip. Another visually interesting adjustment is to point many
instances of a movie clip at the same object. A grid of such pointers, for
example, looks interesting because each pointer rotates independently based
on its location. This can be seen in Figure 7-18, and will be demonstrated in
the next script. Finally, the ultimate effect need not be visual. You can use
this technique simply to track things, such as planning the trajectory of a
projectile toward a target.
Creating a grid using modulus
The following script, found in the grid_point_mouse.fla source file, points
several independent objects at the mouse, but it also lays out the objects in a
grid. Using
atan2() to point at the mouse has already been discussed in the
prior example, so let’s focus on how to create the grid.
Line 1 stores the y position of the first row in the grid, and the variable in line
2 will hold instances of the FLA library linkage class,
Arrow. Line 3 starts a
loop that increments 70 times to build a grid with as many arrows. Each arrow
is created in line 4 and added to the display list in line 10. But the grid layout

occurs in lines 5 through 9 through the magic of the modulo operator (
%).
The modulo operator, often refer to as “mod,” returns the remainder of a divi-
sion—any partial value left over when a number can’t be divided into equal
parts. For example, 4 divided by 2 is 2, with no remainder. However, 5 divided
by 2 leaves a remainder of 1. Modulo can be used to test when a specific num-
ber of iterations has occurred, without the need for another variable.
It’s tidy to arrange 70 items in a grid that contains 10 columns and 7 rows. To
do this, we can loop over a process 70 times, but we need to know when the
end of a row is reached if we are to advance down to the next row. We can’t
rely solely on the loop counter because it increments from 0 to 70. However,
dividing the loop counter by 10, there will be no remainder at counter values
0, 10, 20, and so on. Therefore, using the modulo operator, we can tell when
the remainder is 0 and when we’ve reached the end of a row. The header of
Table 7-3 shows the remainders of all numbers 0 through 69. For example,
the numbers in the first column all have a remainder of 0, the numbers in the
second column all have a remainder of 1, and so on.
Figure 7-18. Detail of grid_point_mouse.
fla. Using
atan2(), you can continuously
point a movie clip at the mouse no matter
where it is on the stage
Download from Wow! eBook <www.wowebook.com>
Programmatic Tweening
Chapter 7: Motion
183
Table 7-3. 70 values (i) listed by their remainder when dividing by 10 (i % 10)
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18 19

20 21 22 23 24 25 26 27 28 29
30 31 32 33 34 35 36 37 38 39
40 41 42 43 44 45 46 47 48 49
50 51 52 53 54 55 56 57 58 59
60 61 62 63 64 65 66 67 68 69
Line 6 sets the x coordinate of the arrow based on the grid column number,
derived using modulo (i % 10). All columns start with an initial offset of 50,
and an additional offset of 50 pixels per column is added. The first arrow will
be positioned at 50 (based on 50 + (0 * 50)), the second will be positioned
at 100 (based on 50 + (1 * 50)), and so on. If i % 10 is 0 (line 6) a new row is
required and 50 is added to
rowY.
1 var rowY:Number = 0;
2 var myArrow:Arrow;
3 for (var i:int = 0; i < 70; i++) {
4 myArrow = new Arrow();
5 myArrow.x = 50 + ((i % 10) * 50);
6 if (i % 10 == 0) {
7 rowY += 50;
8 }
9 myArrow.y = rowY;
10 addChild(myArrow);
11 myArrow.addEventListener(Event.ENTER_FRAME, onLoop,
12 false, 0, true);
13 }
14
15 function onLoop(evt:Event):void {
16 var thisArrow:Arrow = Arrow(evt.target);
17 var rotationRadians:Number = Math.atan2(thisArrow.y - mouseY,
18 thisArrow.x - mouseX);

19 thisArrow.rotation = rad2deg(rotationRadians);
20 }
21
22 function rad2deg(rad:Number):Number {
23 return rad / (Math.PI / 180)
24 }
Programmatic Tweening
Scripting your own animations from scratch gives you a lot of control and
freedom, but it can be time-consuming, too. You may also discover that you’re
frequently rewriting similar equations in project after project. If you find
yourself spending too much time in this manner, you may want to look into
ActionScript tweening classes. A tween is an animation sequence in which the
Download from Wow! eBook <www.wowebook.com>
Part II: Graphics and Interaction
184
Programmatic Tweening
computer interpolates all relevant settings between starting and ending prop-
erty values. For example, just like you would create a motion tween in Flash
Professional’s timeline, you might write a programmatic tween that moves a
movie clip from an x position of 100 to an x position of 400.
Adobe’s Tween Class
Until you are comfortable using third-party ActionScript packages, you may
want to get up to speed with tweening using Adobe’s
Tween class. Built into
the ActionScript language, the
Tween class is fairly limited but also easy to
understand. Here is a look at the class’s signature, and the seven parameters
into which you send data when instantiating a tween object:
Tween(obj:Object, prop:String, func:Function, begin:Number,
finish:Number, duration:Number, useSeconds:Boolean):Tween

The class takes the following arguments (in this order):
•
obj: The object to animate
•
prop: A relevant property to manipulate
•
func: A preexisting easing function to add expressiveness to the ani-
mation
•
begin: The beginning value of the property
•
finish: The finishing value of the property
•
duration: The duration of the tween
•
useSeconds: Whether to use seconds or frames as the desired time unit
It also returns a
Tween object, so you can store a reference to the tween for
additional manipulation. For example, you can stop or start the tween at a
later point.
The following script, found in the tween_class.fla source file, provides a
simple example of how to use the
Tween class. It moves a movie clip from
one side of the stage to the other, bouncing the clip into its final destination.
Lines 1 through 4 tell the compiler where to find the required classes. Lines
6 through 8 create a movie clip from the FLA library using the
Ball linkage
class, place it at point (100, 100), and then add it to the display list.
1 import fl.transitions.Tween;
2 import fl.transitions.easing.Bounce;

3 import fl.transitions.easing.None;
4 import fl.transitions.TweenEvent;
5
6 var ball:MovieClip = new Ball();
7 ball.x = ball.y = 100;
8 addChild(ball);
9
10 var ballXTween:Tween = new Tween(ball, "x", Bounce.easeOut,
11 100, 400, 3, true);
12
N O T E
As discussed in Chapters 1 and 6, even
though this code is a simple timeline
script, it still needs import statements
because the required classes are not part
of the
flash package. Only classes from
this package are automatically imported
behind the scenes in Flash Professional
timeline scripts.
Download from Wow! eBook <www.wowebook.com>
Programmatic Tweening
Chapter 7: Motion
185
13 ballXTween.addEventListener(TweenEvent.MOTION_FINISH,
14 onMotionFinish);
15 function onMotionFinish(evt:TweenEvent):void {
16 var ballAlphaTween:Tween = new Tween(ball, "alpha",
17 None.easeOut,
18 1, 0.3, 1, true);

19 }
Lines 10 and 11 create a Tween instance to animate ball’s x property. Pay par-
ticular attention to the fact that the property is specified in string format.
That can take a little getting used to.
The tween will use the
Bounce easing function to add expressiveness to the
animation while moving the movie clip horizontally from 100 to 400 pixels.
As a result, the ball will appear to bounce against its final position. Finally,
the tween will conclude in 3 seconds—indicated by the time unit 3, and the
true value of the last parameter, useSeconds, ensuring the tween is timed with
seconds, not frames.
Lines 13 and 14 add an event listener to the
ballXTween object, to trigger
the listener function when the animation is finished and the
TweenEvent.
MOTION_FINISH
event is fired. At that point, a new tween is created, to fade the
alpha property of the same object from 1 to 0.3. The second tween will take 1
second, and uses no easing to complete the task.
Only the last parameter of the
Tween class is optional. (When omitted,
useSeconds will be false and will use frames to time the tween, rather than
seconds.) Therefore, if you don’t want to use easing, you must specify the
None
easing class, and either the
easeIn or easeOut property. Which you choose
will not matter, as no easing will be applied. The names and descriptions
of other available easing classes can be found in Table 7-4. All easing classes
allow easing in, easing out, and easing both in and out of the tween.
Table 7-4. Easing types found in the fl.transitions.easing package

Easing Class Description
Back
Easing in begins by backing up and then moving toward the tar-
get. Easing out overshoots the target and backtracks to approach it.
Bounce
Bounces in with increasing speed, or out with decreasing speed.
Elastic
Undulates in an exponentially decaying sine wave, accelerating in
and decelerating out.
None
Linear motion without easing.
Regular
Normal easing, like that found in the timeline’s simple easing fea-
ture, accelerating in and decelerating out.
Strong
Emphasized easing, stronger than that found in the timeline’s
simple easing feature, but without additional effects. Accelerates in
and decelerates out.
Download from Wow! eBook <www.wowebook.com>
Part II: Graphics and Interaction
186
Programmatic Tweening
GreenSock’s TweenLite
After gaining a little experience with third-party packages, you’ll very likely
want to stop using the built-in
Tween class and find a tweening package that
you like. Invariably, these heavily optimized products are smaller, faster, and
more robust, offering quite a bit that is worthy of your experimentation.
Our favorite is the Tweening Platform by GreenSock. The platform contains
several great products, but the one we want to focus on is TweenLite. The

tweening library comes in two variations: TweenLite, which is the smallest
possible size and is optimized by making a wide array of features optional,
and TweenMax, which is basically TweenLite with all of its features pre-
enabled, as well as a handful of additional advanced features.
We’ll introduce TweenLite by recreating the tween example from the “Adobe’s
Tween Class” section for comparison, and then building an example ban-
ner as an additional project. The main tools of TweenLite are a pair of nice,
simple methods:
to() and from(). As their names imply, they allow you to
tween an object’s properties from their current values to final values, or from
initial values to their current values, respectively.
Our first TweenLite example will demonstrate the
to() method, which has
the following signature:
to(target:Object, duration:Number, vars:Object):TweenLite
It begins with the object to tween, then includes the duration of the tween,
and finishes up with an object that contains all other variables you may want
to use to manipulate your tween. We’ll show you a few options for the vari-
ables object in a moment, but a relevant example is the
useFrames property.
The duration of the tween is measured in seconds by default, but you can set
useFrames to true if you prefer, and the tween duration will be based on the
file’s frame rate. The method also returns a
TweenLite instance if you want to
store a reference to the tween for later use.
All TweenLite examples are found in the tweenLite directory in the source
archive, and the following script is in the tweenLite.fla source file, The first
six lines are very similar to the
Tween class example from the prior section—
importing required classes and creating a movie clip to manipulate. Because

this is an external library, you must have the Greensock Tweening Platform
package in a known class path for the imports to work. For this example, you
can place the package’s com folder in the same directory as your FLA file.
1 import com.greensock.TweenLite;
2 import com.greensock.easing.Bounce;
3
4 var ball:MovieClip = new Ball();
5 ball.x = ball.y = 100;
6 addChild(ball);
7
8 TweenLite.to(ball, 3, {x:400, ease:Bounce.easeOut,
9 onComplete:fadeBall});
N O T E
With the developer’s kind permission,
we’ve included the Tweening Platform
with the sample source code from the
companion website. As with any software
product, however, you would be wise to
check periodically with the Greensock
website ()
to see if any changes to the packages
have been made, and update your files
accordingly.
Download from Wow! eBook <www.wowebook.com>
Programmatic Tweening
Chapter 7: Motion
187
10 function fadeBall():void {
11 TweenLite.to(ball, 1, {alpha:0.3});
12 }

In lines 8 and 9, TweenLite to() method is used to tween ball for 3 seconds,
from whatever the current location is (100, as set in line 5) to 400. It uses the
Bounce easing class and calls the fadeBall() function when the animation is
complete.
The way TweenLite handles methods is quite different from the
Tween class.
Instead of having to create all your own listeners, TweenLite uses callbacks.
An ActionScript callback is similar to the everyday use of the term. It’s a
mechanism where you can essentially leave a message for an object and ask
it to call you back at the function specified when an event occurs. In this
case, you’re asking TweenLite to call the
fadeBall() function when the tween
is complete. When the function is called, another tween is created, this time
fading the ball movie clip to 30 percent.
TweenLite also makes it very easy to build a sequence of tweens by using
the
delay property. In the prior example, the first tween spanned 3 seconds
and, upon finishing, called another tween. Rather than relying on events, you
can simply create both tweens but delay the second one to occur when the
first finishes. This will produce the same effect as the previous example, but
illustrates the ability to start your tweens whenever it suits you. To see this
in action, simply use the following code to replace lines 8 through 12 of the
prior example. This modification can be found in the tweenLite_to_delay.fla
source file.
8 TweenLite.to(ball, 3, {x:400, ease:Bounce.easeOut});
9 TweenLite.to(ball, 1, {alpha:0.3, delay:3, overwrite:false});
Note that when taking this approach, you’re essentially asking the tween to
reassign itself. Just like for a variable, you may want a new behavior, or you
may not. If you don’t want a tween to cancel out a prior tween referencing
the same object, you must use a property called

overwrite to control how the
tweens interrelate. Setting the property to false will treat the tweens indepen-
dently. The result is a sequence of tweens but without relying on events. The
next example uses this technique.
Creating a simple banner using TweenLite
With a little experience under your belt, let’s make a banner. We’ll explore two
key TweenLite concepts in this exercise: the
from() method, and the ability to
add advanced features through a plug-in mechanism.
The nice thing about using the
from() method is that you can precreate a
layout and TweenLite will automatically build it up using your specified
from settings. For example, Figure 7-19 shows what the FLA file looks like
when you write your script. This is actually the final state of the banner, so
you can adjust your layout until you’re satisfied. Once you’re happy with the
N O T E
The object syntax for the third param-
eter of TweenLite’s
to() method makes
it very easy to tween many properties
at once. For example, you could write a
tween like this:
TweenLite.to(ball, 3, {x:10,
y:10, alpha:1, rotation:90,
ease:Bounce.easeOut});
This tween would alter the x, y, alpha,
and
rotation properties all in a single
structure, making it much easier to use
than Adobe’s

Tween class. You can kill
all properties, or even select properties,
any time so you can change the behav-
ior of the tween after creating it.
Download from Wow! eBook <www.wowebook.com>
Part II: Graphics and Interaction
188
Programmatic Tweening
banner, it’s time to itemize the properties you want to work with and their
initial values. The following script is found in the tweenLite_from_banner.fla
source file.
The first property we’ll use is called
tint, and it’s not part of the TweenLite
default configuration. It is part of TweenLite’s bigger brother package,
TweenMax, but TweenLite is optimized to be as small as possible and doesn’t
include any non-essential features. However, you don’t need to move up to
TweenMax if you only want to use a few features and keep everything really
small. TweenLite has a plug-in system that allows you to activate specific
plug-ins on an as-needed basis. You have to do this only once and the plug-in
features will be available to the rest of your file thereafter.
Lines 1 through 4 import the needed classes, including the
TweenPlugin class
that manages plug-ins, and the specific plug-in we need,
TintPlugin. Line 6
activates the
TintPlugin. It will then be available throughout the life of the
project. Lines 9 through 17 are the
from() tweens, each of which lasts for 1
second.
Line 8 fades the background up from black. Lines 9 through 16 scale up the

four balls from 0 to final size. They use an
Elastic ease so the tweens spring
forward and back a few times around their final scale values. However, each
tween is delayed a bit to build a sequence. The first ball starts a half-second
after the tint fade begins, the second tween starts one and one-half seconds
later, and so on. The last ball springs into place three seconds after the process
begins. This timing is amassed from a two-second delay and a one-second
duration. At the same time, the word “AS3” finishes sliding in from the left.
1 import com.greensock.TweenLite;
2 import com.greensock.plugins.TweenPlugin;
3 import com.greensock.plugins.TintPlugin;
4 import com.greensock.easing.Bounce;
5
6 TweenPlugin.activate([TintPlugin]);
7
8 TweenLite.from(bg, 1, {tint:0x000000});
9 TweenLite.from(ball0, 1, {scaleX:0, scaleY:0,
10 ease:Elastic.easeOut, delay:0.5});
11 TweenLite.from(ball1, 1, {scaleX:0, scaleY:0,
12 ease:Elastic.easeOut, delay:1.5});
13 TweenLite.from(ball2, 1, {scaleX:0, scaleY:0,
14 ease:Elastic.easeOut, delay:1.75});
15 TweenLite.from(ball3, 1, {scaleX:0, scaleY:0,
16 ease:Elastic.easeOut, delay:2});
17 TweenLite.from(as3, 1, {x:-100, ease:Elastic.easeOut, delay:2});
Figure 7-19. A mock banner
advertisement animated with TweenLite
Download from Wow! eBook <www.wowebook.com>