HSlider as scrubber bar showing percent downloaded

If you are making a simple video component with VideoDisplay and want
to use the HSlider as the scrubber bar, you might run into the problem
of trying to display the % of the video that has been downloaded.

We can use HSlider's showHighlightTrack property for that. But
first we have to figure out how we can set it programmatically.

Heres how:


package com.flexas3.components
{
import mx.controls.HSlider;
import mx.core.Container;
import mx.core.IFlexDisplayObject;
import mx.core.mx_internal;
import mx.styles.ISimpleStyleClient;

use namespace mx_internal;
public class HSliderProgress extends HSlider
{
[Bindable]
private var _progress:Number = 0;
public function get progress():Number {
return _progress;
}
// 0-1
public function set progress(o:Number):void {
if (o < 0) o = 0;
if (o > 1) o = 1;
_progress = o;
}


/**
* @private
*/
override mx_internal function drawTrackHighlight():void
{
var track:IFlexDisplayObject = innerSlider.getChildAt(0) as IFlexDisplayObject;
var highlightTrack:IFlexDisplayObject = innerSlider.getChildAt(1) as IFlexDisplayObject;

if (track && highlightTrack)
{
var xPos:Number;
var tWidth:Number;

xPos = track.x;
// minus xPos is the right side offset
tWidth = track.width*progress;
//trace('track.width', track.width, 'tWidth', tWidth);
highlightTrack.move(xPos, track.y + 1);
highlightTrack.setActualSize(tWidth > 0 ? tWidth : 0, highlightTrack.height);
}
}

}
}


When you instantiate the HSliderProgress make sure to set
showHighlightTrack="true".

Also, as you get your video net_status updated just bind the
bytesLoaded/bytesTotal to the progress property.

Also one nice thing is that you can style it the way you'd normally style HSlider with Flex skinning.