Topic: Animated mask over button in Flash (Page 1 of 1)

http://reisio.com/ca/ (dir)
http://reisio.com/ca/ca-1.04.html (live page)
http://reisio.com/ca/ca.zip (all the files, if you're keen to download)

If you go to the live page and mouseover the quasi-triangular area at top right, it will expand out. When it's fully expanded, the gray-gradient area and all the (blue) space to its northeast is basically the shape of an invisible Flash button. At present, this button is static, and it is this button which controls the expansion and collapsing upon mouseover and mouseout. Most of the button is obscured by default, only to be revealed when mouseover triggers some JavaScript which expands its container.

The problem is that when collapsing, there is a short delay to allow the animation to collapse before the container is actually collapsed to once again obscure the button. During this delay if you again mouseover the invisible button, the whole thing will re-expand.

What I'd like is for the button to be masked by an animated shape that occupies the same space as the gray-gradient & blue area, so that the mouseover & mouseout events are triggered precisely at the edge of the gray-gradient image regardless of where in the animation it is, instead of always at the edge of this static button as it is.

If anybody can help me accomplish this, well you would obviously rock hard. TIA.

Button masking can be a pain, as can animated masks, best keep it simple.

I would use two states and switch between an open and closed mode, with separate activators for each.

Closed = Small activator in top left.
Open = Large Activator (which triggers a mouseOut close). Attach the events to whatever clips you have or make some invisible buttons for triggers.

Switch back to the smaller activator when you start the close animation.

Ha. That's so simple I can probably do that in a matter of minutes. Thanks, Dracusis.