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

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

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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>

View source is enabled in the following example.

[GoogleAdsWide]

You can also animate the content background color on a Spark TextInput control in Flex 4 by using validators, as seen in the following example:

<?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>

View source is enabled in the following example.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

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

  1. I wonder why when you give very helpful tips in flex 3 you also show the swf file in the post, except for Gumbo posts?

  2. Joseph,

    The Gumbo posts will all need to be updated after the Fx prefix is removed. So I didn’t want to create/upload a bunch of SWFs and then recreate them all in the future. I’m planning on adding SWFs to these older examples (time permitting) when I update them all later after the big API renaming. For more information on the “Dropping the Fx Prefix” page on the Flex Gumbo page on the opensource.adobe.com website.

    Peter

Comments are closed.