• Articles and Tutorials
• Contact

Color change animation with AS3

In this Flash actionscript tutorial you will learn about colors and the colortransform class and how to use it to make an animated colortransision and apply it to an object.

I'm not sure if this effect will do anything for you by it self, but I belives this tutorial will give a better understanding of how to make eventlisteners, make buttons work, create your own functions in flash and much more.

Hope you enjoy it.

So now you have seen how the final result will be (just above this text :-) When you hit the button "Do" it will make a color transision animation.

So first we have to prepare some movieclips, the first one will be the movieclip containing the object we want to animate, so make some object on the stage, I just made some weird object, right click it and convert it to a movie clip symbol.

In the properties panel give it an instance name, I named mine "myBox".

The next thing is to make a button to "activate" the animation effect.

So make a new shape on the stage to repersent the button, right click and convert to a movieclip NOT a button symbol, I dont use them anymore :-) as you might know from a previous tutorial of mine.

In the properties panel give it an instance name, I named mine "myBtn".

Thats all in the interface, now we have a couple of lines to write in the actionscript panel, so open up the actionscript panel and type in the following code, I have made the description text inline with the code, starting with "//" so you can just copy and paste the code into your flash project.

// This line defines a variable of type ColorTransform and naming it colorTransform 
var colorTransform:ColorTransform = new ColorTransform();

// Adding an eventlistener to my button to "envoke" the doAnimate_ function when the button is clicked 
myBtn.addEventListener(MouseEvent.CLICK, doAnimate_);

// here is what happens when the button is clicked 
function doAnimate_(event:Event):void
{
    // the colorTransform get a redOffset, we set it to -255 because the values goes from -255 to +255,
    // so the transistion will be adding 10 to the value -255 and so on untill we get 255 which is max. 
    colorTransform.redOffset = -255;
    
    // Now adding an eventlistener to the stage, an enterframe event, to call the function doAnimate.
    // Remember the enter_frame event is called as many times per second as the fps is set to in the flash settings (usually 12 frames per second). 
    this.addEventListener(Event.ENTER_FRAME, doAnimate);
}

// The function here to do the animation 
function doAnimate(event:Event):void
{
    // This is what happens in the animation, first we add 10 to the redoffset value, this is done 12 times a second.
    // so that is 120 in offset per second. 
    colorTransform.redOffset += 10;
    
    // Now we "attach" the colortransform to our object (myBox), without this there will be no effect. 
    myBox.transform.colorTransform = colorTransform;
}