Detecting Direction of Mouse Movement in
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
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
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 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:
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:
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
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:
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
which is actually the event handler for our
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.
If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!