Flex Examples
The following example shows how you can detect when the mouse leaves the bounds of a Flex application by listening for the stage object’s mouseLeave event.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/22/detecting-when-a-mouse-leaves-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white"
applicationComplete="init();">
<mx:Style>
Alert {
modalTransparencyColor: black;
modalTransparency: 0.6;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
private var _isMouseInSWF:Boolean = false;
private var alert:Alert;
[Bindable]
private function get isMouseInSWF():Boolean {
return _isMouseInSWF;
}
private function set isMouseInSWF(value:Boolean):void {
_isMouseInSWF = value;
}
private function init():void {
stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMove);
stage.addEventListener(Event.MOUSE_LEAVE, stage_mouseLeave);
}
private function stage_mouseLeave(evt:Event):void {
isMouseInSWF = false;
if (alert) {
PopUpManager.removePopUp(alert);
}
alert = Alert.show("GONE");
}
private function stage_mouseMove(evt:MouseEvent):void {
if (!isMouseInSWF) {
if (alert) {
PopUpManager.removePopUp(alert);
}
// alert = Alert.show("BACK");
isMouseInSWF = true;
}
}
]]>
</mx:Script>
<mx:Label text="isMouseInSWF: {isMouseInSWF}" />
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Perfect! I talked to a few people about this, letting them know it’s possible. I think this is perfect for better user interactivity, and has the right application for business/financial displays that would blur sensitive data when the user is not focused in the application, or trying to make a screenshot, etc.
Peter,
Why use MOUSE_OVER/isMouseInSWF combo instead of just a MOUSE_OVER event?
Craig
ps. Thanks for the great examples.
How to use this to module ?
“stage” This is valid do all application ok?
stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMove);
How to set to module current ?
I’m using
addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMove);
addEventListener(Event.MOUSE_LEAVE, stage_mouseLeave);
But Event.MOUSE_LEAVE not functional to deactivate
Marcio,
What use sdk version of flex?
I had completed to test on sdk version 3.6 in flex4
I’ve noticed that when you interact with the browser outside the flash movie, that funkiness happens inside the movie.
e.g. Highlight the view source line
Great example, but it does have limitations.
When adding a slider, if you hold the slider thumb down then keep the mouse button pressed and move off the stage, it fires when you release the mouse button.
However, if the swf is in a table, and you do the same, the event never fires!
Kristian,
Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case, if possible. That may be a bug with the Flex Slider control or possibly Flash Player.
Peter
PS: If you can also post the bug number here, a few of us can vote/subscribe to the issue also.
Hi Peter.
I’ve logged the bug under the Flash Player, as it also happens with Flash CS3, so it’s not limited to Flex.
Bug number is FP-733.
Cheers,
Kristian.
A similar error to the one Kristian documented happens if you have ‘wmode’ set to ‘transparent’, if you leave the stage with the mouse pressed and release outside the event won’t fire, then when you enter the stage again the slider thumb is stuck to the mouse, and when you release you get an error.
wmode set to transparent has 20+ errors associated with it, avoid it at all costs :) (it’s sometimes unavoidable)
Likewise, it seems that this is limited if you alt+tab to a different window while your mouse is done. It seems as though since the browser is no longer the active window when the mouse up occurs it can’t detect it and therefore no MOUSE_LEAVE event is dispatched.
Hello Everyone,
I have ran into issues with using this. For example, the mouse leave event is dispatched when a context menu is displayed via right click. So, if you are in the center of the stage and right click, the mouse leaves the stage. So, I modified this example by adding a “mouse border” around the stage and I check to see if the mouse is within the border before it leaves the stage.
I hope that this helps….
var mouseOutOnX:Boolean = ( mouseX (stage.width – 10));
var mouseOutOnY:Boolean = ( mouseY (stage.height – 10));
if ( ( mouseOutOnX || mouseOutOnY) )
{
…….
It should be
vrathore.blogspot.com
Peter – I cut and paste your code to try in AIR to trigger a state change – it successfully changes from initial state to isMouseInSWF state but does not change back on exit. Any ideas?
thanks, Max