ColorTransform - overwrite problem

[ollywood]

Hi all,

 

I'm trying to tween various values of the colour transform over separate tween lengths, as per code below:

 

TweenMax.to(testIMG, 3, {colorTransform:{blueOffset:255}});
TweenMax.to(testIMG, 5, {colorTransform:{greenOffset:255}});
TweenMax.to(testIMG, 7, {colorTransform:{redOffset:255}});

 

...however all that happens is the last tween immediately overwrites the previous two. If I add "overwrite:0" to the params, then it does the first tween and then flicks to the last two seconds of the second tween (losing the value of the first tween, so in this case blueoffset seems to revert to 0 and I see the end of the greenoffset tween), and likewise with the third (both blue and green to zero, red tweens to 255).

 

No doubt this is me misunderstanding the mechanics of ColorTransform, but if I put them all into one tween, it works - however I would like them to stagger (altho start at the same time). I know, for example, that "exposure" is a combined controller of these three values, but I thought individually they could be tweened independently?

 

Any help appreciated!

 

Thanks,

 

Olly

[Thorjelly]

I have a similar problem. I was going to post my own topic about it but I'll post it here first.

 

Basically, I cannot tween alpha and the ColorTransform of an object at the same time. Yes, I know I could use ColorTransform.alphaMultiplier if I am tweening the object from the same place, but these are two separate tweens initiated at two separate places that could be applied on the same object at the same time.

 

This is a similar problem as described here: viewtopic.php?f=1&t=1777&p=6519&hilit=colortransform+alpha#p6519 However, I do not have the luxury of knowing that the alpha tween will be on the same object as a transform tween, so I can not arbitrarily add alphaMultiplier: 0 to each one of my transform tweens! Like described in that situation, my object just completely disappears (doesn't fade out, just vanishes altogether) and no alpha is tweened, even if I am trying to tween in to an alpha value of 1.

 

Basically what seems to be happening is that ColorTransform bluntly overwrites any other color related transform, including the normal alpha property. This is sort of a problem with Flash -- you'd think that if you put an alpha value of 0.5 on a movieclip and then give it a color transform with an alphaMultiplier of 0.5 the total alpha would be 0.25, but no, Flash overwrites it.

 

The solution I have found using Flash's native tween framework is essentially this:

 

var tween:Tween = new Tween(mc, "", Regular.easeInOut, 1, 0.5, 0.5, true);
tween.addEventListener(TweenEvent.MOTION_CHANGE, onShadeUpdate, false, 0, true);

private function onShadeUpdate(event:TweenEvent):void
{
var tween:Tween = event.target as Tween;
var target:WILDMovieClip = tween.obj as WILDMovieClip;
target.transform.colorTransform = new ColorTransform(tween.position, tween.position, tween.position, target.alpha);
}

 

So basically, you create a miscellaneous value, and use that to create a new ColorTransform object using the tween.position property with whatever value you actually want to change, and set the alpha to be target.alpha, rather than 1 or anything like that.

 

However I am not sure how to tween a 'miscellaneous value' in TweenLite or if that is even possible.

 

What the ColorTransformPlugin SHOULD do is each time it updated the object's ColorTransform, it creates a ColorTransform that uses the old ColorTransform's values except for what values it is tweening... but this is apparently not what it actually does do. It apparently assumes that any value that you are not tweening is 1! That is all I can figure.

 

If this is true, it seems like a bug in the ColorTransformPlugin and it should be fixed. But while it is like this, does anyone have a reasonable solution for this problem using TweenLite? Or am I wrong, and there is a perfectly rational explanation for this behavior, and an easy, intuitive solution?

[Thorjelly]

Okay well I came up with this solution:

 

var tween:TweenLite = TweenLite.to(event.animationTarget, 0.5, { ease: Sine.easeInOut,
											           onUpdate: onShadeUpdate };
tween.vars.onUpdateParams = [event.animationTarget, tween, start, end];

private function onShadeUpdate(target:WILDMovieClip, tween:TweenLite, start:Number, end:Number):void
{
var multiplier:Number = start * ((tween.duration - tween.currentTime) / tween.duration)
							    + end * (tween.currentTime / tween.duration);
target.transform.colorTransform = new ColorTransform(multiplier, multiplier, multiplier, target.alpha);
}

 

This only works with OverwriteManager set to NONE, though. Previously it did not work no matter what OverwriteManager was set to. The alpha tween would simply not finish ever, and it got stuck in a bizarre state.

 

Anyway, you could do something similar, ollywood. Something like this:

 

var tween:TweenLite = TweenMax.to(testIMG, 7, {onUpdate: onShadeUpdate});
tween.vars.onUpdateParams = [ testIMG, tween ];

private function onShadeUpdate(target:DisplayObject, tween:TweenLite):void
{
  var redOffset:int = (tween.currentTime / 7) * 255;
  var greenOffset:int = Math.min(redOffset * (7 / 5), 255);
  var blueOffset:int = Math.min(blueOffset * (7 / 3), 255);

  target.transform.colorTransform = new ColorTransform(1, 1, 1, 1, redOffset, greenOffset, blueOffset);
}

 

might work?

[ollywood]

Thanks Thorjelly - that definitely does the job (it was a route I was looking to go down if the pure TweenMax solution wasn't forthcoming, altho you've made a more elegant job of it than I probably would have!), cheers. Shame there's not a more straightforward way of doing it.

 

Olly

 

(PS - just in case anyone else makes use of the code, the line

 

var blueOffset:int = Math.min(blueOffset * (7 / 3), 255);

 

should be

 

var blueOffset:int = Math.min(redOffset * (7 / 3), 255);

 

using the redOffset as the benchmark for the calculation.

 

...Thanks again!)

[Thorjelly]

Yeah, that's right. I didn't look over it too carefully. Anyway, I am glad it works for you!

 

And just for the record, just cus I could see how it could be confusing, for olly's example OverwriteManager would not need to be set to NONE, cus it isn't dealing with multiple tweens. That was just necessary for my problem In case anyone else stumbles through this.

[GreenSock]

First of all, you wouldn't need to set OverwriteManager's mode to NONE because that would affect all tweens (and could allow overlapping tweens when you wouldn't want them) - you could just prevent overwriting on the specific tweens by using overwrite:false in their vars parameter. The overwriting was expected behavior because you were creating overlapping colorTransform tweens on the same object but I can see why you'd want to turn off overwriting in this special case because you're tweening different aspects of the colorTransform in each tween.

 

Good news: I just uploaded a new version of the TintPlugin and ColorTransformPlugin that make the tweens only focus on the necessary properties of the colorTransform for your tween(s) instead of recording/refreshing the starting values of all properties. This will solve the scenario you described by simply setting overwrite:false on your 2nd and 3rd tween like:

 

TweenMax.to(testIMG, 3, {colorTransform:{blueOffset:255}});
TweenMax.to(testIMG, 5, {colorTransform:{greenOffset:255}, overwrite:false});
TweenMax.to(testIMG, 7, {colorTransform:{redOffset:255}, overwrite:false});

 

Again, please make sure you update to the latest version of the GreenSock files.

[Thorjelly]

Oh wow, awesome, it works now without all that onUpdate business That's pretty cool. Thanks!

[ollywood]

Yes, works a treat - thanks!