flickering roll over/out button :(

[edbras]

Hi all,

 

I am a bit new, read many of the samilar posts, but can't figger out how to resolve the following issue:

Flickering effect when performing a roll-over on a button ..

 

I tried several settings (also ones from this forum), but keep getting the same error.

Here is the button:

http://sub.ited.nl/Button.html (and the fla: http://sub.ited.nl/Button.fla)

Just move the mouse in from different sides and you will see that the button will shrink again when you have rolled in, which means that a roll out is triggered even when it's inside the button. I noticed that this is more fragil when moving inside the button from the bottom or sides. If you move in the button slowely from the a side you will get in a infinite loop: roll-over/roll-out...

The code (using the latest greensock version):

import com.greensock.*;
import com.greensock.easing.*;

btn1.buttonMode=true;
btn1.useHandCursor = true;
btn1.mouseChildren = false;	
btn1.addEventListener(MouseEvent.ROLL_OVER,pRoll);
btn1.addEventListener(MouseEvent.ROLL_OUT,pOut);


function pRoll(evt:MouseEvent) {
var target = evt.currentTarget;
TweenMax.to(target, 0.2, {scaleX:1.1, scaleY:1.1, ease:Elastic.easeOut, glowFilter:{color:0x000033, alpha:0.4, blurX:8, blurY:8}});
}

function pOut(evt:MouseEvent) {
var target = evt.currentTarget;
TweenMax.to(target, 0.2, {delay:0.2, scaleX:1, scaleY:1, glowFilter:{blurX:0, blurY:0}});
}

[GreenSock]

Ah yes, the lovely Flash bug that involves filters causing an object's ROLL_OUT/ROLL_OVER to fire in funky ways. Gotta love it. This has nothing to do with TweenLite/Max - it's just a bug in Flash itself. Remove the filter and you'll see that things work fine. The only way around it that I know of is to add conditional logic to your handlers so that it checks to verify that the mouse has indeed rolled off or over (using hitTestPoint() for example). Also, I noticed you had a delay set on your ROLL_OUT tween. I'd recommend in these types of situations to set overwrite:true on your tweens so that the "out" tween completely kills the "over" tween and visa-versa. If you want the overwriting to wait until the tween actually starts, use the ALL_ONSTART mode (see http://www.greensock.com/overwritemanager/ for details).

[edbras]

Yepppp, loving it already ...

I thought about maybe bouncing into a buggy place seen his behavior but didn't expect it...

Yep: I removed the glow filter and it works fined.

 

Could you give me a few more words/pointers about this workaround you mention (hittest())? I googled a bit but it's hard to find the correct info

 

Thanks,

Ed

[GreenSock]

It's hitTestPoint(). Kinda like:

 

if (myButton.hitTestPoint(mouseX, mouseY, true)) {
   trace("mouse is over button");
}

[edbras]

Ok, thanks, I will have a look at it.

[edbras]

Hi Again,

 

I tried it but didn't work ..

I have to say that the behavior is improved but it still enters a infinite flickering loop at the edges (especially the bottom edge)

Why is it hard to find workarounds on google about this ? ... (or is it just me )

 

Is the following correct?:

function pRoll(evt:MouseEvent) {
var target = evt.currentTarget;
if (target.hitTestPoint(mouseX, mouseY, true)) {
	TweenMax.to(target, 0.2, {scaleX:1.1, scaleY:1.1, ease:Elastic.easeOut, glowFilter:{color:0x000033, alpha:0.4, blurX:8, blurY:8}});
}
}

function pOut(evt:MouseEvent) {
var target = evt.target;
if (!target.hitTestPoint(mouseX, mouseY, true)) {
	TweenMax.to(target, 0.2, {overwrite:1, scaleX:1, scaleY:1, glowFilter:{blurX:0, blurY:0}});
}
}

[edbras]

I was doing some more experimenting and found out the following workaround that seems to work:

nest the button in another movieclip symbol.

This seems to work fine. Is this the way to do it ?

In the roll over/out you simple access the nested button. The code:

function pRollNew(evt:MouseEvent) {
var target = evt.target.button;
TweenMax.to(target, 0.2, {scaleX:1.1, scaleY:1.1, ease:Elastic.easeOut, glowFilter:{color:0x000033, alpha:0.4, blurX:8, blurY:8}});
}

function pOutNew(evt:MouseEvent) {
var target = evt.target.button;
TweenMax.to(target, 0.2, {overwrite:1, scaleX:1, scaleY:1, glowFilter:{blurX:0, blurY:0}});
}

 

 

Ed