Fade from one color to another–Animating Color Transitions in Flex

June 22nd, 2008 Ntt.cc
  

block-device-128x128 We will need to fade our applications background color from one value to the next like 0xC58D31 to 0×87FEE9. Fading the background color of an element means that you gradually change that element’s background color from one color to another. This effect is useful for many things especially when we update a web page without reloading it because it gives you a way to draw attention to the area of the web page that has been updated so the user doesn’t miss it.It is not difficult for DHTML or JavaScript, but how to do it in Flex? The following shows how to make the background of your pages fade from one color to another in flex.

Search-256x256 Demo  |  View source 

AnimateColorEffect 
  ( Project Source File Struct)

Source Code:

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
  3.    
  4.     <!--
  5.         The animate color effect that takes a from value, to value, and a duration
  6.         and smoothly transitions the color values in between.
  7.     -->
  8.     <ds:AnimateColor xmlns:ds="com.effects.*"
  9.         id="fadeColor" 
  10.         target="{box}"
  11.         property="backgroundColor" isStyle="true" 
  12.         fromValue="{startColor.selectedColor}" 
  13.         toValue="{stopColor.selectedColor}" 
  14.         duration="4000" />
  15.  
  16.     <mx:Panel title="Animate Color Demo" width="100%" height="100%"
  17.         paddingLeft="5" paddingRight="5" paddingBottom="5" paddingTop="5">
  18.        
  19.         <mx:HBox verticalAlign="middle">
  20.             <mx:Label text="Start Color:" />
  21.             <mx:ColorPicker id="startColor" selectedColor="0xC47D31" />
  22.  
  23.             <mx:Spacer width="10" />
  24.  
  25.             <mx:Label text="Stop Color:" />
  26.             <mx:ColorPicker id="stopColor" selectedColor="0x67DEF9" />
  27.            
  28.             <mx:Spacer width="10" />
  29.            
  30.             <mx:Button label="Go!" click="fadeColor.play();" />
  31.         </mx:HBox>
  32.        
  33.         <mx:VBox width="100%" height="100%" id="box" borderStyle="solid"/>
  34.     </mx:Panel>
  35.    
  36. </mx:Application>
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Posted in Flex Tags: , , , , 10,615 views
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us

You might also want to read...

«
»
You can leave a response, or trackback from your own site.

6 Responses to “Fade from one color to another–Animating Color Transitions in Flex”

  1. Animating-Color-Transitions-in-Flex says:
    June 24, 2008 at 11:23 am

    [...] 本文和代码全部来自http://ntt.cc/2008/06/22/fade-from-one-color-to-another-animating-color-transitions-in-flex.html [...]

    Reply
  2. Daniel Neri says:
    June 27, 2008 at 6:05 am

    Great stuff!

    One question though, how to do make it so it fades to nothing? so it actually just fades out?

    Reply
  3. Daniel Neri says:
    June 27, 2008 at 6:32 am

    Nevermind – resolved with mx:fade

    Reply
  4. Nate says:
    February 27, 2009 at 3:30 pm

    Very elegant implementation – thanks!

    Reply
  5. Mike Robinson says:
    July 10, 2009 at 4:43 am

    Really a nice implementation. Thanks for making it available.

    Reply
  6. charis says:
    September 4, 2009 at 12:06 pm

    Good post – a good resource I came accross. I would like to suggest an photo effect program somehow related.

    Reply

Leave a Reply