Degrafa Sliding Progress Bar Component

This is the the first post in the series, and each one will highlight a different component we developed for various projects throughout the year.

ThoughtFaqtory has been working on numerous projects this year and one of them required our team to develop a host of custom components with a specific look and feel. We had a couple of choices but we are very familiar with Degrafa and decided to use it to skin our components.

In the example application above, the component gives the user feedback on the progress of the slide show. This can be very useful component to show feedback within a wizard style user interface.

The progress bar has quite a bit of logic to work out the size of the sub-sections and labels based on the available width and height. It also supports vertical layout but had no requirement for this in the project. The colours (background, active and inactive) can be set using styles. The animation is done using AnimateProperty with a slight delay, and the easing function can be set in the styles.

In our next post we will use Flex 4 to create the exact same component and wait for it… the source will be included. This version will contain user interaction and we may even go as far as adding multi-touch events.

More to come…