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.