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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

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

  1. fabian says:

    great stuff. thanx

  2. Nundhaa says:

    View Source Doesn’t Work

  3. Simone says:

    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

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree