Detecting Direction of Mouse Movement in AS3
       by kirupa |  1 October 2008

In ActionScript 2, you had the watch function that, among many things, allowed you to detect which direction your mouse cursor was moving. There is a tutorial on how to do that on kirupa.com itself. In ActionScript 3, I couldn�t find the watch function nor an equivalent replacement, but creating your own function that shows you how to detect the direction of mouse movement is not very complicated.

The following is an example of what I will be describing in this article:

Move your mouse around in the above movie, and the direction of the mouse's X and Y movement will be displayed. Behind the scenes, what is actually happening is very simple.

Take a look at the following diagram:

The easiest way to know which direction you are moving in is to figure out where you are now and compare it to where you were just a few seconds ago. That is the magic inside our movie as well. In the above diagram, I show a simple example of a mouse moving across a path with two separate timestamps when the mouse's position was stored - time1 and time2.

At time 2, you can get an idea of what direction your mouse cursor is moving in by comparing its position at that point with the mouse's position at the earlier time - time 1. Using that as our yardstick, you can see that your mouse cursor is moving to the top and to the right. The more frequently you check your position and compare it to an earlier position, the more accurate your measure will be.

Download Source File
To see how this was done, download the Flash CS3 source file from the following location:

Download Final Source

Download and extract the above file and open it in Flash CS3. Much of what you see should be pretty straightforward, but let's look at the contents in greater detail.

Examining the File
Pretty much everything in the above example is done using code. The only things that aren't in code are the two textfields that display the direction of your mouse movement, so let's go ahead and look at the code:

var prevX:int = 0;

var prevY:int = 0;

var curX:int = 0;

var curY:int = 0;

 

var dirX:String = "";

var dirY:String = "";

 

function Start()

{

stage.addEventListener(MouseEvent.MOUSE_MOVE, CheckDirection);

}

Start();

 

function CheckDirection(e:MouseEvent)

{

var xDirection:String = GetHorizontalDirection();

var yDirection:String = GetVerticalDirection();

 

xText.text = xDirection;

yText.text = yDirection;

 

e.updateAfterEvent();

}

 

function GetHorizontalDirection():String

{

prevX = curX;

curX = stage.mouseX;

 

if (prevX > curX) {

dirX = "left";

} else if (prevX < curX) {

dirX = "right";

} else {

dirX = "none";

}

 

return dirX;

}

 

function GetVerticalDirection():String

{

prevY = curY;

curY = stage.mouseY;

 

if (prevY > curY) {

dirY = "up";

} else if (prevY < curY) {

dirY = "down";

} else {

dirY = "none";

}

 

return dirY;

}

Don't let the number of lines of code scare you! It is very simple because much of the code is duplicated to handle movement vertically as well as horizontally. Let's just look at the horizontal case in more detail.

Let's start with the GetHorizontalDirection() function:

function GetHorizontalDirection():String

{

prevX = curX;

curX = stage.mouseX;

 

if (prevX > curX) {

dirX = "left";

} else if (prevX < curX) {

dirX = "right";

} else {

dirX = "none";

}

 

return dirX;

}

The first thing I do is set the value of our prevX variable to our curX variable. This is the equivalent of our Time 0 case. Next, I set our curX variable to the horizontal position of our mouse currently.

To reuse that image from earlier, here is what this would look like:

The previous position is stored by prevX, and the current position is stored by curX. Comparing them both gives you the information you would need to decide which direction your mouse is moving. That is all handled by the following code inside GetHorizontalDirection:

function GetHorizontalDirection():String

{

prevX = curX;

curX = stage.mouseX;

 

if (prevX > curX) {

dirX = "left";

} else if (prevX < curX) {

dirX = "right";

} else {

dirX = "none";

}

 

return dirX;

}

Notice that I check for the left, right, and none cases, and return that value back to whatever called this function. And what called this function you ask? It is our CheckDirection function which is actually the event handler for our MouseMove event:

function CheckDirection(e:MouseEvent)

{

var xDirection:String = GetHorizontalDirection();

var yDirection:String = GetVerticalDirection();

 

xText.text = xDirection;

yText.text = yDirection;

 

e.updateAfterEvent();

}

There is nothing complicated here at all. Each time your mouse moves, this function gets called, and it calls the GetHorizontalDirection function you saw earlier for horizontal data, and it calls the GetVerticalDirection function for the vertical data.

Both of those function return a direction as their result, and you send those results to their respective text fields xText and yText.

Conclusion
That's all there is to detecting the direction of mouse movement. This is a great example of implementing something in code that resembles how we as humans would solve this problem as well. We use frames of reference to gauge many things - including what direction we are moving in. The code I presented is nothing more than using variables to store frames of data and comparing them.