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.

0 thoughts on “Setting the ProgressBar control’s labelPlacement, mode, and conversion properties

  1. Nice example, but I’d like to know if it’s possibile to put the two progress bars together, to have the progress of the video and the download in one bar, in different colors, like YouTube, for example