Categories
Featured jobs
» More ActionScript, Flash and Flex jobs.
» Advertise a job for free
Our network
Advertisement

 »  Home  »  Tutorials  »  Flash  »  Beginner  »  Realistic ball movement

Realistic ball movement

By william hemsworth | Published 03/5/2007 | Beginner | Rating:
Inertia Movement
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.

How would you rate the quality of this article?
1 2 3 4 5
Poor Excellent

Verification:
Enter the security code shown below:
img


Add comment

Spread The Word / Bookmark this content

Clesto Digg it! Reddit Furl del.icio.us Spurl Yahoo!

Related Articles
Comments
  • Comment #1 (Posted by Bart)
    Rating
    Perfect subject matter for beginers. But, it's missing some of the expicite step by step info needed by beginers. Please fill in the blanks.
     
  • Comment #2 (Posted by Cristian Rojas-Lazic - rojaslaz at unr.nevada.edu)
    Rating
    Good tutorial, but forgot to name the circle with an instance name of "ball". Without this nothing works
     
  • Comment #3 (Posted by Aaron - aarongrutt at gmail.com)
    Rating
    I can't seem to get this to work. I have reread your tutorial several times and I have no idea how to make it work. I use Macromedia Flash Professional 8. Please explain more on it. I renamed the symbol for the ball to be "ball" and that did nothing.
     
  • Comment #4 (Posted by Adam - k96gnome at gmail.com)
    Rating
    i had the same problem. I created the movie clip and named the instance "ball" and then pasted all of the script into the action window after selecting the first frame.. the script checking said no errors but when i went to preview the file nothing worked. it just showed the ball sitting there. sumbody plz help k96gnome@gmail.com
     
  • Comment #5 (Posted by Muhammad - cheetaneo [at] gmail [dot] com)
    Rating
    Brother Adam and Aron, I think I understand your problem. Giving the name ball is not enough. I think this will solve your problem:

    1) Goto the main scene.
    2) Click your ball and goto its properties.
    3) In the instance name, write 'ball' and then it should work.
     
  • Comment #6 (Posted by Radko79 - radko79 at wp.pl)
    Rating
    There is one more thing. One function says: function boundries and onEnterFrame = function ... there is bound(A)ries. So, you should add one letter to run this function. Cheers!
     
  • Comment #7 (Posted by m - dracamaster at googlemail.com)
    Rating
    i have tried this about 2 times and all it does is sit there....i have tried everything...giving the instance name ball...any ideas?
     
  • Comment #8 (Posted by an unknown user)
    Rating
    this is really simple, yet elegant.

    Very, very smart idea
     
  • Comment #9 (Posted by dave - david_macey13 at hotmail.com)
    Rating
    nothing happens 8(
    it just sits there
     
  • Comment #10 (Posted by Dan - nidhogge at hotmail.com)
    Rating
    Just a note for CS3 users...the Key functionality is different for ActionScript 3.0, and this will not compile (you'll get undefined key property errors). To use this code, go to File->Publish Settings, select the "Flash" tab and go to the drop-down and selection "ActionScript 2.0" in place of "ActionScript 3.0." This should now compile/work properly for you.
     
  • Comment #11 (Posted by Ali - Alixbox1723)
    Rating
    I get the same sitting-there-doing-nothing problem, and I've tried all the solutions, with no avail. Halp!
     
  • Comment #12 (Posted by Srinivas - seena_rpc at yahoo.co.in)
    Rating
    Hi
    I am Using Version of Flash Mx and
    I followed all the instruction corectly coppied in to the actionscript windows but i am unable to get the effect in output windows
     
  • Comment #13 (Posted by katabana - katabanaspammail at yahoo.com)
    Rating
    cool script... but the author has left out many points that are needed by beginners... which most of intermediate user should know...

    1. you need to apply the name of the function in "onEnterFrame"... here's my onEnterFrame script:

    onEnterFrame = function () {
    moveBall();
    applyMovement();
    ballFriction();
    ballGravity();
    boundaries();
    };

    2. a small typo in "boundaries"... thanks to Radko79's comment.. :)

    hope these help...
     
  • Comment #14 (Posted by jj0000)
    Rating
    1st - give the ball an instance name "ball"
    2nd - to let the action apply to the ball, add as below:
    ball.onEnterFrame = function () {
    moveBall();
    applyMovement();
    ballFriction();
    ballGravity();
    boundaries();
    };
    then the movie should works. Hope it helps.
     
  • Comment #15 (Posted by Matt Fugitive - lordzyon at gmail.com)
    Rating
    Great tutorial but you forgot a few bits of info. People, make sure you give your ball the instance name of "ball" as well
     
  • Comment #16 (Posted by furious - cagataytok at gmail.com)
    Rating
    I turn to it AS3. But i suppose i made a mistake. Because its not working properly good..
    Please add a AS3 Version of this tutorial :(
    Thank you for this Tutorial again.
     
  • Comment #17 (Posted by swati - agarwalswati_15july at hotmail.com)
    Rating
    hi ,i did everything,but still the ball is not working
     
  • Comment #18 (Posted by gordon - gordonbark at gmail.com)
    Rating
    make sure you're following the whole tutorial.
    DON'T just copy the code where it says "so far your code should look like:" because it's missing some of the elements mentioned earlier in the turorial

    google "flash vector tutorial" if you'd like to know more about it
     
  • Comment #19 (Posted by Winfred - bonez165 at yahoo.com)
    Rating
    Either this simply does not work

    or someone needs to rewrite it. Maybe I'm slow, but I've read and tried this for about 2.5hours.
    I would like to see the entire (complete) code (every single line of it) in order the way way it is supposed to look.
     
  • Comment #20 (Posted by Winfred - bonez165 at yahoo.com)
    Rating
    This tutorial is bad.
    I'd rather see the entire complete code, after that you can start explaining.

    This thing has so many holes in it, it is rediculous. Does the thing work or not?
    And if it does...THEN SHOW ALL THE CODE AND NOT BITS AND PIECES!
     
  • Comment #21 (Posted by logan - drdonkey at hotmail.com)
    Rating
    can someone send me the whole directions because something is missing and it wont work
     
  • Comment #22 (Posted by Dakota - dakota_martin at hotmail.com)
    Rating
    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();
    applyMovement();
    };
    /*--*/
    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;

    }

    }
    function applyMovement() {
    ball._x += Xspeed;
    ball._y += Yspeed;
    ball._rotation += Xspeed;
    }
     
Submit Comment



Search Entire Site
Add to Google
Advertisements
Article Options
Latest New Articles
Set up a simple IIS Server for Flash
by Peter McBride

Day 1 at FITC Toronto 2008
by Anthony Pace

Simple reflection effect with AS2
by Jean André Mas

ActionScript.org Meets Josh Tynjala (aka dr_zeus)
by ActionScript.org Staff

Rapidly Create Online Flash Movies to Help Users Market, Sell and Support Software and Hardware
by Sabrina F

mailing list
Enter your email address:
mailing list
Subscribe Unsubscribe
© 2000-2007 actionscript.org! All Rights Reserved.
Read our Privacy Statement and Terms of Use...
Our dedicated server is hosted and managed by WebScorpion Webhosting.