I had a recent issue where I needed to know when one DisplayObject was totally over another, and more importantly prevent the object being transformed from uncovering the other DisplayObject. I like simple, so let’s get to the pictures. The box below is being transformed:

The problem is initially that the fixed DisplayObject not being moved is irregular in shape. This becomes apparent when trying to drag, scale, or rotate the square. If my drag restricts the drag area to the bounds of the fixed DisplayObject, this is great until I rotate the other DisplayObject which then invalidates the drag bounds and you can see below that a corner is uncovered.

What I need to do is detect if the transform move would result in uncovering the fixed DisplayObject and thus not allow it. If both items where rectangles and not being rotated we could use something like the following to detect the total overlap:

boxA.transform.pixelBounds.containsRect(boxB.transform.pixelBounds);

This provides a very nice boolean result, and in my test kinda worked. It just wasn’t 100%.

However, between considering that solution and considering hitTest, and then being reminded of Grant Skinner’s AS2 pixel perfect collision detection, I realized how I could do this.

The collision detection code, upgraded and improved by Troy Gilbert (code and article here) to AS3 provided the key. First, it provides great detection. Then I realized that the method returns a rectangle that represents the overlap of my two DisplayObjects.

If I compare the overlap rectangle to the fixed position DisplayObject rectangle, and make sure it’s not smaller, then I know the object being transformed is fully covering it. Rotate, scale, drag, scale some more, drag, rotate a little, drag, and it locks in step never uncovering the fixed position DisplayObject (which btw is a mask).

Once I get a little breathing room I’ll put up a Flash demo and my code for how I’m using it. Hopefully my hurried explanation here makes some sense. I’m just jazzed I got it working, and all the help I received via Twitter contributed to the final solution.

This is not a difficult thing, but it caused some consternation in a recent project because we were trying to perform this simple task in the depths of what was a more complex piece of code.

So, what we needed to do what catch the MouseOver on DisplayObjects while dragging another DisplayObject. Naturally since the object being dragged under the mouse has the focus, nothing below that DisplayObject is receiving those mouse events. And in pure AS3 there is no DragEvent.DRAG_OVER as you would have available in Flex.

[Note to Self: you tried this solution initially, remember? And you dropped it because of a complication with targeting when the item was dropped over multiple target objects. Just because something doesn’t work initially, take a breath and remind yourself it shouldn’t and probably isn’t as hard as your supercharged, hyper-caffeinated brain is making it out to be. Keep it simple and you may already have the right solution. Dude.]

To get the mouse events to lower elements we need to enable mouseChildren. This is great, but dropping the object becomes problematic at times. The trick that we all had to learn when jumping from AS2 to AS3 is to not only catch the MouseEvent.Mouse_UP from the object but ALSO from the stage. This ensures we always know when the user releases their mouse, even if they are outside the Flash area when that occurs.

After trying some crazy getObjectsUnderPoint() options, we came back to the original solution with fresh eyes and it turns out that we had the answer all along.

If you aren’t already doing this, I recommend creating a small project and testing out a solution apart from the existing codebase. It could be that the architecture and complexity of the project is clouding your vision from seeing the obvious answer and giving you the confidence to forge ahead.

Project code: DragOver.zip

My simple test for your viewing pleasure:

Code after the break…

I’ve swapped out the Expression Engine commenting system with http://disqus.com. I like how it integrates with other social channels and brings conversations together. And hopefully it’ll help cut down on the enormous amount of spam comments that get trapped and end up hiding legitimate comments that you may submit.

If I can get the comments from EE easily ported to Disqus I’ll do so. There’s a Ruby script (http://gist.github.com/202802) that may handle this conversion.

However, if it’s a hassle to bring those comments over, I’m just going to bail on it.

Please don’t take this personally if you have commented on previous posts. It’s not you, it’s me.