Color.interpolateColor - create color transition

[Flep]

Hello!

This Flash tutorial explains how to apply color transitions to a MovieClip using the static method interpolateColor of the Color class in Actionscript 3.0.
As an example, we could want to change the background color based on the chosen section. Or we could want to create buttons which on chosen mouse event make a color transition.

Let us see how to do it"

I create a FLA and I save it as "main.fla".
With the following code, I draw and create a MovieClip of a square shape and on click on stage, I perform a color transition of the MovieClip itself.

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;
import fl.motion.Color;
import flash.events.Event;
import flash.geom.ColorTransform;

var start_color:uint=0xCCFF00;
var final_color:uint=0x003399;
var clip_mc:MovieClip=new MovieClip();
clip_mc.graphics.beginFill(start_color,1);
clip_mc.graphics.drawRect(100,100,100,100);
clip_mc.graphics.endFill();
addChild(clip_mc);

 
var colorInfo:ColorTransform=clip_mc.transform.colorTransform;
function initTween(event:MouseEvent):void
{
	var my_tween:Tween=new Tween(clip_mc,'alpha',Strong.easeOut,0,1,1,true);
	my_tween.addEventListener(TweenEvent.MOTION_CHANGE,tweenToFinal);
}
function tweenToFinal(event:TweenEvent):void
{
	colorInfo.color=Color.interpolateColor(start_color,final_color,event.position);
	clip_mc.transform.colorTransform=colorInfo;
}
stage.addEventListener(MouseEvent.CLICK,initTween);

The result (click on stage):

Lee us analyse the code

I import the needed classes:
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;
import fl.motion.Color;
import flash.events.Event;
import flash.geom.ColorTransform;

I create two uint type variables containing respectively the initial and final color
var start_color:uint=0xCCFF00;
var final_color:uint=0x003399;
I create a new MovieClip and into it, I draw a colored square based on the value of start_color
var clip_mc:MovieClip=new MovieClip();
clip_mc.graphics.beginFill(start_color,1);
clip_mc.graphics.drawRect(100,100,100,100);
clip_mc.graphics.endFill();
I add clip_mc to the stage
addChild(clip_mc);

I create a ColorTransform type variable and I assign to it the colorTransform from the transform property of clip_mc
var colorInfo:ColorTransform=clip_mc.transform.colorTr ansform;

I create a function that will be called when the mouse is clicked
function initTween(event:MouseEvent):void
{
I create a new Tween and I pass to it the parameters that I want
var my_tween:Tween=new Tween(clip_mc,'alpha',Strong.easeOut,0,1,1,true);
I add a listener to my_tween to the event MOTION_CHANGE which will call the function tweenTofinal
my_tween.addEventListener(TweenEvent.MOTION_CHANGE ,tweenToFinal);
}

function tweenToFinal(event:TweenEvent):void
{
I assign to the property color of the variable colorInfo (of ColorTransform type), the value obtained calling the static method interpolateColor of the color class, passing to it a initial color, a final color and the value at the moment of the tween (event.position) which will go progressively from 0 to 1.
colorInfo.color=Color.interpolateColor(start_color ,final_color,event.position);
I assign the color to clip_mc still using the colorTransform of its transform property
clip_mc.transform.colorTransform=colorInfo;
}
I add the listener to the stage to the event CLICK
stage.addEventListener(MouseEvent.CLICK,initTween) ;

See you soon!

[Flep]

Anyway, my suggestion is to use caurina Tweener:

Caurina Tweener by Zeh Fernando - tutorial 1

[Ella7]

Hello Flep, thank you for the tutorial.

I have though one question:

I noticed that although there is an alpha tween in place that eventually trigger the color blend, the alpha doesn't change, it stays 1 all the time. Why is that?

Does the interpolateColor method set the alpha automatically to 1? I guess this must be because otherwise it makes no sense...

Thank you,
Ella