# Changing Colors Using ActionScript

**URL:** <https://forum.kirupa.com/t/changing-colors-using-actionscript/20389>\
**Category:** flash\
**Created:** [May 8, 2003, 7:51am UTC](https://forum.kirupa.com/t/changing-colors-using-actionscript/20389 "2003-05-08T07:51:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![portugeezer](https://avatars.discourse-cdn.com/v4/letter/p/7bcc69/32.png) [@portugeezer](https://forum.kirupa.com/u/portugeezer)\
**Post date:** [May 8, 2003, 7:51am UTC](https://forum.kirupa.com/t/changing-colors-using-actionscript/20389/1 "2003-05-08T07:51:27Z")

</div>

Hi There,  
Looking at the Changing Colors Using ActionScript tut. on the website, can any one tell how to tween the changing colours

Tanks,  
J…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 8, 2003, 8:08am UTC](https://forum.kirupa.com/t/changing-colors-using-actionscript/20389/2 "2003-05-08T08:08:15Z")

</div>

well, to tween you’d need to fade through each of the RGB components of the color… something like this:

```auto

var startColor = {r:50,g:100,b:250};
var endColor = {r:250,g:0,b:120};
var t = 0;
var oColor = new Color(myMovieClip);
this.onEnterFrame = function() {
  t += 0.1; // Change this value for a faster/slower fade..
  if (t < 1) {
    fadeColor(oColor,startColor,endColor,t); // Fade to new value
  } else { // Fade is over
    fadeColor(oColor,startColor,endColor,1); // Set to end color
    delete this.onEnterFrame; // Delete frame loop
  }
}
function fadeColor(oColor,startColor,endColor,t) {
  // oColor is the color object to do the fade on
  // t is the value of the fade in the range of 0..1
  var newR = (endColor.r - startColor.r)*t + startColor.r;
  var newG = (endColor.g - startColor.g)*t + startColor.g;
  var newB = (endColor.b - startColor.b)*t + startColor.b;
  oColor.setRGB( newR << 16 | newG << 8 | newB );
}

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 8, 2003, 8:36am UTC](https://forum.kirupa.com/t/changing-colors-using-actionscript/20389/3 "2003-05-08T08:36:04Z")

</div>

```auto
// prototype
MovieClip.prototype.fadeColor = function(cto, ease) {
	var myColor = new Color(this), cColor = myColor.getTransform();
	this.onEnterFrame = function() {
		for (var c in cColor) {
			cColor[c] += (cto[c]-cColor[c])/ease;
		}
		myColor.setTransform(cColor);
	}
}
// usage
myMovieClip.fadeColor({rb:204, gb:0, bb:0, ab:255}, 10);

```

**parameters**

**cto** : color transform object.  
_ra_ is the percentage for the red component (-100 to 100).  
_rb_ is the offset for the red component (-255 to 255).  
_ga_ is the percentage for the green component (-100 to 100).  
_gb_ is the offset for the green component (-255 to 255).  
_ba_ is the percentage for the blue component (-100 to 100).  
_bb_ is the offset for the blue component (-255 to 255).  
_aa_ is the percentage for alpha (-100 to 100).  
_ab_ is the offset for alpha (-255 to 255).

**ease** : ease (there’s no need for explanation). 😛

Make your choice. 😉

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 8, 2003, 11:06am UTC](https://forum.kirupa.com/t/changing-colors-using-actionscript/20389/4 "2003-05-08T11:06:21Z")

</div>

Thank-you both,

I ended up using brainys code which worked straight away.

wicked !!!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 8, 2003, 11:08am UTC](https://forum.kirupa.com/t/changing-colors-using-actionscript/20389/5 "2003-05-08T11:08:33Z")

</div>

_dances around_ woop, my code worked straight away, and i typed it up in the quick reply box… makes you feel like you know your flash 😉

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 8, 2003, 12:35pm UTC](https://forum.kirupa.com/t/changing-colors-using-actionscript/20389/6 "2003-05-08T12:35:05Z")

</div>

good code brainy (and kax of course :beam: )

i just dont get what this does:

> ```
> oColor.setRGB( newR &lt;&lt; 16 | newG &lt;&lt; 8 | newB );
> 
> ```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [May 8, 2003, 3:12pm UTC](https://forum.kirupa.com/t/changing-colors-using-actionscript/20389/7 "2003-05-08T15:12:37Z")

</div>

it combines the 3 components into one 24bit color value… it shifts the red by 16 bits to the left, and or’s it with the green shifted 8 bits to the left and or’s it with the blue. yup yup. i actually did a pretty extensive explanation on that at the [bit-101 forums](http://www.bit-101.com/forum) so you might wanna look it up there.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 14, 2003, 3:19pm UTC](https://forum.kirupa.com/t/changing-colors-using-actionscript/20389/8 "2003-06-14T15:19:33Z")

</div>

ok i looked at brainy code and i understood thats what i want to do

but where do i put everything??

```php

well, to tween you'd need to fade through each of the RGB components of the color... something like this:

ActionScript:--------------------------------------------------------------------------------var startColor = {r:50,g:100,b:250};
var endColor = {r:250,g:0,b:120};
var t = 0;
var oColor = new Color(myMovieClip);
this.onEnterFrame = function() {
        t += 0.1; // Change this value for a faster/slower fade..
        if (t < 1) {
                fadeColor(oColor,startColor,endColor,t); // Fade to new value
        } else { // Fade is over
                fadeColor(oColor,startColor,endColor,1); // Set to end color
                delete this.onEnterFrame; // Delete frame loop
        }
}
function fadeColor(oColor,startColor,endColor,t) {
        // oColor is the color object to do the fade on
        // t is the value of the fade in the range of 0..1
        var newR = (endColor.r - startColor.r)*t + startColor.r;
        var newG = (endColor.g - startColor.g)*t + startColor.g;
        var newB = (endColor.b - startColor.b)*t + startColor.b;
        oColor.setRGB( newR << 16 | newG << 8 | newB );
}

```