Gravitation: Physics

by ilyas usal a.k.a. pom   | filed under Flash and ActionScript

In this tutorial, we will see how to give an object an effect of gravity.
The original code was provided by Thoriphes.

Note - for an updated version of this tutorial, please visit the Physics-Based Bounce Effect page.

The physics behind it:

We will take the example of a ball free-falling and bouncing against the floor. Basically, what's happening is pretty simple : everything in this world is subject to the gravitation field. In physics, it translates to a force and something we call weight. The force is directed to the ground, and has an influence on the acceleration of objects.

All this to show you what you already know : wherever the ball will be, it will have a tendency to go down. This implies that when the ball is going down already, it will go down faster, and if it's going up, its speed will decrease to eventually bring it down.

Let's see a first approach of the problem with Flash:

                    onClipEvent (load) {
 // gravity is what I called g in the tutorial. The
 // higher g the harder the ball will fall.
 // gravity = 0 can be set, as an experiment, but
 // it will in fact create a "zero gravity" effect
 // gravity < 0 will create an inverted gravity effect
 gravity = 2 ;

 // We set the speed of the ball when it is released.
 speedx = 0 ;
 speedy = 0 ;
}

onClipEvent (enterFrame) {

 // We calculate the increase of speed
 // speedx doesn't change
 speedy = speedy + gravity ;

 // We move the ball.
 // speed/5 just makes the motion slower
 this._x += speedx/5 ;
 this._y += speedy/5 ;
}

 

The above code goes inside the Actions panel of the ball, which has to be a movie clip. Think about making a very high window so that you can see the effect.

 

What we did is pretty simple : the speed of the ball constantly increases by gravity, so the longer the fall, the faster the ball.

I tried to define a prototype with this function, but I'm having troubles. That's why we'll make a few experiments directly on the parameters. For instance, putting :
speedy = 90 ;
gravity = -2 ;
is an example of reversed gravity with initial speed.
Now we want our ball to bounce against the floor.

In order to do so, we have to set the _y position of the floor. Let's take 500. When the ball bounces, we make the speed change its sign. But we also want it to loose some of its energy. That's why we multiply the speed by bounce, a number < 1 but usually close to 1.
Finally we multiply the speed by -bounce.
We just need to change the code a bit :

                      onClipEvent (load) {

 gravity = 2 ;

 // This sets the _y position of the floor
 floor = 500 ;

 // Bounce is a number < 1 but close to 1
 // The closer to 1, the higher the ball will bounce
 bounce = 0.92 ;

 // We set the speed of the ball when it is released.
 speedx = 0 ;
 speedy = 0 ;
}

onClipEvent (enterFrame) {

 speedy = speedy + gravity ;

 this._x += speedx/5 ;
 this._y += speedy/5 ;

 // If we are beyond the floor, invert the speed
 if (this._y > floor) {
  this._y = floor ;
  speedy *= -bounce ;
 }
} 

You can also define a box, with walls against which the ball will bounce. This is exactly the same technique as what we've just seen : if tests. Note that you have to set speedx to something if you want to see anything.
Now imagine that we want to drag the ball and then let it go.
The first thing we have to do is check if the ball is being dragged. In order to do so, we'll put a button inside the ball movie clip, with the code :

                      on (press) {
 pressing = 1 ;
}
on (release) {
 pressing = 0 ;
} 

If we're not pressing, we will do with the old code, but if we're pressing, we have to start dragging the movie clip and calculate its speed. Here's the complete code of the movie clip :

                      onClipEvent (load) {
 // gravity is what I called g in the tutorial. The
 // higher g the harder the ball will fall.
 // gravity = 0 can be set, as an experiment, but
 // it will in fact create a "zero gravity" effect
 // gravity < 0 will create an inverted gravity effect
 gravity = 2 ;

 // This sets the _y position of the floor
 floor = 500 ;
 floorx1 = 0 ;
 floorx2 = 200 ;

 // Bounce is a number < 1 but close to 1
 // The closer to 1, the higher the ball will bounce
 bounce = 0.92 ;

 // We set the speed of the ball when it is released.
 speedx = 0 ;
 speedy = 0 ;
}

onClipEvent (enterFrame) {
 if (pressing) {

 // if we are pressing
  // drag the object
  startDrag (this,true) ;
  // calculate the speed
  speedx = this._x - x0 ;
  speedy = this._y - y0 ;
  // set a new reference point
  x0 = this._x ;
  y0 = this._y ;

 } else {

  stopDrag () ;
  speedy = speedy + gravity ;

  this._x += speedx/5 ;
  this._y += speedy/5 ;

  if (this._y > floor) {
  this._y = floor ;
  speedy *= -bounce ;
  }
  if (this._x < floorx1) {
  this._x = floorx1 ;
  speedx *= -bounce ;
  }
  if (this._x > floorx2) {
  this._x = floorx2 ;
  speedx *= -bounce ;
  }
  }
}
 

If you don't get it, just check the elasticity tutorial, I tried to explain the principle better there.
Last but not least, I told you at the beginning about the physics behind it. Well, it is possible to program the ball so that it moves according to real equations, and not simply ransom figures.
We had speed = g * t + starting_speed. All we have to do is get the time when the ball is thrown. Be careful though : we have to reset the timer and the starting speed every time the ball bounces or is released. Here's the code :

                      onClipEvent (load) {

 gravity = 2 ;

 // We get the time when the ball is released for the
 // first time. Be careful with the division by 100
 time = getTimer () ;
 time /= 100 ;

 floor = 500 ;

 bounce = 0.92 ;

 // We set the speed of the ball when it is released.
 speedx = 0 ;
 speedystart = 0 ;
}

onClipEvent (enterFrame) {

 // We get the current time (still /100)
 timenow = getTimer () ;
 timenow /= 100 ;
 speedy = gravity * (timenow - time) + speedystart ;

 //We move the ball
 this._x += speedx/5 ;
 this._y += speedy/5 ;

 if (this._y > floor) {
  this._y = floor ;
  speedy *= -bounce ;
  time = getTimer () ;
  time /= 100 ;
  // reset the timer
  speedystart = speedy ;
  // reset the starting speed
 }
} 

[ the final version of the file ]

The motion isn't really different from the previous one, but it comes directly from the physics equations of motion. There! I hope you understand gravity in Flash a little bit better now.
 
Click here for all of the source files for this tutorial regarding gravity.

This tutorial is written by Ilyas Usal. Ilyas is also known as ilyaslamasse on the kirupa.com forums! If you have any questions, please post them on the forums by clicking here.
pom

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇