So, in the process of converting a banner from AS2 to AS3, I noticed some odd behavior with some rollovers. Here is the original As2 banner for reference:
After the initial animation, two buttons show up that allow you to roll over to switch to different images.
When I converted this to AS3, though, the rollover kept on retriggering itself. Basically, in AS2, the roll over event is only triggered when you roll from something else on to the target object. If your mouse is already over the object and moves, it won’t trigger the rollover.
In AS3, that is not the case. Once the button reappeared underneath the mouse, and the cursor moved just a tiny bit, the rollover event would fire. Irritating, but I found a work around.
Instead of re-enabling the button immediately after the animation completes, I instead check to see if the cursor is over the button first. If so, I add an event listener for the ROLL_OUT event, which then runs a function that adds the listener for the ROLL_OVER event. See code sample below:
function enableIt() {
// This function is run after animation completes.
btn.mouseEnabled = true;
if(btn.hitTestPoint(mouseX, mouseY)) {
// Is the cursor over the button?
// If so, listener for the ROLL_OUT first, before listening for the ROLL_OVER.
addEventListener(MouseEvent.ROLL_OUT, addRollOverListener);
} else {
// Mouse is not over the button, just enable the ROLL_OVER listener right away.
addRollOverListener();
}
}
function addRollOverListener(e:MouseEvent = null) {
btn.addEventListener(MouseEvent.ROLL_OVER, doRollOver);
}
function doRollOver(e:MouseEvent) {
trace(“button has been rolled over”);
}
