Forward MouseEvent in transparent bitmap to underlying MovieClip

Question

So I'm Bitmaping some heavy stuff to try bring down the [pre-render] and [render] which is quite high according to FlashBuilder's profiling. I thought this was going well until I realised that as soon as you change a MovieClip to a Bitmap, you lose the pixel based accuracy of the mouse move events (Over, Out, Move...), all your left with is the entire bounding box of the Bitmap, something which is less than desirable. I've got a game where many Bitmapped assets would be on top of each other in a scene, on the stage, arranged in various ways and need to have that pixel accuracy moving between each one and have exhausted my efforts as to how to achieve the same mouse move results with the Bitmapped guys as normal.

This, http://seadersforums.appspot.com/static/bitmaps.fla , is a FLA which shows this operation, and you can see how it works here, http://seadersforums.appspot.com/static/bitmaps.html . When it loads up, both items on stage are drawn Shapes, encapsulated in MovieClips, both that get a glow, if you hover over them. If you click the stage at all, the purple guy gets turned into a Bitmap and now, his 'hit area', when it comes to MouseEvents is his whole bounding box and you can only get through to the back green item at the edge slivers.

I'm also tracing the pixel which the mouse is over, so I can clearly tell when the mouse is over a transparent area, it's 0, but how can I tell the event to forward itself on down the chain to the green MovieClip?

Below is how it's now pretty much working for me,

        var bitmap:Bitmap = this['bitmap'];
        var shouldMouseOver:Boolean = bitmap.bitmapData.getPixel(event.localX - bitmap.x, event.localY - bitmap.y);
        if(shouldMouseOver)
        {
            this.mouseOver();
        }
        else {
            this.mouseEnabled = false;
            var point:Point = new Point(event.stageX, event.stageY);
            for each(var other:DisplayObject in _topContainer.getObjectsUnderPoint(_topContainer.globalToLocal(point)))
            {
                if(other.mouseEnabled)
                {
                    point = other.globalToLocal(point);
                    other.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_MOVE, false, false, point.x, point.y));
                    break;
                }
            }
            this.mouseEnabled = true;
        }

I shut off mouseEnabled for my item, when I know it's wrong, then I search for another item that properly fits the bill and if there is one, send an Event to that and break. If that one's also wrong, it'll do the same again, but each time taking themselves out of the loop.

This does work exactly how I want it to, but I'd always prefer to keep things like globalToLocal and looping, and reading from arrays for not frequently updated methods like listeners to MOUSE_MOVE. Is there a more efficient way to do this?

Answer 1

Off the top of my head you could use the getObjectsUnderPoint method. Any display object typed class has this method. The method takes an argument of type Point, where you can pass the mouse coordinates. I believe the method returns an array of objects beneath that point, that are contained within the DisplayObject that you called the getObjectsUnderPoint method on. For example if these movieclips of yours are nested within a parent clip called Container, then you could do something like this:

var pt:Point = new Point(10, 20);
var objects:Array = container.getObjectsUnderPoint(pt);

Then for your specific scenario I'd sort the returned objects by depth to get the next one in the list (the one beneath, or whatever one I want).

var i:int = 0;
var topContainer:DisplayObject;
var lastIndex:int = 0;
for(i; i < objects.length; ++i){
   if(topContainer:DisplayObject){
       if(container.getChildIndex(DisplayObject(objects[i])) < lastIndex){
            lastIndex = container.getChildIndex(DisplayObject(objects[i]));
       }
   }else{
       topContainer = DisplayObject(objects[i]);
       lastIndex = container.getChildIndex(DisplayObject(objects[i]));
   }   
}

So basically what I'm doing here is sorting through all the results and picking the one with the lowest child index to ideally get the next child closest to the surface. It's been a while since I've been into flash so I'm not 100% sure if the display list works that way in terms of child index, that is, if closer objects have a lower index value or higher. In other words, it is highly possible that a child with an index if 0 could be the child at the bottom of the list. You'll have to give it a try and just adjust the above code if that is the case. Anyway once that function runs (it's un-tested by the way, so might be type-o's and things of this nature but the concept should work) then you will have the clip you really want to access referenced by topContainer. From here you can dispatch a mouseEvent to that container.

topContainer.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_DOWN, false, false, MOUSE_POSITION_X, MOUSE_POSITION_Y));

Now this is what you would do if you have a listener inside of the topContainer waiting to receive it's own mouse event. That is, there is an event listener directly attached to the topContainer object as so:

topContainer.addEventListener(MouseEvent.MOUSE_DOWN, onMouse);

or, inside the topContainer class:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouse);

The reason being that we are dispatching the event directly to the topContainer reference with no event target, and with event bubbling turned off.

If on the other hand your model involves a single MouseEvent handler at the stage level or some other level, and your onMouse handler has a switch statement to do certain actions depending on the event target as so:

function onMouse(e:MouseEvent):void
{
   switch(e.currentTarget){
      case MyMovieClip1:
          //Do Something
      break;

      case MyMovieClip2:
          //Do Something
      break;
   }
}

Then you're going to need to dispatch that event in a slightly different manor. You'll need to include a reference to the topContainer object as well as enable event bubbling:

someRelativeClip.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_DOWN, true, false, MOUSE_POSITION_X, MOUSE_POSITION_Y, topContainer));

Hope this helps let me know if you need any clarification.

Answer 2

I use a trick that I found on the net somewhere but can't find anymore. Basically it's like this:

• put the bitmap in a Sprite.
• Make an EnterFrame handler on that sprite that checks the pixel that is under the cursor every time.
• Use getPixel32() to find the color and the alpha of that pixel.
• When the alpha component of the color is under a certain threshold, you set the sprite's mouseEnabled to false (and otherwise true).

This way, you can only click the bitmap if you roll over parts of the image that are non-transparent. MouseEvents will occur on objects below the bitmap if it's not mouseEnabled.