One animated filter, multiple buttons

1

I have a filter I’ve applied to multiple buttons, and it animates (using onEnterFrame) with onRollOver and onRollOut functions applied to each button. The problem is, sometimes when I roll over one button, it also animates the filter on another button (because they are using the same filter).

I know the obvious solution is to have a different filter applied to each button, but I’m concerned that this would slow things down. Also, I can’t help but think there is another way to solve this, particularly because this issue only occurs some of the time, not all of it.

Here is the AS code. I’ve included a small sample file to illustrate the problem I’m having.


import flash.filters.*;
var buttonShadow:DropShadowFilter = new DropShadowFilter(0, 0, 0x000000, 20, 5, 5, 5, 3, false, false, false);
b1.filters = b2.filters = [buttonShadow];
var buttonOver = function (targetMC) {
	targetMC.onEnterFrame = function() {
		buttonShadow.blurX += (20 - buttonShadow.blurX) / 5;
		buttonShadow.blurY = buttonShadow.blurX;
		targetMC.filters = [buttonShadow];
		if (buttonShadow.blurX == 20) {
			delete targetMC.onEnterFrame;
		}
	};
};
var buttonOut = function (targetMC) {
	targetMC.onEnterFrame = function() {
		buttonShadow.blurX += (5 - buttonShadow.blurX) / 5;
		buttonShadow.blurY = buttonShadow.blurX;
		targetMC.filters = [buttonShadow];
		if (buttonShadow.blurX == 5) {
			delete targetMC.onEnterFrame;
		}
	};
};
b1.onRollOver = b2.onRollOver = function() {
	buttonOver(this);
}
b1.onRollOut = b2.onRollOut = function() {
	buttonOut(this);
}

Thanks!