Introduction about this tutorial

I recently got interested in Flash MX2004 video. Although there are a number of tutorials on the Macromedia web site it was not what I was looking for. Then there are video players for sale. Well, the one here is similar to one I found for $9.95. So i thought I put things together to make my own and present it here as a tutorial. The core scripts I found in the help files of Flash MX 2004. But have a look at the swf. It has a pause, play button and a scrubber to move the movie forward and backward (This tutorial and the player have been updated and some bugs have been removed).

The final SWF

Setting up the Stage


We need the following items for this file:
  • A combobox,
  • a video object,
  • some buttons,
  • a scrubber
  • and a textarea or textfield.

We first create a video object. You can use this one, which I made from the flash sample files or make your own. To make it import a flv movie into the library. Then place an instance of that clip on stage and you have a videoobject. Like a movieclip you can size it and the video will appear inside. Give it a name. All other objects are well known so I do not go into their details. The scripts for them are presented below.

The Actionscript


We start our script with creating a netconnection object and set it null for importing flv locally or by http. Then we create a netstream object, which provides us with methods to play flv videos in a streaming mode and attach the netstream object to our video object on stage.
stop();
// importing the combobox class
import mx.controls.ComboBox;
// we create a new NetConnection object
var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(null);
// and a new NetStream object
var stream_ns:NetStream = new NetStream(connection_nc);
// which we attach to a video object
my_video.attachVideo(stream_ns);
Next we have to add a listener object to the combobox to be able to select movies. To add items to the combobox we use the dataprovider array. We have 3 var: the label, the data and myTime, which is a var for the length of the movie. We also put the script for the playbutton inside and some functions which are explained below. We ensure that all the var are defined. 
//
// here we define the data for the combobox, myTime is the length of the movie
var myTime:Number;
var myComboBox:ComboBox;
myComboBox.dataProvider = [{label:"Movie-1", data:"clock2.flv", myTime:12}, 
{label:"Movie-2", data:"mark1.flv", myTime:18.73}, {label:"Movie-3", data:"main.flv", 
myTime:17.4}];
//
// combobox listener
var myComboBoxListener:Object = new Object();
myComboBoxListener.change = function(eventObj) {
	// the video flv
	var theSelectedItemData:String = eventObj.target.selectedItem.data;
	// setting a buffer to start the movie
	stream_ns.setBufferTime(5);
	// function for the movie preloader
	bar();
	// play the movie
	stream_ns.play(theSelectedItemData);
	//we place the playbut here
	playBut.onRelease = function() {
	   stream_ns.play(theSelectedItemData);
	   // this will let the movie cope up with the timing and move it
	   stream_ns.seek(stream_ns.time);
	   // function to monitor the movie: Parameter is the length of the movie
	   timing(eventObj.target.selectedItem.myTime);
	};
	timing(eventObj.target.selectedItem.myTime);
};
myComboBox.addEventListener("change", myComboBoxListener);
This is a function, which we do not use but would monitor the buffer. Buffer is the time period from loading to actual playing the movie. 
//
// monitoring the buffer
/*
this.createTextField("buffer_txt", this.getNextHighestDepth(), 10, 35, 300, 22);
buffer_txt.html = true;
//
var buffer_interval:Number = setInterval(checkBufferTime, 100, stream_ns);
function checkBufferTime(my_ns:NetStream):Void {
	var bufferPct:Number = Math.min(Math.round(my_ns.bufferLength/my_ns.bufferTime*100), 100);
	var output_str:String = "<textformat tabStops='[100,200]'>";
	output_str += "Length: "+my_ns.bufferLength+"\t"+"Time: "+my_ns.bufferTime+"\t"+"Buffer:"
+bufferPct+"%";
	output_str += "</textformat>";
	buffer_txt.htmlText = output_str;
}
*/
Here is a function which traces the status of the videoplayer. 
//
// monitoring the status of the movie
stream_ns.onStatus = function(infoObject:Object) {
	trace(infoObject.code);
};
The next function contains all the var and methods for the timebar and scrubber. Read the comments. 
//
// function for the timing bar and scrubber
var dragging:Boolean;
function timing(fTime:Number) {
	// the length of the movie
	var finalTime:Number = fTime;
	var time_interval:Number = setInterval(checkTime, 10, stream_ns);
	//function for the interval
	function checkTime(my_ns:NetStream) {
	   //showing the time the movie passed
	   var ns_seconds:Number = my_ns.time;
	   var minutes:Number = Math.floor(ns_seconds/60);
	   var seconds = Math.floor(ns_seconds%60);
	   if (seconds<10) {
	       seconds = "0"+seconds;
	   }
	   time_txt.text = minutes+":"+seconds;
	   //
	   // we clear the videoclip and disable buttons when movie is done
	   if (ns_seconds>=finalTime) {
	       my_video.clear();
	       timerBar.scrubber.enabled = false;
	       clearInterval(time_interval);
	   }
	   //
	   // here we set the parameters for the scrubber and the time fill
	   var finalWidth:Number = 200;
	   var movVar:Number = finalWidth/finalTime;
	   timerBar.timeFill._width = movVar*ns_seconds;
	   timerBar.scrubber._x = movVar*ns_seconds;
	   // these are the values for the scrubber position
	   var pTop:Number = timerBar.scrubber._y;
	   var pLeft:Number = 0;
	   var pBottom:Number = timerBar.scrubber._y;
	   var pRight:Number = 200;
	   // main function when scrubber is pressed
	   timerBar.scrubber.onPress = function() {
	       clearInterval(time_interval);
	       // dragging
	       startDrag("timerBar.scrubber", false, pLeft, pTop, pRight, pBottom);
	       dragging = true;
	       // this will move the time when the scrubber is pulled
	       this.onEnterFrame = function() {
	           ns_seconds = this._x/movVar;
	           my_ns.seek(ns_seconds);
	           timerBar.timeFill._width = movVar*ns_seconds;
	           var minutes:Number = Math.floor(ns_seconds/60);
	           var seconds:Number = Math.floor(ns_seconds%60);
	           var split_seconds:String = seconds.toString();
	           if (seconds<10) {
	               split_seconds = "0"+seconds;
	           }
	           time_txt.text = minutes+":"+split_seconds;
	       };
	   };
	   // release functions for the scrubber
	   timerBar.scrubber.onRelease = function() {
	       dragging = false;
	       stopDrag();
	       delete this.onEnterFrame;
	       time_interval = setInterval(checkTime, 10, stream_ns);
	   };
	   timerBar.scrubber.onReleaseOutside = function() {
	       dragging = false;
	       stopDrag();
	       delete this.onEnterFrame;
	       time_interval = setInterval(checkTime, 10, stream_ns);
	   };
	}
}
Then we have the function for the stop or pause button. 
//
// pausebut function
pauseBut.onRelease = function() {
	stream_ns.pause();
};
Last not least we use a preloader. Thanks to the macromedia help files all I needed to do was to copy and paste this script and modify it slightly. 
//
// preloading bar and textfield functions
function bar() {
	progressBar_mc._visible = true;
	loaded_txt._visible = true;
	this.createTextField("loaded_txt", this.getNextHighestDepth(), 10, 10, 160, 22);
	this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
	progressBar_mc.createEmptyMovieClip("bar_mc", progressBar_mc.getNextHighestDepth());
	with (progressBar_mc.bar_mc) {
	   beginFill(0xCCCCCC);
	   moveTo(0, 0);
	   lineTo(100, 0);
	   lineTo(100, 10);
	   lineTo(0, 10);
	   lineTo(0, 0);
	   endFill();
	   _xscale = 0;
	}
	progressBar_mc.createEmptyMovieClip("stroke_mc", progressBar_mc.getNextHighestDepth());
	with (progressBar_mc.stroke_mc) {
	   lineStyle(0, 0x000000);
	   moveTo(0, 0);
	   lineTo(100, 0);
	   lineTo(100, 10);
	   lineTo(0, 10);
	   lineTo(0, 0);
	}
	var loaded_interval:Number = setInterval(checkBytesLoaded, 500, stream_ns);
	function checkBytesLoaded(my_ns:NetStream) {
	   var pctLoaded:Number = Math.round(my_ns.bytesLoaded/my_ns.bytesTotal*100);
	   loaded_txt.text = Math.round(my_ns.bytesLoaded/1000)+" of 
"+Math.round(my_ns.bytesTotal/1000)+" KB loaded ("+pctLoaded+"%)";
	   progressBar_mc.bar_mc._xscale = pctLoaded;
	   if (pctLoaded>=100) {
	       clearInterval(loaded_interval);
	       progressBar_mc._visible = false;
	       loaded_txt._visible = false;
	   }
	}
}
I did not include any movies in the download. You can get the movies from the flash sample files. And here is a useful tutorial from Macromedia about video and settings.