Add Comment

Fading the backgroundAlpha of a Flex Element

Flex / ColdFusion Tutorial #17

Using the AnimateProperty object, you can do some great effects on various properties of an object. The following code is a Flex application that animates the background alpha of a canvas for a smooth background fade-in and fade-out:

BackgroundAlpha.mxml

The AnimateProperty objects allow you to select the value you want to change and the duration of that change. Simply set the property to the value you want to change, in this case the backgroundAlpha, the fromValue and toValue attributes and then the duration. Since backgroundAlpha is a stlye of the canvas, you need to make sure to set the isStyle="true".

The slider allows you to change the duration of the AnimateProperty from 250 ms to 3000 ms. While not very practical, the 3 second duration shows how you can provide a range of options in the slider.

BackgroundColors.cfc

The RemoteObject is a call to a ColdFusion remote function that manually creates a query of colors for me to choose from. This could easily be modified to query information from a database.

Demo

See this code running!

Download

Download this code as a zip!

Comments

There are no comments!

Click button to add a comment

Author

Chris Schofield

Published

Monday 16 Mar 2009

Original

This tutorial has been modified and published with permission of the author. The original tutorial can be found here
http://www.chrisschofield.com/cmsblog/client/index.cfm/2009/3/9/Fading-the-backgroundAlpha-of-a-Flex-Element