AS3: How can I implement a perfect ROLL_OVER(or MOUSE_OVER) event listener on curved movieclips

Question

I've a problem with ROLL_OVER event listener. When I enter the empty area withing the movieclip with mouse cursor, ROLL_OVER event triggers. But I want that event trigger only when mouse cursor is on the colored area.

To Make it more clear: Think about " O " letter, when mouse cursor is between the empty area of O letter (inside of O) , event shouldn't trigger. It should trigger only when mouse curser is on the black area.

How can I implement this?

Thanks

-Ozan

PROBLEM IS SOLVED THANKS TO @Ethan Kennerly

I just want to add a few things to help people have problem same as me. In my situation I tried to make continents glow when my mouse is over them. I used the ROLL_OVER/MOUSE_OVER eventlistener to check if my mouse is over them or not. But with the data given by Ethan Kennerly I produced another way. In Ethan Kennerly's solution, if your mouse enters the area of continent from a transparent area , it doesn't get blur effect because ROLL_OVER and MOUSE_OVER event listeners only trigger once per enters so I used MOUSE_MOVE event listener on each continent movieclips. And for this statement:

if (isPixelTransparent(DisplayObject(event.currentTarget), new Point(stage.mouseX, stage.mouseY)) {
    return;
}

add whatever is in the "ROLL_OUT or MOUSE_OUT" eventlistener function, add all of them inside this statement. But don't remove ROLL_OUT or MOUSE_OUT functions.

It's been a while since I had to do this. But, if I remember correctly, this is already how AS3 works. If your asset has a 'fill color' around the shape, then it won't work. But if you use a PNG with transparency or draw the shape in the Flash IDE, the space around it won't trigger the roll_over events. — Lee Loftiss
MovieClips' already have only png format items inside. There are 7 movieclips , each have different continents of world inside them. I've edited them in photoshop and imported into flash as png files, still doesn't work. :( — Ozan Deniz
If you use vector content instead of PNGs that won't happen. — Pier
You know, you are right. When I import my PNG's, I often break them into a Vector after importing. — Lee Loftiss

Ethan Kennerly Ethan Kennerly · Accepted Answer · 2013-10-06T01:47:13

It sounds like the movie clip contains a shape that has transparent pixels. Transparent pixels respond to mouse over and roll over. If you could draw vector graphics that have no shapes with transparent pixels, the mouse would ignore the empty space in the movie clip's bounding box.

Yet it sounds like you need to use transparent pixels and you want the mouse to ignore them, so you could guard, like this:

private function onRollOver(event:MouseEvent):void
{
    if (isPixelTransparent(DisplayObject(event.currentTarget), new Point(stage.mouseX, stage.mouseY)) {
        return;
    }
    // respond to roll over.
}

To detect transparency, Miguel Santirso rendered the pixels and translated the coordinate space here: http://sourcecookbook.com/en/recipes/97/check-if-a-pixel-is-transparent-in-a-displayobject (Except line 38 looks on my computer like "rect" got rendered as "ct"). You could optimize that code by only drawing the pixel in question, instead of the whole image, and checking if that pixel value (getPixel32) is 0, instead of calling a hitTest. I would optimize Miguel's code like this:

    public static function isPixelTransparent(objectOnStage:DisplayObject, globalPoint:Point):Boolean
    {
        var local:Point = objectOnStage.globalToLocal(globalPoint);
        var matrix:Matrix = new Matrix();
        matrix.translate(-local.x, -local.y); 
        var data:BitmapData = new BitmapData(1, 1, true, 0x00000000);
        data.draw(object, matrix);
        return 0x00000000 == data.getPixel32(0, 0);
    }

By the way, if all your movie clips would have the same hit test shape, you could create a separate transparent shape that listens to the roll over. I use a transparent shape to define a custom hit test shape that is a consistent and simple shape (like a circle) when the image is a more complicate shape (like an X or an O with nothing in the middle). The custom hit test shape is a Sprite with a transparent shape. The sprite listens to the roll over. A separate mouse listener shape is also useful if your movie clip, on later frames, creates new shapes that alter the silhouette of the movie clip.

AS3: How can I implement a perfect ROLL_OVER(or MOUSE_OVER) event listener on curved movieclips

2 Answers