[AS3/AS2 only] Although hex colors are technically numbers, if you try to tween them conventionally, you'll notice that they don't tween smoothly. To tween them properly, the red, green, and blue components must be extracted and tweened independently. The HexColorsPlugin makes it easy. To tween a property of your object that's a hex color to another hex color, just pass a hexColors Object with properties named the same as your object's hex color properties. For example, if myObject has a "myHexColor" property that you'd like to tween to red (0xFF0000) over the course of 2 seconds, you'd do:

TweenMax.to(myObject, 2, {hexColors:{myHexColor:0xFF0000}});

You can pass in any number of properties.


import com.greensock.TweenLite; 
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.HexColorsPlugin;
TweenPlugin.activate([HexColorsPlugin]); //activation is permanent in the SWF, so this line only needs to be run once.
TweenLite.to(myObject, 2, {hexColors:{myProperty:0xFF0000}});

Or if you just want to tween a color and apply it somewhere on every frame, you could do:

var myColor:Object = {hex:0xFF0000};
TweenLite.to(myColor, 2, {hexColors:{hex:0x0000FF}, onUpdate:applyColor});
function applyColor() {
    mc.graphics.beginFill(myColor.hex, 1);
    mc.graphics.drawRect(0, 0, 100, 100);


Version: 2.1.3 updated 2019-05-18




        By using GreenSock code, you agree to the terms of use.

        Help support GreenSock by becoming a member

        Join Club GreenSock