Color Transition with AS3

Posted by Stephan Kristyn on December 13th, 2009 / No Comments

If you want to tween any MovieClip in Flash from one Color to another you will discover that the current transition classes by Flash don’t support tweening properties apart from alpha channel, position and size.

You now have 2 options: Write the classes yourself or hope that somebody else did write them already. But luckily you don’t have to invent the wheel twice.
You might want to try the Caurina Tweener Classes hosted at Google Code. http://code.google.com/p/tweener/

This task would have taken me 50 to 100 lines of code at least, since you need to convert Hex to RGB values and calculate Color Multipliers and apply every new resulting Color one by one to a unique frame via transform.ColorTransform(); of your MovieClip.

With tweener it’s a simple one liner:

Tweener.addTween(myMovieClipName,{_color: 0xc5ce8a, time: 1, transition:"easeOut"});

That underscore before _color is not just another depreciated AS2 specific property, its from Tweener’s classes and you have to use it even in AS3.

As the more advanced Actionscripter might notice, Tweener is a static class and you can’t instantiate any objects from it, but you can tell Tweener what to do with your own objects and any of its properties. The resulting motion tween doesn’t have to be linear movement with its artificial look. Tweener is better than that: you can apply Penner’s Easing equations.

In my above example I used a simple accelerated movement called easeOut. It will create a accelerated motion between your Object’s given color and the Color C5Ce8a. Which happens to be nice greenish tint.