Create cool color transition button in Flex

In this article I want to shows how to create color transition button by fading the background color of an element in Flex .  In order to make the button more attractive, I added some effects like drop shadow, bevel and glow.

//colorAnimaton.as
package com.foxarc
{

import mx.effects.AnimateProperty;
import com.foxarc.instance.colorAnimationInstance;
import mx.effects.IEffectInstance; 

public class colorAnimation extends AnimateProperty
{
 
 public function colorAnimation(target:Object = null)
 {
  super(target);  
  instanceClass = colorAnimationInstance;
 }
 
 
 override protected function initInstance( instance:IEffectInstance ):void
 {
  super.initInstance( instance );
  
  var animationInstance:colorAnimationInstance = colorAnimationInstance( instance );

  animationInstance.fromValue = fromValue;
  animationInstance.toValue = toValue;
  animationInstance.property = property;
  animationInstance.isStyle = isStyle;
  animationInstance.roundValue = roundValue;
 }
 
}
}

//colorAnimatonInstance.as
package com.foxarc.instance
{
 import mx.effects.effectClasses.AnimatePropertyInstance;
 
 public class colorAnimationInstance extends AnimatePropertyInstance
 {
 protected var startValues:Object;;
 protected var delta:Object;

 public function colorAnimationInstance( target:Object )
 {
  super( target );
 }
 
 public function intToRgb( color:int ):Object
 {
  var r:int = ( color & 0xFF0000 ) >> 16;
  var g:int = ( color & 0x00FF00 ) >> 8;
  var b:int = color & 0x0000FF;
  return {r:r, g:g, b:b};
 }
 
 override public function play():void
 {
  
  super.play();
  
  startValues = intToRgb( fromValue );
  var stopValues:Object = intToRgb( toValue );
  delta = {
     r: ( startValues.r - stopValues.r ) / duration,
     g: ( startValues.g - stopValues.g ) / duration,
     b: ( startValues.b - stopValues.b ) / duration
    };
  
 }
 
 override public function onTweenUpdate( value:Object ):void
 {
  if ( delta == null )
  {
   return;
  }
  
  var playheadTime:int = this.playheadTime;
  if ( playheadTime > duration )
  {
   playheadTime = duration;
  }
  
  var colorValue:int = ( ( startValues.r - playheadTime * delta.r ) << 16 )
       + ( (startValues.g - playheadTime * delta.g ) << 8 )
       + ( startValues.b - playheadTime * delta.b );
  
  if ( !isStyle )
  {
   target[ property ] = colorValue;
  }
  else
  {
   target.setStyle( property, colorValue );
  }
 }
 
}
}

//colorTransitionSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:ds="com.foxarc.*"
 creationComplete="initButton()">
 <mx:Script>
  <![CDATA[
   import mx.controls.Button;
   import mx.core.UITextField;   
   use namespace mx_internal;
      
   private function initButton():void
   {
    var button:Button = (parent as Button);
    this.filters = [dropshadow];
   }
   
  ]]>
 </mx:Script>
 
 <mx:states>
  
        <mx:State name="over">
         <mx:SetProperty target="{this}" name="filters" value="{[dropshadow]}"/>                   
        </mx:State>
        <mx:State name="down">
         <mx:SetProperty target="{this}" name="filters" value="{[bevel]}"/>
         <mx:SetProperty target="{this}" name="filters" value="{[glow]}"/>
        </mx:State>
   <mx:State name="up">
   <mx:SetProperty target="{this}" name="filters" value="{[dropshadow]}"/>
        </mx:State>
    
    </mx:states>
   
   
  <mx:DropShadowFilter id="dropshadow" angle = "45" alpha="0.5" quality="2" blurX="4" blurY="4"/>
 <mx:BevelFilter id="bevel" angle="90" highlightColor="0xffffff"
  shadowAlpha="0" strength="2" quality="2" distance="10" highlightAlpha="0.6"/>
 <mx:GlowFilter id="glow" color="#3c60c3" alpha="0.5" />
 
 <mx:transitions>
  <mx:Transition id="mouseOver" fromState="*" toState="over">
   <ds:colorAnimation target="{this}" property="backgroundColor"
    isStyle="true"  toValue="0xe8cf20"  duration="200" />
  </mx:Transition> 
  <mx:Transition id="mouseDown" fromState="*" toState="down">
   <ds:colorAnimation target="{this}" property="backgroundColor"
    isStyle="true"  toValue="0x3cf031"  duration="200" />
  </mx:Transition>
  <mx:Transition id="mouseUp" fromState="*" toState="up">
   <ds:colorAnimation target="{this}" property="backgroundColor"
    isStyle="true"  toValue="0xc04f3b"  duration="200" />
  </mx:Transition>
 </mx:transitions>
 
</mx:Canvas>
 

//colorTransitionButton.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xE0E0E0" layout="absolute" width="400" height="120">
 <mx:Style source="style.css"/>
 <mx:Button label="Flex Color Transition Button" x="50" y="30" /> 
</mx:Application>

//style.css

 Button{
 skin: ClassReference("colorTransitionSkin");
 fontSize:16;
 fontWeight:normal;
 paddingLeft:10;
 paddingRight:10;
 paddingTop:5;
 paddingBottom:5;
 color:#ffffff; 
 borderThickness:1;
 borderColor:#e0e0e0;
 borderStyle:solid;
 backgroundColor:#4f2ca0;
 cornerRadius:5;
 
}