Does anyone know how to capture the mouse in Flex/Flash Air application?

Question

Does someone know how to capture the mouse in an air application. I know its possible because the flex scrollbar captures the mouse. I want to replicate the scrollbar's mouse capture.

Try this in a flex/air application window:

<s:Scroller height="500" width="300">
    <s:VGroup>
        <s:Rect width="100%" height="2000">
            <s:fill>
                <s:SolidColor color="#ffcc00"/>
            </s:fill>
        </s:Rect>
    </s:VGroup>
</s:Scroller>

If you press and hold the scrollbar handle and drag outside, even outside the window, the scrollbar still works. It wont lose focus. So it is capturing the mouse.

what I want:

• Mouse and touch capture. (Even outside the window while still pressing down the button or touch point)

Answer 1

Here's some code I use for this purpose:

import flash.display.InteractiveObject;
import flash.events.MouseEvent;
import flash.geom.Point;

public class Dragger
{
    private var target:InteractiveObject;
    private var mouseDownPoint:Point;
    private var originalPosition:Point;

    public function Dragger(target:InteractiveObject)
    {
        this.target = target;
        target.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
    }

    private function onMouseDown(event:MouseEvent):void
    {
        mouseDownPoint = new Point(event.stageX, event.stageY);
        originalPosition = new Point(target.x, target.y);
        event.stopPropagation();

        target.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
        target.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
    } 
    private function onMouseUp(event:MouseEvent):void
    {
        onMouseMove(event);
        mouseDownPoint = null;
        event.stopPropagation();
        target.stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
        target.stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
    } 
    private function onMouseMove(event:MouseEvent):void
    {
        if (!mouseDownPoint) return;
        target.x = originalPosition.x + event.stageX - mouseDownPoint.x;
        target.y = originalPosition.y + event.stageY - mouseDownPoint.y;
        event.updateAfterEvent();               
        event.stopPropagation();
    } 
}

To use, simply do new Dragger(your_object).

Answer 2

At least on desktops using a mouse, this should Just Work as far as I know. For example:

import flash.text.TextField;
import flash.events.MouseEvent;

var t:TextField = new TextField();
stage.addChild(t);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouse);

function onMouse( e:MouseEvent ) {
    t.text = e.stageX +", "+ e.stageY;
}

For me, events show up in the text field both when the mouse is inside the Flash area, and when you click inside Flash and drag outside. So if you're having problems, my guess is that it might be related to the components you're using or how your content is structured (eg what object you're registering for events on, etc.). But there isn't any special way of getting mouse events to continue when the user drags out of the Flash rectangle.

(Note that touch devices may be a different situation - often their browsers eat pan gestures before they get to Flash except in fullscreen mode, or sometimes they give Flash drag events when Flash is "zoomed in" (by double-tapping). Your mileage may vary with different browsers on different devices..)

Answer 3

You can't get any information that would be meaningful for you. I understand what you're trying to accomplish, and yes, you're right that scroll bars have some black magic to them in that if you begin a drag it will continue to scroll even if the mouse is out of the range of the player.

I ran some tests on trying to listen into events and came up empty handed. The player itself must get them but they aren't exposed in anyway that I can find.

So, I thought about creating a more or less hidden scroll component (or set of them) that would capture the click to and start the drag event. Somewhat a hack, but cool idea...

Then you could poll the current scroll position to make a guess at where the mouse is (outside of the window) with a set of horiz and vert scrollers. You CAN do this, however, the issue comes that the scroller position values will have maximum limits based on their native size. This means that you'll be left with gaps on where the mouse is. So you could knowhow far up or down the Y axis mouse is positioned on the screen, even if it is outside far the the left or right (X axis) of the appliction (I was on a second monitor for example), BUT you will not know where it exists on the X axis, and you would only know the Y as it relates to the application size (not above or below where it exists on the screen elsewhere).

Here's an image of what you could capture with this trick / hack:

So yes, you could do a polling type of method like I described, but, you would only get those coordinates.

Ultimately, it isn't very helpful because you need to expand the boundries of the scroll rect (or app) to fully capture where the mouse is - thus you would expand it to the full size of the screen, and could just use normal events. This is particularly true of the negative boundries (left or above app).

What I havent tried is creating a large container positioned outside the main app window and applying a scroller to it. If you did this you could potentially make it work:

It was an interesting concept, clever - definitely not supported functionality. :P~