Ever since the nocturnal, pseudo-mammals known as Flash developers found that animations could be manipulated by using the mouse, the world was never again the same - for the Flash developers that is.

The following animation displays a few mouse functions:

[ press 'h' or 'k' to see two mouse functions in action]

Flash MX includes numerous functions that take advantage of the mouse. While not all of the mouse functions will be covered in this article, I will try to explain a majority of them.

Here it goes:

• Hiding the Mouse
  There may be times when you don't want the mouse cursor visible on your screen. To hide the mouse, simply add the following line of code to a movie, frame, or button:

//hides the mouse cursor from view Mouse.hide();

If possible, do try to not hide the mouse cursor. While you may have a cooler mouse pointer created in Flash for your animation, it is bad design to hide the mouse cursor - almost as bad as an unwanted pop-up.
 

• Showing the Mouse
  By default, the cursor will be visible over your animation. If you want to display the mouse cursor that you may have hidden from view (see above step), use the following code:

//displays the mouse cursor Mouse.show();
 

• Getting X and Y Mouse Values
  The x and y positions of the mouse are basically numbers. The numbers can be accessed and manipulated by using the mouse pointer's position properties: _xmouse and _ymouse.

//gets the x and y values xval = _root._xmouse; yval = _root._ymouse;

In the above code, xval gets the x position of the mouse while yval gets the y position of the mouse. It is best to place this code in the onClipEvent(enterFrame) or onClipEvent(mouseMove) handler to ensure the data gets updated continuously with the latest mouse co-ordinates.

• mouseDown, mouseUp, mouseMove
  In most animations, the event handlers you will use are onLoad, onEnterFrame, release, etc. But, did you know you can execute actions only when the mouse is pressed, when the mouse is released, and when the mouse is moved?
   
  For an example of this, copy and paste the following code into the actions for a movie clip and press Ctrl + Enter:

onClipEvent(mouseDown) { trace("mouse pressed"); } onClipEvent(mouseUp) { trace("mouse released"); } onClipEvent(mouseMove) { trace("mouse is moving"); }

Notice how the Output window displays some text only when you move the mouse, when you press the mouse button, and when you release the mouse button.

This is really useful if you don't want to use an enterFrame event handler to execute actions relative to mouse position - especially if the mouse hasn't been clicked or won't be accessed continuously.

I hope you find the information to be useful. Many of the tutorials on the site and numerous special effects make good use of the mouse. Hopefully this tutorial helps you to understand more about using the mouse and its properties in Flash.

Click on the following link to download the source file for the animation you saw earlier toward the top of the page.

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - please drop by our friendly forums and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi about | facebook | twitter