flash seek bar in actionscript 3

Question

I'm very new to Action Scripting and FLash. I need to implement the seek bar. I have embeded an swf which runs a videoPlayer on my jsp page. I have also implemented the play and stop buttons on the page. I just need the seek bar to implemented. I need to embed another swf on my web page which would show the seek bar and volume control and timer. I need to pass the timers for the seek bar to the swf so that moves accordingly. And also adjust the skin of the player according to my need. How can I do this? Can somebody help me please? I have Flash Professional CC and FlashDevelop. Thanks a lot.

Update:

I have tried the following but I don't know how to implement it. Can anyone show me an example how to accomplish this. Can I use Jw-player for this?

 package 
 {
import flash.display.Sprite;
import flash.events.Event;  
import flash.media.SoundChannel;
import flash.media.Sound;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.ProgressEvent;
import flash.events.IOErrorEvent;
import flash.net.URLRequest;    
import flash.external.ExternalInterface;
import flash.system.Security;
/**
 * ...
 * @author lisa
 */
public class Main extends Sprite 
{
    private var _channel:SoundChannel;
    private var sound:Sound;
    private var duration:Number;
    private var playerInstance:String;
    private var pausePoint:Number = 0;
    private var playing:Boolean = false;
    private var timer:Timer;

    public function Main():void 
    {
        this.timer = new Timer(250, 0);
        Security.allowDomain("*");
        this.playerInstance = root.loaderInfo.parameters.playerInstance + ".";
        ExternalInterface.addCallback("init", this.init);
        ExternalInterface.addCallback("load", this.load);
        ExternalInterface.addCallback("playPause", this.playPause);
        ExternalInterface.addCallback("pplay", this.play);
        ExternalInterface.addCallback("ppause", this.pause);
        ExternalInterface.addCallback("skipTo", this.skipTo);
        ExternalInterface.call(this.playerInstance + "loadStarted");
        return;
        //if (stage) init();
        //else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(param1:String):void 
    {
        this.load(param1);
        return;
        //removeEventListener(Event.ADDED_TO_STAGE, init);
        // entry point
    }

    private function get channel() : SoundChannel
    {
        return this._channel;
    }// end function

    private function set channel(param1:SoundChannel) : void
    {
        this._channel = param1;
        this._channel.addEventListener(Event.SOUND_COMPLETE, this.soundEnded);
        return;
    }// end function

    private function updatePlayhead(event:TimerEvent = null) : void
    {
        var _loc_2:* = event ? (this.channel.position) : (this.pausePoint);
        var _loc_3:* = _loc_2 / this.duration;
        if (_loc_3 > 1)
        {
            _loc_3 = 1;
        }
        if (_loc_3 > 0)
        {
            ExternalInterface.call(this.playerInstance + "updatePlayhead", _loc_3);
        }
        return;
    }// end function

    private function loadProgress(event:ProgressEvent) : void
    {
        this.duration = event.bytesTotal / (event.bytesLoaded / this.sound.length);
        var _loc_2:* = event.bytesLoaded / event.bytesTotal;
        if (_loc_2 > 1)
        {
            _loc_2 = 1;
        }
        if (_loc_2 > 0)
        {
            ExternalInterface.call(this.playerInstance + "loadProgress", _loc_2, this.duration / 1000);
        }
        return;
    }// end function

    private function load(param1:String) : void
    {
        if (this.channel)
        {
            this.channel.stop();
        }
        if (this.sound)
        {
            this.sound.removeEventListener(ProgressEvent.PROGRESS, this.loadProgress);
        }
        this.channel = new SoundChannel();
        this.sound = new Sound(new URLRequest(param1));
        this.pausePoint = 0;
        this.sound.addEventListener(IOErrorEvent.IO_ERROR, this.loadError);
        this.sound.addEventListener(ProgressEvent.PROGRESS, this.loadProgress);
        this.timer.addEventListener(TimerEvent.TIMER, this.updatePlayhead);
        this.timer.start();
        return;
    }// end function

    private function loadError(event:IOErrorEvent) : void
    {
        ExternalInterface.call(this.playerInstance + "loadError");
        return;
    }// end function

    private function play() : void
    {
        this.channel = this.sound.play(this.pausePoint);
        this.playing = true;
        this.timer.start();
        return;
    }// end function

    private function pause() : void
    {
        this.pausePoint = this.channel.position;
        this.channel.stop();
        this.playing = false;
        this.timer.stop();
        return;
    }// end function

    private function playPause() : void
    {
        if (this.playing)
        {
            this.pause();
        }
        else
        {
            this.play();
        }
        return;
    }// end function

    private function skipTo(param1:Number) : void
    {
        this.channel.stop();
        this.pausePoint = this.duration * param1;
        if (this.playing)
        {
            this.channel = this.sound.play(this.pausePoint);
        }
        else
        {
            this.updatePlayhead();
        }
        return;
    }// end function

    private function soundEnded(event:Event) : void
    {
        ExternalInterface.call(this.playerInstance + "trackEnded");
        return;
    }// end function

}

}

Answer 1

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: