Home » Code Samples, Flash, Tutorials

FLV Player (Progressive Download) with Preloader

21 August 2008 | 19,433 views | 3 Comments

Here I have all of the code necessary to setup a simple AS2 flv player using progressive download. All of this script is in the first frame of the movie with the appropriate movie clips available on the stage.

First, We setup all of our controls including our Play/Pause button, Rewind, Scrubbing, and volume controls.



stop();

/*--------------------------------------------------------------------------------*/
//sound settings/controls
/*--------------------------------------------------------------------------------*/

globalsound = new Sound(); 
globalsound.setVolume(100);
volume_slide.volume_slider._x = volume_slide.volume_bar._width-volume_slide.volume_slider._width;

b_volume.onRelease = function() {
	if(globalsound.getVolume() == 100){
		b_volume.gotoAndStop(2);
		globalsound.setVolume(0);
	}else if(globalsound.getVolume() == 0){
		b_volume.gotoAndStop(1);
		globalsound.setVolume(100);
	}
}

//volume scrubbing
var pTop_volume:Number = volume_slide.volume_slider._y;
var pLeft_volume:Number = 0;
var pBottom_volume:Number = volume_slide.volume_slider._y;
var pRight_volume:Number = volume_slide.volume_bar._width-volume_slide.volume_slider._width;

volume_slide.volume_slider.onPress = function() {
	startDrag("volume_slide.volume_slider", false, pLeft_volume, pTop_volume, pRight_volume, pBottom_volume);
	dragging = true;
	this.onEnterFrame = function() {
		globalsound.setVolume((volume_slide.volume_slider._x)*(volume_slide.volume_bar._width/25));
		trace((volume_slide.volume_slider._x)*(volume_slide.volume_bar._width/25));
	};
};
volume_slide.volume_slider.onRelease = function() {
	dragging = false;
	stopDrag();
	delete this.onEnterFrame;
};
volume_slide.volume_slider.onReleaseOutside = function() {
	dragging = false;
	stopDrag();
	delete this.onEnterFrame;
};

/*--------------------------------------------------------------------------------*/
//play/pause controls
/*--------------------------------------------------------------------------------*/

b_play.onRelease = function() {
	if (b_play._currentframe == 1) {
		ns.pause();
		b_play.gotoAndStop(2);
	} else {
		ns.pause();
		b_play.gotoAndStop(1);
	}
};
b_rewind.onRelease = function() {
	ns.seek(0);
}


Next, we tell flash where to find our flv file. I have not included any automatic Meta Data Handlers, so we also have to specify the length of the video in order to properly setup the scrub bar. Again, this is just to keep it simple.


/*--------------------------------------------------------------------------------*/
//video loading/controls
/*--------------------------------------------------------------------------------*/

//main video directory
var dir = "path/to/your/flv";

//video properties
var vid = "name of your flv";
var vid_length = "length of your flv in seconds";

Here we have our NetConnection setup with our bufferTime, and I am also calling two custom functions: drawLoader, and timing. The drawLoader function is the preloader, and the timing will setup our scrub bar.


var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
video.attachVideo(ns);
ns.setBufferTime(15);
ns.play(dir+vid);
ns.pause();
drawLoader();
timing(vid_length);


/*--------------------------------------------------------------------------------*/
//scrubber functions
/*--------------------------------------------------------------------------------*/

function timing(fTime:Number) {
	//the length of the movie
	var finalTime:Number = fTime;
	var time_interval:Number = setInterval(checkTime, 10, ns);
	//function for the interval
	function checkTime(ns:NetStream) {
	   //movie time
	   var ns_seconds:Number = ns.time;
	   //parameters for the scrubber
	   var finalWidth:Number = timer_bar.slider._width-timer_bar.scrubber._width;
	   var movVar:Number = finalWidth/finalTime;
	   timer_bar.scrubber._x = movVar*ns_seconds;
	   //values for the scrubber position
	   var pTop:Number = timer_bar.scrubber._y;
	   var pLeft:Number = 0;
	   var pBottom:Number = timer_bar.scrubber._y;
	   var pRight:Number = timer_bar.slider._width-timer_bar.scrubber._width;
	   //scrubber is pressed
	   timer_bar.scrubber.onPress = function() {
	       clearInterval(time_interval);
	       //dragging
	       startDrag("timer_bar.scrubber", false, pLeft, pTop, pRight, pBottom);
	       dragging = true;
	       //seek as scrubber is moved
	       this.onEnterFrame = function() {
	           ns_seconds = this._x/movVar;
	           ns.seek(ns_seconds);
	       };
	   };
	   timer_bar.scrubber.onRelease = function() {
	       dragging = false;
	       stopDrag();
	       delete this.onEnterFrame;
	       time_interval = setInterval(checkTime, 10, ns);
	   };
	   timer_bar.scrubber.onReleaseOutside = function() {
	       dragging = false;
	       stopDrag();
	       delete this.onEnterFrame;
	       time_interval = setInterval(checkTime, 10, ns);
	   };
	}
}


/*--------------------------------------------------------------------------------*/
//preloading functions
/*--------------------------------------------------------------------------------*/

function drawLoader() {

	video.clear();

	loading._visible = true;
	progressBar_mc._visible = true;
	createEmptyMovieClip("progressBar_mc",getNextHighestDepth());
	progressBar_mc.createEmptyMovieClip("bar_mc",progressBar_mc.getNextHighestDepth());

	with (progressBar_mc.bar_mc) {
		beginFill(0xD7D7D9);
		moveTo(0,0);
		lineTo(100,0);
		lineTo(100,10);
		lineTo(0,10);
		lineTo(0,0);
		endFill();
		_xscale = 0;
		_alpha = 90;
	}
	progressBar_mc.createEmptyMovieClip("stroke_mc",progressBar_mc.getNextHighestDepth());

	with (progressBar_mc.stroke_mc) {
		lineStyle(0,0xD7D7D9);
		moveTo(0,0);
		lineTo(100,0);
		lineTo(100,10);
		lineTo(0,10);
		lineTo(0,0);
		_alpha = 90;
	}
	progressBar_mc._x = 140;
	progressBar_mc._y = 115;

	var loaded_interval:Number = setInterval(checkBytesLoaded, 150);

	function checkBytesLoaded() {

		var pctLoaded_1:Number = Math.round(ns.bytesLoaded/ns.bytesTotal*100);
		pctLoaded_total = pctLoaded_1;
		trace("total loaded= "+pctLoaded_total);
		progressBar_mc.bar_mc._xscale = pctLoaded_total*2;

		if (pctLoaded_total>=50) {

			ns.seek(0);
			ns.pause();

			clearInterval(loaded_interval);
			progressBar_mc._visible = false;
			loading._visible = false;
			unloadMovie(progressBar_mc.stroke_mc);
			unloadMovie(progressBar_mc.bar_mc);
			unloadMovie(progressBar_mc);

		}
	}
}



The result:

Download the source

  • Ray

    Hi Derek. Can’t seem to get this to work. Output keeps saying “total loaded= 0”. Am I linking the file incorrectly? I’ve tried several paths in var dir = “path/to/your/flv”;
    I appreciate your help.

  • This article is a little outdate, and you might want to look more into AS3. This article should get you started: http://entr.in/ger/2W

  • index

    do u know what is it duration ? event NetStream onMetaData?

    var duration:Number=null;

    ns.onMetaData = function(info:Object):Void {

    duration=info.duration; // its all time your FLV

    }