Flash MX 2004 Games : Art to ActionScript

Flash MX 2004 Games
Options for easing in and out
When you move a clip from one location to another over time you have several options over the
look of the motion. Each time interval could be used to move the clip exactly the same distance.
This is called linear interpolation and it is the default for Flash motion tweening. The result is
fine for an object that is already moving but looks stiff and artificial if the object either starts from
stationary or stops while in view. An alternative is to ease in to the motion; the first time interval
would move the clip only a small amount and this would be increased for each successive time
interval, either until a certain speed is achieved or the ramping could continue throughout the
motion. Similarly at the end of a motion the amount of motion for each successive time interval
could be reduced to bring the clip to a smooth stop. When you start to play about with the speed
of a clip in this way you will find that accelerating and then abruptly stopping has a dynamic that
may be suitable for a particular application. Motion is as important to the success of a game as the
look and feel. Controlling the speed of a clip can be done using simple mathematics, the simplest
option being linear.
Linear interpolation
If a clip moves from location A to location B in time T, then linear interpolation is simply
var dt = time/duration;
_x = offset.x * dt + start.x;
_y = offset.y * dt + start.y;
Here we use a point object to store the start position and the total movement that is required.
A motion is usually relative to the starting position. In this instance we simply create a variable dt
and set it to the current time since the start of the motion divided by the duration of the motion.
This number will vary over time between 0 and 1. At the start no time will have elapsed so the
value for dt will be 0, in which case the x and y value is simply set to the starting position. As the
variable time approaches the duration value, dt will get close to one so that x and y will be set to
the starting value plus the value for offset.
Quadratic interpolation
The graph of y = x 2 is shown in Figure B.1. As you can see this is not a straight line but a curve.
We will let the x value represent a number between 0 and 1, being the elapsed time in proportion
to the total duration of a move. The y parameter will be the total distance moved. As you can see
from the shape of the curve there will be a smaller movement at first, gaining speed throughout
the move. This will give an ease in to the motion.
Such a motion is achieved using this code snippet.
396
var dt = time/duration;
_x = offset.x * dt * dt + start.x;
_y = offset.y * dt * dt + start.y;