Flash Momentum Tutorial

This tutorial will show you how to make items in Flash "throwable" using Actionscript. So if you like throwing things around, this is the tutorial for you.

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

on(release, releaseOutside) {
	this.stopDrag();
	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.

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

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.

As I am pretty new to this whole tutorial thing, I would love to hear any feedback you might have on this. Was this useful for you? What can I do better? Feel free to leave a comment or send me an email.

This entry was posted in actionscript, Flash, Tutorials and tagged , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://sweetnesscraft.com Matt K

    Nice. One of the best animation tutorials I’ve seen in a while.

    You’re good at this tutorial crap. Bad at the hygiene thing, but good at the tutorials.

  • http://orangeSPLoTCH.com mattc

    Truly touching. Thanks for the “compliment”.