Flash Banner with rollover/rollout - overlapping button cancels rollover

Question

Hi all,

I'm doing a work project that uses Flash CS3 / AS 2 (and cannot use AS3). I have a rather interesting and hairy problem that is taking up quite a bit of time and sanity.

I'm working on a banner that reveals a new design on rollover, and switches back to the first design on rollout. This part works fine. However, the problem is that the second design also includes a clickable call-to-action button. When the mouse hovers over this button, it counts this as a rollout, and goes back to the first design.

So far, I've tried converting the click area to a movie clip, and then using Actionscript to attempt to make that movie clip clickable.

_root.cta_instance.buttonMode = true;

_root.cta_instance.onRelease = function () { getURL("http://www.google.com"); }

This prevents the triggering of rollout, but it hasn't worked to make it clickable.

I bow down to your collective expertise. Thanks in advance for preventing more gray hairs on my head!

Answer 1

I'm having a hard time interpreting the way you are cycling banners, but with the info you've posted, i would put the second banner and button in a container movieclip, that way the rollout of the button wont trigger the container rollout event.

Answer 2

Oh man, this problem is one of the reasons I was glad to move away from AS2. I don't think there is a good solution, but here are some things I've tried:

1. Add a rollover method to the child button that keeps the second banner design in place
2. On rollover, use onMouseMove, enterFrame, or setInterval() to periodically do a hitTest to check if the mouse is still in the area of the second banner MovieClip. Do the rollout effect only if it's not.
3. Don't make the button clickable. Add an onRelease to the second banner MovieClip that checks if the mouse is in the area of the call-to-action button, and if it is, run the button's code.

There's also some explanation in Dealing with Flash Button Capturing from senocular.