RollOver/Out "ColorWave" Effect like in the Plugin-Explorer?

[bitrocker]

hi all,

 

i'm trying to do that kind of "wave" effect for the list-items as used in the tweenlite/max plugin explorer: like roll-over/roll-out on

an item but completing the tween (no overwrite) after you rollover/out. i'm using a simple tint tween on the background color of

each item and a 'overwrite: false' on the items rollover/rollout event. somehow the result isn't what i expected, because it seems

to "stutter". anyone has an example handy on how to do this kind of effect?

 

thanks: lars

[GreenSock]

Why would you want overwrite:false? Imagine you roll over an item and it starts tweening to green, and then you roll out and it starts tweening to red - if you set overwrite:false, that means that the green tween is allowed to continue, so now you've got two tweens fighting with each other over the tint of the object. And if you roll over it again quickly, now you've got 3 tweens fighting. Whichever one executes last wins. Maybe that's causing the "stuttering" effect you're seeing.

 

My recommendation would be to leave overwrite as either 1 (true) or the AUTO mode which is 2. See http://www.greensock.com/overwritemanager/ for details about all the different modes, behaviors, and requirements.

[bitrocker]

oops, i guess i mixed things up. obviously the overwrite would cause the exact opposite effect.

thanks! nevertheless, the effect in the plugin explorer does not look like a simple tint and alpha tween... what's

the trick that makes it look like it looks?

[GreenSock]

the effect in the plugin explorer does not look like a simple tint and alpha tween... what's

the trick that makes it look like it looks?

 

The gray rollovers are just tints and the green ones use colorMatrixFilter. Nothing terribly complex

[bitrocker]

from looking i can't say ain't there some delay/overwrite action taking place? when i try a simple tint and alpha tween on rollover/rollout it doesn't

look that "smooth"...

[GreenSock]

ain't there some delay/overwrite action taking place? when i try a simple tint and alpha tween on rollover/rollout it doesn't

look that "smooth"...

 

Nope, no special delay or overwrite stuff happening. New tweens do overwrite existing ones, but that's just the default anyway.

 

Define "not smooth". Is your frame rate really low or something? Feel free to post an example that looks non-smooth (don't forget to zip before you post)

[bitrocker]

basically it's just like this:

 

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

TweenPlugin.activate([TintPlugin]);
OverwriteManager.init(OverwriteManager.AUTO);

this.addEventListener(MouseEvent.MOUSE_OVER, mouseover);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseout);

function mouseover(e:Event):void
{
	if(e.target.name){
		TweenLite.to(e.target.myTintedItemBackMovieClip, 0.5, {alpha:1, tint:0x093212});
		TweenLite.to(e.target.myMenuItemTextMovieClip, 0.5, {tint:0xFFFFFF});			

	}
}
function mouseout(e:Event):void
{
	if(e.target.name){
		TweenLite.to(e.target.myTintedItemBackMovieClip, 0.5, {alpha:0, tint:0xFFFFFF});
		TweenLite.to(e.target.myMenuItemTextMovieClip, 0.5, {tint:null});			
	}
}

[GreenSock]

Just be careful about using MOUSE_OVER/MOUSE_OUT instead of ROLL_OVER/ROLL_OUT because the former will fire every time you roll over the object and/or any of its children (not typically the desired behavior).