# 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.

Click each of the squares below to witness the magic

2 color linear

4 color linear

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();

// -- 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.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.

Posted in Actionscript | | 4 Comments

### 4 Responses to Hex & Gradient Tween Plugin for Eaze Tween

1. Jalava says:

Actually for really smooth color transition, you should convert rgb to hsb and then tween color in hsb space and then convert it back to rgb. This allows all properties of colors to be tweened smoothly without “ugly” intermediate colors.

2. Jeremy says:

@Jalava
Thanks for the suggestion. Know of any good resources for making those conversions?

3. Andrew Hargreaves says:

Great work! I love eaze and will try out your plugin. There have been several occasions where I wanted to do something like this.

4. Jeremy says:

@Andrew
Eaze is the jam! Hope you like the hex tween.