Derek J Entringer | Interactive Media, Web Application, and Mobile App Developer » Code Samples

Augmented Reality Using Flex, AS3, And A WebCam

Derek J Entringer — Thu, 05 Nov 2009 01:15:27 +0000

Augmented reality (AR) on the Flash and Flex platform is really quite a new technology, but there are a large amount of developers and businesses that are embracing the use of AR online. Media companies such as Esquire, and technology companies such as GE are using the tech to engage their users both through print media as well as online media.

AR research explores the application of computer-generated imagery in live-video streams as a way to expand the real-world.

The possibilities of how you could use Augmented Reality (AR) are endless. Picture yourself walking or driving down the street. With augmented-reality displays, which will eventually look much like a normal pair of glasses, and informative graphics appearing in your field of view, and audio that coincides with whatever you see.

Now, this article doesn’t go as far as how to create your own AR glasses, but rather a “first step” into what is capable when using AR.

I’ve created a quick example of an AR environment below. Using your webcam, and the provided PDF, you can experience what AR is all about. Make sure to take a look at some more advanced examples in the links above also.

First, print this PDF.

Next, activate the Flash movie below to allow access to your webcam, and hold up the piece of paper to the camera to activate the AR environment. Make sure the large square is fully visible within the camera, and you’ll see how the AR loads and animates with how you position the paper.

Like I said, this example is brief. The AR that you will see above when holding up the pattern you printed is quite simple. There will be three cubes that will be displayed within your streaming video. The AR environment reacts to wherever the pattern on the printed pdf goes. You can rotate or angle the pattern against the camera, the the AR will follow.

There are many ways that this small “first step” towards a more interactive AR environment can be upgraded, and it’s only a start.

Using this technology you can stream video, add animations, or animate entire environments. You could green-screen actors or musicians and place them in a music video that comes to life seemingly right in your own hands. There are thousands of ways to implement AR to engage your website visitors or publication readers. Artist labels could use AR in their branding or CD packaging, or anyone with a business card could use AR to allow for mini-presentations. Whether that be a video or information displayed to a potential client by simply holding your business card card up to their webcam, while visiting your own website.

The ways of incorporating Augmented Reality into online and print media are nearly endless.

If you do not have a web cam, here’s how this simple example looks.

Please Upgrade Your Flash Player

Have you used AR in any of your projects yet?

Boost Your Brand Awareness, Protect Your Link Data, and Get Your Own URL Trimming Service

Derek J Entringer — Fri, 04 Sep 2009 22:32:35 +0000

It seems that the larger url trimming services are gaining a lot of ground these days, and are churning over huge amounts of urls. This also feeds them a ton of data on what people are interested on the web, which will benefit these trimming services at some point in the future. We’re feeding their databases with enourmous amounts of information on what everyone on the web is talking about.

But, what about ourselves? How does keeping all of my trimmed url analytics on some other companies servers benefit me? How can I boost my own brand recognition if I were to create my own personal url trimming application?

Those were the exact goals in the creation of my own url trimming app: http://entr.in/ger/

I wanted to accomplish the same things that bit.ly or tr.im were doing, but to also keep my brand http://derekentringer.com intact with all of the Trimmed URL’s that I was pushing out onto the web. Why would I push another companies brand recognition with all of the interesting articles and videos that I was sharing when using a smaller url? Why wouldn’t any Twitter or Facebook user want their own trimmed url? I believe that using your own custom url trimming service can benefit both your brand recognition, as well your own internal link tracking and social media monitoring initiatives.

Now, I don’t think that using tr.im or bit.ly is a bad thing, but, if you remember very recently, tr.im almost went offline right along with all of its data.

Protect your own data, boost your brand awareness, and get your own url trimming service.

If you’re looking for you own url trimming application, hit me up in the contact area. I’m sure we can work something out to fit your needs.

Note: If you decide to trim a url with entr.in/ger/, it will work, but you will not be able to track the link analytics. This is my own personal url trimming application.

Stream Your Videos Using FLV Player – FREE

Derek J Entringer — Fri, 28 Aug 2009 06:56:57 +0000

We’ve recently added some pretty significant new features to our FLV Player Flash Component. One really neat new offering is our Free FLV Player, which allows you to stream videos from Youtube!, Vimeo, or your own sources including Flash Media Server. All you need is a video source, your player width and height requirements, and you can get your embed code in 3 easy steps.

Take a look at FLV Player, and our new Free FLV Player at http://flvplayer.com.

If you ever wanted to add video to your projects or websites, there is no easier way than using pre-built Flash video components. Our player is one of the most feature loaded components on the market and it was specifically designed to suit developer and designers needs. It provides a fast and easy way to add video content in just few steps.

Get your own Free FLV Player here

Here are some more new features that we recently added to FLV Player:

FlashVar Support
FlvPlayer now fully supports FlashVars. This is another layer of interactivity that we’ve created that allows anyone who doesn’t have Flash to also benefit from the player. It provides access to all of the parameters of the player directly from the swf embed code.

Tooltips
We’ve upgraded the interface to allow for individual tooltips on all of the FLV Player elements. You also have the ability to control the colors and transparencies.

Stream YouTube! Videos
Stream all of your favorite YouTube! videos directly in your website or blog using our custom PHP streaming scripts.

Stream Vimeo Videos
Stream all of your favorite Vimeo! videos by simply letting FLV Player know the Vimeo video id.

More information is available at FLVplayer.com

FLV Player – Flash Video Component – Now Available at FLVplayer.com

Derek J Entringer — Fri, 24 Jul 2009 08:39:29 +0000

After a recent partnership with FLVplayer.com, and a lot of work developing and tweaking our latest product, we’ve officially released our highly customizable FLV Player Flash Video Component. Have a look at flvplayer.com

FLVplayer supports all of the video formats available through the Adobe Flash platform including, but not limited to, MOV, MP4, F4V, and of course FLV.

Customize FLVplayer to match the look and feel of your current website or project. Modify the component to give it your own custom interface.

Our FLVplayer is loaded with features. If you’re a seasoned programmer, use our API to extend the options, and create engaging multimedia video.

Some of the features include:

Progressive or instant RTMP streaming using a Flash Media Server
Customizable XML menu system to load multiple video files, thumbnails, video titles and descriptions
Dynamic Interface Options allow for turning interface elements on or off
Live preview of component features within the Flash interface
Custom color options for all aspects of the FlvPlayer interface including background colors, font colors, rollover colors, and controls for transparencies
Fullscreen toggle
Closed captions
Advanced video display controls including Fit To Player, Original Size, Fit to Width, and Fit to Height
Dynamic Buffering
Interface Display options that include Overlay or Outside, and Autohide
Dynamically rounded corners settings
Full API supporting all major functions as public methods

For more information, please visit FLVplayer.com and DevBase.com

Flash Media Server Streaming Speed Testing [Part 3] – Compare Multiple Server Resources, Port Connections, Detect Upload, Download, and Latency Speed

Derek J Entringer — Tue, 12 May 2009 20:21:58 +0000

This tutorial is the final in a series of three. Part one of this tutorial outlined what is needed to detect a users upload, download, and latency between a Flash client and the Flash Media Server. Part two adds on the ability to detect which ports are available while connecting. In part three, we will be adding an external xml file that will allow you to compare connections to different Flash Media Servers in order to find which of them is the best connection for serving media. If you haven’t already read part one, you can find it here, and part two is available here.

Again, Bandwidth detection is most important when connecting your users to the correctly compressed media to be streamed, recorded, or delivered via a Flash Media Server. This third example will walk you through the process of being able to detect a users download bandwidth, upload bandwidth, latency speeds, and the connected port between the client computer and the host server, along with iterating through multiple Flash Media Servers in an attempt to connect to the fastest and most available server. All of the code is Actionscript 2.0, and I’ve setup a Flash Media Server 3.5 to host the server side scripting. I use Influxis as my Flash Media Server host for all of these tutorials and smaller examples.

First, lets put together our Flash Actionscript. Here our goal is to setup our connection manager, and create a BandwidthInfo object that will call to our main.asc file (this is explained next) for sending packets to the Flash Media server to the client, and vice versa. We also will be creating an instance of our NetConnManager.as (also explained further down) which will allow the flash client to detect which port is best to connect to the Flash Server.

import NetConnManager;

var bestConn:Number;
var bestBandwidth:Number;
var connectBestConn:Number;
var whichServer:String;
var hasConnected:Boolean;
var currentlyChecking:Boolean;
var nextCheck:Number;
var upstreamsAvailable:Array = new Array();
var downstreamsAvailable:Array = new Array();
var theServers:Array;
var startTime:Number = getTimer();
var ncm:NetConnManager = new NetConnManager();
var ncmListener:Object = new Object();
var theServersXML:XML = new XML();
theServersXML.ignoreWhite = true;

ncmListener.ncConnected = function(evt:Object) {
	trace("["+Math.round(getTimer()-startTime)+"ms] successfully connected using "+evt.protocol+":"+evt.port);
	conn_stat.text += "["+Math.round(getTimer()-startTime)+"ms] successfully connected using "+evt.protocol+":"+evt.port+newline;
};
ncmListener.ncFailedToConnect = function(evt:Object) {
	trace("failed to connect after "+evt.timeout+" ms");
	conn_stat.text += "failed to connect after "+evt.timeout+" ms"+newline;
};
ncm.addEventListener("ncConnected", ncmListener);
ncm.addEventListener("ncFailedToConnect", ncmListener);
ncm.connect("your.rtmphost.com", "application_name");

theServersXML.load("xml/server_config.xml");
theServersXML.onLoad = function(success) {
	var index:Number = 0;
	theServers = new Array(this.firstChild.firstChild.childNodes.length);
	for (var aNode:XMLNode = this.firstChild.firstChild.firstChild; aNode != null; aNode=aNode.nextSibling) {
		theServers[index] = new Array(aNode.firstChild.childNodes.length);
		for (var subNode:XMLNode = aNode.firstChild; subNode != null; subNode=subNode.nextSibling) {
			theServers[index][subNode.nodeName] = subNode.firstChild.nodeValue;
		}
		index++;
	}
	//setup first connection
	checkConnection(theServers[0]["host"], theServers[0]["app"], 0);
};

function checkConnection(host, app, which) {

	currentlyChecking = true;

	rec_nc = new NetConnection();
	rec_nc.onStatus = function(info) {
		trace("Level: "+info.level+" Code: "+info.code);
		if (info.code == "NetConnection.Connect.Success") {
			trace("connected to: "+this.uri);
			conn_stat.text += "connected to: "+this.uri+newline;
			startTest(rec_nc);
		} else if (info.code == "NetConnection.Connect.Failed" || info.code == "NetConnection.Connect.Closed") {
			trace("no connection to app");
			conn_stat.text += "error connection failed"+newline;
		}
	};
	rec_nc.connect("rtmp://"+host+"/"+app+"/");

	function startTest(nc) {
		_global.bwInfo = new BandwidthInfo(nc);
		_global.bwInfo.start();
	}
	for (i=0; i<1000; i++) {
		data += "C->S";
	}
	function BandwidthInfo(nc) {
		this.nc = nc;
		this.maxLength = 10;
		this.bwInHistory = new Array(this.maxLength);
		this.bwInCtr = 0;
		this.bwOutHistory = new Array(this.maxLength);
		this.bwOutCtr = 0;
		this.pingHistory = new Array(this.maxLength);
		this.headIn = 0;
		this.headOut = 0;
		this.headPing = 0;
		this.bBWOutStop = false;
		this.bBWInStop = false;
		this.onBWInTimeout = function() {
			clearInterval(this.bwInfoTimeout);
			this.bwInfoTimeout = null;
			delete this.bwInfoTimeout;
			this.bBWInStop = true;

			if (this.bwInCtr == 0) {
				conn_stat.text += "unable to receive data from server."+newline;
				this.abort("unable to receive data from server.");
				return;
			}
			this.stop();
		};
		this.onBWOutTimeout = function() {
			clearInterval(this.bwInfoTimeout);
			this.bwInfoTimeout = null;
			delete this.bwInfoTimeout;
			this.bBWOutStop = true;

			if (this.bwOutCtr == 0) {
				conn_stat.text += "unable to receive data from server\n";
				this.abort("unable to send data to server\n----------\n");
				return;
			}
			trace("testing bandwidth from server");
			conn_stat.text += "testing bandwidth from server"+newline;
			this.bwInfoTimeout = setInterval(this, "onBWInTimeout", 5*1000);
			this.serverToClient();
		};
		this.clientToServer = function() {
			this.time = getTimer();
			size = 0;
			bwinfo = this;
			this.nc.ack = function(pingVal) {
				if (!bwinfo.bBWOutStop) {
					bwinfo.bwOutHistory[bwinfo.headOut++%bwinfo.maxLength] = Math.floor(size/(getTimer()-bwinfo.time)*1000);
					bwinfo.pingHistory[bwinfo.headPing++%bwinfo.maxLength] = pingVal;
					bwinfo.nc.call("recData",0,data);
					size += 4000;
					bwinfo.bwOutCtr++;
				}
			};
			this.nc.call("recData",0,data);
			this.nc.call("recData",0,data);
		};
		this.serverToClient = function() {
			this.time = getTimer();
			size = 0;
			bwinfo = this;
			nc.onEcho = function() {
				if (!bwinfo.bBWInStop) {
					bwinfo.bwInHistory[bwinfo.headIn++%bwinfo.maxLength] = Math.floor(size/(getTimer()-bwinfo.time)*1000);
					this.call("echoData",0,0);
					size += 4000;
					bwinfo.bwInCtr++;
				}
			};
			nc.call("echoData",0,0);
			nc.call("echoData",0,0);
		};
		this.start = function() {
			conn_stat.text += "testing upload speed"+newline;
			trace("testing upload speed");
			clearInterval(this.bwInfoTimeout);
			this.bwInfoTimeout = null;
			delete this.bwInfoTimeout;
			this.bwInfoTimeout = setInterval(this, "onBWOutTimeout", 5*1000);
			this.clientToServer();
		};
		this.stop = function() {
			this.nc = null;
			var ping_rtt = 0;
			var bw_out = 0;
			var bw_in = 0;
			for (var i = 0; i1000) {
				s += "network appears to have a very high delay\n";
			}
			if ((bw_in>500) && (bw_out>200)) {
				s += "connection supports high quality speed\n----------\n";
			} else if ((bw_in>=200) && (bw_out>=100)) {
				s += "connection supports good quality speed\n----------\n";
			} else if ((bw_in>100) && (bw_out>80)) {
				s += "connection supports mid quality speed\n----------\n";
			} else if ((bw_in>20) && (bw_out>15)) {
				s += "connection supports slow quality speed\n----------\n";
			} else {
				s += "connection supports very slow quality speed\n----------\n";
			}
			trace(s);
			conn_stat.text += s+newline;
			currentlyChecking = false;
			nextCheck = which+1;
		};
		this.abort = function(reason) {
			conn_stat.text += "failed "+reason+newline;
			trace("failed "+reason);
			currentlyChecking = false;
			nextCheck = which+1;
		};
	}

}

checkIfRunning = setInterval(this, "checkConnBusy", 1000);

function checkConnBusy() {
	if (currentlyChecking == false) {
		if (nextCheckmxm) {
			mxm = array.index;
		}
	}
	return mxm;
};

Array.prototype.indexOf = function(value) {
	var i = 0;
	var l = this.length;
	var res = -1;
	for (i; i

In order to get the above to work correctly with your own Flash Media Server, you simply need to edit the following line. 
ncm.connect("your.rtmphost.com", "application_name");


This is the path to the application which will hold our Main.asc file. You will also need to edit the xml/server_config.xml file in order to test against several different Flash Media Servers. This file serves as the que by which the flash client will verify and test each of the different connections, and finally pick the fastest one.

  
    
      first_host
      first_app
    
	
      second_host
      second_app
    
  



We now have our Flash file ready, and our servers setup within the server_config.xml.
Next, we want to create the server side code that will allow our final swf to call server side functions in order to return the correct upload, download, and latency values.
application.onAppStart = function (info){
	for ( i = 0; i < 500; i++ ) {
		data += "S->C";
	}
	Client.prototype.recData = function(data) {
		this.ping();
		var v = this.getStats();
		this.call("ack", 0, v.ping_rtt);
	}
	Client.prototype.echoData = function() {
		this.call("onEcho", 0, data);
	};
	Client.prototype.getBWInfo = function() {
		return this.getStats();
	};
	Client.prototype.onConnTimeout = function(){
		clearInterval( this.connTimeout );
		this.connTimeout = null;
		application.disconnect(this);
	}
}
application.onConnect = function(client_obj, id) {
	application.acceptConnection(client_obj);
}


We also need our NetConnManager.as file which allows for multiple port detections.
import mx.events.EventDispatcher;
class NetConnManager extends Object {
	//EventDispatcher needs these
	var addEventListener:Function;
	var removeEventListener:Function;
	var dispatchEvent:Function;
	var dispatchQueue:Function;
	//Constants
	private var k_DEFAULTCONNLIST = [{protocol:"rtmp", port:1935}, {protocol:"rtmp", port:443}, {protocol:"rtmpt", port:80}, {protocol:"rtmps", port:443}];
	private var k_TIMEOUT:Number = 60000;
	//Variables
	private var m_connList:Array;
	private var m_serverName:String;
	private var m_appName:String;
	private var m_streamName:String;
	private var m_connListCounter:Number;
	private var m_flashComConnectTimeOut:Number;
	private var m_validNetConnection:NetConnection;
	//Constructor
	function NetConnManager() {
		EventDispatcher.initialize(this);
	}
	//Public
	//Initiates all the connection attempts.
	//Note: If no connection list is passed, the default list is used
	function connect(p_serverName:String, p_appName:String, p_connList:Array) {
		m_serverName = p_serverName;
		m_appName = p_appName;
		m_connList = (p_connList != undefined) ? p_connList : k_DEFAULTCONNLIST;
		//Set a timeout function, just in case we never connect successfully
		clearInterval(m_flashComConnectTimeOut);
		m_flashComConnectTimeOut = setInterval(this, "onFlashComConnectTimeOut", k_TIMEOUT, k_TIMEOUT);
		//Creates a NetConnection for each of the protocols/ports listed in the m_connList list.
		//Connection attempts occur at intervals of 1.5 seconds. The first connection to succeed
		//will be used, all the others will be closed.
		for (var i = 0; i

Click here to see your bandwidth results
Download the source
This completes the tutorial series of the various methods to detect and stream media to flash clients. All three of these tutorials have built upon each other in order to provide solid methods for dynamically streaming any type of media via Flash Media Server.
Here are the links for this tutorial in its entirety:
Flash Media Server Streaming Speed Testing [Part 1] – Detect Upload, Download, and Latency Speeds
Flash Media Server Streaming Speed Testing [Part 2] – Detect Upload, Download, and Latency Speeds, and Port Connection
Flash Media Server Streaming Speed Testing [Part 3] – Compare Multiple Server Resources, Port Connections, Detect Upload, Download, and Latency Speed

Flash Media Server Streaming Speed Testing [Part 2] – Detect Upload, Download, and Latency Speeds, and Port Connection

Derek J Entringer — Tue, 12 May 2009 20:20:18 +0000

This tutorial is the second in a series of three. Part one of this tutorial outlined what is needed to detect a users upload, download, and latency between a Flash client and the Flash Media Server. Part 2 adds on the ability to detect which ports are available while connecting.

Again, Bandwidth detection is most important when connecting your users to the correctly compressed media to be streamed, recorded, or delivered via a Flash Media Server. This second example will walk you through the process of being able to detect a users download bandwidth, upload bandwidth, and the latency between the client computer and the host server, along with iterating through all of the available ports that allow you to connect to the Flash Media Server. All of the code is Actionscript 2.0, and I’ve setup a Flash Media Server 3.5 to host the server side scripting. I use Influxis as my Flash Media Server host for all of these tutorials and smaller examples.

First, we will add our NetConnManager object which will use the NetConnManager.as exteranal Actionscript file. This is the first part of our Flash Actionscript code.

import NetConnManager;

var startTime:Number = getTimer();
var ncm:NetConnManager = new NetConnManager();
var ncmListener:Object = new Object();

ncmListener.ncConnected = function(evt:Object) {
	trace("["+Math.round(getTimer()-startTime)+"ms] successfully connected using "+evt.protocol+":"+evt.port);
	conn_stat.text += "["+Math.round(getTimer()-startTime)+"ms] successfully connected using "+evt.protocol+":"+evt.port+newline;
};
ncmListener.ncFailedToConnect = function(evt:Object) {
	trace("failed to connect after "+evt.timeout+" ms");
	conn_stat.text += "failed to connect after "+evt.timeout+" ms"+newline;
};
ncm.addEventListener("ncConnected", ncmListener);
ncm.addEventListener("ncFailedToConnect", ncmListener);

ncm.connect("your.rtmphost.com", "your_application_name");

In order to get the above to work correctly with your own Flash Media Server, you simply need to edit the following line.

ncm.connect("your.rtmphost.com", "your_application_name");

The following code is the same as part one of this series of tutorials. If you have not read part one, you can find it here.

function connectMe() {
	rec_nc = new NetConnection();
	rec_nc.onStatus = function(info) {
		trace("Level: " + info.level + " Code: " + info.code);
		if (info.code == "NetConnection.Connect.Success") {
			trace("connected to: "+this.uri);
			conn_stat.text += "connected to: "+this.uri+newline;
			startTest(rec_nc);
		} else if (info.code == "NetConnection.Connect.Failed" || info.code == "NetConnection.Connect.Closed") {
			trace("no connection to app");
			conn_stat.text += "error connection failed"+newline;
		}
	};
	rec_nc.connect("rtmp://y9cq49zks4.rtmphost.com/bwcheck/");
}

function startTest(nc) {
	_global.bwInfo = new BandwidthInfo(nc);
	_global.bwInfo.start();
}

for (i=0; i<1000; i++) {
	data += "C->S";
}
function BandwidthInfo(nc) {
	this.nc = nc;
	this.maxLength = 10;
	this.bwInHistory = new Array(this.maxLength);
	this.bwInCtr = 0;
	this.bwOutHistory = new Array(this.maxLength);
	this.bwOutCtr = 0;
	this.pingHistory = new Array(this.maxLength);
	this.headIn = 0;
	this.headOut = 0;
	this.headPing = 0;
	this.bBWOutStop = false;
	this.bBWInStop = false;
	this.onBWInTimeout = function() {
		clearInterval(this.bwInfoTimeout);
		this.bwInfoTimeout = null;
		delete this.bwInfoTimeout;
		this.bBWInStop = true;

		if (this.bwInCtr == 0) {
			conn_stat.text += "unable to receive data from server."+newline;
			this.abort("unable to receive data from server.");
			return;
		}

		this.stop();
	};
	this.onBWOutTimeout = function() {
		clearInterval(this.bwInfoTimeout);
		this.bwInfoTimeout = null;
		delete this.bwInfoTimeout;
		this.bBWOutStop = true;

		if (this.bwOutCtr == 0) {
			conn_stat.text += "unable to receive data from server"+newline;
			this.abort("unable to send data to server");
			return;
		}

		trace("testing bandwidth from server");
		conn_stat.text += "testing bandwidth from server"+newline;
		this.bwInfoTimeout = setInterval(this, "onBWInTimeout", 5*1000);
		this.serverToClient();
	};
	this.clientToServer = function() {
		this.time = getTimer();
		size = 0;
		bwinfo = this;
		this.nc.ack = function(pingVal) {
			if (!bwinfo.bBWOutStop) {
				bwinfo.bwOutHistory[bwinfo.headOut++%bwinfo.maxLength] = Math.floor(size/(getTimer()-bwinfo.time)*1000);
				bwinfo.pingHistory[bwinfo.headPing++%bwinfo.maxLength] = pingVal;
				bwinfo.nc.call("recData", 0, data);
				size += 4000;
				bwinfo.bwOutCtr++;
			}
		};
		this.nc.call("recData", 0, data);
		this.nc.call("recData", 0, data);
	};
	this.serverToClient = function() {
		this.time = getTimer();
		size = 0;
		bwinfo = this;
		nc.onEcho = function() {
			if (!bwinfo.bBWInStop) {
				bwinfo.bwInHistory[bwinfo.headIn++%bwinfo.maxLength] = Math.floor(size/(getTimer()-bwinfo.time)*1000);
				this.call("echoData", 0, 0);
				size += 4000;
				bwinfo.bwInCtr++;
			}
		};
		nc.call("echoData", 0, 0);
		nc.call("echoData", 0, 0);
	};
	this.start = function() {
		conn_stat.text += "testing upload speed"+newline;
		trace("testing upload speed");
		clearInterval(this.bwInfoTimeout);
		this.bwInfoTimeout = null;
		delete this.bwInfoTimeout;
		this.bwInfoTimeout = setInterval(this, "onBWOutTimeout", 5*1000);
		this.clientToServer();
	};
	this.stop = function() {
		this.nc = null;
		var ping_rtt = 0;
		var bw_out = 0;
		var bw_in = 0;
		for (var i = 0; i1000) {
			s += "network appears to have a very high delay\n\n";
		}
		if ((bw_in>500) && (bw_out>200)) {
			s += "connection supports high quality speed\n\n";
		} else if ((bw_in>=200) && (bw_out>=100)) {
			s += "connection supports good quality speed\n\n";
		} else if ((bw_in>100) && (bw_out>80)) {//(bw_in<250) && (bw_out<80) &&
			s += "connection supports mid quality speed\n\n";
		} else if ((bw_in>20) && (bw_out>15)) {
			s += "connection supports slow quality speed\n\n";
		} else {
			s += "connection supports very slow quality speed\n\n";
		}
		trace(s);
		conn_stat.text += s+newline;
	};
	this.abort = function(reason) {
		conn_stat.text += "failed "+reason+newline;
		trace("failed "+reason);
	};
}

connectMe();

Next, lets setup our NetConnManager.as file. This external Actionscript class allows the ncm object to iterate through all of the available ports on the Flash Media Server, and lets you know which port it has connected successfully on the server. This is useful if you are dealing with a firewall that has blocked the default port of 1935.

import mx.events.EventDispatcher;
class NetConnManager extends Object {
	//EventDispatcher needs these
	var addEventListener:Function;
	var removeEventListener:Function;
	var dispatchEvent:Function;
	var dispatchQueue:Function;
	//Constants
	private var k_DEFAULTCONNLIST = [{protocol:"rtmp", port:1935}, {protocol:"rtmp", port:443}, {protocol:"rtmpt", port:80}, {protocol:"rtmps", port:443}];
	private var k_TIMEOUT:Number = 60000;
	//Variables
	private var m_connList:Array;
	private var m_serverName:String;
	private var m_appName:String;
	private var m_streamName:String;
	private var m_connListCounter:Number;
	private var m_flashComConnectTimeOut:Number;
	private var m_validNetConnection:NetConnection;
	//Constructor
	function NetConnManager() {
		EventDispatcher.initialize(this);
	}
	//Public
	//Initiates all the connection attempts.
	//Note: If no connection list is passed, the default list is used
	function connect(p_serverName:String, p_appName:String, p_connList:Array) {
		m_serverName = p_serverName;
		m_appName = p_appName;
		m_connList = (p_connList != undefined) ? p_connList : k_DEFAULTCONNLIST;
		//Set a timeout function, just in case we never connect successfully
		clearInterval(m_flashComConnectTimeOut);
		m_flashComConnectTimeOut = setInterval(this, "onFlashComConnectTimeOut", k_TIMEOUT, k_TIMEOUT);
		//Creates a NetConnection for each of the protocols/ports listed in the m_connList list.
		//Connection attempts occur at intervals of 1.5 seconds. The first connection to succeed
		//will be used, all the others will be closed.
		for (var i = 0; i

We now have our Flash file ready, but we still need our application setup on the Flash Server. Create a new application on your Flash Media Server, and name it however you want. That application name then goes into the connect function above, along with the url for the server.
Next, we want to create the server side code that will allow our final swf to call server side functions in order to return the correct upload, download, and latency values.
application.onAppStart = function (info){
	for ( i = 0; i < 500; i++ ) {
		data += "S->C";
	}
	Client.prototype.recData = function(data) {
		this.ping();
		var v = this.getStats();
		this.call("ack", 0, v.ping_rtt);
	}
	Client.prototype.echoData = function() {
		this.call("onEcho", 0, data);
	};
	Client.prototype.getBWInfo = function() {
		return this.getStats();
	};
	Client.prototype.onConnTimeout = function(){
		clearInterval( this.connTimeout );
		this.connTimeout = null;
		application.disconnect(this);
	}
}
application.onConnect = function(client_obj, id) {
	application.acceptConnection(client_obj);
}


And, there you have it. These scripts allow you to check the users upload and download bandwidth capabilities, check how slow the server is allowing you to connect using latency detection, and provides you with the correct port that may be available from within your current network.
Click here to see your bandwidth results
Download the source
Finally, be sure to have a look at my next tutorial using these same techniques. In part three, I will be adding the functionality to check multiple servers using this same code.
Here are the links for this tutorial in its entirety:
Flash Media Server Streaming Speed Testing [Part 1] – Detect Upload, Download, and Latency Speeds
Flash Media Server Streaming Speed Testing [Part 2] – Detect Upload, Download, and Latency Speeds, and Port Connection
Flash Media Server Streaming Speed Testing [Part 3] – Compare Multiple Server Resources, Port Connections, Detect Upload, Download, and Latency Speed

Flash Media Server Streaming Speed Testing [Part 1] – Detect Upload, Download, and Latency Speeds

Derek J Entringer — Tue, 12 May 2009 20:18:19 +0000

This tutorial is the first in a series of three that builds upon the first Flash Bandwidth & Port Detection tutorial I created a while back. These three articles look to make it even easier than the original post, and go more in depth on some of the streaming options, and have better structured server side code.

If you are interested in the original article, you can find it here.

Bandwidth detection is most important when connecting your users to the correctly compressed media to be streamed, recorded, or delivered via a Flash Media Server. This example will walk you through the process of being able to detect a users download bandwidth, upload bandwidth, and the latency between the client computer and the host server. All of the code is Actionscript 2.0, and I’ve setup a Flash Media Server 3.5 to host the server side scripting. I use Influxis as my Flash Media Server host for all of these tutorials and smaller examples.

Now, onto the code.

function connectMe() {
	rec_nc = new NetConnection();
	rec_nc.onStatus = function(info) {
		trace("Level: " + info.level + " Code: " + info.code);
		if (info.code == "NetConnection.Connect.Success") {
			trace("connected to: "+this.uri);
			conn_stat.text += "connected to: "+this.uri+newline;
			startTest(rec_nc);
		} else if (info.code == "NetConnection.Connect.Failed" || info.code == "NetConnection.Connect.Closed") {
			trace("no connection to app");
			conn_stat.text += "error connection failed"+newline;
		}
	};
	rec_nc.connect("rtmp://your.host.com/application_name/");
}

function startTest(nc) {
	_global.bwInfo = new BandwidthInfo(nc);
	_global.bwInfo.start();
}

for (i=0; i<1000; i++) {
	data += "C->S";
}
function BandwidthInfo(nc) {
	this.nc = nc;
	this.maxLength = 10;
	this.bwInHistory = new Array(this.maxLength);
	this.bwInCtr = 0;
	this.bwOutHistory = new Array(this.maxLength);
	this.bwOutCtr = 0;
	this.pingHistory = new Array(this.maxLength);
	this.headIn = 0;
	this.headOut = 0;
	this.headPing = 0;
	this.bBWOutStop = false;
	this.bBWInStop = false;
	this.onBWInTimeout = function() {
		clearInterval(this.bwInfoTimeout);
		this.bwInfoTimeout = null;
		delete this.bwInfoTimeout;
		this.bBWInStop = true;

		if (this.bwInCtr == 0) {
			conn_stat.text += "unable to receive data from server."+newline;
			this.abort("unable to receive data from server.");
			return;
		}

		this.stop();
	};
	this.onBWOutTimeout = function() {
		clearInterval(this.bwInfoTimeout);
		this.bwInfoTimeout = null;
		delete this.bwInfoTimeout;
		this.bBWOutStop = true;

		if (this.bwOutCtr == 0) {
			conn_stat.text += "unable to receive data from server"+newline;
			this.abort("unable to send data to server");
			return;
		}

		trace("testing bandwidth from server");
		conn_stat.text += "testing bandwidth from server"+newline;
		this.bwInfoTimeout = setInterval(this, "onBWInTimeout", 5*1000);
		this.serverToClient();
	};
	this.clientToServer = function() {
		this.time = getTimer();
		size = 0;
		bwinfo = this;
		this.nc.ack = function(pingVal) {
			if (!bwinfo.bBWOutStop) {
				bwinfo.bwOutHistory[bwinfo.headOut++%bwinfo.maxLength] = Math.floor(size/(getTimer()-bwinfo.time)*1000);
				bwinfo.pingHistory[bwinfo.headPing++%bwinfo.maxLength] = pingVal;
				bwinfo.nc.call("recData", 0, data);
				size += 4000;
				bwinfo.bwOutCtr++;
			}
		};
		this.nc.call("recData", 0, data);
		this.nc.call("recData", 0, data);
	};
	this.serverToClient = function() {
		this.time = getTimer();
		size = 0;
		bwinfo = this;
		nc.onEcho = function() {
			if (!bwinfo.bBWInStop) {
				bwinfo.bwInHistory[bwinfo.headIn++%bwinfo.maxLength] = Math.floor(size/(getTimer()-bwinfo.time)*1000);
				this.call("echoData", 0, 0);
				size += 4000;
				bwinfo.bwInCtr++;
			}
		};
		nc.call("echoData", 0, 0);
		nc.call("echoData", 0, 0);
	};
	this.start = function() {
		conn_stat.text += "testing upload speed"+newline;
		trace("testing upload speed");
		clearInterval(this.bwInfoTimeout);
		this.bwInfoTimeout = null;
		delete this.bwInfoTimeout;
		this.bwInfoTimeout = setInterval(this, "onBWOutTimeout", 5*1000);
		this.clientToServer();
	};
	this.stop = function() {
		this.nc = null;
		var ping_rtt = 0;
		var bw_out = 0;
		var bw_in = 0;
		for (var i = 0; i1000) {
			s += "network appears to have a very high delay\n\n";
		}
		if ((bw_in>500) && (bw_out>200)) {
			s += "connection supports high quality speed\n\n";
		} else if ((bw_in>=200) && (bw_out>=100)) {
			s += "connection supports good quality speed\n\n";
		} else if ((bw_in>100) && (bw_out>80)) {//(bw_in<250) && (bw_out<80) &&
			s += "connection supports mid quality speed\n\n";
		} else if ((bw_in>20) && (bw_out>15)) {
			s += "connection supports slow quality speed\n\n";
		} else {
			s += "connection supports very slow quality speed\n\n";
		}
		trace(s);
		conn_stat.text += s+newline;
	};
	this.abort = function(reason) {
		conn_stat.text += "failed "+reason+newline;
		trace("failed "+reason);
	};
}

connectMe();

In order to get the above to work correctly with your own Flash Media Server, you simply need to edit the following line.

rec_nc.connect("rtmp://your.host.com/application_name/");

We now have our Flash file ready, but we still need our application setup on the Flash Server. Create a new application on your Flash Media Server, and name it however you want. That application name then goes into the connect function above, along with the url for the server.

Next, we want to create the server side code that will allow our final swf to call server side functions in order to return the correct upload, download, and latency values.

application.onAppStart = function (info){
	for ( i = 0; i < 500; i++ ) {
		data += "S->C";
	}
	Client.prototype.recData = function(data) {
		this.ping();
		var v = this.getStats();
		this.call("ack", 0, v.ping_rtt);
	}
	Client.prototype.echoData = function() {
		this.call("onEcho", 0, data);
	};
	Client.prototype.getBWInfo = function() {
		return this.getStats();
	};
	Client.prototype.onConnTimeout = function(){
		clearInterval( this.connTimeout );
		this.connTimeout = null;
		application.disconnect(this);
	}
}
application.onConnect = function(client_obj, id) {
	application.acceptConnection(client_obj);
}

Click here to see your bandwidth results

Download the source

Next, take a look at how you can use the above code along with Port Detection to be sure that your users can connect to your Flash Media Server applications from behind certain firewall setting in the part two of this three part tutorial series.

Here are the links for this tutorial in its entirety:

Flash Media Server Streaming Speed Testing [Part 1] – Detect Upload, Download, and Latency Speeds

Flash Media Server Streaming Speed Testing [Part 2] – Detect Upload, Download, and Latency Speeds, and Port Connection

Flash Media Server Streaming Speed Testing [Part 3] – Compare Multiple Server Resources, Port Connections, Detect Upload, Download, and Latency Speed

Streaming A Live Event Using Mogulus

Derek J Entringer — Tue, 21 Apr 2009 22:42:23 +0000

One of my clients (borrispowell.com) has an upcoming fashion show, and we thought it would be pretty useful to promote the show as a streaming live production from his website the night of the unveiling of his latest creations. With this being one of his larger shows, we thought we would allow fans around the world to be able to watch the performance online, and for free.

Mogulus live broadcast tool seemed to be able to pull off the task of streaming the show for a pretty decent cost, and with only about 15 minutes of setup time. Their free streaming service only allows for 50 concurrent connected viewers, and for a streaming data rate of around 700kbps, but it may do the trick. We still have to get a feel for how the online streaming shows popularity is going to play out. If you shell out the $350 per month, you can have HD quality streaming, remove all of the ads, have access to a white label player, be provided deep analytics for your page viewers, and more importantly…have unlimited amounts of viewers.

So, with all of that said, I decided to set up my own account, get it streaming on my own site with chat enabled and some color customizations, and I was quite pleased with the results.

Feel free to check if I’m online, and to chat if you like

Click Here To Video Chat With Me Online

Flash Bandwidth & Port Detection

Derek J Entringer — Wed, 29 Oct 2008 18:42:16 +0000

Being able to detect a users bandwidth can be an important part of serving them streaming video. Using their bandwidth you can stream a video that will play well using their connection speeds.

The first step is to create our NetConnection.as file. This is used by our bandwidth checking script to connect to our Flash Media Server via RTMP, select an available port, and talk with our bw_check.asc to report the users available bandwidth.

import mx.events.EventDispatcher;
class NCManager extends Object {
	// EventDispatcher needs these
	var addEventListener:Function;
	var removeEventListener:Function;
	var dispatchEvent:Function;
	var dispatchQueue:Function;
	// Constants
	private var k_DEFAULTCONNLIST = [{protocol:"rtmp", port:1935}, {protocol:"rtmp", port:443}, {protocol:"rtmpt", port:80}, {protocol:"rtmps", port:443}];
	private var k_TIMEOUT:Number = 60000;
	// Variables
	private var m_connList:Array;
	private var m_serverName:String;
	private var m_appName:String;
	private var m_streamName:String;
	private var m_connListCounter:Number;
	private var m_flashComConnectTimeOut:Number;
	private var m_validNetConnection:NetConnection;
	// Constructor
	function NCManager() {
		trace("NCManager initialized");
		EventDispatcher.initialize(this);
	}
	// Public
	// Initiates all the connection attempts.
	// Note: If no connection list is passed, the default list is used
	function connect(p_serverName:String, p_appName:String, p_connList:Array) {
		m_serverName = p_serverName;
		m_appName = p_appName;
		m_connList = (p_connList != undefined) ? p_connList : k_DEFAULTCONNLIST;
		// Set a timeout function, just in case we never connect successfully
		clearInterval(m_flashComConnectTimeOut);
		m_flashComConnectTimeOut = setInterval(this, "onFlashComConnectTimeOut", k_TIMEOUT, k_TIMEOUT);
		// Creates a NetConnection for each of the protocols/ports listed in the m_connList list.
		// Connection attempts occur at intervals of 1.5 seconds. The first connection to succeed
		// will be used, all the others will be closed.
		for (var i = 0; i
The second step is to create our FMS server side code. The bwcheck.asc file sends packets at a size of about 16Kb from the FMS and calculates the response latency over the users network.
application.onConnect = function(p_client, p_autoSenseBW) {
	this.acceptConnection(p_client);
	if (p_autoSenseBW)
		this.calculateClientBw(p_client);
	else
		p_client.call("onBWDone");
}
Client.prototype.getStreamLength = function(p_streamName) {
	return Stream.length(p_streamName);
}
Client.prototype.checkBandwidth = function() {
	application.calculateClientBw(this);
}
application.calculateClientBw = function(p_client) {
	p_client.payload = new Array();
	for (var i=0; i<1200; i++){
		p_client.payload[i] = Math.random();//16K approx
	}
	var res = new Object();
	res.latency = 0;
	res.cumLatency = 1;
	res.bwTime = 0;
	res.count = 0;
	res.sent = 0;
	res.client = p_client;
	var stats = p_client.getStats();
	var now = (new Date()).getTime()/1;
	res.pakSent = new Array();
	res.pakRecv = new Array();
	res.beginningValues = {b_down:stats.bytes_out, b_up:stats.bytes_in, time:now};
	res.onResult = function(p_val) {
		var now = (new Date()).getTime()/1;
		this.pakRecv[this.count] = now;
		this.count++;
		var timePassed = (now - this.beginningValues.time);
		if (this.count == 1) {
			this.latency = Math.min(timePassed, 800);
			this.latency = Math.max(this.latency, 10);
		}
		if ( this.count == 2 && (timePassed<2000)) {
			this.pakSent[res.sent++] = now;
			this.cumLatency++;
			this.client.call("onBWCheck", res, this.client.payload);
		} else if ( this.sent == this.count ) {
			//see if we need to normalize latency
			if ( this.latency >= 100 ) {
				if (  this.pakRecv[1] - this.pakRecv[0] > 1000 ) {
					this.latency = 100;
				}
			}
			delete this.client.payload;
			//got back responses for all the packets compute the bandwidth
			var stats = this.client.getStats();
			var deltaDown = (stats.bytes_out - this.beginningValues.b_down)*8/1000;
			var deltaTime = ((now - this.beginningValues.time) - (this.latency * this.cumLatency) )/1000;
			if ( deltaTime <= 0 )
				deltaTime = (now - this.beginningValues.time)/1000;

			var kbitDown = Math.round(deltaDown/deltaTime);
			trace("onBWDone: kbitDown = " + kbitDown + ", deltaDown= " + deltaDown + ", deltaTime = " + deltaTime + ", latency = " + this.latency + "KBytes " + (stats.bytes_out - this.beginningValues.b_down)/1024) ;
			this.client.call("onBWDone", null, kbitDown,  deltaDown, deltaTime, this.latency );
		}
	}
	res.pakSent[res.sent++] = now;
	p_client.call("onBWCheck", res, "");
	res.pakSent[res.sent++] = now;
	p_client.call("onBWCheck", res, p_client.payload);
}

Third step. Bring everything together within our flash file, and print our results to text fields on the stage.
stop();

import NCManager;

var ns:NetStream;
var fileName:String;
var k_STARTTIME:Number = getTimer();

//server info
var k_SERVERNAME:String = "server_name";
var k_APPNAME:String = "application_folder_name";
var k_ASC_PATH:String = "rtmp://"+k_SERVERNAME+"/"+k_APPNAME+"/bwcheck.asc";

nc = new NetConnection();
nc.connect(k_ASC_PATH,true);
nc.onStatus = function(info) {
	trace("Level: "+info.level+" Code: "+info.code);
	if (info.code == "NetConnection.Connect.Success") {
		trace("loaded: "+this.uri);
	}
};

//the variable p_bw returned by bwcheck.asc holds a value equal to the detected download speed in kilobits per second
//for best results we should serve video that is encoded at a rate less than or equal to kbitsDown
NetConnection.prototype.onBWDone = function(p_bw) {
	trace("BANDWIDTH= "+p_bw);
	bandwidth.text = "Bandwidth= "+p_bw
	//close the Netconnection to bwcheck
	this.close();
};

NetConnection.prototype.onBWCheck = function() {
	return ++counter;
};

var ncm:NCManager = new NCManager();
var ncmListener:Object = new Object();

//fires when it has found a successfull connection
ncmListener.ncConnected = function(evt:Object) {
	trace("["+Math.round(getTimer()-k_STARTTIME)+"ms] Successfully connected using "+evt.protocol+":"+evt.port);
	port.text = "connected using "+evt.protocol+":"+evt.port
};

//fires when it has timed-out trying to find a good connection
ncmListener.ncFailedToConnect = function(evt:Object) {
	trace("Failed to connect after "+evt.timeout+" milliseconds.");
};

//fires when streamlength has been detected
ncmListener.ncStreamLength = function(evt:Object) {
	trace("["+Math.round(getTimer()-k_STARTTIME)+"ms] Streamlength of "+evt.name+" is "+evt.length+" seconds.");
};

//set listeners on the NCM instance
ncm.addEventListener("ncConnected",ncmListener);
ncm.addEventListener("ncFailedToConnect",ncmListener);
ncm.addEventListener("ncBandWidth",ncmListener);
ncm.addEventListener("ncStreamLength",ncmListener);

//call the connect method on NCM instance
ncm.connect(k_SERVERNAME,k_APPNAME);

Click here to see your bandwidth results.
Download the source
This tutorial has been updated, and is available in the following 3-part series:
Flash Media Server Streaming Speed Testing [Part 1] – Detect Upload, Download, and Latency Speeds
Flash Media Server Streaming Speed Testing [Part 2] – Detect Upload, Download, and Latency Speeds, and Port Connection
Flash Media Server Streaming Speed Testing [Part 3] – Compare Multiple Server Resources, Port Connections, Detect Upload, Download, and Latency Speed

AS3 MP3 Player

Derek J Entringer — Fri, 05 Sep 2008 16:22:33 +0000

I have an upcoming project that will require an mp3 player that can load multiple songs, and let users choose which track they would like to listen to. I created this as a test, and will be developing it further for use on the site itself.

The player loads in mp3′s from an external file based on xml settings.

Here’s the actionscript 3 that is involved:

var getMusic:URLRequest;
var music:Sound = new Sound();
var soundChannel:SoundChannel;
var currentSound:Sound = music;
var pos:Number;
var currentIndex:Number = 0;
var songPlaying:Boolean = false;
var xml:XML;
var songlist:XMLList;
//preloader
function loadProgress(event:ProgressEvent):void {
    var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);
	if(percentLoaded < 20){
		trace("loading");
	} else{
	}
}
function completeHandler(event):void {
    trace("DONE");
}
//load the xml
var loader:URLLoader = new URLLoader(); //create a new URLLoader Object
loader.addEventListener(Event.COMPLETE, whenLoaded); //add an event listener to that object
loader.load(new URLRequest("songs.xml")); //Requests our xml file that contains our song data
function whenLoaded(e:Event):void //WhenLoaded function(see line 50) runs when line 50 is complete
{
	xml = new XML(e.target.data);
	songlist = xml.song; //accesses our song tag in our xml file
	getMusic = new URLRequest(songlist[0].url);//get music from songlist
	music.load(getMusic);//load music
	soundChannel = music.play();//plays the music
	songTXT.text = songlist[0].title; //gets song name from xml
	artistTXT.text = songlist[0].artist; //gets artist name
	albumTXT.text = songlist[0].album;  //gets album name
	soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);//runs the next song function when a song completes
}
//add mouse events
next_btn.addEventListener(MouseEvent.CLICK, nextSong);
prev_btn.addEventListener(MouseEvent.CLICK, prevSong);
pause_btn.addEventListener(MouseEvent.CLICK,pauseSong);
/*--------Skips Songs----------------------------------------*/
function nextSong(e:Event):void
{
	if (currentIndex > (songlist.length() - 1))
	{
		currentIndex++;
	}
	else
	{
		currentIndex = 0;
	}
	var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);
	var nextTitle:Sound = new Sound(nextReq);
	soundChannel.stop();
	songTXT.text = songlist[currentIndex].title;
	artistTXT.text = songlist[currentIndex].artist;
	albumTXT.text = songlist[currentIndex].album;
	soundChannel = nextTitle.play();
	songPlaying = true;
	currentSound = nextTitle;
	soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
//manage songs, and load their info
function prevSong(e:Event):void
{
	if (currentIndex < 0)
	{
		currentIndex--;
	}
	else
	{
		currentIndex = songlist.length() - 1;
	}
	var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);
	var prevTitle:Sound = new Sound(nextReq);
	soundChannel.stop();
	songTXT.text = songlist[currentIndex].title;
	artistTXT.text = songlist[currentIndex].artist;
	albumTXT.text = songlist[currentIndex].album;
	soundChannel = prevTitle.play();
	songPlaying = true;
	currentSound = prevTitle;
	soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
function pauseSong(e:Event):void
{
	pos = soundChannel.position; //pause song at current position
	soundChannel.stop(); //stop sound
	songPlaying = false; // songPlaying is now equal to false
	play_btn.addEventListener(MouseEvent.CLICK,playSong);
}
function playSong(e:Event):void
{
	if(songPlaying == false) //if songplaying is equal to false run function below
	{
		soundChannel = currentSound.play(pos); //play from current position(used if it was paused)
		soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);//run nextSong function if current song is complete
		songPlaying = true; //songPlaying is now true
		play_btn.removeEventListener(MouseEvent.CLICK,playSong);
	}
}

Here is the xml:



	
		My Hero
		Foo Fighters
		The Colour And The Shape
		songs/Hero.mp3
	
	
		Learn To Fly
		Foo Fighters
		Theres Nothing Left To Lose
		songs/Fly.mp3

Download the source (Note: The mp3′s used are not included in the download)

Myspace Flash AS2 RSS Feed Reader

Derek J Entringer — Fri, 22 Aug 2008 18:14:53 +0000

A very simple RSS feed reader that displays links off to your blog created using Actionscript 2.

stop();
//create the xml object
xmlLoad = new XML();
xmlLoad.load(_root.feed);
xmlLoad.ignoreWhite = true;
xmlLoad.onLoad = function(success){
	//if successful
	if(success && xmlLoad.status == 0){
		//reset the text
		xml_text="";
		//list of items
		var xmlItems:XML = xmlLoad.firstChild.firstChild;
		for (var m = 0; m<xmlItems.childNodes.length; m++) {
			//grab each item
			if (xmlItems.childNodes[m].nodeName == "item") {
				for (var n = 0; n<xmlItems.childNodes[m].childNodes.length; n++) {
					if (xmlItems.childNodes[m].childNodes[n].nodeName == "link") {
						//grab the link of the item
						itemlink=xmlItems.childNodes[m].childNodes[n].firstChild.toString();
					}
					if (xmlItems.childNodes[m].childNodes[n].nodeName == "title") {
						//grab the title of the item
						itemtitle=xmlItems.childNodes[m].childNodes[n].firstChild.toString();
					}
				}
				//add the current item
				xml_text+= "<a href=\""+itemlink+"\">"+itemtitle+"</a><br><br>";
			}
		}
	}
	//set the text
	xml_holder.text = xml_text;
}

The only library item needed is a TextArea component, placed on the stage with an instance name of “xml_holder”.

In order to embed and display this on your Myspace page (or anywhere really) you only need the following code:

<object data="http://www.derekentringer.com/downloads/xml_reader/xml_reader.swf?feed=http://www.derekentringer.com/blog/feed/" type="application/x-shockwave-flash" width="300" height="450"><param name="movie" value="http://www.derekentringer.com/downloads/xml_reader/xml_reader.swf?feed=http://www.derekentringer.com/blog/feed/"/></object>

Be sure to change the “?feed” variable to the url of your own RSS feed.

Click here for a preview

Download the source

.htaccess and SEO

Derek J Entringer — Thu, 21 Aug 2008 21:52:53 +0000

Inbound Links

A .htaccess file can be an SEO’s vital friend. When visitors hit your site with either www.yourdomain.com or yourdomain.com, it splits your inbound links into two separate pages. This can have effects on your Google Page Rank. By correctly creating and implementing a .htaccess file at your server root, you can improve your website ranking.

To change the url in the browser before the page loads you can use two different methods.

Here, the url will always contain the www. before the domain name:

RewriteCond %{HTTP_HOST} .
RewriteCond %{HTTP_HOST} !^www\.derekentringer\.com [NC]
RewriteRule (.*) http://www.derekentringer.com/$1 [R=301,L]

Here, you can take the www. away:

RewriteCond %{HTTP_HOST} .
RewriteCond %{HTTP_HOST} !^www\.derekentringer\.com [NC]
RewriteRule (.*) http://derekentringer.com/$1 [R=301,L]

By deciding which of these ways of keeping your inbound links will work best, you can improve your search engine results.

301 Redirects

Redirect 301 / http://www.yournewdomain.com/

The above code is to be used when pointing multiple domain names to one domain (the main site) . This is often done by businesses wishing to protect their trademark by purchasing similar names and various top level domain names (TLD) for their company. This is also good for companies wishing to capture type in traffic of users who type keywords straight into the toolbars or their url area of the browser.

By using both of these methods, you can keep a tight seal around all of your inbound links, improve your SEO and Google Page Rank, and keep the files on your server more organized.

Keep Directory Index File Name Out of Your URL

Sometimes it just looks nicer to not have a url such as http://www.derekentringer.com/index.php. All we want is http://www.derekentringer.com.
Using your .htaccess you can eliminate it easily. You can also specify any directories that you might not want it to parse out the index file.

# Main Index exclude
DirectoryIndex index.php
RewriteCond $1 !^(index\.php|robots\.txt)
RewriteCond %{REQUEST_URI} !^/DirectoryYouDoNotWantChangedHere
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Now, there will never be an index file listed in the url, except for the directory “DirectoryYouDoNotWantChangedHere”.

Error Document Redirects

Instead of using a Control Panel to process redirects, you can use your .htaccess file. These links can either be redirected to your home page, or you can setup an error document.

# Handle Errors
ErrorDocument 100 http://www.derekentringer.com
ErrorDocument 101 http://www.derekentringer.com
ErrorDocument 102 http://www.derekentringer.com
# 2xx
ErrorDocument 200 http://www.derekentringer.com
ErrorDocument 201 http://www.derekentringer.com
ErrorDocument 202 http://www.derekentringer.com
ErrorDocument 203 http://www.derekentringer.com
ErrorDocument 204 http://www.derekentringer.com
ErrorDocument 205 http://www.derekentringer.com
ErrorDocument 206 http://www.derekentringer.com
ErrorDocument 207 http://www.derekentringer.com
# 4xx
ErrorDocument 400 http://www.derekentringer.com
ErrorDocument 401 http://www.derekentringer.com
ErrorDocument 402 http://www.derekentringer.com
ErrorDocument 403 http://www.derekentringer.com
ErrorDocument 404 http://www.derekentringer.com
ErrorDocument 405 http://www.derekentringer.com
ErrorDocument 406 http://www.derekentringer.com
ErrorDocument 407 http://www.derekentringer.com
ErrorDocument 408 http://www.derekentringer.com
ErrorDocument 409 http://www.derekentringer.com
ErrorDocument 410 http://www.derekentringer.com
ErrorDocument 411 http://www.derekentringer.com
ErrorDocument 412 http://www.derekentringer.com
ErrorDocument 413 http://www.derekentringer.com
ErrorDocument 414 http://www.derekentringer.com
ErrorDocument 415 http://www.derekentringer.com
ErrorDocument 416 http://www.derekentringer.com
ErrorDocument 417 http://www.derekentringer.com
ErrorDocument 418 http://www.derekentringer.com
ErrorDocument 419 http://www.derekentringer.com
ErrorDocument 420 http://www.derekentringer.com
ErrorDocument 421 http://www.derekentringer.com
ErrorDocument 422 http://www.derekentringer.com
ErrorDocument 423 http://www.derekentringer.com
ErrorDocument 424 http://www.derekentringer.com
ErrorDocument 425 http://www.derekentringer.com
ErrorDocument 426 http://www.derekentringer.com
# 5xx
ErrorDocument 500 http://www.derekentringer.com
ErrorDocument 501 http://www.derekentringer.com
ErrorDocument 502 http://www.derekentringer.com
ErrorDocument 503 http://www.derekentringer.com
ErrorDocument 504 http://www.derekentringer.com
ErrorDocument 505 http://www.derekentringer.com
ErrorDocument 506 http://www.derekentringer.com
ErrorDocument 507 http://www.derekentringer.com
ErrorDocument 508 http://www.derekentringer.com
ErrorDocument 509 http://www.derekentringer.com
ErrorDocument 510 http://www.derekentringer.com

Alternate to ErrorDocument

Instead of listing out all of the error types, you can also use the much shorter version:

### ALTERNATIVE TO USING ERRORDOCUMENT ###
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ /error.php [L]

This will push all of your errors to a single page.

That’s really just the beginning of what the .htaccess file is capable of, as it has an extensive set of capabilities.

Flex File Browser – PDF, Images, and Video Player

Derek J Entringer — Thu, 21 Aug 2008 18:09:07 +0000

Flex has a lot to offer when it comes to file manipulation and viewing/interaction. The AIR environment is perfect for an “explorer” type application.

Here’s a quick file browser in Flex:



	
	
		
                    
                        
                    
                ;
            private function menuHandler(event:MenuEvent):void  {
                if (event.item.@data != "top") {
                    if(event.item.@data == "browse_files"){
                    	browseDir(event);
                    }
                }
            }
			if(HTMLLoader.pdfCapability == HTMLPDFCapability.STATUS_OK) {
				trace("PDF content can be displayed");
			}else {
				trace("PDF cannot be displayed. Error code:", HTMLLoader.pdfCapability);
			}
			private function init():void{
				fileSystemTree.directory = File.desktopDirectory;
            	menuBarCollection = new XMLListCollection(menubarXML);
			}
			private function browseDir(e:Event):void{
				var dir:File = new File();
				dir.browseForDirectory("Select directory");
				dir.addEventListener(Event.SELECT, onDirSelect);
			}
			private function onDirSelect(event:Event):void{
				fileSystemTree.directory = event.currentTarget as File;
			}
			private function onChange(e:Event):void{
				var file:File = e.currentTarget.selectedItem as File;
				if(!file.isDirectory){
					var viewer:Object;
					switch(file.extension.toLowerCase()){
						case "flv":
							currentState = "videoState";
							viewer = videoDisplay;
							viewer.source = file.url;
						break;
						case "png":
						case "jpg":
							currentState = "imageState";
							viewer = image;
							viewer.source = file.url;
						break;
						case "pdf":
							currentState = "pdfState";
							var htmlLoader:HTMLLoader = new HTMLLoader();
							var urlReq:URLRequest = new URLRequest(file.url);
							htmlLoader.width = 814;
							htmlLoader.height = 705;
							htmlLoader.load(urlReq);
							var myComponent:UIComponent  = new UIComponent();
							myComponent.addChild(htmlLoader);
							pdf_content.addChild(myComponent);
						break;
						default:
							Alert.show("Unsupported file " + file.nativePath, "Error");
						return;
					}
				}
			}
		]]>

The result:

Download the source

FLV Player (Streaming) using Dynamic Buffering, Port Detection, and Bandwidth Checks

Derek J Entringer — Thu, 21 Aug 2008 16:41:56 +0000

This FLV player has quite a few advanced options included. The video is streamed from a Flash Media server, dynamically buffered, and playable. The server side scripts allow for dynamic port detection, and you can setup the player to serve differently encoded flv files based on the users bandwidth.

First let’s start with our external classes.


stop();

/*--------------------------------------------------------------------------------*/
//external classes
/*--------------------------------------------------------------------------------*/
import NCManager;
import mx.transitions.Tween;

We’re using the NCManager.as file as provided by Adobe. This external class allows us to manage our port connection list as well as detect a users bandwidth when they load our swf. I have included this file in the downloadable source, but we won’t be going over it in detail here.

Next we have our dynamic buffer animation. This function is used whenever the user may have caught up to the buffer available for the streaming video. There is a timer object that monitors the buffer level, and uses this animation as needed.


/*--------------------------------------------------------------------------------*/
//dynamic buffering
/*--------------------------------------------------------------------------------*/

function startBufferAnimation() {
	if (ns.time>"0") {
		//hide animation
		clearInterval(startBufferAnimation_interval);
		buffer_graphic._alpha = 0;
		buffer_graphic._x = 5000;
	} else {
		//show animation
		buffer_graphic._alpha = 100;
		//display the buffer progress
		totalBuffer = ns.bufferTime;
		currentBuffer = ns.bufferLength;
		loadingText = Math.round((currentBuffer/totalBuffer)*100);
		if (loadingText<=100) {
			buffer_graphic.loading_txt.text = loadingText+"%";
		} else {
			buffer_graphic.loading_txt.text = "100%";
			clearInterval(startBufferAnimation_interval);
		}
	}
}

Let’s load the video from the Flash Media Server. Here we will be connecting to our server using the NCManager class, looking for the bandwidth available for our current user, and recording some information about the video to be used in our controls such as scrubbing. Something that is available to us within this next bit is the ability to use the bandwidth returned by the bwcheck.as on the FMS. You could setup different variables for the k_FILENAME to be loaded based on the returned bandwidth checks. Different data rates for the same video can be served to your site visitors to make sure they have the best viewing experience possible.


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

//variables
var firstFramePending:Boolean = true;
var firstPlayPending:Boolean = true;
var ns:NetStream;
var fileName:String;

//constants
var k_STARTTIME:Number = getTimer();

//server info
var k_SERVERNAME:String = "your-server-ip";
var k_APPNAME:String = "app-name";
var k_FILENAME:String = "flv-file-name";
var k_ASC_PATH:String = "rtmp://your-fms-server-ip/app-name/bwcheck.asc";

//connect to the bwcheck.asc
nc = new NetConnection();
//connect to the bwcheck.asc
nc.connect(k_ASC_PATH,true);
//let us know that the connection was successful
nc.onStatus = function(info) {
	trace("Level: "+info.level+" Code: "+info.code);
	if (info.code == "NetConnection.Connect.Success") {
		trace("loaded: "+this.uri);
	}
};

//the variable p_bw returned by bwcheck.asc holds a value equal to the detected download speed in kilobits per second
//for best results we should serve video that is encoded at a rate less than or equal to kbitsDown
NetConnection.prototype.onBWDone = function(p_bw) {
	trace("BANDWIDTH= "+p_bw);
	//save the detected bandwidth
	detected_bw = p_bw;
	//close the Netconnection to bwcheck
	this.close();
};

//calling the serverside script
NetConnection.prototype.onBWCheck = function() {
	return ++counter;
};

//define an instance of our NCManager class
var ncm:NCManager = new NCManager();

//create the listener object
var ncmListener:Object = new Object();

//fires when it has found a successfull connection
ncmListener.ncConnected = function(evt:Object) {
	trace("["+Math.round(getTimer()-k_STARTTIME)+"ms] Successfully connected using "+evt.protocol+":"+evt.port);
	//as soon as we have a good connection, play the first frame
	playFirstFrame(evt.nc);
};
//fires when it has timed-out trying to find a good connection
ncmListener.ncFailedToConnect = function(evt:Object) {
	trace("Failed to connect after "+evt.timeout+" milliseconds.");
};
//fires when bandwdith has been detected
ncmListener.ncBandWidth = function(evt:Object) {
	//--not working--> //trace("["+Math.round(getTimer()-k_STARTTIME)+"ms] Measured bandwidth at "+evt.kbps+" kbps.");
	fileName = k_FILENAME;
	ncm.getStreamLength(fileName);
	trace("LOADED FILE= "+fileName);
};
//fires when streamlength has been detected
ncmListener.ncStreamLength = function(evt:Object) {
	trace("["+Math.round(getTimer()-k_STARTTIME)+"ms] Streamlength of "+evt.name+" is "+evt.length+" seconds.");
	//save stream length info
	//vid_length = evt.length;
};
//set listeners on the NCM instance
ncm.addEventListener("ncConnected",ncmListener);
ncm.addEventListener("ncFailedToConnect",ncmListener);
ncm.addEventListener("ncBandWidth",ncmListener);
ncm.addEventListener("ncStreamLength",ncmListener);

//call the connect method on NCM instance
ncm.connect(k_SERVERNAME,k_APPNAME);
//set up the NetStream and plays the first frame of the stream
function playFirstFrame(nc:NetConnection):Void {
	ns = new NetStream(nc);
	ns.onStatus = function(info) {
		if (info.code == "NetStream.Play.Stop" && firstFramePending) {
			firstFramePending = false;
			trace("["+Math.round(getTimer()-k_STARTTIME)+"ms] First frame loaded");
			//once the first frame has loaded, measure the bandwidth
			nc.call("checkBandwidth",null);
		}
	};
	//vid length
	ns.onMetaData = function(infoObject:Object) {
		my_duration = infoObject["duration"];
		//trace(my_duration);
		timing(my_duration);
	};
	//display the first frame of the best quality flv
	video.attachVideo(ns);
	//buffer the video
	//set buffer parameters
	startBufferLength = 10;
	expandedBufferLength = 20;
	//attach onStatus function
	ns.onStatus = function(infoObject:Object) {
		if (infoObject["code"] == "NetStream.Buffer.Full") {
			ns.setBufferTime(expandedBufferLength);
			trace("SET EXPANDED BUFFER");
			buffer_graphic._alpha = 0;
		}
		if (infoObject["code"] == "NetStream.Buffer.Empty") {
			ns.setBufferTime(startBufferLength);
			trace("SET START BUFFER");
			buffer_graphic._alpha = 100;
		}
	};
	//start the buffer
	ns.setBufferTime(startBufferLength);
	//display buffer graphic
	startBufferAnimation_interval = setInterval(startBufferAnimation, 150);
	ns.play(k_FILENAME);

}

Now that we have our video loaded, we can use some simple controls. Below I have setup a scrub bar, volume, play/pause, rewind, and download buttons.


/*--------------------------------------------------------------------------------*/
//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);
		};
		timer_bar.scrubber.onRollOver = function(){
			timer_bar.scrubber.gotoAndStop(2);
		};
		timer_bar.scrubber.onRollOut = function(){
			timer_bar.scrubber.gotoAndStop(1);
		};
	}
}

/*--------------------------------------------------------------------------------*/
//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);
	}
};
b_volume.onRollOver = function() {
	b_volume.b_sound_a.gotoAndStop(2);
	b_volume.b_sound_b.gotoAndStop(2);
}
b_volume.onRollOut = function() {
	b_volume.b_sound_a.gotoAndStop(1);
	b_volume.b_sound_b.gotoAndStop(1);
}

/*--------------------------------------------------------------------------------*/
//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_play.onRollOver = function(){
	b_play.b_play_a.gotoAndStop(2);
	b_play.b_play_b.gotoAndStop(2);
};
b_play.onRollOut = function(){
	b_play.b_play_a.gotoAndStop(1);
	b_play.b_play_b.gotoAndStop(1);
};
b_rewind.onRelease = function() {
	ns.seek(0);
};
b_rewind.onRollOver = function(){
	b_rewind.gotoAndStop(2);
}
b_rewind.onRollOut = function(){
	b_rewind.gotoAndStop(1);
};
download.onRelease = function() {
	getURL("http://path/to/downloadable/movie", "_blank");
};
download.onRollOver = function(){
	download.gotoAndStop(2);
}
download.onRollOut = function(){
	download.gotoAndStop(1);
}

Here’s a screenshot of the end result:

Download the source

FLV Player (Progressive Download) with Preloader

Derek J Entringer — Thu, 21 Aug 2008 16:41:02 +0000

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

FMS (Flash Media Server) Video Chat

Derek J Entringer — Thu, 21 Aug 2008 16:40:24 +0000

Here’s a quick way to setup a Flash Media Server chat room. This process only allows for two users to video chat over Flash Media Server, and was the start of a larger project that I was involved with.

Setting Up the Flash Media Server Application

It really doesn’t matter what you use in terms of either a FMS hosting company, or your own. Most of the FMS hosting companies use the same techniques when setting up their servers for users, but that might not always be true. In general, you simply need to make sure that you setup a new Application so that the chat app has somewhere to store the published stream, and so that other flash files connected to the same Application can find that stream.

I use the hosting service provided by Influxis.com. It’s not as powerful as hosting my own FMS installation, but it definitely does the trick for anything small or for testing.

If you use Influxis, or are going to after reading this article, here’s how to setup an Application on your server. As I mentioned, this may vary from host to host, but it’s generally the exact same process.

1) Login to your account, and choose the “File Admin” tab.
2) Click “Add New Application”.
3) Give your application a name. This can be anything you want.
4) You can leave “Include the standard main.asc file” turned on.
5) Hit Continue.
6) Copy and paste the rtmp address into the NetConnection connect portion of both of our users fla files.

client_nc.connect("rtmp://fms-server/app-name/");

You will need to replace “rtmp://fms-server/app-name/” with the rtmp address that the Influxis interface has provided you with. If you don’t use Influxis, you probably already know how your server is setup, and how to reference your new Application folder.

Now, I have two flash files that connect to the same application on the FMS. Each one publishes to a stream called “live”. There are two video objects on the stage that act as a preview of yourself, and the live camera from the other user. (The small video object on the left is your preview, and the larger on the right is the person you are talking to.)

Here is the code for the “user_1″ swf file:


stop();

//setup the camera and mic for streaming
mycam = Camera.get();
mycam_audio = Microphone.get();

//control the cameras mode and quality
mycam.setMode(320,240,30);
mycam.setQuality(10000,100);

//attach a live preview of the camera to the
//video object that is setup on the stage
cam_feed.attachVideo(mycam);
cam_feed.attachAudio(mycam_audio);

//connect to the Flash Media Server
client_nc = new NetConnection();
client_nc.connect("rtmp://fms-server/app-name/");
cam_ns = new NetStream(client_nc);

//attach our camera video and audio to the net stream
cam_ns.attachVideo(mycam);
cam_ns.attachAudio(mycam_audio);

//publish to our Flash Media Server as a
//live stream called user_1
cam_ns.publish("user_1", "live");

//bring in user_2's video/audio
in_ns = new NetStream(client_nc);
in_ns.play("user_2");

//attach user_1's published audio and video
//so we can see them in the larger chat window
live_feed.attachVideo(in_ns);
live_feed.attachAudio(in_ns);

And here is the code for the “user_2″ swf file:


//setup the camera and mic for streaming
mycam = Camera.get();
mycam_audio = Microphone.get();

//control the cameras mode and quality
mycam.setMode(320,240,30);
mycam.setQuality(10000,100);

//attach a live preview of the camera to the
//video object that is setup on the stage
cam_feed.attachVideo(mycam);
cam_feed.attachAudio(mycam_audio);

//connect to the Flash Media Server
client_nc = new NetConnection();
client_nc.connect("rtmp://fms-server/app-name/");
cam_ns = new NetStream(client_nc);

//attach our camera video and audio to the net stream
cam_ns.attachVideo(mycam);
cam_ns.attachAudio(mycam_audio);

//publish to our Flash Media Server as a
//live stream called user_2
cam_ns.publish("user_2", "live");

//bring in user_1's video/audio
in_ns = new NetStream(client_nc);
in_ns.play("user_1");

//attach user_1's published audio and video
//so we can see them in the larger chat window
live_feed.attachVideo(in_ns);
live_feed.attachAudio(in_ns);

You’ll notice the only difference between the two is how the streams are being published. User_1′s stream publishes to “user_1″ and User_2 publishes to “user_2″. Each then streams in the others live stream while also showing their own stream as a preview for the other user.

Upload the user_1 and user_2 folders to your server (it doesn’t matter where they go on your server, just be sure you know how to get to them using your browser), and browse to them in two separate tabs, or windows. You will then get the same results that I have in the screen shot below.

So by creating an application folder on your FMS server, you can instantly chat with anyone. It’s not extremely robust, but with a little more work, it could turn into a full application.

Here’s a screen shot with me chatting with myself to give you an idea of what we are accomplishing.

Download the source

Papervision3d – Simple Mouse Controlled Interactive Sphere

Derek J Entringer — Thu, 21 Aug 2008 16:39:26 +0000

Here’s a class that renders a simple wireframe sphere in Papervision3d, and allows the mouse to control the pitch and yaw. This example can be applied to any simple interactive environment.

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import org.papervision3d.cameras.*;
	import org.papervision3d.objects.*;
	import org.papervision3d.scenes.*;
	import org.papervision3d.materials.*;

	public class PaperVisionTest extends Sprite {
		/** setup the container */
		private var container: Sprite = new Sprite();

		/** setup the scene */
		private var scene: MovieScene3D = new MovieScene3D(container);

		/** setup the camera */
		private var camera: Camera3D = new Camera3D();

		/** setup the material */
		private var material:WireframeMaterial = new WireframeMaterial(0xFF0000);

		/** setup the sphere */
		private var sphere:Sphere = new Sphere(material, 300, 30, 30);

		/**
		* constructor
		*/
		public function PaperVisionTest() {
			//add the container
			container.x = stage.stageWidth/2;
			container.y = stage.stageHeight/2;
			addChild(container);

			//camera parameters
			camera.z = -500;
			camera.zoom = 5;

			//give the sphere to the scene
			scene.addChild(sphere);

			stage.addEventListener(Event.ENTER_FRAME, update);
		}

		/**
		* Triggered by the enter frame event
		* @param pEvent Event object passed by the dispatcher
		*/
		private function update(pEvent:Event):void {

			//initialize the camera
			sphere.lookAt(camera);

			//mouse movement control
			sphere.pitch(this.mouseY);
			sphere.yaw(this.mouseX);

			//render the scene
			scene.renderCamera(camera);
		}
	}
}

The final result:

Click here to download the source.

Simple Papervision3d Scene

Derek J Entringer — Thu, 21 Aug 2008 16:38:49 +0000

Here’s a simple scene that renders a Papervision3d scene within a container. There are no 3d elements added, but this is as simple as it gets.

import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import org.papervision3d.scenes.*;

var container:Sprite = new Sprite();
addChild(container);
container.x = stage.stageWidth * 0.5;
container.y = stage.stageHeight * 0.5;

var scene:Scene3D = new Scene3D(container);
var camera:Camera3D = new Camera3D();
camera.zoom = 11;

addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void
{
    scene.renderCamera(camera);
}

If you’re interested in how this can be improved, check out the next post with a more elaborate Papervision scene.

Flash CS3: Easy to use XML Feed Class

Derek J Entringer — Thu, 21 Aug 2008 16:38:01 +0000

Re-usable class created by brianConnatser that will set up an external XML feed to use E4X, datagrids, and much more.

Check out some of the code