Flex Gumbo中如何给FxTextInput背景颜色增加FxAnimateColor效果的例子

By Minidxer | July 22, 2009

接下来的例子演示了Flex Gumbo中如何给FxTextInput背景颜色增加FxAnimateColor效果。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0"?>
  2. <FxApplication name="FxTextInput_contentBackgroundColor_FxAnimateColor_test"
  3.         xmlns="http://ns.adobe.com/mxml/2009"
  4.         backgroundColor="white">
  5.     <layout>
  6.         <BasicLayout />
  7.     </layout>
  8.  
  9.     <Script>
  10.         <![CDATA[
  11.             private function textInput_focusIn(evt:FocusEvent):void {
  12.                 colorEffect.play([evt.currentTarget]);
  13.             }
  14.  
  15.             private function textInput_focusOut(evt:FocusEvent):void {
  16.                 colorEffect.stop();
  17.                 evt.currentTarget.setStyle("contentBackgroundColor", "white");
  18.             }
  19.         ]]>
  20.     </Script>
  21.  
  22.     <Declarations>
  23.         <FxAnimateColor id="colorEffect"
  24.                 colorPropertyName="contentBackgroundColor"
  25.                 colorFrom="0xFFFFFF"
  26.                 colorTo="0xFF0000"
  27.                 repeatBehavior="reverse"
  28.                 repeatCount="0"
  29.                 duration="500" />
  30.     </Declarations>
  31.  
  32.     <VGroup horizontalCenter="0" verticalCenter="0">
  33.         <FxTextInput id="textArea1"
  34.                 text="The quick brown fox jumps over the lazy dog."
  35.                 focusIn="textInput_focusIn(event);"
  36.                 focusOut="textInput_focusOut(event);" />
  37.         <FxTextInput id="textArea2"
  38.                 text="The quick brown fox jumps over the lazy dog."
  39.                 focusIn="textInput_focusIn(event);"
  40.                 focusOut="textInput_focusOut(event);" />
  41.         <FxTextInput id="textArea3"
  42.                 text="The quick brown fox jumps over the lazy dog."
  43.                 focusIn="textInput_focusIn(event);"
  44.                 focusOut="textInput_focusOut(event);" />
  45.     </VGroup>
  46.  
  47. </FxApplication>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: FxTextInput, Gumbo | 1 Comment » | Tags: ,

你可能还对下列文章感兴趣:

One comment | Add One

  1. getelee - 08/3/2009 at 6:09 pm

    Hi, How can I change the selection chars BackgroundColor?
    Ths.

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll