MouseEvent.MOUSE_OUT doesn't always trigger?

programming flash
1

So here I am playing around with some ridiculously simple code, but it seems there’s a problem - a MouseEvent.MOUSE_OUT event is not always triggered when my mouse leaves a listening clip, if I move the mouse really fast over it. The code applies to a simple rectangle of the SimpleButton variety:

Could this be because some of the code is partly on the timeline (not ideal, I know, but this is what I’ve got to work with :wink: )?

On a non-credits frame:

creditsButton.removeEventListener(MouseEvent.MOUSE_OUT, hideCredits);
creditsButton.addEventListener(MouseEvent.MOUSE_OVER, showCredits, false, 0, true);

On the credits frame:

creditsButton.removeEventListener(MouseEvent.MOUSE_OVER, showCredits);
creditsButton.addEventListener(MouseEvent.MOUSE_OUT, hideCredits, false, 0, true);

And the functions:

function showCredits(evt:MouseEvent):void
{
 gotoAndStop('credits');
}
function hideCredits(evt:MouseEvent):void
{
 gotoAndStop(currentSection);
}

It’s got me stumped… I can provide a simplified FLA if it’d help. Thoughts?

2

Don’t kill me if I’m wrong, but I do believe that ROLL_OVER/_OUT was introduced to prevent out/over sequences between touching/overlapping children of a display object container. That also goes for rapid motion.

In general, you should stick to rollover/out events instead of mouseover if you are looking to do button functionality. (and I say in general)

This is partly from the docs btw;
The purpose of the rollOver event is to simplify the coding of rollout behaviors for display object containers with children. When the mouse leaves the area of a display object or the area of any of its children to go to an
object that is not one of its children, the display object dispatches the rollOver event. This is different behavior than that of the mouseOver event, which is dispatched each time the mouse enters the area of any child object
of the display object container, even if the mouse was already over another child object of the display object container."

HTH

3

my 2¢, based on 6 months of experience with AS3.
Somebody please correct me if I’m mistaken.

[COLOR=“Blue”]MOUSE_OVER[/COLOR] will issue new rollover events for each child of a display object container containing multiple children. (ie: multiple buttons nested within a single container)

[COLOR=“blue”]ROLL_OVER[/COLOR] will issue only a single rollover event, regardless of the presence of multiple children within a display object container.
This essentially bypasses the advantages/(or defects, depending on your construction methods) of AS3 event propagation.
This might be useful for mitigating UI construction issues, with regard to default AS3 display list behaviors, but will probably require separate listeners for each button instance.
ie: 30 buttons would require 30 event listeners.
As far as I can see, this is essentially just a “kludge” that causes AS3 to act more like AS2.

For example:
Attaching a [COLOR=“blue”]MOUSE_OVER[/COLOR] event listener to “buttonGroup” will register new rollover events for each of the children of buttonGroup.

buttonGroup.addEventListener(MouseEvent.MOUSE_OVER, btnOver, false, 0, true);
//limit mouse events to children only, and enable hand-cursor
buttonGroup.mouseEnabled = false.
buttonGroup.buttonMode = true.

This allows a single listener to serve multiple nested children of the attached display object container.
ie: you construct your button movieclips; name the instances; wrap them in the “buttonGroup” container; attach a set of [COLOR=“blue”]MOUSE_OVER[/COLOR]/[COLOR=“blue”]MOUSE_OUT[/COLOR]/[COLOR=“blue”]MOUSE_DOWN[/COLOR] etc… listeners to “buttonGroup”.
This is a good thing, and leverages AS3 event propagation to its fullest potential.

With regard to the OP issue, the problem is rooted in your construction methods, IMO.
Using a Tweening class for button over/out tweens is easier to implement and far more flexible.
TweenLite/TweenMax, Tweener, or the built-in Tween class can be utilized to dramatically simplify your project.
ie:

function btnOver(evt:MouseEvent):void{
//tween class methods here.
}
4

Thanks for your replies, very informative. Good to know the difference between the MOUSE_ and ROLL_ events :slight_smile:

I figured out the problem, though I’m not sure 100% as to why it happens; however, the issue was caused by the adding / removing of event listeners on a frame. Sometimes it was possible to move the mouse fast enough that you could move out before the timeline had executed its code.

So it seems that when a gotoAndPlay(…) is executed, first Flash changes the frame, then there’s a fractionally brief pause, then any timeline scripts are executed. Hence, why I was able to move my mouse quickly enough to “break” the mouse over / out events.

I’d be interested in knowing - does this scripts-on-timeline behaviour differ from how AS2 operated? Why is there that really-really-brief pause between the timeline displaying the new frame and executing any scripts on that frame?

5

Not sure how AS3 differs from AS2, with regard to your question concerning the timeline delay.

Using a tweening class such as TweenLite for your mouseover/out functions, the MOUSE_OVER event is by default automatically overwritten by the MOUSE_OUT event anyway, so I wonder what is to be gained by removing/restoring these listeners on mouse events.
I doubt that fast-scrubbing the mouse would tend to break the behaviors.

6

Honestly, I’m not sure what I was thinking when I wrote that code… it was some small hour in the night with a deadline the following morning :wink:

I’ve attached an FLA that shows it (move your mouse over the button quickly), but it’s solved by just using one set of ROLL_OVER and ROLL_OUT. Again, I’m not sure why I was adding and removing them all the time :wink:

7

[quote=snickelfritz;2349795]my 2¢, based on 6 months of experience with AS3.
Somebody please correct me if I’m mistaken.

[COLOR=Blue]MOUSE_OVER[/COLOR] will issue new rollover events for each child of a display object container containing multiple children. (ie: multiple buttons nested within a single container)

[COLOR=blue]ROLL_OVER[/COLOR] will issue only a single rollover event, regardless of the presence of multiple children within a display object container.
This essentially bypasses the advantages/(or defects, depending on your construction methods) of AS3 event propagation.
This might be useful for mitigating UI construction issues, with regard to default AS3 display list behaviors, but will probably require separate listeners for each button instance.
ie: 30 buttons would require 30 event listeners.
As far as I can see, this is essentially just a “kludge” that causes AS3 to act more like AS2.

For example:
Attaching a [COLOR=blue]MOUSE_OVER[/COLOR] event listener to “buttonGroup” will register new rollover events for each of the children of buttonGroup.
ActionScript Code:
[LEFT]buttonGroup.[COLOR=#000080]addEventListener[/COLOR][COLOR=#000000]([/COLOR]MouseEvent.[COLOR=#000080]MOUSE_OVER[/COLOR], btnOver, [COLOR=#000000]false[/COLOR], [COLOR=#000080]0[/COLOR], [COLOR=#000000]true[/COLOR][COLOR=#000000])[/COLOR];
[COLOR=#808080]//limit mouse events to children only, and enable hand-cursor[/COLOR]
buttonGroup.[COLOR=#000080]mouseEnabled[/COLOR] = [COLOR=#000000]false[/COLOR].
[COLOR=#000080]buttonGroup[/COLOR].[COLOR=#000080]buttonMode[/COLOR] = [COLOR=#000000]true[/COLOR].
[/LEFT]

This allows a single listener to serve multiple nested children of the attached display object container.
ie: you construct your button movieclips; name the instances; wrap them in the “buttonGroup” container; attach a set of [COLOR=blue]MOUSE_OVER[/COLOR]/[COLOR=blue]MOUSE_OUT[/COLOR]/[COLOR=blue]MOUSE_DOWN[/COLOR] etc… listeners to “buttonGroup”.
This is a good thing, and leverages AS3 event propagation to its fullest potential.

With regard to the OP issue, the problem is rooted in your construction methods, IMO.
Using a Tweening class for button over/out tweens is easier to implement and far more flexible.
TweenLite/TweenMax, Tweener, or the built-in Tween class can be utilized to dramatically simplify your project.
ie: ActionScript Code:
[LEFT][COLOR=#000000]function[/COLOR] btnOverCOLOR=#000000[/COLOR]:[COLOR=#0000FF]void[/COLOR][COLOR=#000000]{[/COLOR]
[COLOR=#808080]//tween class methods here.[/COLOR]
[COLOR=#000000]}[/COLOR]
[/LEFT]

[/quote]

i haven’t studied the twining class yet…but i could suggest that instead of that one, to avoid writing 30 different eventListeners to 30 different buttons, you can just put the m into an array and write the code once… the more arrays you use, the better your project will be…

i did have the same problems, when the mouse was over the button, some text (child of the button) had to go on it too, and the crash was incredible. nor ROLL_OVER could help me instead of MOUSE_OVER!

But i could solve it using a combination of MOUSE_OVER and mouseEnabled=false on the text.

i started 3 months ago with AS3, never used flash and AS before, but i find AS3 simply fantastic…

8

GotoAndStop is too slow to see the difference.
Two approaches: