colorMatrixFilter overwrite? [SOLVED]

[isaballoon 3 Likes (Newbie)]

Jack, loving your new platform. Spent the past weekend kicking the tires.

 

Question, in using the following code I'm discovering that the brightness tweens in the 'over' and 'out' functions seem to be overwriting the tweens in the clickHandler function. What's the story here? Not sure what to do about this. Any help is greatly appreciated.

 

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

var clipArray:Array = [one, two, three, four, five];

for (var i:int = 0; i < clipArray.length; i++) {
clipArray[i].buttonMode = true;
clipArray[i].addEventListener(MouseEvent.CLICK, clickHandler);
clipArray[i].addEventListener(MouseEvent.ROLL_OVER, over);
clipArray[i].addEventListener(MouseEvent.ROLL_OUT, out);
}

function clickHandler(event:MouseEvent):void {
for (var i:int = 0; i < clipArray.length; i++) {
	if (event.currentTarget == clipArray[i]) {
		clipArray[i].mouseEnabled = false;
		clipArray[i].buttonMode = false;
		TweenMax.to(clipArray[i], 1, {colorMatrixFilter:{brightness:2}});
	} else {
		clipArray[i].mouseEnabled = true;
		clipArray[i].buttonMode = true;
		clipArray[i].alpha = 1;
		TweenMax.to(clipArray[i], 1, {colorMatrixFilter:{brightness:1}});
	}
}
}

function over(event:MouseEvent):void {
TweenMax.to(event.currentTarget, .3, {colorMatrixFilter:{brightness:1.3}});
}
function out(event:MouseEvent):void {
TweenMax.to(event.currentTarget, .3, {colorMatrixFilter:{brightness:1}});
}

[GreenSock 18,876 Likes (Superhero)]

Before I dig into this, have you made sure you've got the latest version of the code? I updated it this weekend after finding an issue that may have caused something like what you're describing. http://www.tweenmax.com

 

If you're still having trouble after the update, let me know.

[isaballoon 3 Likes (Newbie)]

Yeah, just re-downloaded it to make sure and it still throws errors. If you've got a minute...

[GreenSock 18,876 Likes (Superhero)]

Yeah, just re-downloaded it to make sure and it still throws errors. If you've got a minute...

 

What errors does it throw?

[isaballoon 3 Likes (Newbie)]

Sorry, it doesn't throw errors, I mispoke. What happens is it doesn't execute the colorMatrixFilter tweens in the clickHandler function. Definitely feels like an overwrite issue. Happy to send over the fla if that helps. I stripped the file down to just the five mcs (buttons).

[Choochoo 0 Likes (Newbie)]

Yeah i am sorta having a problem with the same thing... not sure if I have it setup correctly

 

tl.insert(TweenMax.to(myText,.4,{glowFilter:{color:0x0000FF, alpha:1,strength:9, blurX:100, blurY:50}}),0);

tl.insert(TweenMax.to(myText,.12,{glowFilter:{color:0xFFFFFF, alpha:1,strength:2, blurX:1.5, blurY:1.5,overwrite:false}}),0);

 

the second one kills the first one

[isaballoon 3 Likes (Newbie)]

Here, I'll make is easy on you. Here's the stripped down fla - http://toghaus.com/forjack.html

 

TIA

[GreenSock 18,876 Likes (Superhero)]

The problem is that you're toggling the mouseEnabled property to false which immediately triggers a ROLL_OUT event. See for yourself by removing all the TweenMax code and just put trace()s in the various handlers. So I'm pretty darn sure this has absolutely nothing to do with TweenMax - it's just the order in which your handlers are getting called.

 

Does that help?

[GreenSock 18,876 Likes (Superhero)]

Yeah i am sorta having a problem with the same thing... not sure if I have it setup correctly

 

tl.insert(TweenMax.to(myText,.4,{glowFilter:{color:0x0000FF, alpha:1,strength:9, blurX:100, blurY:50}}),0);

tl.insert(TweenMax.to(myText,.12,{glowFilter:{color:0xFFFFFF, alpha:1,strength:2, blurX:1.5, blurY:1.5,overwrite:false}}),0);

 

the second one kills the first one

 

You have two tweens affecting the same property of the same object at the same time - what were you expecting to happen? (that wasn't a slam - I'm literally trying to understand what you were hoping for)

[isaballoon 3 Likes (Newbie)]

The problem is that you're toggling the mouseEnabled property to false which immediately triggers a ROLL_OUT event. See for yourself by removing all the TweenMax code and just put trace()s in the various handlers. So I'm pretty darn sure this has absolutely nothing to do with TweenMax - it's just the order in which your handlers are getting called.

 

Does that help?

 

Hm. If I replace the TweenMax code with simple alpha settings (commented out in the code) it works just fine for me. I get the tween on the "click" and I get alpha changes on rollOver and rollOut. If I get the alpha changes shouldn't I be able to get tweens as well? This is what is confusing me here and leading me to believe it's a conflict with the tweens. I did what you suggested replacing tweens with traces and it seems to me all the actions are triggering as they should.

 

I still think it's a tweening thing. Regardless, I do appreciate your taking time to look into it as always. Thank you.

[GreenSock 18,876 Likes (Superhero)]

If I get the alpha changes shouldn't I be able to get tweens as well? This is what is confusing me here and leading me to believe it's a conflict with the tweens. I did what you suggested replacing tweens with traces and unless I'm looking at the wrong things it seems to me all the actions are triggering as they should.

 

I still think it's a tweening thing. Regardless, I do appreciate your taking time to look into it as always. Thank you.

 

I think you may be misunderstanding the order of the calls. Let's say, for example, that you click on the mc "one". It calls clickHandler() which in turn creates a colorMatrixFilter brightness tween to a value of 2. Since inside that method you ALSO immediately set mouseEnabled to false, it then calls the out() event which you have creating ANOTHER colorMatrixFilter brightness tween to a value of 1. So you have TWO tweens of the same property of the same object occurring at the same time. TweenMax is smart enough to have the 2nd one (the one that was created last) overwrite the first one (otherwise you'd have to conflicting tweens that are fighting to control the same property of the same object). See the issue now?

[isaballoon 3 Likes (Newbie)]

you ALSO immediately set mouseEnabled to false, it then calls the out() event

 

This is the part I'm not understanding... why setting mouseEnabled to false calls the 'out' event. If anything it seems the 'over' is the one that might be called since the mouse is currently over 'one.' That being the case the overwrite makes sense of course. I'm just not sure what the solution is just yet. By the way I wasn't calling into question your coding of TweenMax. I expected the shortcoming was on my end. Thanks for your time.

[GreenSock 18,876 Likes (Superhero)]

No worries. I wasn't offended

 

The reason Flash dispatches a ROLL_OUT event when you change mouseEnabled to false is because you had it in a state that indicated the mouse was over the object, but if the mouse is no longer enabled for that object, Flash can't really leave it in a ROLL_OVER state (that would indicate that the mouse is over it even though it's not supposed to be able to recognize that), so it fires the ROLL_OUT event one last time before ignoring the mouse altogether.

[isaballoon 3 Likes (Newbie)]

so it fires the ROLL_OUT event one last time before ignoring the mouse altogether

 

Well that's interesting. Is there a solution that comes to mind now that you seem to understand my intent with this (if it isn't an inconvenience)?

[isaballoon 3 Likes (Newbie)]

My thought was to run the tween then call the disabling upon its completion. My attempt (see below) didn't work however..

 

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

var clipArray:Array = [one, two, three, four, five];

for (var i:int = 0; i < clipArray.length; i++) {
clipArray[i].buttonMode = true;
clipArray[i].addEventListener(MouseEvent.CLICK, clickHandler);
clipArray[i].addEventListener(MouseEvent.ROLL_OVER, over);
clipArray[i].addEventListener(MouseEvent.ROLL_OUT, out);
}

function clickHandler(event:MouseEvent):void {
for (var i:int = 0; i < clipArray.length; i++) {
	if (event.currentTarget == clipArray[i]) {
		//TweenMax.to(clipArray[i], 1, {colorMatrixFilter:{brightness:2}});
		TweenMax.to(clipArray[i], 1, {colorMatrixFilter:{brightness:2}, onComplete: disable});
	} else {
		clipArray[i].mouseEnabled = true;
		clipArray[i].buttonMode = true;
		clipArray[i].alpha = 1;
		TweenMax.to(clipArray[i], 1, {colorMatrixFilter:{brightness:1}});
	}
	function disable():void {
		clipArray[i].mouseEnabled = false;
		clipArray[i].buttonMode = false;
	}
}
}

function over(event:MouseEvent):void {
TweenMax.to(event.currentTarget, .3, {colorMatrixFilter:{brightness:1.5}});
}
function out(event:MouseEvent):void {
TweenMax.to(event.currentTarget, .3, {colorMatrixFilter:{brightness:1}});

[GreenSock 18,876 Likes (Superhero)]

If your goal is to prevent that out() tween from running when the user clicks, you could just add conditional logic like so:

 

function out(event:MouseEvent):void {
  if (event.target.mouseEnabled) {
      TweenMax.to(event.currentTarget, .3, {colorMatrixFilter:{brightness:1}});
  }
}

 

Sorry, I don't have much time to think through alternatives right now (rushing on a few projects), but hopefully this helps.