Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
Posts: 146
Registered: ‎03-27-2011
My Device: Blackberry Playbook
My Carrier: WiFi
Accepted Solution

Detect finger leaving stage

Hi all,

I have an object on my stage which can be dragged around. It listens for a mouse_down event and starts following the mouse/finger on each mouse_move event until it registers a mouse_up event.

How can I detect when the user's finger leaves the side of the screen? Currently, if a user drags off the side of the screen and lifts their finger, no mouse_up event is ever triggered and the object thinks it is still being dragged. As well, there is a mouse_leave event which should do what i want but doesn't seem to trigger.

Ideally, I would like behavior like the browser - movement still works on the bezel, and if the user swipes too far the application can register some event and act as if the finger has been lifted.

Please let me know if anyone can suggest a solution or if it's simply not possible in air.


Thanks,
Brandon
----------------------------------------
If this post solved your problem, please click the 'Accept as Solution' button.
If you found this post useful, please provide a Kudo. Thanks.

Approved Apps: Celestial Slingshot
Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Detect finger leaving stage

Do you listen for mouse move and mouse up to the same object that trapped the mouse down?
Developer
Posts: 274
Registered: ‎11-01-2010
My Device: PlayBook?
My Carrier: WiFi

Re: Detect finger leaving stage

[ Edited ]

You can try checking the stage.mouseX and stage.mouseY.

 

i.e.

 

if(stage.mouseX < 0)

{

   doMouseUpEvent();

}

 

That should work. I also noticed that the mouseLeave event doesn't seem to trigger but haven't had more time to test with it.

 

EDIT: jtegen makes a good point. TYry adding the mouseup to the stage and see what happens.

Developer
Posts: 83
Registered: ‎04-07-2011
My Device: Imaginary Playbook
My Carrier: NA

Re: Detect finger leaving stage

The simplest solution would be the following: in your mouse_move code check when the user hits the limit of the screen and when he does, run the function associated with the mouse_up event.

-----------------------------------------------------
My App: Bouncy Ball Clock (with my own physics engine)
https://appworld.blackberry.com/webstore/content/37792
Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Detect finger leaving stage

Problem with this is depending on how fast the mouse events are (how fast the user is dragging their finger), the last mouse move event still might be in bounds. You might have to dead reckon the behavior by watching the time passage of mouse moves, approximate direction (right, up, down, left) and speed (distance since last and time interval).  And place some kind of timer based on the behavior that if another mouse move event does not occur during the vector currently taken that it can be assumed to have left the region.

 

Also, you could place a perimeter boundary inside the bezel that you can still track and if you are within some distance (say 35px, ~1/2 of a finger) that that is considered too close to outside and treat that as a mouse up event.

 

Part of this might be trial and error to see how fast a person would "normally" move their finger for your app to trap the boundary condition.  The dead reckoning approach might be overkill due to the complexity of stopping and starting timers so quickly.

 

It would be nice if we could trap events on the bezel (enter and leave).

 

Depending on your app, I would try the perimeter boundary test.

Developer
Posts: 146
Registered: ‎03-27-2011
My Device: Blackberry Playbook
My Carrier: WiFi

Re: Detect finger leaving stage

As jtegen said, the last mouse movement could be far from the edge if the user moves quickly. I could do some dead reckoning calculations, but this is rather crude.

The browser can detect correctly, but seemingly air can't...

I'll try to post an example later for you guys
----------------------------------------
If this post solved your problem, please click the 'Accept as Solution' button.
If you found this post useful, please provide a Kudo. Thanks.

Approved Apps: Celestial Slingshot
Developer
Posts: 146
Registered: ‎03-27-2011
My Device: Blackberry Playbook
My Carrier: WiFi

Re: Detect finger leaving stage

I've figured out the solution to this problem, and as is the spirit in the forums I will share my solution for future use.

 

The problem is that MouseEvents are not triggered correctly when moving outside of the [0,0] to [1023,599] screen coordinates. The solution is to use multitouch input instead of detecting mouse events.

 

1) Import the right classes:

import flash.ui.*;

 

2) Enable multitouch input tracking (add this to your constructor):

flash.ui.Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

 

3) Enable event capturing:

ship.addEventListener(TouchEvent.TOUCH_BEGIN, press_start);

stage.addEventListener(TouchEvent.TOUCH_MOVE, press_moved);
stage.addEventListener(TouchEvent.TOUCH_END, press_end);

 

 

4) For each of the press_start, press_moved and press_end fuctions, add the following to make sure using multiple fingers doesnt screw everything up:

if (event.isPrimaryTouchPoint == false) return;

 

 

Works like a charm!

----------------------------------------
If this post solved your problem, please click the 'Accept as Solution' button.
If you found this post useful, please provide a Kudo. Thanks.

Approved Apps: Celestial Slingshot
New Member
Posts: 1
Registered: ‎05-08-2011
My Device: Blackberry Playbook 16GB
My Carrier: None

Re: Detect finger leaving stage

[ Edited ]

My application contains a scrolling list, and I wanted a similar function where dragging off the screen would result in a mouse_up like action. Here's how I solved the problem. I can't say with any level of confidence that it's the best method of doing it, but it works perfectly as far as I can tell.

 

When you register a mouse_down event, add an event listener to the main stage for MouseEvent.MOUSE_OUT which will trigger a function like the following:

 

 

private function mouseOffStage(e:MouseEvent){
if((e.stageX < 0)||(e.stageX > stageRef.stageWidth)||(e.stageY > stageRef.stageHeight)||(e.stageY < 0))
 mouseReleased(e);
}

 

MOUSE_OUT seems to be triggered erratically when moving too fast sometimes, but adding the bounds to make sure that the touch bounds are actually offstage solves this problem. No matter how fast the drag is, it always registers. In my application, I just wanted it to trigger the same event as a MOUSE_UP would, which is why I have it arranged as such, but obviously you could put whatever you want there.

 

Edit: Didn't realize you still wanted some movement in the bezel. It might be possible to just adjust the bounds in this case(like e.stageX < -15) to set your limits.

Contributor
Posts: 28
Registered: ‎02-18-2011
My Device: Not Specified

Re: Detect finger leaving stage

An alternative:

 

You could attach an enterframe event and check the mouseX and mouseY position in that?

 

If it's not within your stage width/height bounds then you know it's left the screen.