Hex & Gradient Tween Plugin for Eaze Tween

First off, if you haven’t used Eaze by Philippe Elsass, I highly recommend that you take it for spin. It is a great tween engine with a unique syntax and very good performance. It has support for tweening filters, tinting, Bezier tweens, auto-alpha and more.

It seems simple enough to tween from one hex value to another. After all they are just numbers right? Not exactly. As you may already know, a hex value representing a color contains three individual values ( and sometimes a fourth for alpha, which we are not concerned with ), one for each color channel ( RGB ). To create a smooth transition from one gradient to another, you need to isolate each color channel in the hex value and tween it independently.

I did a little research into how this might be done. I hit Stack Overflow and found some helpful info from none other than my pal Zach Archer. Ultimately, the snippets in Zach’s answer led me to the solution, which I then turned into a plugin for Eaze.

Download Plugin Source Code Here
Copy & Paste @ gist.github

Click each of the squares below to witness the magic

2 color linear

2 color radial

4 color linear

4 color radial

Now for a little implementation
Before using this class, you need to do two things. First, add it to the specials folder located at aze/motion/specials. Second, in the eaze class you will need to add this line to the list of imports:

import aze.motion.specials.PropertyHex; PropertyHex.register();

To create gradients like those above, the basic concept is to use two generic objects, one as the target and one as the destination and a sprite to draw the shape into:

var target:Object = {};
var colors:Object = { a: 0xFF0000, b: 0x00FF00 };
var shape:Sprite = new Sprite();

You will also need a method that draws the shape, such as the following:

protected function draw():void 
{
	var g:Graphics = shape.graphics;
	var w:int = 300;
	var h:int = 300;
	var matrix:Matrix = new Matrix();
			
	g.clear();
			
	matrix.createGradientBox( w, h );

        // -- draw the values in the 'colors' array because those are being tweened
        // -- make sure the lengths of alphas and ratios match the number of colors
	g.beginGradientFill( GradientType.RADIAL, [ colors.a, colors.b ], [ 1, 1 ], [ 0, 255 ], matrix );
			
	g.drawRect( 0 , 0, w, h );
	g.endFill();
}

Lastly you need to set the target values, invoke the tween and add the draw() method to the onUpdate callback:

target.a = 0xFFCC00;
target.b = 0x0000FF;
eaze( colors ).to( 1, { hex: target } ).onUpdate( draw );

Note that in the to() method, a generic object with a property called “hex” is supplied. You must use the keyword “hex”. This tells the tween engine to look for a the class registered as “hex”. The value for the hex property is the target object.

You can use as many colors as you’d like. The smoothest transitions are those that have the same number of colors in both color objects.