If you are very new to ActionScript, maybe this tutorial will be helpful for you.
I have created small example for you: SimpleSeekBar
. It will be your homework to finish this component: inform another components of changed progress after user interaction, for example with AS3Signals, etc.
//Usage example
var seekBar:SimpleSeekBar = new SimpleSeekBar();
addChild(seekBar);
seekBar.initiate(220, 8);
//progress = currentTime / totalDuration;
seekBar.changeProgress(0.5); //Half
//pretty position
seekBar.x = seekBar.y = 20;
SimpleSeekBar
definition:
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
public class SimpleSeekBar extends Sprite {
private var _bar:Sprite;
private var _seekIndicator:Shape;
private var _pip:Sprite;
private var _seekZone:int;
private var _dragZone:Rectangle;
public function initiate(width:int, height:int):void {
_bar = new Sprite();
_seekIndicator = new Shape();
_pip = new Sprite();
_seekZone = width - height;
_dragZone = new Rectangle(0, height * 0.5, _seekZone, 0);
_bar.addEventListener(MouseEvent.CLICK, onClickBar);
_pip.addEventListener(MouseEvent.MOUSE_DOWN, onDownPip);
addChild(_bar);
addChild(_seekIndicator);
addChild(_pip);
_bar.graphics.beginFill(0x777777);
_bar.graphics.drawRect(0, 0, width, height);
_seekIndicator.graphics.beginFill(0x990000);
_seekIndicator.graphics.drawRect(0, 0, 100, height);
_pip.graphics.beginFill(0xF0F0F0);
_pip.graphics.drawCircle(height * 0.5, 0, height * 0.5);
_pip.graphics.beginFill(0x565656);
_pip.graphics.drawCircle(height * 0.5, 0, height * 0.25);
_pip.y = height * 0.5;
updateSeek();
}
public function changeProgress(progress:Number):void {
_pip.x = _seekZone * progress;
updateSeek();
}
private function getProgressFromPosition(localX:Number):Number {
var progress: Number = localX / _seekZone;
if(progress > 1){
progress = 1;
}
return progress;
}
private function onClickBar(e:MouseEvent):void {
//Move progress to the new position
changeProgress(getProgressFromPosition(e.localX));
}
private function onDownPip(e:MouseEvent):void {
//Start drag, also it's a good place to set flag, that we are dragging, and
//changeProgress don't affect our pip
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
_pip.startDrag(false, _dragZone);
}
private function onMove(e:MouseEvent):void {
updateSeek();
}
private function onUp(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
_pip.stopDrag();
}
private function updateSeek():void {
_seekIndicator.width = _pip.x;
}
}
As a result, will be something like this: