Bouncing Ball Script

written by: Paulo Caldeira; article published: year 2007, month 06;


In: Root » Computers and technology » Flash » Bouncing Ball Script

Dutch French Spanish Portuguese Italian German Japanese Chinese Korean Russian Arabic Bookmark and Share this Article

Start a new Flash movie. Create a movie clip that has a ball graphic inside it.

You can name the instance of the movie clip, myClip, but our code will not depend on the name of the clip.

Attach the following code to the movie clip:

onClipEvent(enterFrame) {
   this._x += 5;
   }

This code acts once per frame. It pushes the movie clip over by one pixel each frame. The result is a clip that moves slowly across the screen until it reaches the other side. It actually continues even past there.

To alter the code so that it bounces off the right wall, we'll need to make a few changes. The horizontal speed of the movie clip will be stored in a variable named speedX. Change the movie clip script to this:

onClipEvent(load) {
   speedX = 5;
   }
onClipEvent(enterFrame) {
   this._x += speedX;
   }

If you run the movie now, it behaves exactly as it did before. The variable speedX is set to 5, and that value is used to increment the horizontal position of the movie clip.

Now it is time to make the clip bounce off the right wall. To do this, we will test to see whether the clip's horizontal position is at, or past, the right wall. If so, speedX is reversed so that the ball moves back the way it came.

onClipEvent(load) {
   speedX = 5;
   }
   onClipEvent(enterFrame) {
   this._x += speedX;
   if (this._x >= 550) {
   speedX = -speedX;
   }
   }

Now the ball bounces off the right side of the screen and comes back toward the left wall.

To make sure that it bounces off the left wall, we'll want to test for the horizontal location of the ball being less than 0 and reverse its direction in that case too.

onClipEvent(load) {
   speedX = 5;
   }
onClipEvent(enterFrame) {
   this._x += speedX;
   if (this._x >= 550) {
   speedX = -speedX;
   }  else if (this._x <= 0) {
   speedX = -speedX;
   }
   }

Now let's make the ball move in a vertical direction as well. There is nothing new in this next alteration of code. It is just the same things we have been doing, but applied to both the horizontal and vertical directions.

onClipEvent(load) {
   speedX = 5;
   speedY = 5;
   }
onClipEvent(enterFrame) {
   this._x += speedX;
   this._y += speedY;
 if (this._x >= 550) {
   speedX = -speedX;
   }  else if (this._x <= 0) {
   speedX = -speedX;
   }
 if (this._y >= 400) {
   speedY = -speedY;
   }  else if (this._y <= 0) {
   speedY = -speedY;
   }
   }

When you run the movie now, the ball bounces off all four walls. It keeps going and going. It is a good example of an animation easily done with ActionScript but next to impossible with frame-by-frame manually created animation.

You may notice that the ball seems to go slightly beyond the edges of the screen. That is because the horizontal and vertical location of the movie clip refers to the middle of the ball. If the ball is 20 pixels in diameter, the ball might appear to go about 10 pixels past the edge. You can adjust for this in your calculations in many ways. The simplest would be to use 10, 10, 540, and 390 as your screen edges, not 0, 0, 550, and 400.

Disclaimer

1) E-articles is not responsible for the information contained by this article as well for any and all copyright infringements by authors and writers. E-articles is a free information resource. If you suspect this article for any copyright infringement, please read the terms of service and contact us to investigate the problem.
2) E-articles is not responsible for inaccuracies, falsehoods, or any other types of misinformation this article may contain and will not be liable for any loss or damage suffered by a user through the user's reliance on the information gained here.

link to this article