Free ActionScript

Flash AS2 & AS3 Tutorials, Game Code, Effects, Source Files & Sample Downloads

ActionScript Math and Trigonometry

Math & Trigonometry: boring but necessary to make flash games. Here is an AS3 version of my AS2 script that shows you how to calculate distance, radians, and degrees between two points (or objects).

Drag blue circle

View Code ACTIONSCRIPT
/**
 * ActionScript Math Examples
 * ---------------------
 * VERSION: 1.0
 * DATE: 12/12/2010
 * AS3
 * UPDATES AND DOCUMENTATION AT: http://www.FreeActionScript.com
 **/
package  
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.display.MovieClip;
	import flash.display.SimpleButton;
	import flash.geom.Rectangle;
	import flash.text.TextField;
 
	public class Main extends MovieClip
	{
		// Properties		
		public var startX:Number;
		public var startY:Number;
		public var dragging:Boolean = false;
 
		/**
		 * Constructor
		 */
		public function Main() 
		{
			trace("Main");
 
			// set center of drag area
			startX = circle.x;
			startY = circle.y;
 
			// add mouse listeners
			circle.addEventListener(MouseEvent.MOUSE_DOWN, dragPressHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, dragReleaseHandler);
 
			// make circle behave like a button (hand cursor)
			circle.buttonMode = true;
 
			// add enter frame event
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}
 
		/**
		 * Main loop - repeats every frame
		 * @param	event
		 */
		protected function enterFrameHandler(event:Event):void
		{
			var dx:Number = circle.x - startX;
			var dy:Number = circle.y - startY;
 
			// Calculate distance from starting point
			distanceTxt.text = String(getDistance(dx, dy));
 
			// Calculate the angle from the starting point in radians
			radiansTxt.text = String(getRadians(dx, dy));
 
			// Convert radians to degrees
			degreesTxt.text = String(getDegrees(getRadians(dx, dy)));
 
			// rotate arrow
			arrow.rotation = getDegrees(getRadians(dx, dy));
			circle.rotation = getDegrees(getRadians(dx, dy)) + 180;
 
			// Show x and y 
			xTxt.text = String(dx);
			yTxt.text = String(dy);
 
			drawLine();
		}
 
		/**
		 * Draws lines
		 */
		private function drawLine():void
		{
			// draw line from center to circle
			this.graphics.clear();
			this.graphics.lineStyle(2, 0x00CC00, .5, true);
			this.graphics.moveTo(startX, startY);
			this.graphics.lineTo(circle.x, circle.y);
 
			// draw line top to bottom
			this.graphics.lineStyle(1, 0xA2EEF7, .5, true);
			this.graphics.moveTo(circle.x, container.y);
			this.graphics.lineTo(circle.x, container.height + container.y);
 
			// draw line left to right
			this.graphics.lineStyle(1, 0xA2EEF7, .5, true);
			this.graphics.moveTo(container.x, circle.y);
			this.graphics.lineTo(container.width + container.x, circle.y);
		}
 
		/**
		 * Mouse Press handler
		 * @param	event
		 */
		protected function dragPressHandler(event:MouseEvent):void
		{
			// Create a rectangle to constrain the drag
			var rx:Number = container.x + circle.width/2;
			var ry:Number = container.y + circle.height/2;
			var rw:Number = container.width - circle.width;
			var rh:Number = container.height - circle.height;
			var rect:Rectangle = new Rectangle(rx, ry, rw, rh);
 
			dragging = true;
			circle.startDrag(false,rect);
		}
 
		/**
		 * Mouse Release handler
		 * @param	event
		 */
		protected function dragReleaseHandler(event:MouseEvent):void
		{
			if (dragging)
			{
				dragging = false;
				circle.stopDrag();
			}
		}
 
		/**
		 * Get distance
		 * @param	delta_x
		 * @param	delta_y
		 * @return
		 */
		public function getDistance(delta_x:Number, delta_y:Number):Number
		{
			return Math.sqrt((delta_x*delta_x)+(delta_y*delta_y));
		}
 
		/**
		 * Get radians
		 * @param	delta_x
		 * @param	delta_y
		 * @return
		 */
		public function getRadians(delta_x:Number, delta_y:Number):Number
		{
			var r:Number = Math.atan2(delta_y, delta_x);
 
			if (delta_y < 0)
			{
				r += (2 * Math.PI);
			}
			return r;
		}
 
		/**
		 * Get degrees
		 * @param	radians
		 * @return
		 */
		public function getDegrees(radians:Number):Number
		{
			return Math.floor(radians/(Math.PI/180));
		}
	}
 
}
Download Fla Sample

Download Fla Sample

Simple Physics with Friction & Gravity

Adding gravity to a ball from my previous Simple Physics with Friction AS3 example.

This script creates a ball and makes it bounce around in a container, as a real ball would. The ball slows down over time and comes to a stop due to friction and gravity.

Click ball to reset speed

View Code ACTIONSCRIPT
/**
 * Simple Physics with Friction &amp; Gravity
 * ---------------------
 * VERSION: 1.2
 * DATE: 11/28/2010
 * AS3
 * UPDATES AND DOCUMENTATION AT: http://www.FreeActionScript.com
 **/
package com.freeactionscript
{
	import flash.display.DisplayObjectContainer;
	import flash.display.MovieClip
	import com.freeactionscript.Ball;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
 
	public class SimplePhysics
	{
		// reference to container (stage, movieclip or sprite)
		private var _canvas:DisplayObjectContainer;
 
		// ball object
		private var _ball:Ball;
 
		// boundries
		private var _boundries:Rectangle;
		private var _minX:int;
		private var _minY:int;
		private var _maxX:int;
		private var _maxY:int;
 
		// settings
		private var _friction:Number = .98;
		private var _gravity:Number = .68;
 
		/**
		 * Constructor
		 * @param	$canvas	Takes DisplayObjectContainer (MovieClip, Sprite, Stage) as argument
		 */
		public function SimplePhysics($canvas:DisplayObjectContainer)
		{
			trace("SimplePhysics");
 
			_canvas = $canvas;
 
			setBoundries(_canvas);
			createBall(_canvas);
			enable();
		}
 
		/**
		 * Creates ball
		 */
		private function createBall($container:DisplayObjectContainer):void
		{
			// get random number between -10 and 10
			var newRandomX:Number = Math.random() * 20 - 20;
			var newRandomY:Number = Math.random() * 20 - 30;
 
			// Create new ball. Usage: new Ball(x, y, velocity X, velocity Y);
			_ball = new Ball(150, 200, newRandomX, newRandomY);
 
			// add mouse listener to ball
			_ball.addEventListener(MouseEvent.CLICK, onBallClick);
			_ball.buttonMode = true;
 
			//
			$container.addChild(_ball);
		}
 
		/**
		 * On ball CLICK handler
		 * @param	$even	Takes MouseEvent
		 */
		private function onBallClick($event:MouseEvent):void
		{
			resetBall(Ball($event.target));
		}
 
		/**
		 * Enables physics engine
		 */
		private function enable():void
		{
			_canvas.addEventListener(Event.ENTER_FRAME, update);
		}
 
		/**
		 * Disables physics engine
		 */
		public function disable():void
		{
			_canvas.removeEventListener(Event.ENTER_FRAME, update);
		}
 
		/**
		 * Resets ball's volocity
		 * @param	$ball	Takes Ball object
		 */
		public function resetBall($ball:Ball):void
		{
			// get random number between -10 and 10
			var newRandomX:Number = Math.random() * 20 - 20;
			var newRandomY:Number = Math.random() * 20 - 30;
 
			// update ball velocity
			$ball.velocityX = newRandomX;
			$ball.velocityY = newRandomY;
		}
 
		/**
		 * Sets container boundries
		 */
		public function setBoundries($container:DisplayObjectContainer):void
		{
			_boundries = new Rectangle(0, 0, $container.width, $container.height);
			_minX = 0;
			_minY = 0;
			_maxX = $container.width;
			_maxY = $container.height;
		}
 
		/**
		 * Update function that updates ball
		 * @param	$event
		 */
		private function update($event:Event):void
		{
			// Check X
			// Check if we hit top
			if (((_ball.x - _ball.width / 2) &lt;= _minX) &amp;&amp; (_ball.velocityX &lt; 0)) 			{ 				_ball.velocityX = -_ball.velocityX; 			} 			// Check if we hit bottom 			if ((_ball.x + _ball.width / 2) &gt;= _maxX &amp;&amp; (_ball.velocityX &gt; 0))
			{
				_ball.velocityX = -_ball.velocityX;
			}
 
			// Check Y
			// Check if we hit left side
			if (((_ball.y - _ball.height / 2) &lt;= _minY) &amp;&amp; (_ball.velocityY &lt; 0)) 			{ 				_ball.velocityY = -_ball.velocityY 			} 			// Check if we hit right side 			if (((_ball.y + _ball.height / 2) &gt;= _maxY) &amp;&amp; (_ball.velocityY &gt; 0))
			{
				_ball.velocityY = -_ball.velocityY;
			}
 
			// apply friction to ball velocity
			_ball.velocityX *= _friction;
			_ball.velocityY *= _friction;
 
			// apply gravity (only to Y axis)
			_ball.velocityY += _gravity;
 
			// Update X
			// Update position
			_ball.x += _ball.velocityX;
 
			// Update Y
			// Make sure we dont fall thru the bottom
			if ((_ball.y + _ball.velocityY + (_ball.height / 2)) &gt; _maxY)
			{
				// if we're falling thru, set ball y at maxY, minus ball size
				_ball.y = _maxY - (_ball.height / 2);
			}
			else
			{
				// update position
				_ball.y += _ball.velocityY;
			}
 
		}
	}
}

Only a couple of small changes were made to the original script.

Added a gravity variable:

private var _gravity:Number = .68;

Add gravity to Y velocity:

_ball.velocityY += _gravity;

And make sure the ball doesn’t fall through the floor:

if ((_ball.y + _ball.velocityY + (_ball.height / 2)) > _maxY)
{
_ball.y = _maxY - (_ball.height / 2);
}
else
{
_ball.y += _ball.velocityY;
}

Download Fla Sample

Download Fla Sample

See how to make multiple balls collide and bounce off each other.

Simple Physics with Friction

We are going to extend my previous Simple Physics AS3 script by adding friction to the ball.

This script creates a ball and makes it bounce around in a container, changing direction when a wall is hit. The ball slows down over time due to friction.

Click ball to reset speed

View Code ACTIONSCRIPT
/**
 * Simple Physics with Friction
 * ---------------------
 * VERSION: 1.1
 * DATE: 11/21/2010
 * AS3
 * UPDATES AND DOCUMENTATION AT: http://www.FreeActionScript.com
 **/
package com.freeactionscript
{
	import flash.display.DisplayObjectContainer;
	import com.freeactionscript.Ball;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class SimplePhysics
	{
		// reference to container (stage, movieclip or sprite)
		private var _canvas:DisplayObjectContainer;
 
		// ball object
		private var _ball:Ball;
 
		// boundries
		private var _minX:int;
		private var _minY:int;
		private var _maxX:int;
		private var _maxY:int;
 
		// settings
		private var _friction:Number = .98;
 
		/**
		 * Constructor
		 * @param	$canvas	Takes DisplayObjectContainer (MovieClip, Sprite, Stage) as argument
		 */
		public function SimplePhysics($canvas:DisplayObjectContainer)
		{
			trace("SimplePhysics");
 
			_canvas = $canvas;
 
			setBoundries(_canvas);
			createBall(_canvas);
			enable();
		}
 
		/**
		 * Creates ball
		 */
		private function createBall($container:DisplayObjectContainer):void
		{
			// get random number between -10 and 10
			var newRandomX:Number = Math.random() * 10 - 10;
			var newRandomY:Number = Math.random() * 10 - 10;
 
			// Create new ball. Usage: new Ball(x, y, velocity X, velocity Y);
			_ball = new Ball(150, 200, newRandomX, newRandomY);
 
			// add mouse listener to ball
			_ball.addEventListener(MouseEvent.CLICK, onBallClick);
 
			//
			$container.addChild(_ball);
		}
 
		/**
		 * On ball click handler
		 * @param	$even	Takes MouseEvent
		 */
		private function onBallClick($even:MouseEvent):void 
		{
			resetBall(Ball($even.target));
		}
 
		/**
		 * Enables physics engine
		 */
		private function enable():void
		{
			_canvas.addEventListener(Event.ENTER_FRAME, update);
		}
 
		/**
		 * Disables physics engine
		 */
		public function disable():void
		{
			_canvas.removeEventListener(Event.ENTER_FRAME, update);
		}
 
		/**
		 * Resets ball's volocity
		 * @param	$ball	Takes Ball object
		 */
		public function resetBall($ball:Ball):void
		{
			// get random number between -10 and 10
			var newRandomX:Number = Math.random() * 20 - 20;
			var newRandomY:Number = Math.random() * 20 - 20;
 
			// update ball velocity
			$ball.velocityX = newRandomX;
			$ball.velocityY = newRandomY;
		}
 
		/**
		 * Sets container boundries
		 */
		public function setBoundries($container:DisplayObjectContainer):void
		{
			_minX = 0;
			_minY = 0;
			_maxX = $container.width;
			_maxY = $container.height;
		}
 
		/**
		 * Update function that updates ball
		 * @param	$event
		 */
		private function update($event:Event):void 
		{
			// Check X
			// Check if we hit top
			if (((_ball.x - _ball.width / 2) < _minX) && (_ball.velocityX < 0))
			{
			  _ball.velocityX = -_ball.velocityX;
			}
			// Check if we hit bottom
			if ((_ball.x + _ball.width / 2) > _maxX && (_ball.velocityX > 0))
			{
			  _ball.velocityX = -_ball.velocityX;
			}
 
			// Check Y
			// Check if we hit left side
			if (((_ball.y - _ball.height / 2) < _minY) && (_ball.velocityY < 0))
			{
			  _ball.velocityY = -_ball.velocityY
			}
			// Check if we hit right side
			if (((_ball.y + _ball.height / 2) > _maxY) && (_ball.velocityY > 0))
			{
			  _ball.velocityY = -_ball.velocityY;
			}
 
			// apply friction to ball velocity
			_ball.velocityX *= _friction;
			_ball.velocityY *= _friction;
 
			// update ball position
			_ball.x += _ball.velocityX;
			_ball.y += _ball.velocityY;
		}
	}
}

Here is how the previous AS3 physics example was changed to add friction.

We add a friction variable:

private var _friction:Number = .98;

And then we apply friction to the ball velocity:

_ball.velocityX *= _friction;
_ball.velocityY *= _friction;

That’s all there’s to it.

Download Fla Sample

Download Fla Sample

In the next example, we will add Gravity.

Simple Physics

Very simple flash physics in AS3. This script creates a ball and makes it bounce around in a container, changing direction when a wall is hit.

View Code ACTIONSCRIPT
/**
 * Simple Physics
 * ---------------------
 * VERSION: 1.1
 * DATE: 11/21/2010
 * AS3
 * UPDATES AND DOCUMENTATION AT: http://www.FreeActionScript.com
 **/
package com.freeactionscript
{
	import flash.display.DisplayObjectContainer;
	import com.freeactionscript.Ball;
	import flash.events.Event;
 
	public class SimplePhysics
	{
		// reference to container (stage, movieclip or sprite)
		private var _canvas:DisplayObjectContainer;
 
		// ball object
		private var _ball:Ball;
 
		// boundries
		private var _minX:int;
		private var _minY:int;
		private var _maxX:int;
		private var _maxY:int;
 
		/**
		 * Constructor
		 * @param	$canvas	Takes DisplayObjectContainer (MovieClip, Sprite, Stage) as argument
		 */
		public function SimplePhysics($canvas:DisplayObjectContainer)
		{
			trace("SimplePhysics");
 
			_canvas = $canvas;
 
			setBoundries(_canvas);
			createBall(_canvas);
			enable();
		}
 
		/**
		 * Creates ball
		 */
		private function createBall($container:DisplayObjectContainer):void
		{
			// get random number between -10 and 10
			var newRandomX:Number = Math.random() * 10 - 10;
			var newRandomY:Number = Math.random() * 10 - 10;
 
			//Ball usage: new Ball(x, y, velocity X, velocity Y);
			_ball = new Ball(150, 200, newRandomX, newRandomY);
			$container.addChild(_ball);
		}
 
		/**
		 * Enables physics engine
		 */
		private function enable():void
		{
			_canvas.addEventListener(Event.ENTER_FRAME, update);
		}
 
		/**
		 * Disables physics engine
		 */
		public function disable():void
		{
			_canvas.removeEventListener(Event.ENTER_FRAME, update);
		}
 
		/**
		 * Sets container boundries
		 */
		public function setBoundries($container:DisplayObjectContainer):void
		{
			_minX = 0;
			_minY = 0;
			_maxX = $container.width;
			_maxY = $container.height;
		}
 
		/**
		 * Update function that updates ball
		 * @param	$event
		 */
		private function update($event:Event):void 
		{
			// Check X
			// Check if we hit top
			if (((_ball.x - _ball.width / 2) < _minX) && (_ball.velocityX < 0))
			{
			  _ball.velocityX = -_ball.velocityX;
			}
			// Check if we hit bottom
			if ((_ball.x + _ball.width / 2) > _maxX && (_ball.velocityX > 0))
			{
			  _ball.velocityX = -_ball.velocityX;
			}
 
			// Check Y
			// Check if we hit left side
			if (((_ball.y - _ball.height / 2) < _minY) && (_ball.velocityY < 0))
			{
			  _ball.velocityY = -_ball.velocityY
			}
			// Check if we hit right side
			if (((_ball.y + _ball.height / 2) > _maxY) && (_ball.velocityY > 0))
			{
			  _ball.velocityY = -_ball.velocityY;
			}
 
			// update ball position
			_ball.x += _ball.velocityX;
			_ball.y += _ball.velocityY;
		}
	}
}
Download Fla Sample

Download Fla Sample

Find out how to add friction in the next example.