Setting the ProgressBar control’s labelPlacement, mode, and conversion properties

Here was a neat trick I learnt today. You can set a ProgressBar control’s labelPlacement property to “center” and have it appear within the progress bar itseslf. Pretty handy!

And just because that alone wasn’t really an interesting entry, I created a second progress bar which uses “polled” mode to determine how much of an FLV has loaded (it monitors the bytesLoaded and bytesTotal properties of the UI object specified in the source parameter, which in this case is the VideoDisplay control). Finally I tweaked the label property to add the units (kilobytes) and set the conversion property to 1024 to convert from bytes to kilobytes. Whew!

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:VideoDisplay id="videoDisplay"
            source="http://www.helpexamples.com/flash/video/water.flv"
            playheadUpdate="playheadTime.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime)"
            minWidth="160"
            minHeight="120"  />

    <mx:ProgressBar id="progressBar"
            width="{videoDisplay.width}"
            mode="polled"
            source="{videoDisplay}"
            label="%1 of %2 KB loaded (%3%%)"
            conversion="1024"
            labelPlacement="center" />

    <mx:ProgressBar id="playheadTime"
            width="{videoDisplay.width}"
            mode="manual" label="%1 / %2"
            labelPlacement="center" />

</mx:Application>

View source is enabled in the following example.