-
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?
-
Senior Member
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;
Last edited by jbum; 10-07-2004 at 02:43 PM.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|