Tween keeps repeating onRollOver

[mediapimp]

I have 4 movieclips on stage. When I roll over one of them, I want that clip to enlarge and the rest to shrink.

 

I am using TweenLite to do this and have it working to some degree, but when I roll over the clips, the roll over event triggers multiple times as the clip enlarges causing the animation to stutter.

 

I can't figure out a way around this.

 

Any help is appreciated.

[TronicVolta]

It's probably happening because you're listening for the MouseEvent.MOUSE_OVER event. Try using MouseEvent.ROLL_OVER instead.

[mediapimp]

I'm actually using onRollOver in AS2.

[GreenSock]

Could you post an example?

 

I'm 99.9% sure this has nothing to do with TweenLite/Max, but I'd love to take a peek at an example to make sure.

[mediapimp]

I'm sure it's something I am doing wrong and not an issue with TweenLite.

 

Here is my source.

[GreenSock]

It's almost certainly a bug in Flash and it's definitely not related to TweenLite. Here's the proof:

 

Replace your iconOver() method with this:

 

function iconOver(num:Number):Void {
currentIcon = num;
for (i=0; i            if (iconArray[i].num == currentIcon) {
		setTimeout(setXScale, 200, iconArray[i], 200);
           } else {
		iconArray[i]._xscale = 80;
           }
       }
}

function setXScale(mc:MovieClip, xscale:Number):Void {
mc._xscale = xscale;
}

 

Basically, remove TweenLite completely from the equation - I used a setTimeout() to resize the square after 200 milliseconds and as soon as that happens, BOOM, onRollOver gets called again even though the mouse was over it the whole time.

 

You can work around it, though, by adding some conditional logic that checks to see if currenIcon == iconItem.num and if so, don't call the iconOver() function.

[mediapimp]

Thanks for the example.

 

I actually tried using a conditional to check currentIcon and still get the same results.

 

I had the conditional in the onRollOver method like so:

 

iconItem.onRollOver = function() : Void
{
if (currentIcon != this.num)
{
	iconOver(this.num);
}
}

 

It still triggers the onRollOver event more than once.

[GreenSock]

Are you positive? It worked great for me. I just double checked. If you think it's still broken, please post the revised example.

[mediapimp]

Really? That is odd.

 

Here is my updated source.

 

Thanks for the help.

[GreenSock]

That's because of the resetIcons() calls - this should fix it:

 

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

TweenPlugin.activate([GlowFilterPlugin, BlurFilterPlugin]);
OverwriteManager.init(OverwriteManager.AUTO);

var iconNum:Number = 4;
var currentIcon:Number;
var iconArray:Array = new Array();

function setIcons() : Void {	
for (var i=0;i		var iconItem:MovieClip = site["icon"+i];
	iconItem.num = i;
	iconItem.onRollOver = function() : Void {
		if (currentIcon != this.num) {
			iconOver(this.num);
		}
       }

       iconItem.onRollOut = function() : Void {
		if (currentIcon == this.num && !this.hitTest(_root._xmouse, _root._ymouse, false)) {
			resetIcons();
		}
       }
	iconItem.filters = [blur];
	iconArray.push(iconItem);
}
}

function iconOver(num:Number) : Void {
currentIcon = num;

for (i=0; i        if (iconArray[i].num == currentIcon) {
		TweenLite.to(iconArray[i], .5, {_xscale:200, _yscale:200, blurFilter:{blurX:0, blurY:0, remove:true}, ease:Expo.easeInOut});
		TweenLite.to(iconArray[i].gear, .5, {_alpha:100, ease:Expo.easeInOut});
       } else {
		TweenLite.to(iconArray[i], .5, {_xscale:80, _yscale:80, blurFilter:{blurX:7, blurY:7}, ease:Expo.easeInOut});
		TweenLite.to(iconArray[i].gear, .5, {_alpha:55, ease:Expo.easeInOut});
       }
   }
}

function resetIcons() : Void {
currentIcon = NaN;
for (i=0; i	    TweenLite.to(iconArray[i], .5, {_xscale:100, _yscale:100, blurFilter:{blurX:0, blurY:0, remove:true}, ease:Expo.easeInOut});
	TweenLite.to(iconArray[i].gear, .5, {_alpha:55, ease:Expo.easeInOut});
}
}

setIcons();

 

I just used a hitTest() to verify that the mouse is indeed rolled off of the object before allowing the onRollOut to trigger.

 

Also, just so you know, the Flash bug has to do with altering an object's filters array - apparently it causes funkiness in terms of incorrectly calling onRollOut/onRollOver. Again, it has nothing to do with TweenLite/Max specifically - it's a bug in Flash.

[mediapimp]

There is still a small bug where if you roll over a box and then roll off without touching another box, the resetIcons function does not trigger. It's odd that doesn't happen all the time though.

 

Thanks for helping me tweak this. It's greatly appreciated.