Color Transitions

The AS3 Color class contained in the package fl.motion makes smooth transitions between colors very easy via its interpolateColor method. The method is all we need in the applet below. Just choose colors from color pickers and then drag a slider to see gradual transitions.

Download

Download the very well-commented source fla file corresponding to the applet above:

Comments and Code

Below is the Timeline code for the Flash movie presented here and comments.

We placed an instance of the Slider component on the Stage, named 'slider' as well as two instances of the ColorPicker component named 'fromPicker' and 'toPicker'. Slider and ColorPicker events are not automatically imported. Thus, we import these event classes below. The Color class that resides in the package fl.motion needs to be imported as well.

import fl.events.SliderEvent;

import fl.events.ColorPickerEvent;

import fl.motion.Color;

We placed a MovieClip, 'clip' on the Stage. (The colored rectangle.) We will be asssigning 'color' property to the colorTransform property of clip.transform. In order to be able to do it, we create an instance of colorTransform, clipTransform. (The syntax: clip.transform.colorTransform.color=0x0000CC will not work.)

var clipTransform=new ColorTransform();

clipTransform.color=0x0000CC;

clip.transform.colorTransform=clipTransform;

Assigining a value to the 'color' property of colorTransform sets redMultiplier, greenMultiplier, and blueMultiplier to 0, and the redOffset, greenOffset, blueOffset values to the red, green and blue components of the assigned color. Alpha values are not affected.

slider.addEventListener(SliderEvent.CHANGE,sliderChange);

 

function sliderChange(e:SliderEvent):void {

var curVal:Number=e.target.value/255;

var fromColor:uint=fromPicker.selectedColor;

var toColor:uint=toPicker.selectedColor;

clipTransform.color=Color.interpolateColor(fromColor,toColor,curVal);

clip.transform.colorTransform=clipTransform;

}

We added a listener and a listener handler, sliderChange, to our instance of Slider named 'slider'. e.target.value reflects the current value of 'slider'. This value is dictated by the position of the slider's knob and the minimum and maximum values set in the Component Inspector for 'slider'. We set those values to 0 and 255. Thus, curVal is between 0 and 1.

When the user drags the slider, we read colors selected in our two instances (fromPicker and toPicker) of ColorPicker. Then we use the static method interpolateColor of the Color class.

The interpolateColor method takes the start color and the end color as the first two parameters. The third parameter, 'progress', must be between 0 and 1, and it shows how far we are on the way from the start color ('progress' 0) to the end color ('progress' 1). The method returns the numerical value of the in-between color.

The method interpolateColor is static. That means that you evoke the method without creating an instance of the Color class, simply by:

Color.interpolateColor(startcolor, endcolor, progress)

The last few lines of the code govern the functionality of our instances of ColorPicker and Slider.

fromPicker.addEventListener(ColorPickerEvent.CHANGE,pickerChange);

toPicker.addEventListener(ColorPickerEvent.CHANGE,pickerChange);

 

function pickerChange(e:ColorPickerEvent):void {

slider.value=0;

clipTransform.color=fromPicker.selectedColor;

clip.transform.colorTransform=clipTransform;

}

The listeners added to ColorPickers reposition the slider's knob and change the color of the clip to the color selected in 'fromPicker' as the user selects a new color in either picker.

Note: The initial value of ColorPicker.selectedColor property is a bit quirky. Regardless if you set it in the Component Inspector on the Stage or programmatically, it will stay at the default black until the event ENTER_FRAME fires for the second time.

How interpolateColor Method Works

The method uses linear interpolation. That is, the RGB components of the resulting color returned by

resulting_color = Color.interpolateColor(startcolor, endcolor, progress)

are given by the formulas:

resulting_color_red_component = (startcolor_red_component)+
         (endcolor_red_component - startcolor_red_component)*progress

and so on for green and blue components. You can re-create linear interpolation as well as create custom color transitions by manipulating RGB components of the colors directly. This is a subject for another How-To, however.

Related Tutorials on ColorTransform

Check out our other tutorials on the AS3 ColorTransform class that demonstrate the difference between manipulating ColorTransform's redOffset, greenOffset, blueOffset versus manipulating redMultiplier, greenMultiplier, blueMultiplier.

Back to AS3 How-Tos and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.