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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post