Using the AnimateColor effect to animate the background color of a RadioButton control in Flex 4.5

 

The following example shows how you can use the AnimateColor effect to animate the background color on a RadioButton control in Flex 4.5.

 <?xml version="1.0" encoding="utf-8"?>  
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"   
                  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  
      <fx:Script>  
           <![CDATA[  
                import mx.utils.object_proxy;  
                private function option_focusIn(evt:FocusEvent):void {  
                     colorEffect.play([evt.currentTarget]);  
                }  
                private function option_focusOut(evt:FocusEvent):void {  
                     colorEffect.stop();  
                     evt.currentTarget.opaqueBackground="0xFFFFFF";  
                }  
           ]]>  
      </fx:Script>  
      <fx:Declarations>  
           <s:AnimateColor id="colorEffect"  
                               colorPropertyName="opaqueBackground"  
                               colorFrom="0xFFFFFF"  
                               colorTo="0xFF0000"  
                               repeatBehavior="reverse"  
                               repeatCount="0"  
                               duration="500" />  
      </fx:Declarations>  
      <s:VGroup horizontalCenter="-264" verticalCenter="-214">  
           <s:Label width="100%" color="blue"  
                      text="How many Pillars of Islam?"/>  
           <s:RadioButton id="option1"  
                           label="2"  
                           focusIn="option_focusIn(event);"  
                           focusOut="option_focusOut(event);" />  
           <s:RadioButton id="option2"  
                           label="3"  
                           focusIn="option_focusIn(event);"  
                           focusOut="option_focusOut(event);" />  
           <s:RadioButton id="option3"  
                           label="5"  
                           focusIn="option_focusIn(event);"  
                           focusOut="option_focusOut(event);" />  
      </s:VGroup>  
</s:Application>