Tweening colors using Color.interpolateColor

I have been looking for a long time for a way to tween colors in Flash and while browsing around I came across the Color class and the interpolateColor method. I then wanted to see how it worked. It is not that obvious so here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import fl.motion.Color;
import flash.events.*;
import flash.geom.ColorTransform;
 
var simpleSprite:Sprite = new Sprite();
simpleSprite.x = 100;
simpleSprite.y = 100;
simpleSprite.graphics.lineStyle();
simpleSprite.graphics.beginFill(0xff0000);
simpleSprite.graphics.drawRect(0,0,200,100);
addChild(simpleSprite);
 
// Get access to the ColorTransform instance associated with our sprite.
var colorInfo:ColorTransform = simpleSprite.transform.colorTransform;
// This function is called when the stage is clicked.
function makeBlue(event:MouseEvent):void
{
  var tempMovie:Sprite = new Sprite();
  var alphaOver:Tween = new Tween(tempMovie, "alpha", Strong.easeOut,0, 1, 8, true);
  alphaOver.addEventListener(TweenEvent.MOTION_CHANGE, tweenToBlue);
}
function tweenToBlue(event:TweenEvent):void{
  // apply the change to the display object
  colorInfo.color = Color.interpolateColor(0xff0000, 0x003399, event.position);
  simpleSprite.transform.colorTransform = colorInfo;
}
stage.addEventListener(MouseEvent.CLICK, makeBlue);

The first block of code is to import all that is needed to do our Tweening. The two classes that are of importance are the fl.motion.Color and flash.geom.ColorTransform.

In the second block of code, I create the Sprite that I will do the tweening on and draw a red rectangle in it using the graphics.drawRect method.

After that, it’s the listening function to the mouse event CLICK on the stage. This function create a new Sprite that will never be displayed. Its sole purpose will be to use its properties to do our Tween. Then we create our Tween as we would normally and we add a listener for the MOTION_CHANGE event.

All the good stuff happens in the next function; tweenToBlue. It is here that we use the static method interpolateColor of the Color class. We use the event’s position to give us the place where the Tween is at. That is why in our Tween as to have the start parameter as to be 0 and the end parameter as to be 1. We than apply to colorTransform to our Sprite.

, , ,

  1. #1 by Phil Barbato - October 25th, 2007 at 10:24

    I’ve been trying to use the setTint method of the color class, and Flash keeps telling me that theres a migration issue and that the property Color is no longer supported. Have you seen that before?

  2. #2 by dgelineau - October 25th, 2007 at 13:26

    I don’t know how you used your setTint, but you should use it in this way:
    var color:Color = new Color();
    color.setTint(0x00ff00, 1);
    simpleSprite.transform.colorTransform = color;
    Maybe I’ll make a post about that method also.

  3. #3 by Jack - April 11th, 2008 at 11:44

    Some people don’t want/need a full-blown tweening engine to do this stuff, so your article is really helpful, especially in understanding the mechanics behind tweening a color. Writing code this way keeps file size down too (compared to using a full-blown tweening engine).

    For those who prefer to let a tweening engine do the work for you, I figured I’d let you know that the newly released TweenMax engine will tween hex colors for you. TweenLite has always been able to tween the tint of a MovieClip/DisplayObject with a single line of code, but TweenMax can do custom hex color properties too. http://www.TweenMax.com for more info.

    Cheers

  4. #4 by Ademar - March 21st, 2011 at 16:28

    Thank you very much! Helped me a lot. I’m going to use it at my site.
    .
    Muito obrigado. Ajudou bastante. Vou usar no meu site.

  5. #5 by Shy - July 1st, 2011 at 03:20

    I figured I’d let you know that the newly released TweenMax engine will tween hex colors for you.Anyway, thanks for sharing.

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.