///Flash Momentum Tutorial

Flash Momentum Tutorial

startDrag Woes

As you probably know, Flash comes with a great predefined function startDrag. This makes dragging things around the screen very easy. However, once you call the function stopDrag, the object stops dead in its tracks. If you wanted the object to maintain its motion once stopDrag is called, you will need to add some extra code to your objects.

Get the motion

The first step in maintaining an object’s motion is figuring out
what that motion is and saving it. To do this we simply need to save
the objects location from the last frame, and then subtract that from
the current frame’s location. This gives us the object’s velocity.

As an example of what I mean, I’ve written the following handlers for a ball MovieClip.
The key point to be aware of is that I am saving the position of the
clip so I can use it to calculate the velocity. We only need to execute
this code when the object is not being dragged. The velocity won’t be
changing once it is released. To keep the object moving once it is
released, we simply add the velocity values to its current position.

You can get some pretty annoying behavior if you don’t include releaseOutside in the events that trigger the stopDrag.
This is because the mouse moves before the object does, making it
possible to let go of the mouse when the object isn’t under it.

onClipEvent(load) {
// initialize the variables needed to calculate and store momentum
this.lastFramePosition = new Object();
this.velocity = new Object();

this.lastFramePosition.x = this._x;
this.lastFramePosition.y = this._y;
this.velocity.x = 0;
this.velocity.y = 0;
this.isDragging = false;

onClipEvent(enterFrame) {
if (this.isDragging) {
// calculate and save the object's velocity
this.velocity.x = this._x - this.lastFramePosition.x;
this.velocity.y = this._y - this.lastFramePosition.y;

// save the current location to the lastFramePosition
this.lastFramePosition.x = this._x;
this.lastFramePosition.y = this._y;
else {
// the object is not being dragged, so keep it moving
this._x += this.velocity.x;
this._y += this.velocity.y;

// Make the object draggable
on(press) {
this.isDragging = true;

on(release, releaseOutside) {
this.isDragging = false;

Throw-able Ball

The Flash plugin is required to view this example.

Damping and Limiting

As you can see, the ball can get moving pretty fast
and shows no signs of slowing down ever. Perhaps this is how you want
the ball to behave. For most applications, however, you will probably
want to limit the object’s speed to within reason. You may also want
the object to slow down over time. The rest of this tutorial will
address these two features.

To limit the speed of the ball, we use a little trig. Don’t be afraid of the math,
I’ve already worked it out here for you. Those of you who like math can
probably figure out what’s going on pretty easily. Those of you who
hate it can just copy the code.

// limit the velocity to MAX_SPEED
if ( Math.sqrt(Math.pow(this.velocity.x,2) + Math.pow(this.velocity.y,2)) > MAX_SPEED ) {
velAng = Math.atan2( this.velocity.y, this.velocity.x );
this.velocity.x = MAX_SPEED * Math.cos( velAng );
this.velocity.y = MAX_SPEED * Math.sin( velAng );

And finally we’ll slow the object down over time. To slow the object
down, we simply multiply the velocity by a number less than zero each
frame. You could get the same effect by dividing the velocity by a
number greater than zero. As you can see in the code, it doesn’t take
much to slow the ball down.


// slow down the ball by the DAMPING_FACTOR
this.velocity.x *= DAMPING_FACTOR;
this.velocity.y *= DAMPING_FACTOR;

Throw-able Ball with Limiting and Damping

The Flash plugin is required to view this example.

The End

And there you have it. Your very own throw-able Flash object. To make things easier, I’ve placed all of the code into the MomentumObject class for anyone to use. Simply link this class to any MovieClip you want and it will be automatically throw-able.

2010-05-25T22:48:48+00:00 December 15th, 2007|Flash|0 Comments

About the Author:


Leave A Comment