More Flex and Flash Interaction Tips

I recently helped a customer who had a Flash movie loaded into his Flex application that was not working as expected. The Flash movie had a MovieClip symbol which could be dragged with the mouse. This is pretty common in Flash movies: you detect that the mouse has been pressed over the MovieClip instance and then startDrag() to let the user move the MovieClip.

This was working sporadically in Flex. I determined that the problem happened when mouse event handlers were present in the Flex application: mouseOut, mouseOver, even ToolTips prevents the MovieClip from being dragged.

I showed this to a Flex engineer and he told me what was happening. When mouse event handling code was present, the DragManager was enabled and superseded the standard mouse handling. In other words, Flex took over mouse control.

There is a work-around however. You must remove startDrag (and stopDrag) and handle the mouse tracking yourself. Here’s how to do that.


Suppose you have MovieClip mc which are allowing the user to drag via startDrag. You probably have an onPress event handler for it which initiates the drag and a onRelease handler which stops the drag:


mc.onPress = function() {
   this.startDrag();
}

mc.onRelease = function() {
   this.stopDrag();
}

To make this work in Flex, change to:

mc.onPress = function() {
   this.onMouseMove = function() {
      var point = {x:_level0._xmouse, y:_level0._ymouse};
      this._parent.globalToLocal(point);
      this._x = point.x;
      this._y = point.y;
      updateAfterEvent();
   }
}
mc.onRelease = function() {
   this.onMouseMove = undefined;
}

The mouse tracking method is set only when the user presses down on the MovieClip and is discarded when the mouse is released.

First, a point is created where the (x,y) values are global position of the mouse. _level0 is the Flex application level. The point is then translated into the co-ordinate space of the MovieClip’s parent and then positioned. Finally, updateAfterEvent is called to insure smooth tracking of the object.

This not only works in Flex, but will work in Flash as well.