Archive for June, 2009

TransformManager fix for Mac Firefox

Jun 15th

Posted by rich in Flex

No comments

This post is specifically about Jack Doyle's (aka greensock) awesome TransformManager tool, but the overall idea solves the issue of mouse up events when releasing the mouse button outside the stage in Mac Firefox.

In case you didn't know already, in Firefox on the Mac there is a problem with releasing the mouse outside the browser window. If you click within the swf, then while holding the mouse button down, drag outside the browser window, then release the mouse button, Mac FF doesn't hear the MOUSE_UP event. Obviously, this is a problem for the TM because if you do that, when you bring the mouse back over the swf, the MOUSE_MOVE handlers are still firing, and the selection is still following the mouse, event though you've released the mouse button.

The key to the whole fix is that in Mac FF, the MOUSE_LEAVE event will not fire until you release the mouse button, if it was being held down when you drag out of the swf.

So to solve this I tweaked the TM class as follows:

add a helper method to determine if it is mac ff, and one to dispatch fake mouse up events (you'll see why in a bit)

PLAIN TEXT
Actionscript:
  1. // on Mac Firefox, if you click the mouse button,
  2. // then drag out of the browser window and release the mouse button,
  3. // the MOUSE_LEAVE event doesn't fire doesn't fire until the mouse button is released.
  4. // Knowing that we can properly handle MOUSE_UP events for moving, resizing, etc.
  5. private function get isFirefoxMac():Boolean{
  6.             // this is adapted from some flex code
  7.             var browserUserAgent:String = ExternalInterface.call("navigator.userAgent.toString");
  8.             var browserPlatform :String = ExternalInterface.call("navigator.platform.toString");
  9.  
  10.             var isFirefoxMac:Boolean = (browserUserAgent && browserPlatform &&
  11.                 browserUserAgent.indexOf("Firefox")> -1 && browserPlatform.indexOf("Mac")> -1);
  12.             return isFirefoxMac;
  13. }
  14.  
  15.  
  16. private function dispatchFakeMouseUpEvent():void{
  17.             var mevent:MouseEvent = new MouseEvent(MouseEvent.MOUSE_UP, true, false, _stage.mouseX, _stage.mouseY);
  18.             _stage.dispatchEvent(mevent);
  19. }

Then, I made a slight modification to the onPress* methods, to check if it isFirefoxMac, if so also listen for the MOUSE_LEAVE event.

PLAIN TEXT
Actionscript:
  1. private function onPressRotate($e:MouseEvent):void {
  2.                        
  3.                         //... whatever pre-existing code ...
  4.                        
  5.                         _stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveRotate, false, 0, true);
  6.                         _stage.addEventListener(MouseEvent.MOUSE_UP, onReleaseRotate, false, 0, true);
  7.                        
  8.                         if ( isFirefoxMac ){
  9.                                     _stage.addEventListener(Event.MOUSE_LEAVE, onMouseLeaveRotate, false, 0, true);
  10.                         }
  11.  
  12.                         // other stuff...
  13.             }
  14. }

Each type of press gets an associated onMouseLeave* event (onMouseLeaveScale, onMouseLeaveRotate, etc).

PLAIN TEXT
Actionscript:
  1. private function onMouseLeaveRotate(event:Event):void{
  2.             _stage.removeEventListener(Event.MOUSE_LEAVE, onMouseLeaveRotate);
  3.             dispatchFakeMouseUpEvent();
  4. }

Actually, the onMouseLeaveMove handler is slightly different since onReleaseMove() doesnt need a mouse event:

PLAIN TEXT
Actionscript:
  1. private function onMouseLeaveMove(event:Event):void{
  2.             _stage.removeEventListener(Event.MOUSE_LEAVE, onMouseLeaveMove);
  3.             onReleaseMove(event);
  4. }

I also added a line to the removeParentListeners() method to remove the onMouseLeaveMove handler:

PLAIN TEXT
Actionscript:
  1. _stage.removeEventListener(Event.MOUSE_LEAVE, onMouseLeaveMove);

That's just about it, just one more small tweak to the TransformItem class. You need to do the same routine for the TransformItem.onMouseDown() method: Check for Mac FF, if so add a MOUSE_LEAVE handler, and in the onMouseLeave() method just call the onMouseUp() method.

Flex 4 stuff up on labs

Jun 1st

Posted by rich in Flex

1 comment

New releases of Flash Builder and the Flex SDK are up on Adobe Labs. I'm very excited about the new version of Flex, it seems to work out a lot of the issues I had with Flex 3. States actually look easy to use now, and skinning and styling looks much, much improved. There's a good read here at the Flex Developer Center with an overview about the main differences between Flex 3 & 4.