Blending from one color to another

[mad_man]

Hello,
i was wondering how to make it so if a user gives me two hexadecimal RGB colors so that i could blend from one color to the other using actionscript. Any help would be appreciated.

[joene]

I just wrote a class the other day, derived from JimmyH's example (thx man :)).
Drop me a note, I' d be glad to to help.

[stringy]

Hello,
i was wondering how to make it so if a user gives me two hexadecimal RGB colors so that i could blend from one color to the other using actionscript. Any help would be appreciated.
I think there are also examples at senocular.com

edit/
http://www.senocular.com/flash/actionscript/files/ActionScript%201.0/Prototypes/Color/blendRGB.as
explanation on the site

[mad_man]

thanks,
i was wondering if you could link me to the explination if its not a problem. I looked through the senocular website didnt find it. thanks alot though. this will be very helpful.

[stringy]

thanks,
i was wondering if you could link me to the explination if its not a problem. I looked through the senocular website didnt find it. thanks alot though. this will be very helpful.
http://www.senocular.com/flash/actionscript.php
->A.S1->prototypes->color

there maybe other things there of interest too and have a look at the AS2 colorfader thingy.

You might also check http://proto.layer51.com/l.aspx?p=10

[JimmyH]

joene... thanks mate.. i'd like to see that as well... i keep meaning to class it up but so busy at the mo havn't had the chance.

mad_man... you can ceck the example i did here (flash 8)

http://www.vectorjunkie.co.uk/blog/?p=64

and the source is here

http://www.vectorjunkie.co.uk/assets/source_downloads/colChange.zip

I think i'm going to write a tute on tweening colour in the new year... but here's a quick low down:

Basically a colour value is a set of three 8-bit numbers all koined together.. in the order of RGB... that's easy. but to tween between colours smoothly you must split a 24-bit number into it's seperate 8-bit numbers... perform a tween from the current number to a new number (your tagert 8-bit number) and then concat them back again into a new 24 bit number. It sounds a lot more complex that it is but here's som pseudo code:

current colour
target colour

red section of current colour
green section of current colour
blue section of current colour

red section of target colour
green section of target colour
blue section of target colour

find an increment value to tween from curent red to target red
find an increment value to tween from curent green to target green
find an increment value to tween from curent blue to target blue

add the red increment value to the current red
add the green increment value to the current green
add the blue increment value to the current blue

concat the new red green and blue values to get a new colour between the current value and the target value.

I know it's a bit waffly but when you get it it's quite simple.

Jimmy

[stringy]

joene... thanks mate.. i'd like to see that as well... i keep meaning to class it up but so busy at the mo havn't had the chance.

mad_man... you can ceck the example i did here (flash 8)

http://www.vectorjunkie.co.uk/blog/?p=64

and the source is here

http://www.vectorjunkie.co.uk/assets/source_downloads/colChange.zip

I think i'm going to write a tute on tweening colour in the new year... but here's a quick low down:

Basically a colour value is a set of three 8-bit numbers all koined together.. in the order of RGB... that's easy. but to tween between colours smoothly you must split a 24-bit number into it's seperate 8-bit numbers... perform a tween from the current number to a new number (your tagert 8-bit number) and then concat them back again into a new 24 bit number. It sounds a lot more complex that it is but here's som pseudo code:

current colour
target colour

red section of current colour
green section of current colour
blue section of current colour

red section of target colour
green section of target colour
blue section of target colour

find an increment value to tween from curent red to target red
find an increment value to tween from curent green to target green
find an increment value to tween from curent blue to target blue

add the red increment value to the current red
add the green increment value to the current green
add the blue increment value to the current blue

concat the new red green and blue values to get a new colour between the current value and the target value.

I know it's a bit waffly but when you get it it's quite simple.

Jimmy
Nice stuff Jimmy

I think a tutorial would be great, color is something which a lot of us do not understand fully

[mad_man]

thanks alot guys. I appreciate all the help. If i ahve any more questions ill post here.

[joene]

Nice stuff Jimmy

I think a tutorial would be great, color is something which a lot of us do not understand fully Indeed, I have absolutely NO clue when it comes to bitwise thinking. A tutorial or some explained logic would be devine :p

[mprzybylski]

great stuff jimmy. if anyone is interested, keith peter's new book Actionscript animation: making things move goes over color pretty well as well as an article on macromedia's site by guy watson (or grant skinner, i always get the two confused) that explains color VERY well. i dont have the link but im sure if you search for it on the MM site you'll find it.

[TheCanadian]

I think they both wrote one:
http://www.macromedia.com/devnet/flash/articles/bitwise_operators.html
http://www.macromedia.com/devnet/flash/articles/image_api.html

They both look like a good read.

[mprzybylski]

ahh nice canadian, i didn't see the one by grant skinner, and the one by guy watson was the one i was referring to, thanks.

[TheCanadian]

You can use the Tween class to Tween the properties of a Color object, that may have some interesting effects.

[mprzybylski]

is that in one of the links u posted? i've read those by bits and pieces, not fully yet.

[TheCanadian]

I don't think so, I haven't read them fully either. I was just thinking of that and though it may produce some neat effects although I'm not proficient with colours enough to try it.

[mprzybylski]

i don't think you can use the color object in the tween class, at least not that i'm aware of. it goes with string properties like _x, _y, _width, _height, etc, not really an object.

[TheCanadian]

No you can tween a numeric property of any object:


import mx.transitions.Tween;
import mx.transitions.easing.*;
var obj:Object = new Object();
obj.prop = 0;
var t:Tween = new Tween(obj, "prop", Elastic.easeOut, obj.prop, 100, 2, true);
t.onMotionChanged = function() {
trace(obj.prop);
};

[ElectricGrandpa]

Um... Just download the tween class from: http://laco.wz.cz/tween/?page=download

It has a colorTo method and a colorTransformTo method(which ease between colours). The tween class is quite good, in fact, I'd suggest that you use it for all your tweening(not just colour tweens). I know it's sped up my motion design process a lot. :)

-Matt

[mprzybylski]

ahh yeah i see what you mean.

and thanks EG, i have the laco tweens but i normally use a TweenExtended class from square circle because it allows me to tween multiple properties, but i'll have to look into the laco color tweens. i may just end up creating my own color tween function to handle all that for me using TweenExtended, we'll see how sassy i feel that day :P

[mad_man]

cant you just use color objects setTransform method?

for ex:

newR =122;
newG=170;
newB=12;
oldR=2;
oldG=99;
olfB=255;

then find diff between them and + or - and set transform ?

[devonair]

what a coinkydink...

just posted this little script over at US for using the Tween class to change the color of a MovieClip..


import mx.transitions.Tween;
import mx.transitions.easing;
//
var myColor:Color = new Color(my_mc);
var myColorXform:Object = myColor.getTransform();
//
my_mc.onRelease = function() {
this.onEnterFrame = function() {
myColor.setTransform(myColorXform);
};
var ra_colorTween:Tween = new Tween(myColorXform, "ra", Strong.easeOut, myColorXform.ra, 255, 1, true);
ra_colorTween.onMotionFinished = function() {
delete my_mc.onEnterFrame;
};
};


Of course to really tweak it, you'd need 8 Tween objects (one per ColorTransform object element), but it's not that hard...

Personally, I'd probably just use the Laco prototypes.. :)

[TheCanadian]

^Nice, that is exactly what I was talking about :thumb:. Instead of using the onEnterFrame event, you can use the onMotionChanged event of the Tween class:


import mx.transitions.Tween;
import mx.transitions.easing.*;
//
var myColor:Color = new Color(my_mc);
var myColorXform:Object = myColor.getTransform();
//
my_mc.onRelease = function() {
var ra_colorTween:Tween = new Tween(myColorXform, "rb", Strong.easeOut, myColorXform.rb, 255, 1, true);
ra_colorTween.onMotionChanged = function() {
myColor.setTransform(myColorXform);
};
};






cant you just use color objects setTransform method?

then find diff between them and + or - and set transform ?
Ya that's what we are doing just insead of using our own easing equations, we are using the Tween and easing classes.

[devonair]

^Nice, that is exactly what I was talking about :thumb:. Instead of using the onEnterFrame event, you can use the onMotionChanged event of the Tween class.

Nice catch.. I've been using the onEnterFrame since mx 2004.. the onMotionChanged method is new and it didn't even occur to me...

[stringy]

cant you just use color objects setTransform method?

I still don`t pretend to understand color but I`ve just been playing about and you can use a simple tween like so


//movieclip instance name mc
myarray = [0xFFBB0000, 0xFFE87606, 0xFFE2CD0C, 0xFF14DA27, 0xFFFFFFFF, 0xFF1264DC, 0xFF4E12DC, 0x509E142DA, 0xFF000000];
var j = 0;
function h(val:Number) {
var col = {};
col.aa = 0;
col.ab = (val >> 24) & 0xFF;
col.ra = 0;
col.rb = (val >> 16) & 0xFF;
col.ga = 0;
col.gb = (val >> 8) & 0xFF;
col.ba = 0;
col.bb = val & 0xFF;
return col;
}
function coll(clip, oldc, speed) {
var mycolor = new Color(clip);
newc = mycolor.getTransform();
clip.onEnterFrame = function() {
var i = 0;
for (var obj in oldc) {
newc[obj] += (oldc[obj]-newc[obj])/speed;
if (Math.abs(oldc[obj]-newc[obj])>5) {
i++;
}
}
mycolor.setTransform(newc);
if (!i) {
delete this.onEnterFrame;
j++;
j %= myarray.length;
coll(this, h(myarray[j]), 20);
}
};
}
var c = h(myarray[j]);
coll(mc, c, 5);

[mprzybylski]

im wanting to get away from the Color object as it is going to be obsolete (or already is?) and am going to try using the new Color classes. Although that is good stuff, thanks.

[TheCanadian]

That's a good idea, I've been meaning to do the same but whenever I need to manipulate colours I go straight to the Color object. Bad habit I guess.

[stringy]

That's a good idea, I've been meaning to do the same but whenever I need to manipulate colours I go straight to the Color object. Bad habit I guess.
old habits die hard. This is the first time i have looked at the tween class (so trying to move on a bit)and I`m unsure if i should be creating new instances each time. Any thoughts


import mx.transitions.Tween;
import mx.transitions.easing.*;
j = 0;
tweenarray = [Elastic.easeOut, Bounce.easeOut, Bounce.easeIn, Bounce.easeInOut, None.easeNone];
function coll(clip, oldc) {
mycolor = new Color(clip);
newc = mycolor.getTransform();
for (var obj in newc) {
this["tween"+obj] = new Tween(newc, String(obj), tweenarray[j], newc[obj], oldc[obj], j+1, true);
this["tween"+obj].onMotionChanged = function() {
mycolor.setTransform(newc);
};
this["tween"+obj].onMotionFinished = function() {
trace(this.isPlaying);
//this.yoyo();
};
}
j++;
j %= tweenarray.length;
}
mc.onPress = function() {
(playing=!playing) ? coll(this, {ra:-100, rb:255, ga:-100, gb:255, ba:-100, bb:255, aa:100, ab:0}) : coll(this, {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0});
};

[TheCanadian]

Make sense to me since each tween is responsible for a different property of the object. And if you call the function for the same object twice it should simply overwrite the previous tweens :).

[stringy]

Make sense to me since each tween is responsible for a different property of the object. And if you call the function for the same object twice it should simply overwrite the previous tweens :).
Thanks :)

[mprzybylski]

what i usually do is i make a "tweener" function that handles my tweening for me so i dont have to remake the tween variables, but i guess essentially its the same thing.

an example (using square circle's TweenExtended class which is essentially the same thing but allows multiple properties to be tweened at once):


import mx.transitions.easing.*;
import mx.transitions.TweenExtended;

// set a function to handle tweening
function tweener(mc:MovieClip, props:Array, easeFunc:Function, startVals:Array, endVals:Array, dur:Number, useSecs:Boolean, cb:Function) {
var _tween:TweenExtended = new TweenExtended(mc, props, easeFunc, startVals, endVals, dur, useSecs);

_tween.onMotionFinished = function():Void {
cb();
};
}

// usage
tweener(box_mc, ["_width", "_height"], Elastic.easeOut, [box_mc._width, box_mc._height], [100, 300], 50, false, null);

this isn't for color, but how i handle most of my tweening in other projects.

[stringy]

what i usually do is i make a "tweener" function that handles my tweening for me so i dont have to remake the tween variables, but i guess essentially its the same thing.

an example (using square circle's TweenExtended class which is essentially the same thing but allows multiple properties to be tweened at once):


import mx.transitions.easing.*;
import mx.transitions.TweenExtended;

// set a function to handle tweening
function tweener(mc:MovieClip, props:Array, easeFunc:Function, startVals:Array, endVals:Array, dur:Number, useSecs:Boolean, cb:Function) {
var _tween:TweenExtended = new TweenExtended(mc, props, easeFunc, startVals, endVals, dur, useSecs);

_tween.onMotionFinished = function():Void {
cb();
};
}

// usage
tweener(box_mc, ["_width", "_height"], Elastic.easeOut, [box_mc._width, box_mc._height], [100, 300], 50, false, null);

this isn't for color, but how i handle most of my tweening in other projects.
Thank you very much
I had almost abandoned the tween class for practical usage before seeing this.

[jimhere]

Where on the CD (or online) can I reinstall classes from? I get the error:

"The class or interface 'TweenExtended' could not be loaded"

[stringy]

Where on the CD (or online) can I reinstall classes from? I get the error:

"The class or interface 'TweenExtended' could not be loaded"
http://www.sqcircle.com/downloads/

[TheCanadian]

Where on the CD (or online) can I reinstall classes from? I get the error:

"The class or interface 'TweenExtended' could not be loaded"
The TweenExtended extended class does not come bundled with Flash, in fact Macromedia has nothing to do with it. I have never really bothered to check it out but now that stringy has posted the link it seems a lot more useful than I had first expected.

[mprzybylski]

no problem stringy. i always just reuse that function when im doing my tweens, its a snippet in my SEPY setup (which SEPY snippets are awesome btw!).

yeah i've been using TE for a while now and its been working great for me, i hate having to write like fifty different lines of tweens for all the properties i want to tween.

[stringy]

thanks again mprzybylski

Where on the CD (or online) can I reinstall classes from? I get the error:

"The class or interface 'TweenExtended' could not be loaded"
I know you are still having problems so here is a way to do it without the extended class thingy


import mx.transitions.easing.*;
import mx.transitions.Tween;
function tweener(mc, props, easeFunc, startVals, endVals, dur, useSecs, cb) {
for (var i = 0; i<props.length; i++) {
var lip = _root["tween"+i]=new Tween(mc, props[i], easeFunc, startVals[i], endVals[i], dur, useSecs, cb);
}
lip.onMotionFinished = cb;
}
function t() {

trace("just one call back");
}
//example -movieclip instance name clip
tweener(clip, ["_x", "_y"], Regular.easeInOut, [clip._x, clip._y], [200, 150], 20, false, t);

you can modify as you need-i have only included 1 callback but if you want just put the "lip.onMotionFinished "inside the loop.

I`ve also made variations on this function,one to include "continueTo()" but i think it is more trouble than it is worth

[mad_man]

ok well i tried to use color tween on my particle system but since there are soo many particles and that you have to create 3 tweens(one for r,g,b) it became wayyyy too slow. I was going to use tween class since it has the seek method, so i can find out what the color is after soo many miliseconds. But since i cant use that anyone know how i can make a function that has seek mothd type of thing?

Thanks.

[mprzybylski]

stringy now i have a question for you...

examine this function:


import mx.transitions.easing.*;
import mx.transitions.TweenExtended;

// set a function to handle tweening
function tweener(mc:MovieClip, props:Array, easeFunc:Function, startVals:Array, endVals:Array, dur:Number, useSecs:Boolean, cb:Function) {
var _tween:TweenExtended = new TweenExtended(mc, props, easeFunc, startVals, endVals, dur, useSecs);

_tween.onMotionFinished = cb;
}

function addUs():Void {
trace(2 + 3);
}

// usage
tweener(box_mc, ["_width", "_height"], Elastic.easeOut, [box_mc._width, box_mc._height], [100, 300], 50, false, addUs);

just my regular tweening function with a callback. however, sometimes i have callbacks that i want to pass in parameters to and i dont want to add anymore parameters to the already bulky tweener function if i dont have to, i'd just like to call those parameters in the usage example, like so:


import mx.transitions.easing.*;
import mx.transitions.TweenExtended;

// set a function to handle tweening
function tweener(mc:MovieClip, props:Array, easeFunc:Function, startVals:Array, endVals:Array, dur:Number, useSecs:Boolean, cb:Function) {
var _tween:TweenExtended = new TweenExtended(mc, props, easeFunc, startVals, endVals, dur, useSecs);

_tween.onMotionFinished = cb;
}

function addUs(one:Number, two:Number):Void {
trace(one + two);
}

// usage
tweener(box_mc, ["_width", "_height"], Elastic.easeOut, [box_mc._width, box_mc._height], [100, 300], 50, false, addUs(2, 3));

obviously that doesnt work as it gives an AS error on compile, so how can i achieve something like this easily without polluting the tweener function much more? thanks.

[TheCanadian]

You can use the apply method to call a function in the scope of an object. You will have to pass the function to be called, the scope you wish to call the function in and the parameters (as an array rather than a comma-separated list, which is useful if you don't know the number of parameters).

I don't have the TweenExtended class so I had to downgrade your code to the regular Tween class.

This example shows how you can call a function in the scope of an object. In this case, we call the startDrag method of the box_mc and pass the parameters in the array.


import mx.transitions.easing.*;
import mx.transitions.Tween;
// set a function to handle tweening
box_mc.swapDepths(1000);
function tweener(mc:Object, props:String, easeFunc:Function, startVals:Number, endVals:Number, dur:Number, useSecs:Boolean, cb:Function, scp:Object, params:Array):Void {
var _tween:Tween = new Tween(mc, props, easeFunc, startVals, endVals, dur, useSecs);
_tween.onMotionFinished = function() {
cb.apply(scp, params);
};
}
// usage
tweener(box_mc, "_width", Elastic.easeOut, box_mc._width, 100, 50, false, startDrag, box_mc, [true, 0, 0, 100, 100]);

[stringy]

yes i would have used a similar way


import mx.transitions.easing.*;
import mx.transitions.TweenExtended;
// set a function to handle tweening
function tweener(mc:MovieClip, props:Array, easeFunc:Function, startVals:Array, endVals:Array, dur:Number, useSecs:Boolean, cb:Function, clip:Object) {
var args = arguments.slice(9);
var _tween:TweenExtended = new TweenExtended(mc, props, easeFunc, startVals, endVals, dur, useSecs);
_tween.onMotionFinished = function() {
cb.apply(clip, args);
};
}
MovieClip.prototype.addUs = function(one:Number, two:Number):Void {
this.velx = one;
this.vely = two;
this.onEnterFrame = mov;
};
function mov() {
this._x += this.velx;
this._y += this.vely;
}
// usage
tweener(box_mc, ["_width", "_height"], Elastic.easeOut, [box_mc._width, box_mc._height], [100, 300], 50, false, addUs, box_mc, 1, 2);

if you just want to call a function,not a method

tweener(box_mc, ["_width", "_height"], Elastic.easeOut, [box_mc._width, box_mc._height], [100, 300], 50, false, addUs, null, 1, 2);

[mprzybylski]

ahh, thanks guys, worked like a charm.

[stringy]

ahh, thanks guys, worked like a charm.

I`ve been trying something similar but inside another loop - so that it tweens several clips at once. Seems to work ok until i exceed a certain number of clips and breaks down in that some properties do not tween.
Using OnEnterFrame + Penners tweens seems more efficient.
Please let me know of any problems you have, it`s possible(likely??) i have coded something inefficiently.

[mprzybylski]

what was the code you were using to do multiple tweens at once?