22
Feb
08

Detecting when a mouse leaves a Flex application

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.

View MXML

<?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.


5 Responses to “Detecting when a mouse leaves a Flex application”


  1. 1 Chris Charlton Feb 23rd, 2008 at 11:16 am

    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.

  2. 2 Craig Hollabaugh Feb 25th, 2008 at 10:22 am

    Peter,
    Why use MOUSE_OVER/isMouseInSWF combo instead of just a MOUSE_OVER event?
    Craig
    ps. Thanks for the great examples.

  3. 3 Marcio Mar 6th, 2008 at 11:40 am

    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 ?

  4. 4 Marcio Mar 6th, 2008 at 11:49 am

    I’m using

    addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMove);
    addEventListener(Event.MOUSE_LEAVE, stage_mouseLeave);

    But Event.MOUSE_LEAVE not functional to deactivate

  5. 5 Russ May 19th, 2008 at 10:00 am

    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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".