mouseUp and mouseMove outside of the application? - apache-flex

Question

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!

Answer 1

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!"/>

Answer 2

It might be possible with some hacking in AIR, but definitely not with a webapp opened in a browser.
Just imagine what would happen if websites could track your mouse outside the browser and be able to take screenshots of your OS!

Answer 3

Though this won't get you to where you want, you can make use of Event.MOUSE_LEAVE and MouseEvent.MOUSE_MOVE events to track whether the cursor is within the boundaries of the application.