Flash Momentum Tutorial

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.

Sidenote:
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.startDrag();
	this.isDragging = true;
}

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

Throw-able Ball

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.

DAMPING_FACTOR = 0.98;

// 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

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.

• MomentumObject.as
• MomentumProject.zip