December 09, 2006
Animating Color Transitions in Flex 2
A thread surfaced on FlexCoders where someone was trying to animate colors using the AnimateProperty tag, but wasn't having any luck. I've done this type of thing before, and thought I'd share my solution with the Flex community.
Three years ago I wrote an entry about scripting color transitions in ActionScript 1. Using the same basic technique, I've updated the code to ActionScript 3.0 and made a new effect available in Flex 2 to make the process simple, namely AnimateColor.
Usage is as follows:
<ds:AnimateColor xmlns:ds="com.darronschall.effects.*" id="fadeColor" target="{someTarget}" property="backgroundColor" isStyle="true" fromValue="0xFF0000" toValue="0x00FF00" duration="4000" />
The AnimateColor tag behaves the same as the AnimateProperty tag. The idea is that you pass in a desired end color value, and optional start color value (that defaults to the current color), and a duration. The tag, then, calculates all of the intermediate colors and applies them to the target property. The result is a smooth color transition, rather than the flicker of colors that happens if you use AnimateProperty to animate color transitions.
I've uploaded a demo of AnimateColor in action, and made it View-Source enabled. Right click in the .swf after it loads to view the source and download the code in .zip file. Everything is released under the MIT License.
Enjoy!
Tags: Flex 2
Comments
Keep up the great work!
Posted by: Marcus at December 12, 2006 07:40 PM
I'm getting a compile error trying to compile your color demo... any suggestions?
Severity Description Resource In Folder Location Creation Time Id
2 1023: Incompatible override. AnimateColor.as AnimateColorDemo/com/darronschall/effects line 53 December 27, 2006 10:52:30 AM 141135
Posted by: Patrick at December 27, 2006 02:03 PM
Are you.. uhm... perhaps using an unreleased version of Flex... say, maybe 2.0.1... that might.. uhm... possibly change the required method signature of the initInstance method of Animatecolor (EffectInstance to IEffectInstance)?
I'll release an updated version when the new version of Flex is released. ;-)
Posted by: darron at December 27, 2006 02:16 PM
I've updated the effect for Flex 2.0.1 - http://www.darronschall.com/weblog/archives/000254.cfm
The demo has been updated, so if you right click and view source you'll get the updated code. If you're still using Flex 2.0, consider upgrading! If not, change IEffectInstance in the initInstance method signature back to EffectInstance.
Posted by: darron at January 8, 2007 08:30 AM