Flash Bouncing Ball Tutorial

To make things a little more fun around here, I have put together a bouncing ball tutorial for Flash. Just like the previous tutorial, this one will be done primarily in Actionscript. Ready, go!

Find a ball

The first thing we'll need is a ball. Start out with a plain circle. Using Flash's very useful gradient tools, we can make our ball more realistic. First create the gradient. For the best results, don't place your darkest shade at the end. Instead place it near the end and at the end of the gradient place a slightly lighter shade to represent reflections off of the floor. Play around with it until you get something you like. Use the Paint-bucket tool to paint your circle, placing the center near the top of the ball and to one side for the best effect.

The trick to a realistic gradient is to keep it subtle. It is tempting to go from really dark to really light, but in reality things only have that kind of contrast if they are directly in a spotlight.

Adding a gradient to the ball.

To finish it off we need to convert our ball to a movie clip. Select the ball, then select Modify > Convert to Symbol. In the window that comes up give it a name, select Type: Movie Clip and click OK. And now you have a ball.

Add some bounce

Now that we have a nice ball, it's time to add some motion. I usually write all of the actions on the actual object to start with. Later I move them to their own Actionscript file. So select the ball MovieClip on your screen and open the Actionscript editor panel.

Before things start moving, we need to initialize a few variables. The Load event is perfect for initializing. These variables when we use them later, for now here's the code.

onClipEvent(load) {
	this._freefall        = true;
	this._momentumY       = 0;
	this._accelerationY   = 2.0;
	this._floorElasticity = 0.75;
	this._floorY          = 190;
	this._bounceThreshold = 3;
}

All of the interesting stuff happens in the EnterFrame handler. To start with, we want the ball to fall down. We also want it to accelerate as it falls. So we increment the _y value by a variable, _momentumY and then we increase _momentumY by the _accelerationY.

  this._y += this._momentumY;
  this._momentumY += this._accelerationY;

A ball falling forever into the vast depths of outer space off our screen isn't too interesting. Let's have it hit a floor at the bottom. To do that, we just add an if statement to see if it has hit solid ground. When it meets the ground we want it to reverse direction. Also, to keep it from bouncing forever, the ground needs to absorb a percentage of its momentum in the process. The ball jiggles indefinitely at the end, so I added the _bounceThreshold to the equation to bring it to rest. Here is what the code looks like.

// bounce it off the floor if it has hit it
if (this._y > this._floorY) {
	this._y = this._floorY; // this prevents the ball from getting stuck in the floor
	this._momentumY = -(this._momentumY * this._floorElasticity) + this._bounceThreshold;

	// keep the ball from jiggling infinitely
	if (Math.abs(this._momentumY) <= this._bounceThreshold) {
		this._momentumY = 0;
	}
}

Bouncy Ball

Go Play!

A ball isn't any fun unless you can pick it up, so let's make this ball a little more interactive. Adding the following Press and Release handlers let's you pick up the ball and drop it wherever you want. You also need to wrap the EnterFrame contents in an if statement so the ball doesn't keep falling while you're holding it. Here is the final code.

on(press) {
	this._freefall  = false;
	this._momentumY = 0;
	this.startDrag(false);
}

on(release, releaseOutside) {
	this._freefall = true;
	this.stopDrag();
}

onClipEvent(load) {
	this._freefall        = true;
	this._momentumY       = 0;
	this._accelerationY   = 2.0;
	this._floorElasticity = 0.75;
	this._floorY          = 190;
	this._bounceThreshold = 3;
}

onClipEvent(enterFrame) {
	if (this._freefall) {
		this._y         += this._momentumY;
		this._momentumY += this._accelerationY;

		// bounce it off the floor if it has hit it
		if (this._y > this._floorY) {
			this._y = this._floorY;
			this._momentumY = -(this._momentumY * this._floorElasticity) + this._bounceThreshold;

			// keep it from jiggling infinitely
			if (Math.abs(this._momentumY) <= this._bounceThreshold) {
				this._momentumY = 0;
			}
		}
	}
}

And now you have a bouncing ball. Go have some fun, just don't go throwing it through the neighbor's window. Try changing some of the initial variable values to see what happens. If you want a flubber ball that gets higher with each bounce, make the _elasticity > 1.

Bouncy Ball

This entry was posted in actionscript, Flash, Tutorials and tagged , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.