Animating ProgressBar Skin in Flex

When I was in university (college) I was told a story about a large office building which had notoriously slow elevators.  People would often spend several minutes waiting for the elevator to arrive at their floor and the occupants of the building complained about the problem often.

In an effort remedy the problem the owners of the building hired an engineer to come in and recommend ways to speed up the elevator service.  The engineer reviewed the existing elevator system and all compatible upgrade options.  Eventually the engineer came back with his recommendation:

The most cost effective way to improve the elevator service was to cover the elevator doors with mirrors.

The idea was unconventional to say the least, but it was so much cheaper than replacing the existing elevators that the building owners decided to try it.  The employees did not realize that no further modifications had been made, and everyone agreed that the new ‘upgraded’ elevators were much faster than the old ones.

The moral of the story is that sometimes it’s easier to simply distract the user while they are waiting than speed up the thing they are waiting for.  In the elevator story the people were distracted by having something to look at while they were waiting (themselves!) and this was enough to make the wait not feel as long.  This story has always stuck with me and I am always on the look out for places where I can use this principle within my applications.

With this goal in mind I created an animating progress bar skin.  The progress bar fills up at the same speed as any other, but as it does so the texture occasionally slides from left to right. This gives the impression that the bar is moving faster than it is and the whole wait feels much more positive

Check out the example below to see the principle in action.  The top progress bar has a regular skin applied and moves painfully slowly.  The bottom progress bar moves at the same speed but has an animating skin applied.  It’s easy to see that it feels like things are progressing much faster.

The full source code is available here.  Feel free to take it and use it in any way which us useful to you.  This skin has been built using Degrafa so you can easily change the colour scheme and use it in other applications.