|
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:
[ 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.
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.
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:
- Hide the mouse cursor after a few seconds of you not
moving it.
- 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.
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.
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:
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!
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|
