MouseEvent.ROLL_OUT troubles

Just great :( Just when I thought I mastered the MouseEvents in as3 (after trying almost every combination of MouseEvents, buttonMode and mouseChildren) I found a new problem situation; only this time I can seem to find a solution.

The situation looks like this:
If you can see this, then you might need a Flash Player upgrade or you need to install Flash Player if it's missing. Get Flash Player from Adobe.

- The two shapes are siblings so they have the same parent (i.o.w. the two shapes can’t be nested).
- The blue oval is on top of the green rectangle.
- I want to know when the mouse leaves the green rectangle.

The problem is that the green rectangle dispatches a ROLL_OUT and MOUSE_OUT event as soon as the mouse hits the blue oval.

I tried all combinations of mouseChildren, buttonMode and enabled on the oval and on the parent of the two clips, but nothing seems to make the oval not “steal focus” of the rectangle.

Here is the source of the test: Rollout test (zip)

I can think of some workarounds (hitArea, using an invisible button, etc.) but I much rather find a straight way to handle this kind of situation.
Since this was never a problem in as2 I believe there should be a decent solution in as3 as well.

If someone has an answer to this problem or knows about a secret property I haven’t tried, please let me know…

11 Responses to “MouseEvent.ROLL_OUT troubles”


  • Hi Arno.
    If you don’t need mouse interaction with oval you can just set it mouseEnabled property to false:)

    In your code: just
    this.clip2.mouseEnabled = false;
    instead of
    this.clip2.enabled = false;

    Hope it could be helpful :)
    Mariano

  • THAT’S IT!!! Brilliant! I knew I overlooked a property.

    Many thanks!

    I hope this helps others as well…

  • leuk dit…

    maar ik heb zelfde probleem alleen heb alle bij de clips nodig voor mouseEnable…….

    ik heb dit

    container met daarin movies
    ——————————–
    | _ |
    | |_| |
    | |
    | |
    ——————————–

    als ik alleen de container wil triggeen dan wordt deze ook actief zodra je over de movies inside de container gaat maar dat wil ik niet!

  • If we have to interact oval shape.. For example we want to drag oval to rectangle and create some visual feedback on rectangle( color change for example)

  • Yeah, i want to know too… what if the blue oval needs interaction?

    Thanks

  • Ok i got it…

    For example, if you want to have both shapes interactive and prevent green rectange’s MouseEvent.ROLL_OUT from being triggered when you roll over the ‘overlaying’ part of the blue oval, you can use:

    MouseEvent.relatedObject

    in green rectangle’s MouseEvent.ROLL_OUT associated function, using the mouseEvent parameter of that function.

    This is my first ever post on AS and I speak French, so sorry if i’m not clear :(

  • have you found a solution in the meantime? I have a similar situation where I want both movieclips (blue and green) to catch both the rollOver event when the mouse is on the overlapping portion..

  • Marco,

    I think you are referring to event.target?

    function someMouseEventHandler(event:Event)
    {
    trace(event.target);
    }

    Hope that helps someone…

  • NickZA,

    If you don’t want the green rectangle to fire a MouseEvent.ROLL_OUT event when the mouse is over the green rectangle and you roll over the blue oval, you could use this event handler for the green rectangle’s MouseEvent.ROLL_OUT:

    function onRollOutGreenRectangle(mouseEvent:MouseEvent):void
    {
    trace (mouseEvent.target.name) //– Returns instance name of green rectangle
    trace (mouseEvent.relatedObject.name) //– Returns instance name of blue oval

    // Let’s say the blue Oval instance name is “myBlueOvalInstanceName”

    var isValidRollOut:Boolean = (mouseEvent.relatedObject.name == “myBlueOvalInstanceName”) ? false : true;

    if(isValidRollOut)
    {
    trace (“mouse rolled out of green rectangle, but not because of a roll over on blue oval”)
    }
    }

    This is just an example to show you the difference between MouseEvent.relatedObject et MouseEvent.target. I hope it helps someone…

  • Marco,

    your solution is perfect!! I’ve adapted it, so that no related object will fire the mouse event:

    var isValidRollOut:Boolean=false;
    try {
    isValidRollOut = (e.relatedObject.name == “any_object”) ? false : false;
    } catch (e:Error) {
    isValidRollOut=true;
    }
    if (isValidRollOut) {
    do something
    }

  • Great solution, Marco/Ian.
    I’m using it right now on my project. Thanks ;)

Leave a Reply




-->