Tuesday, September 14, 2010

Flex 4 Busy Indicator Component

I wrote up a pretty simple component that you can use to wrap your data displays to indicate data is being loaded/refreshed. The base component extends SkinnableContainer and has only one property named "busy". Set busy to true to show the animation and set to false to hide.
The real magic happens in the Skins. All three Skins that I have provided support two CSS properties, source and scale. Set the source to an SWF and set scale to true or false.
You can easily customize the skins to whatever look and feel you would like. I have provided three. The first one with a simple pulsating red glow on a dark background. The second one has no glow and a light background. The third is pretty much the same as the first but with a green glow.
You could even create a skin that displayed a static image instead of displaying a animated SWF. The BusyIndicator base component doesn't care what gets displayed.

Before I forget I did not create the flash animations. The wonderful person at DesignSwan.com created them. Here is the link to them:
18 Flash Loading Animations
I only parted the animations into separate SWF files and I added a few lines of code so I could stop the animation when it was invisible on the screen. Each one of the fla files is included in the source under the flash files folder.
In the example below I am also using the Flex 4 resize controls that you can find from here on the TitleWindow to demonstrate that the animation can be scaled.

Here's the example. Use the ComboBox control to switch between animations. (right click to view source):


8 comments:

  1. Question: I cannot find where you are specifying the color of the Glow...can you point me to the correct place in your code?

    ReplyDelete
  2. Question #2 - I have put your busy indication into another component I put together for running on the Android Device. May I include your code in the component package (in your component package, paths, etc) for free posting on the Adobe Forums?

    ReplyDelete
  3. Good questions Darren. For your first question, the look and feel of the component is in the BusyIndicator skin files. Take a look at the BusyIndicatorSkin3.mxml file. I have a GlowFilter declared in the Declarations and it has a color attribute that you can set to any color you wish. To answer your second question, yes. You can include it in your code and post it anywhere you would like. Thanks for asking. Can you post a link to the component you put together for the Android device? I am curious to see what you put together.

    ReplyDelete
  4. I looking in the BusyIndicatorSkin.mxml, found the GlowFilter, but it had no color attribute. I should have kept looking, as I did find it in the *Skin3.mxml file.

    And I hope to have it packaged tonight/tomorrow. I put together a MessageBox component that looks like the default Android message boxes, for use with Hero. I'm putting together a group of components to help with the Hero/Android development...since the native API calls are currently lacking in Hero.

    Here's a link to the MessageBox post in the Adobe forums:

    http://forums.adobe.com/thread/756516?tstart=0

    ReplyDelete
  5. This is just Great!, thanks Dan!

    ReplyDelete
  6. how can i put a background image while busy indicator is open?

    ReplyDelete
  7. IFrame not loading.

    ReplyDelete