Flex Pasta

The Pulsing Progress Bar

Progress Bars via the mx:ProgressBar tag are easy to use in Flex.  Unlike some kind of progress bars that can drive anyone insane….

Flex progress bars are easy to implement and great for usability.  When there is a long database query or chance for network latency, a progress bar is always a good idea to keep the user informed that something is happening.  Those with an artistic ability can create a custom progress image to use on a progress bar, but if not, the built in one is still a viable option.  There are two main types of progress bars included in the Flex SDK.  Ones that use percentages to show completeness and ones that use an indeterminate/unknown to give the user indication of activity.  Both are implemented in the mx:ProgressBar tag/class.

The percentage progress bar is used directly with the mode property, which has three options, event, polled, and manual.  This is used in conjunction with the source property which the progress bar can use to automatically update the progress bar.

Event Mode Example tied to an mx:Image tag(note that the source property for this mode must dispatch Event.PROGRESS/Event.COMPLETE events):

<mx:ProgressBar source=”img” mode=”event”/>
<mx:Image source=”http://www.flexpasta.com/wp-content/uploads/2009/10/bearcats2.jpg” id=”img”/>
<mx:Label text=”Event Mode Progress Bar”/>

---

Polled Mode Example tied to an mx:SWFLoader tag(note that polled mode needs a source component bytesLoaded and bytesTotal properties): <mx:ProgressBar source=”sw” mode=”polled”/>
<mx:SWFLoader source=”http://www.flexpasta.com/wp-content/uploads/2009/10/cinco.png” id=”sw”/>
<mx:Label text=”Polling Mode Progress Bar”/>

---

The Pulsing Indeterminate Progress Bar The pulsing indeterminate progress bar is a simple way to add a little extra kick to a user having to wait X number of seconds for data to be returned.  The percentage progress bar can’t be used because there may be no logical way to determine how long a request might take.  A pulsing bar can easily be added using the Flex built in effects.  Here is a simple way to add a pulsing progress bar to an app using an mx:Fade event coupled in an mx:Sequence tag. CLICK THE TEXT IN THE SWF TO SEE THE PULSING!!!
<mx:ProgressBar indeterminate=”true” id=”ipb” showEffect=”seq” visible=”false”/>
<mx:Label text=”Pulsed Indeterminate Progress Bar” click=”ipb.visible=true”/>
<mx:Sequence id=”seq” duration=”650″ repeatCount=”500″ repeatDelay=”100″ target=”{ipb}”>
<mx:Fade alphaFrom=”1″ alphaTo=”.2″/>
<mx:Fade alphaFrom=”.2″ alphaTo=”1″/>
</mx:Sequence>