CODEWITHSUNDEEP
actionscript-3flashevents
Ozan Deniz
Ozan Deniz

Reputation: 135

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

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.

Upvotes: 0

Views: 497

Answers (2)

Pier
Pier

Reputation: 10837

The easiest solution would be using the Interactive PNG class by Moses.

http://blog.mosessupposes.com/?p=40

Normally the clear areas of a PNG are treated as solid, which can be especially frustrating when dealing with a lot of images that overlap each other because they tend to block mouse interactions on the clips below them.

This utility fixes that so that mouse events don't occur until you bump against a solid pixel, or a pixel of any transparency value besides totally clear. InteractivePNG lets you set an alphaTolerance level to determine what transparency level will register as a hit.

Upvotes: 1

Ethan Kennerly
Ethan Kennerly

Reputation: 124

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.

Upvotes: 2

Related Questions