Using the AnimateColor effect to animate the content background color of a Spark TextInput control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_contentBackgroundColor_AnimateColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html">
 
    <fx:Script>
        <![CDATA[
            private function textInput_focusIn(evt:FocusEvent):void {
                colorEffect.play([evt.currentTarget]);
            }
 
            private function textInput_focusOut(evt:FocusEvent):void {
                colorEffect.stop();
                evt.currentTarget.setStyle("contentBackgroundColor", "white");
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:AnimateColor id="colorEffect"
                colorPropertyName="contentBackgroundColor"
                colorFrom="0xFFFFFF"
                colorTo="0xFF0000"
                repeatBehavior="reverse"
                repeatCount="0"
                duration="500" />
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:TextInput id="textArea1"
                text="The quick brown fox jumps over the lazy dog."
                focusIn="textInput_focusIn(event);"
                focusOut="textInput_focusOut(event);" />
        <s:TextInput id="textArea2"
                text="The quick brown fox jumps over the lazy dog."
                focusIn="textInput_focusIn(event);"
                focusOut="textInput_focusOut(event);" />
        <s:TextInput id="textArea3"
                text="The quick brown fox jumps over the lazy dog."
                focusIn="textInput_focusIn(event);"
                focusOut="textInput_focusOut(event);" />
    </s:VGroup>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/06/using-the-fxanimatecolor-effect-to-animate-the-content-background-color-of-a-fxtextinput-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextInput_contentBackgroundColor_AnimateColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.validators.Validator;
            import mx.events.ValidationResultEvent;
 
            private function validateAll():void {
                colorEffect.stop();
                var results:Array = Validator.validateAll(validatorArr);
                if (results.length == 0) {
                    Alert.show("SUCCESS");
                } else {
                    var targetArr:Array = [];
                    var result:ValidationResultEvent;
                    for each (result in results) {
                        targetArr.push(result.currentTarget.source);
                    }
                    colorEffect.play(targetArr);
                }
            }
 
            private function textInput_invalid(trgt:Object):void {
                trgt.setStyle("contentBackgroundColor", "red");
            }
 
            private function textInput_valid(trgt:Object):void {
                trgt.setStyle("contentBackgroundColor", "white");
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:AnimateColor id="colorEffect"
                colorPropertyName="contentBackgroundColor"
                colorFrom="0xFFFFFF"
                colorTo="0xFF0000"
                repeatBehavior="reverse"
                repeatCount="0"
                duration="500" />
 
        <fx:Array id="validatorArr">
            <mx:StringValidator id="validator1"
                    source="{textInput1}"
                    property="text"
                    tooShortError="This string is shorter than the minimum allowed length of 4."
                    tooLongError="This string is longer than the maximum allowed length of 20."
                    minLength="4"
                    maxLength="20"
                    valid="textInput_valid(event.currentTarget.source);"
                    invalid="textInput_invalid(event.currentTarget.source);" />
            <mx:StringValidator id="validator2"
                    source="{textInput2}"
                    property="text"
                    tooShortError="This string is shorter than the minimum allowed length of 4."
                    tooLongError="This string is longer than the maximum allowed length of 20."
                    minLength="4"
                    maxLength="20"
                    valid="textInput_valid(event.currentTarget.source);"
                    invalid="textInput_invalid(event.currentTarget.source);" />
        </fx:Array>
    </fx:Declarations>
 
    <mx:Form id="frm"
             horizontalCenter="0"
             verticalCenter="0">
        <mx:FormItem label="Username:" required="true">
            <s:TextInput id="textInput1" maxChars="20" />
        </mx:FormItem>
        <mx:FormItem label="Password:" required="true">
            <s:TextInput id="textInput2" maxChars="20" />
        </mx:FormItem>
        <mx:FormItem label="Email:">
            <s:TextInput id="textInput3" maxChars="20" />
        </mx:FormItem>
        <mx:FormItem>
            <s:Button id="btn"
                    label="Validate!"
                    click="validateAll();" />
        </mx:FormItem>
    </mx:Form>
 
</s:Application>