william hemsworth

View all articles by william hemsworth
Hi

In this tutorial I am going to show you how to make a ball move around the screen realistically and if the ball hits a side of the stage it will bounce.

You will make something that looks similar to this:


Background colour white.
550x400
50 fps

The first thing you need to do is draw a circle on the stage (50x50) then select it and press F8. (You may want to put a line or something through the ball so that you can see it rotate).
Set it as a MovieClip.
Now double click on the circle to edit it, position the ball to be in the very center.



Now go to the main screen and click on the first frame and open the actions panel (F9).

First put in some variables for what we will be making. Copy this into the actions panel:

var Xspeed:Number = 0;
var Yspeed:Number = 0;
/*--*/
var friction:Number = 0.15;
var gravity:Number = 0.70;
var ballSpeed:Number = 1.24;
/*--*/


The part that says Xspeed has a value of 0. In a while we will be increasing or decreasing this value when the left or right key is pressed.
The same apply's for Yspeed.

Now we need to make a function that will move the ball around.
Copy and paste this code: 

function moveBall() {
    if (Key.isDown(Key.RIGHT)) {
        Xspeed += ballSpeed;
    }
    if (Key.isDown(Key.LEFT)) {
        Xspeed -= ballSpeed;
    }
    if (Key.isDown(Key.DOWN)) {
        Yspeed += ballSpeed;
    }
    if (Key.isDown(Key.UP)) {
        Yspeed -= ballSpeed;
    }
}


Each time one of these arrow keys are pressed, either the Xspeed or the Yspeed value will be changing.

Add this to your script just where after it says 
"var ballSpeed:Number = 1.24;
/*--*/" :

onEnterFrame = function () {
    moveBall();
};


This means that every time we enter this frame it will repeat this function.

Add this to the end of your script:

function applyMovement() {
    ball._x += Xspeed;
    ball._y += Yspeed;
    ball._rotation += Xspeed;
}
/*--*/


Now you have made is so that the speed of the ball that is moving is the value of what ever the Xspeed or Yspeed and the ball rotation speed is the same speed that the ball is moving on the X axis.

Go back to the "onEnterFrame" and paste this under where it says "moveBall":

applyMovement();


Now it will be moving the ball at that speed every 50th of a second, test your movie and you should be able to move the ball around with your arrow keys and the ball should look like it is rolling realisticly.

Now to add some friction to the ball but only while it is moving.

Add this to the end of your code:

function ballFriction() {
    if (Xspeed > 0) {
        Xspeed -= friction;
    }
    if (Xspeed < 0) {
        Xspeed += friction;
    }
    if (Yspeed > 0) {
        Yspeed -= friction;
    }
    if (Yspeed < 0) {
        Yspeed += friction;
    }
}


This part of the script is saying that if the ball is not staying still it will apply friction to the oppisite direction of whatever way the ball is moving.
Dont forget to add the name of the function to the "onEnterFrame" or it will not be repeating this function.

So far your code should look like this:

var Xspeed:Number = 0;
var Yspeed:Number = 0;
/*--*/
var friction:Number = 0.15;
var gravity:Number = 0.70;
var ballSpeed:Number = 1.24;
/*--*/
onEnterFrame = function () {

    moveBall();
    ballFriction();

};
/*--*/
function moveBall() {

    if (Key.isDown(Key.RIGHT)) {

        Xspeed += ballSpeed;

    }

    if (Key.isDown(Key.LEFT)) {

        Xspeed -= ballSpeed;

    }

    if (Key.isDown(Key.DOWN)) {

        Yspeed += ballSpeed;

    }

    if (Key.isDown(Key.UP)) {

        Yspeed -= ballSpeed;

    }

}
/*--*/
function ballFriction() {

    if (Xspeed > 0) {

        Xspeed -= friction;

    }

    if (Xspeed < 0) {

        Xspeed += friction;

    }

    if (Yspeed > 0) {

        Yspeed -= friction;

    }

    if (Yspeed < 0) {

        Yspeed += friction;

    }

}



Next you have to add the gravity which is easy.
Copy and paste this script at the end of your code:

/*--*/
function ballGravity() {
    Yspeed += gravity;
}


This means that it will constantly be adding the gravity to the Yspeed.
Add this function name to the "onEnterFrame" part again and if you test your movie now it should have gravity but fall through the floor.

We now need to make some boundries and and a extra boundry around it just incase it gets caught in it.
Add this to your code:

function boundries() {
    if (ball._x >= 525) {
        Xspeed = -Xspeed;
        //Right boundry
    }
    if (ball._x <= 25) {
        Xspeed = -Xspeed;
        //Left boundry
    }
    if (ball._y >= 375) {
        Yspeed = -Yspeed;
        //Bottom boundry
    }
    if (ball._y <= 25) {
        Yspeed = -Yspeed;
        //Top boundry
    }
    /*--*/
    if (ball._x >= 526) {
        ball._x -= 3;
        //Right boundry
    }
    if (ball._x <= 24) {
        ball._x += 3;
        //Left boundry
    }
    if (ball._y >= 376) {
        ball._y -= 3;
        //Bottom boundry
    }
    if (ball._y <= 24) {
        ball._y += 3;
        //Top boundry
    }
}
/*--*/


You now have boundries going all the way round your stage and a backup incase the first set dont work.
The bouncing works be if the ball hits the first set of boundries it will turn either the Xspeed into a -Xspeed or the Yspeed into a -Yspeed for example:

Xspeed = 3
when it hits the wall:
Xspeed = -3

Add the function name "boundries()" to the "onEnterFrame" to repeat it.

You have finished this tutorial and i hope you have enjoyed it.