Hiding Mouse Cursor After Some Time
by kirupa  |  20 March 2011

  Have questions? Discuss this Flash / ActionScript tutorial with others on the forums.

In many media centric applications, one of the goals should be to keep your focus always on the content that you are watching. This means that you generally want to minimize any UI and interruptions except when the user deliberately does something. This "something" could be similar to seeking to a different part of a video, adjusting the volume, etc.

For example, here is what Windows Media Player does when I am moving my mouse around and interacting with a full-screen video:

Notice you see all of the video controls and other non-video overlays are visible. When I stop interacting with Windows Media Player for a few seconds, any visuals unrelated to the video disappear:

I can now give my undiverted attention to the awesome Universal intro sequence because I have nothing else on my screen to focus on.

One of the things that often also disappears is the mouse cursor. After a period of inactivity, many media-centric applications will hide the mouse cursor as well. In this tutorial, you will learn to do exactly that....hide your mouse cursor after some time of you not doing anything with your application.

Below is an example of what it is you will create towards the end of this brief article:

Get Adobe Flash player

[ the bug graphic is created by Daniel Cook of LostGarden fame! ]

Hover your mouse over the Flash animation. When you have hovered your mouse over it, take your hand away from the mouse and wait a few seconds. You will see that your mouse cursor disappears. If you move your mouse again, the cursor appears only to disappear again after a few seconds of inactivity.

Getting Started
To get started, create a new Flash AS3 project and specify a document class called Main that will be associated with your FLA. If you are unsure of how to do something like that, read the Specifying a Document Class tutorial first. Basically, I want to have a class that gets called automatically when my application is run.

The Basic Approach
Anyway, before we get to the code associated with making this all work, let's briefly talk about our approach. The behavior we want is:

  1. Hide the mouse cursor after a few seconds of you not moving it.
  2. Display the mouse cursor once you start moving the mouse again.

The way we are going to detect inactivity is by seeing if the mouse is actually being moved and counting the number of seconds that have elapsed since the mouse moved last. To do this, behind the scenes, we start a timer when the application gets launched that ticks every second. As long as the mouse it not being moved, this timer ticks until it hits a threshold that indicates inactivity. This threshold can be something like 2 seconds, for example.

When the threshold is hit, we hide the mouse cursor. The assumption is that if you aren't moving your mouse for that long, then you probably don't want to see it on your screen. If you do move your mouse, we reset the timer immediately where it has to start back at zero again. At this point, we set the mouse cursor to be visible again.

The Code
Now that you have a basic idea of how we hope to solve this problem, let's look at the code:

package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.ui.Mouse;
public class Main extends MovieClip
{
private var timer:Timer;
private var secondsToWait:int = 2;
public function Main()
{
timer = new Timer(1000);
timer.start();
timer.addEventListener(TimerEvent.TIMER, HideMouseAfterWait);
stage.addEventListener(MouseEvent.MOUSE_MOVE, ResetTimer);
}
private function ResetTimer(e:MouseEvent)
{
Mouse.show();
timer.reset();
timer.start();
}
private function HideMouseAfterWait(e:TimerEvent)
{
if (timer.currentCount == secondsToWait)
{
Mouse.hide();
}
}
}
}

If you copy and paste this code as is into your Main.as class file, you will have a working application where the mouse disappears after a few seconds of you hovering over your application and doing nothing for two seconds.

Let's start to look at the code in greater detail:

private var timer:Timer;
private var secondsToWait:int = 2;

In the first two lines, I declare two variables called timer and secondsToWait. The secondsToWait variable specifies the number of seconds that need to elapse before your mouse cursor is hidden. For our example, I have the value set at 2.


Let's look at the constructor next:

public function Main()
{
timer = new Timer(1000);
timer.start();
timer.addEventListener(TimerEvent.TIMER, HideMouseAfterWait);
stage.addEventListener(MouseEvent.MOUSE_MOVE, ResetTimer);
}

The first two lines of our constructor deal with using the timer variable you saw earlier. In the first line, I initialize our timer and pass a value corresponding to the delay:

timer = new Timer(1000);

The delay corresponds to the number of milliseconds before your timer ticks again. In our case, we want our timer to tick every 1 second (aka 1000 milliseconds).

Once our timer has been created, its time to start it using the start function:

timer.start();

This line gets the timer rolling - ticking away every second like we instructed it to. Once our timer starts ticking, we need a way to keep track of it and react when two seconds have passed. The way you do that is by listening to an event fired by our timer each time it ticks:

timer.addEventListener(TimerEvent.TIMER, HideMouseAfterWait);

More formally, as you can tell from the above line of code, each time the TimerEvent.TIMER event fires, we call the HideMouseAfterWait event handler. More on that one shortly.

The last thing we do in our constructor is listen for the mouse moving:

stage.addEventListener(MouseEvent.MOUSE_MOVE, ResetTimer);

Each time the mouse moves, the ResetTimer function is called. You'll see soon what that function does!


Like we mentioned earlier, each time your timer ticks, the HideMouseAfterWait event handler gets called:

private function HideMouseAfterWait(e:TimerEvent)
{
if (timer.currentCount == secondsToWait)
{
Mouse.hide();
}
}

What this function does is quite simple. Internally, your timer object has a currentCount value that keeps a tally of the number of times your timer has ticked. This means, at each second, the currentCount value increases by 1. By checking if the currentCount value matches our secondsToWait value of 2, we can figure out whether to show or hide the mouse:

if (timer.currentCount == secondsToWait)
{
Mouse.hide();
}

If currentCount is the same as secondsToWait, then two seconds have elapsed and it is safe to hide the mouse by calling Mouse.hide().


Of course, if your mouse moves at any point, we need to reset our timer so that we don't accidentally hide the mouse while you are interacting with your application. This is where the ResetTimer function comes in:

private function ResetTimer(e:MouseEvent)
{
Mouse.show();
timer.reset();
timer.start();
}

If you recall, this function gets called each time your mouse moves. At each mouse move, this function does two things. It first makes sure your mouse is shown by calling Mouse.show(), and then it restarts our timer by calling reset() and start() on it. The reason we restart the timer is to ensure internal timer properties like currentCount are reset to their original values.

Conclusion
Well, there you have it - a simple deconstruction of how to hide your mouse cursor after a few seconds of you not using it. While the explanation focused primarily on just showing or hiding the mouse cursor, you can easily extend it to show or hide other UI elements to create the media player-like experience I started off with.

Below, you will find the Flash CS4 / AS3 source code that you can play with as you wish:

Download Final Source Files

Once you have downloaded and extract the files, take a look at Main.as and hidingMouseCursor!

If you want to see what is possible using just one line of code, check out Krilnon's response where he condenses my many lines into just one line!

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

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 via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.