Home/ Questions/Q 6176073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:02:09+00:00

I’m trying to implement a very simple way to select a subsection of the

  • 0

I’m trying to implement a very simple way to select a subsection of the screen via mouse. The workflow is the standard one for many apps – click on starting point, move mouse and transparent rectangle updates between first point clicked and current position of the mouse. The basic code looks something like this (minus the graphics, which is simple)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" mouseDown="application1_mouseDownHandler(event)">

    <fx:Script>
        <![CDATA[
            import spark.components.mediaClasses.VolumeBar;

            private var _anchorPoint:Point = new Point();
            private var _currentPoint:Point = new Point();

            protected function application1_mouseDownHandler(event:MouseEvent):void
            {
                addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
                addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
                _anchorPoint = new Point(event.stageX, event.stageY);   
            }

            private function handleMouseMove(e:MouseEvent):void
            {
                _currentPoint.x = e.stageX;
                _currentPoint.y = e.stageY;
                trace("rectangle between (",_anchorPoint.x, ",", _anchorPoint.y, ") and (", _currentPoint.x, ",", _currentPoint.y, ").");
            }

            private function handleMouseUp(e:MouseEvent):void
            {
                removeEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
                removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
            }
        ]]>
    </fx:Script>
</s:Application>

This breaks down when the user moves the mouse outside of the app. Not only _currentPoint stops updating, but also if you let go the mouse button outside of the app you miss the mouseUp event, i.e. when you move the mouse back on the app _currentPoint starts updating again as if you had never let go of the mouse button. Was wondering if there is a way in Flex (for web apps) to get around this by listening to mouseMove and mouseUp events when outside of the app (if that’s possible) or whatever other way that may make sense.

thank you for your help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s something most people don’t know: MouseEvents are tracked outside of the application window if the MOUSE_DOWN event has been fired, but not MOUSE_UP. You can grab mouse positions outside of the application window (and even outside of the browser window) as long as whatever you’re doing makes the user hold their mouse down. To test this, try running the following code: 

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx"
           creationComplete="init()">
<fx:Script>
    <![CDATA[
        protected function init():void {
            addEventListener(Event.ADDED_TO_STAGE, magic)
        }

        protected function magic(e:Event):void {
            stage.addEventListener(MouseEvent.MOUSE_MOVE, moreMagic);
        }

        protected function moreMagic(e:MouseEvent):void {
            magicalButton.label = "Hold me down! " + String(e.stageX) + "x" + String(e.stageY);
        }
    ]]>
</fx:Script>    
<s:Button id="magicalButton" label="Hold me down!"/>

    • 0