The concepts required here may look daunting but all that needs to be required are the following:

• Velocity
• Wall Collision Detection
• Friction
• Gravity

Defining the world

Lets start off by defining our bounds and our world as a class like so:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Rectangle;
 
	[SWF(width="530", height="397", frameRate="30", backgroundColor="#EEEEEE")]
	public class BallWorld extends Sprite
	{
		public function BallWorld()
		{
			var world:World = new World(530,397);
			addChild(world);
		}
	}
}
 
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
 
class World extends Sprite
{
 
	public function World(w:Number, h:Number)
	{
		var backing:Sprite;
		backing = new Sprite();
		backing.graphics.lineStyle(1,0xAAAAAA);
		backing.graphics.beginFill(0xFFFFFF);
		backing.graphics.drawRect(0,0,400,300);
		backing.x = w/2 - backing.width/2;
		backing.y = h/2 - backing.height/2;
		addChild(backing);
 
		var ball:Ball;
		ball = new Ball(20);
		ball.x = w/2;
		ball.y = h/2;
		addChild(ball);
 
	}
}
 
class Ball extends Sprite
{
	public var radius:Number = 20;	//	circle radius
 
	public function Ball(rad:Number)
	{
		//	Apply params
		radius = rad;
 
		//	Draw Ball
		graphics.lineStyle(1,0xAAAAAA);
		graphics.beginFill(0xA9C065);
		graphics.drawCircle(0,0,radius);
		graphics.endFill();
 
	}
}

Here we start with a World class that contains a backing sprite and a Ball Sprite which we have placed in the middle of the bounds. This tute is all about creating some realistic movement based on basic physics so lets get the ball to move.

Velocity

Within the physical world moving objects have a velocity which represents a distance moved over time. In Actionscript, we have a frame ticker which represents time so once every frame we can add the velocity to the coordinate position of our sprite to give the appearance of movement. Velocity in physics is given as a vector but in Actionscript we can provide it as two separate values for each coordinate. Lets add velocity to our ball:

class Ball extends Sprite
{
	public var vx:Number = 0;		//	velocity x
	public var vy:Number = 0;		//	velocity y
	public var radius:Number = 20;	//	circle radius
 
	public function Ball(rad:Number)
	{
		//	Apply params
		radius = rad;
 
		//	Draw Ball
		graphics.lineStyle(1,0xAAAAAA);
		graphics.beginFill(0xA9C065);
		graphics.drawCircle(0,0,radius);
		graphics.endFill();
 
		//	Add Listeners
		addEventListener(Event.ENTER_FRAME, onFrame);
	}
 
	private function onFrame(e:Event):void
	{
		//	Apply Velocity to Position
		x += vx;
		y += vy;
 
	}
}

...
var ball:Ball;
ball = new Ball(20);
ball.x = w/2;
ball.y = h/2;
 
//	Initial Velocity
ball.vx = 5;
ball.vy = 5;
...

Bingo! the ball is moving but it is hardly realistic. Firstly the ball leaves the bounds almost immediately so we need to provide some collision detection and to constrain it to the given bounds.

Wall Collision Detection

Let’s add the following handler and variable to our Ball class:

private var bounds:Rectangle;
...
public function Ball(rad:Number)
{
...
	//	Add Listeners
	addEventListener(Event.ENTER_FRAME, onFrame);
	addEventListener(Event.ADDED, onAdded);
}
...
private function onAdded(e:Event):void
{
	world = parent as World;
	bounds = world.bounds;
}

now add the following to our frame routine:

private function onFrame(e:Event):void
{
	//	Use a temp var for x and y to increase performance
	var tx:Number = x;
	var ty:Number = y;
 
	//	Collision Detection with right wall
	if(tx + vx > bounds.right - radius)
	{
		tx = bounds.right - radius;
		vx *= -1;
	}
 
	//	Collision Detection with left wall
	if(tx + vx < bounds.left + radius) 	{
 		tx = bounds.left + radius;
 		vx *= -1;
	}
 
  	//	Collision Detection with floor
	if(ty + vy > bounds.bottom - radius)
	{
		ty = bounds.bottom - radius;
		vy *= -1;
	}
 
	//	Collision Detection with ceiling
	if(ty + vy < bounds.top + radius)
	{
		ty = bounds.top + radius;
		vy *= -1;
	}
 
	//	Apply Velocity to tx and ty
	tx += vx;
	ty += vy;
 
	//	Render the change
	x = tx;
	y = ty;
 
}

class World extends Sprite
{
...
	private var backing:Sprite;
...
	public function get bounds():Rectangle
	{
		return backing.getBounds(this);
	}
}

Here we also use a temporary variable to make it so that x is only set at the end of the frame script and is only necessary for performance reasons but is a good habit to get into since it is good to keep data and render separate.

So now we have our ball flying away within our bounding box but the movement doesn’t look particularly real as we haven’t added any of the common physical forces to our object such as friction or gravity.

Adding Friction

To add air friction we simply need to multiply the velocity by a given amount between 0 and 1 every frame ie:

//	Air Dampening
vx *= .99;
vy *= .99;

Gravity

The last thing to do is add gravity to simulate the natural pull towards the ground by simply adding to the downward velocity every frame:

//	Air Dampening
vx *= .99;
vy *= .99;	
 
//	Gravity
vy += 1;	
 
//	Apply Velocity to tx and ty
tx += vx;
ty += vy;
 
//	Render the change
x = tx;
y = ty;

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Rectangle;
 
	[SWF(width="530", height="397", frameRate="30", backgroundColor="#EEEEEE")]
	public class BallWorld extends Sprite
	{
		public function BallWorld()
		{
			var world:World = new World(530,397);
			addChild(world);
		}
	}
}
 
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
 
class World extends Sprite
{
	private var backing:Sprite;
	public var friction:Number;
	public var gravity:Number;
 
	public function World(w:Number, h:Number)
	{
		friction = 0.95;
		gravity = 1;
 
		backing = new Sprite();
		backing.graphics.lineStyle(1,0xAAAAAA);
		backing.graphics.beginFill(0xFFFFFF);
		backing.graphics.drawRect(0,0,400,300);
		backing.x = w/2 - backing.width/2;
		backing.y = h/2 - backing.height/2;
		addChild(backing);
 
		var ball:Ball;
		ball = new Ball(20);
		ball.x = w/2;
		ball.y = h/2;
 
		//	Initial Velocity
		ball.vx = 5;
		ball.vy = 5;
 
		addChild(ball);
 
	}
 
	public function get bounds():Rectangle
	{
		return backing.getBounds(this);
	}
}
 
class Ball extends Sprite
{
	public var vx:Number = 0;		//	velocity x
	public var vy:Number = 0;		//	velocity y
	public var radius:Number = 20;	//	circle radius
	private var bounds:Rectangle;
	private var friction:Number;
	private var gravity:Number;
 
	public function Ball(rad:Number)
	{
		//	Apply params
		radius = rad;
 
		//	Draw Ball
		graphics.lineStyle(1,0xAAAAAA);
		graphics.beginFill(0xA9C065);
		graphics.drawCircle(0,0,radius);
		graphics.endFill();
 
		//	Add Listeners
		addEventListener(Event.ENTER_FRAME, onFrame);
		addEventListener(Event.ADDED, onAdded);
	}
 
	private function onAdded(e:Event):void
	{
		var world:World = parent as World;
		bounds = world.bounds;
		friction = world.friction;
		gravity = world.gravity;
	}
 
	private function onFrame(e:Event):void
	{
		//	Use a temp var for x and y to increase performance
		var tx:Number = x;
		var ty:Number = y;
 
		//	Collision Detection with right wall
		if(tx + vx > bounds.right - radius)
		{
			tx = bounds.right - radius;
			vx *= -1;
		}
 
		//	Collision Detection with left wall
		if(tx + vx < bounds.left + radius) 		{ 			tx = bounds.left + radius; 			vx *= -1; 		} 		 		//	Collision Detection with floor 		if(ty + vy > bounds.bottom - radius)
		{
			ty = bounds.bottom - radius;
			vy *= -1;
		}
 
		//	Collision Detection with ceiling
		if(ty + vy < bounds.top + radius)
		{
			ty = bounds.top + radius;
			vy *= -1;
		}
 
		//	Air Dampening
		vx *= friction;
		vy *= friction;	
 
		vy += gravity;
 
		//	Apply Velocity to tx and ty
		tx += vx;
		ty += vy;
 
		//	Render the change
		x = tx;
		y = ty;
 
	}
}

As you can see by adding gravity we substantially increase the reality factor of the motion.