color blending prototype

I have two color objects that I stored using getTransform().

I set the color of the movieclip to the first color Object. When I click on the movieclip, I want it to slowly blend to the color of the second color object. How do I do that?

I would do this using a single color object, which you modify dynamically.

Let's say you have two r,g,b values:

r1,g1,b1 // original color

r2,g2,b2 // destination color

You would start by setting the color object to r1,g1,b1. Then over time, you would tween it to r2,g2,b2.

During the course of the animation, the value of t (for time) is set to go from 0 to 1.

Then:

r - t*r2 + (1-t)*r1;
g - t*g2 + (1-t)*g1;
b - t*b2 + (1-t)*b1;

This is a basic linear-interpolation forumula. Notice that when t is near zero, the color is very close to r1,g1,b1 but when t is near one, the color is very close to r2,g2,b2.

Here's a script which uses this technique to transform a movieclip from red to green over 4 seconds.

code:

---

doTween = function()

{

        // t will go from 0 to 1 over the time specified by this.dur (duration)

	var t = (getTimer() - this.startTime)/this.dur;

	if (t > 1) {

		t = 1;

		delete this.onEnterFrame;

	}

	var r = t*this.r2 + (1-t)*this.r1;

	var g = t*this.g2 + (1-t)*this.g1;

	var b = t*this.b2 + (1-t)*this.b1;

	// trace(r + ", "+ g + ", " + b);

	this.clr.setRGB((r << 16) + (g << 8) + b);

}



MovieClip.prototype.beginColorTween = function(r1,g1,b1,r2,g2,b2,duration)

{

  this.r1 = r1;

  this.g1 = g1;

  this.b1 = b1;

  this.r2 = r2;

  this.g2 = g2;

  this.b2 = b2;

  this.dur = duration;

  this.startTime = getTimer();

  this.clr = new Color(this);

  this.onEnterFrame = doTween;

}



// transform movieclip 'mc' from red to green over 4 seconds

mc.beginColorTween (255,0,0,   0,255,0, 4*1000);

---

For more subtle tints, you can use setTransform instead of setRGB, but the method of interpolation is the same - for each element in the transform array whcih changes, interpolate it using

x = t*x2 + (1-t)*x1;