Tutorial details:
Written by: Sean O'Shell | PiXELWiT Productions
Difficulty Level: advanced
Download FLA
The goal of this tutorial is to teach you how to gradually fade a movieclip's colors with ActionScript therefore it will cover topics which range from the fairly simple to the fairly complex. If you're not up to speed with ActionScript then the easiest way to get started is to follow these four simple steps:

STEP 1) Include or copy and paste the following prototypes into your ActionScript code:

Math.rgbToHex = function(r,g,b){
        return(r<<16 | g<<8 | b);
Math.hexToRGB = function(hex){
        var red = hex>>16;
        var grnBlu = hex-(red<<16)
        var grn = grnBlu>>8;
        var blu = grnBlu-(grn<<8);
        return({r:red, g:grn, b:blu});
// Check to see if an object2 has the same properties
// with the same values as those in object1
Color.prototype.transObjSame = function (obj1, obj2){
        for(var i in obj1){
                if(obj1[i] != obj2[i]){
                        return false;
        return true;
// PiXELWiT Color Prototypes
// http://www.pixelwit.com
// Just like setTransform but over a period of time
// func is called when desired transformation is reached
Color.prototype.fadeTransform = function(goalTrans, milSecs, func){
                if( this.transObjSame(goalTrans, this.v.goalTrans) ){
                        trace("Already going there");
                        return;// already heading to that trans obj so just wait
        var getTrans = this.getTransform();
        if(this.transObjSame(goalTrans, getTrans)){
                trace("already there");
                return;// already at that trans obj so don't bother
        this.v = {};
        this.v.goalTrans = goalTrans;
        this.v.milSecs = milSecs;
        if(typeof func == "function")this.v.func = func;
        this.v.startTime = getTimer();
        this.v.startTrans = getTrans;
        this.v.change = {};
        for(var i in goalTrans){
                this.v.change[i] = goalTrans[i]-this.v.startTrans[i];
                this.v.intrvl = setinterval(this, "transShift", 1);
Color.prototype.transShift = function(){
        var ratio = (getTimer()-this.v.startTime)/this.v.milSecs;
                var newTrans = {};
                for(var i in this.v.change){
                        newTrans[i] = this.v.startTrans[i]+ratio*this.v.change[i];
                var myFunc = this.v.func;
Color.prototype.fadeRGB = function(r, g, b, milSecs, func){
        var goalTrans = {ra:0, ga:0, ba:0, rb:r, gb:g, bb:b, aa:100, ab:0};
        this.fadeTransform(goalTrans, milSecs, func);
Color.prototype.fadeHex = function(goalHex, milSecs, func){
        var goalRGB = Math.hexToRGB(goalHex);
        this.fadeRGB(goalRGB.r, goalRGB.g, goalRGB.b, milSecs, func);
Color.prototype.fadeClearTrans = function(milSecs, func){
        var goalTrans = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
        this.fadeTransform(goalTrans, milSecs, func);

STEP2) Create a Color object referencing the clip you want to have change colors.

var myColorObj = new Color(SomeClip);

STEP3) Do either of the following if you want your clip to fade to orange over a 2 second time period:

A) myColorObj.fadeRGB(255, 128, 0, 2000);
B) myColorObj.fadeHex(0xFF8000, 2000);
C) myColorObj.fadeTransform({ra:0, rb:255, ga:0, bg:128, ba:0, bb:0, aa:100, ab:0}, 2000);

STEP4) Then if you'd like your target clip to return to it's initial state just do this:


That shouldn't be so tough. Paste prototypes; make a color object; pick a color and time; then kick back and relax while your colors fade smooth and trouble free. Yay prototypes!

While this may be enough information to satisfy some ActionScripters, others might like a more detailed explanation. If you're one of those people I encourage you to read on.