Simple Animating Preloader and Throbber/Spinner

This is my fourth post on Flex preloaders. It shows how you can use a throbber or spinner as a
simple yet effective preloader. The throbber can also be used in your application in other places whenever you want to indicate that something is happening.

In the example below I've included two kinds of throbbers:

• SimpleThrobber (extends Sprite) - ActionScript/Flash only, no Flex dependencies (good for preloaders)
• Throbber (extends SkinnableContainer) - advanced throbber, skinnable and style-able

I've also included two skins to go with the Throbber class - ThrobberCirclesSkin and ThrobberLinesSkin.

Both throbbers work roughly the same way. The animation is performed every X milliseconds, and the lines or circles are drawn in a rotating manner so that the throbber animates. Both throbbers support an array of colors which define the appearance of the throbber, and a delay property which determines the speed of the animation.

Anyway, check out the code below (right click View Source to see the source), there is some documentation to explain the various styles, properties, and functions.


The other blog posts I've written on preloaders and spinners/throbbers can be found here:

• Another Custom Preloader
• Showing Preloader Again
• Grayscale Preloader
• Tree Icon Spinner

As mentioned in the comments, the just released Flex 4.5 SDK now contains a similar Spark BusyIndicator component. There is a nice blog post on it here.

Spark Forms, Validation, and Errors

One of my previous posts on Always showing error tips (validators) presented one way of trying and improve the built-in validation error handling in Flex. It was a nice idea, but as many people have pointed out in the comments there are too many different use cases that causes the error tips to not show up properly.

Below is another alternative approach, and one that I hope is less of a hack.

I've created a class called InputControl which is very similar to the Flex 3 FormItem. It has a label property, and can contain one or more child elements.

What this control does that makes it useful is to listen for when the errorString property changes on an input control (such as a TextInput), and instead of displaying the default Flex error toolTip, it shows that errorString in a label that is always visible. It also immediately clears the input's errorString property so that the default error toolTip is not displayed.

The InputControl class is skinnable, and I've created two different skins. The default one InputControlSkin has the same layout as the FormItem (label on the left) and displays the error string on the right of the input.

The second skin is called InputControlVerticalSkin which displays the label, input, and error message in a vertical layout. This skin is more suited for large inputs like a TextArea.

There are definitely a few issues with this approach:
- longer error messages either don't show up properly or are truncated
- form label alignment is not customizable

Feel free to modify my code to make it work differently. Most properties are hard coded in the skins, and I didn't spend the time to extract them out into styles.

Here it is in action, right click to view source:

State Transitions

I've put together a little example of how you can use transitions to animate between the states in your application component.

There are many websites explaining Flex 3 states as well as the new and improved Flex 4 states.

If you don't already use states, I would highly recommend you become familiar with them. They are very powerful, and make it much easier to create complex user interfaces.

Transitions are effects that are played when your component changes from one state to another state. They are a nice way to smoothly animate changing content, for example fading out content being hidden, or resizing containers that have new elements being added.

In the example below, I've created an application that has 5 states:

• Normal - default state
• Resize - resizes the main panel using a Resize effect
• Fade - fades in/out a Label using a Fade effect
• AnimateColor - animates a gradient color using the AnimateColor effect
• Easing - uses a Bounce easer with a Move transition

I've noticed that certain effects like Resize don't work properly with other effects like Fade. I haven't spent the time to try and figure out why not.

Anyway, here is the example. Right click to view source.

Animated Scrolling List

In Flex 4, the Spark List has a function called ensureIndexIsVisible(index). This function immediately scrolls the list to that index if it is not visible.

I've added a slight modification to this to animate the scrolling over half a second to make it much smoother. The animation is done using an AnimateProperty instance on the list's data group, and setting the property to verticalScrollPosition.

Here it is in action, as usual right click to view source:


For simplicity I am only scrolling the vertical scrollbar. If you are using a horizontal or tiled list, you'll want to animate the horizontal scrollbar too. In the tile case, you could use a Parallel instance to animate both the horizontal and vertical scrollbars.

Grayscale Preloader

Following on from my last post on grayscale images, I've made another preloader to illustrate how you can animate an image from grayscale to colour.

The preload consists of an image and a loading label. The image starts off gray, and as the preloader progress value increases it gradually becomes coloured. The alpha value also increases from 0.5 at the start to 1 at the end. To spice it up a little I also added in a GlowFilter and a DropShadowFilter.

Here it is in action, click the RELOAD button to show the preloader again.



For another example of a custom preloader, check out this blog post on Another Custom Preloader.