<?xml version="1.0" encoding="utf-8"?>

<s:Rect id="background" top="0" right="0" bottom="0" left="0" height="30">
    <s:fill>
        <s:SolidColor color="#000000"/>
    </s:fill>
    <s:fill.over>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="#FF5800" alpha="1.0" ratio="0"/>
            <s:GradientEntry color="#EE0202" alpha="1.0" ratio="1"/>
        </s:LinearGradient>
    </s:fill.over>
    <s:fill.down>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="#EE0202" alpha="1.0" ratio="0"/>
            <s:GradientEntry color="#AF0000" alpha="1.0" ratio="1"/>
        </s:LinearGradient>
    </s:fill.down>
</s:Rect>
<s:RichText id="labelDisplay" paddingLeft="10" paddingRight="10" textAlign="center" fontFamily="Myriad Pro" fontSize="16" tabStops="S0 S50 S100 S150" color="#FFFFFF" y="8" color.over="#000000" tabStops.over="S0 S50 S100 S150" color.down="#000000" tabStops.down="S0 S50 S100 S150" color.disabled="#EE0202" tabStops.disabled="S0 S50 S100 S150" color.up="#EE0202" tabStops.up="S0 S50 S100 S150">
    <s:filters>
        <s:DropShadowFilter includeIn="over" blurX="0" blurY="0" distance="1" hideObject="false" inner="false" color="#FFFFFF" strength="1" alpha="1" quality="2" knockout="false" angle="45.0"/>
        <s:DropShadowFilter includeIn="down" blurX="0" blurY="0" distance="1" hideObject="false" inner="false" color="#CCCCCC" strength="1" alpha="1" quality="2" knockout="false" angle="45.0"/>
        <s:BlurFilter includeIn="disabled" blurX="4.0" blurY="4.0" quality="2"/>
    </s:filters>
</s:RichText>

here is the code, I would like to make a smooth transition when enters the "over" state. any help?