Quick Tip: How to Detect Mouse Direction Using ActionScript

In this Quick Tip you will learn how to get the mouse's current direction in your Flash application using AS3. You could use this to create an interesting control method for a game, using a mouse like a joystick, for example. For now we will just display the direction on screen.

Preview

Here's a quick example to demonstrate what we're working towards:

Brief Overview

Using a MouseEvent.MOUSE_MOVE event we'll monitor the movement of the mouse cursor, store the data in variables and display its current direction.

Step 1: Create a New File

Open Flash and create a new Flash File (ActionScript 3).

Step 2: Open Actions Panel

Press Option + F9, or go to Window > Actions to open the Actions Panel.

Step 3: Variables

Enter the variables we'll use; their names are fairly self-explanatory:

var previousX:Number = 0;
var previousY:Number = 0;
var currentX:Number = 0;
var currentY:Number = 0;
var xDir:String;
var yDir:String;
var dir:TextField = new TextField();

Step 4: Main Function

This is the main function:

function getMouseDirection():void
{
	dir.width = stage.stageWidth; //Size of the textfield
	addChild(dir); //Adds the textfield to the stage

   //Adds a mouse move listener to the stage and executes the checkDirection function when a mouse movement occurs
	stage.addEventListener(MouseEvent.MOUSE_MOVE, checkDirection);
}

Step 5: Check Direction

This code calls the functions which check the direction and displays the result in the stage TextField.

function checkDirection(e:MouseEvent):void
{
	getHorizontalDirection();
	getVerticalDirection();
	
	dir.text = "x: " + xDir + ", y: " + yDir;
}

Step 6: Get Directions

Check the mouse directions.

//Horizontal
function getHorizontalDirection():void
{
	previousX = currentX; //Checks the last position
	currentX = stage.mouseX; //Gets the current position

	if (previousX > currentX) //Compares both positions to determine the direction
	{
		xDir = "left";
	}
	else if (previousX < currentX)
	{
		xDir = "right";
	}
	else
	{
		xDir = "none";
	}
}

//Vertical
function getVerticalDirection():void
{
	previousY = currentY; //Checks the last position
	currentY = stage.mouseY; //Gets the current position

	if (previousY > currentY) //Compares both positions to determine the direction
	{
		yDir = "up";
	}
	else if (previousY < currentY)
	{
		yDir = "down";
	}
	else
	{
		yDir = "none";
	}
}

Step 7: Running the Function

To start the function, add this line to the code. Once the getMouseDirection() function is run, it'll set up the MOUSE_MOVE event listener that powers the direction indicator.

getMouseDirection();

Step 8: Document Class Version

package
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.events.MouseEvent;
	
	public class MouseMoveDemo extends MovieClip
	{
		public var previousX:Number = 0;
		public var previousY:Number = 0;
		public var currentX:Number = 0;
		public var currentY:Number = 0;
		public var xDir:String;
		public var yDir:String;
		public var dir1:TextField = new TextField();
		public var dir2:TextField = new TextField();
		
		public function MouseMoveDemo()
		{
			getMouseDirection();
		}
		
		public function getMouseDirection():void
		{
			dir1.width = stage.stageWidth;
			addChild(dir1);
			dir2.width = stage.stageWidth;
			dir2.y = 50;
			addChild(dir2);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, checkDirection);
		}
		
		public function checkDirection(e:MouseEvent):void
		{
			getHorizontalDirection();
			getVerticalDirection();
			
			dir1.text = "x: " + xDir
			dir2.text = "y: " + yDir;
		}
		
		public function getHorizontalDirection():void
		{
			previousX = currentX;
			currentX = stage.mouseX;
			
			if (previousX > currentX)
			{
				xDir = "left";
			}
			else if (previousX < currentX)
			{
				xDir = "right";
			}
			else
			{
				xDir = "none";
			}
		}
		
		public function getVerticalDirection():void
		{
			previousY = currentY;
			currentY = stage.mouseY;

			if (previousY > currentY)
			{
				yDir = "up";
			}
			else if (previousY < currentY)
			{
				yDir = "down";
			}
			else
			{
				yDir = "none";
			}
		}

	}
	
}

Opt for this approach if you'd prefer to use a document class rather than timeline code. Read this Quick Tip if you're not sure what to do with it.

You could use this class to embed a mouse direction indicator inside any project. Just copy the whole class into a new AS file, save it as "MouseMoveDemo.as", then you can reference it using the following snippet:

var mouseMoveDemo:MouseMoveDemo = new MouseMoveDemo();
addChild( mouseMoveDemo );

Conclusion

This is a basic example of how you can use such a function; try it out, experiment and use it in your own projects!

Thanks for reading.