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

Adobe AIR for Mobile 2.5 on Android 2.1

Derek J Entringer — Tue, 20 Apr 2010 04:09:24 +0000

Adobe is currently in it’s prerelease stages of testing AIR for Mobile, specifically on Android, and I’ve been one of the lucky developers invited to participate. Adobe was even kind enough to send over some Google Nexus One phones to get going and testing on multiple devices. (Thanks Michael Chou).

The first thing I’ve noticed when using AIR for Mobile is that it’s WORLDS easier than porting Flash content to the iPhone. Simply publish your swf and use the AIR SDK and Android SDK to convert and port the content directly to your phone. Done. You can either install the newly published apps using the Android SDK, or you can upload them to a server and browse to the the .apk files and install them directly from a website. If you install from a server (and not Google Marketplace) you just have to be sure that your device allows for “Unknown sources”.

I’ve also been involved in the CS5 Prerelease, and when publishing for the iPhone there were mobile provisioning files connected to certain devices and those devices were particular in the UDID provided with every Apple product and producing the security certificates (.p12 files) just added even more to the headaches in getting setup.

Well, when working with AIR 2.5 and the Android SDK, it way faster/easier. It took just a little getting used to the command line prompts, and my first Hello World app was off and running.

Note: The command prompt interface is only part of the early development stages. It will not be necessary in future releases.

I’ve also noticed quite a difference in terms of the speed at which Android seems to run compared to the iPhone/iTouch. AIR on Android reacts just as fast as the native Android applications, or at least really close. It’s performing much better than any results that I’ve gotten from the iPhone or iTouch. We’ll have to see how much it will improve over time, as this was the first build of AIR 2.5.

Now, the app that I had setup for iTunes is a Educational piece created for Pearson Education, and done in coordination with Media-Fuse. Here’s a video of the Android version for Digit Cards – Close to 20, 100, 100 Math Card game in action.

Here’s the same game, but in the iPhone version (in this video, an iTouch is used).

I also successfully installed Digit Cards on the Motorola Droid, but the resolution still needs to be adjusted from the Nexus One. I’ll see if I can port it over to the 480×854 from the Nexus 480×800, and also share that video here.

Overall, AIR for Mobile on Android is really off to a great start. Can’t wait for more builds to test. Adobe, you rock!

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

FLVPlayer.com – Flash Video Components

Derek J Entringer — Mon, 15 Jun 2009 22:00:21 +0000

I’ve recently partnered with the owner of FLVPlayer.com, and we have some very interesting things planned for our next version of our Flash Video Components.

The name FLVplayer doesn’t limit our video player to FLV video files. Using our component you can deploy video players that support all of the video formats available through the Adobe Flash platform including, but not limited to, MOV, MP4, F4V, and of course FLV.

Playing videos isn’t the only functionality we’ve included in FLVplayer. Go beyond simply displaying video on your site and push your projects to the next level. Customize the FLVplayer in look and feel, and give your website visitors and project end users the ultimate experience in online video.

Some of the new features will include:

new interface
new functionality
user friendly
highly customizable

We’re currently about a week away from completing the updated FlvPlayer Flash Component, and more details will be available here once the component is released for sale.

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

Stratus – P2P Communication Using RTMFP and Flash 10

Derek J Entringer — Wed, 22 Apr 2009 15:14:20 +0000

After doing some research on live broadcasting events using streaming video, I happened to come across a beta Adobe product called Stratus which builds upon Adobe’s RTMP. Not to confuse RTMP (Real Time Media Protocol) with RTMFP (Real Time Media Flow Protocol), RTMFP is a new communication protocol built by Adobe that will let users connect and communicate using P2P between multiple clients running a Flash or Adobe AIR application.

Stratus as defined by Adobe…

Stratus is a hosted rendezvous service that aids in establishing communications between Flash Players or Adobe AIR endpoints using RTMFP. Flash Player endpoints must stay connected to the server during the entire time of communications. Unlike Flash Media Server, Stratus does not stream video or support media relay, shared objects, or scripting. Stratus is being made available as a beta service through Adobe Labs to allow our developer community to begin building applications using RTMFP.

…which basically states that Stratus can be used in combination with Flash Media Server to allow for developers to easily connect a small amount of users (at the moment) directly instead of through the Flash Media Server using peer-to-peer technology.

Flash Media Server is built to support client to server communication. Stratus breaks free of that structure and allows client to client communication. This is a great starting point for Flash and P2P application development.

Unfortunately, this system was not intended to create an infinitely scalable MMORPG, although, there are some variables within the Stratus environment that will allow you to push the user limit over the default of 5.

Adobe’s first iteration of RTMFP is really only a taste of what is to come, and is only a glimpse into the Flash world of P2P.

Here are some tutorial resources I’ve put together. Feel free to leave any that you have also found helpful in learning how to effectively use Stratus.

Stratus Home Page
Get A Stratus Developer Key
Adobe Labs Stratus FAQ
Adobe Labs Stratus Sample Application w/source
Tutorial and Downloadable Files from Influxis.com
Stratus Application Using PHP/MySQL
Stratus, Python, and File Sharing
Stratus Basics

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

Flex 3 | Simple FLV Player | Scrubbing, Pause, and Play

Derek J Entringer — Sat, 01 Nov 2008 22:11:36 +0000

Using Flex, it’s extremely easy to create a simple FLV player. This simple flv player has a scrub bar, pause/play buttons, and can load a flv from any url. The example is pretty basic, but it’s a great starting point on understanding how to stream video using Flex.

See the example

Download the source

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

Use Actionscript to Detect Flash Version

Derek J Entringer — Fri, 24 Oct 2008 17:37:18 +0000

A friend my mine just asked me how he could find out how to detect his version of flash, so I wrote a quick bit of AS2 to help him out. Here’s a quick and easy way to detect a users flash version from within your Flash project.

//trace(eval("$version"));
version = eval("$version");
//The operating system: WIN, MAC, LNX
var osType;
//The player versions. 9,0,115,0
var majorVersion; 9
var majorRevision; 0
var minorVersion; 115
var minorRevision; 0
vers.text = version;
osArray = version.split(' ');
osType = osArray[0];
versionArray = osArray[1].split(',');
majorVersion = versionArray[0];
majorRevision = versionArray[1];
minorVersion = versionArray[2];
minorRevision = versionArray[3];
feedback.text = "Operating System: "+osType + "\n" +
	"Major Version: "+majorVersion + "\n" +
	"Major Revision: "+majorRevision + "\n" +
	"Minor Version: "+minorVersion + "\n" +
	"Minor Revision: "+minorRevision;
trace("Operating System: "+osType);
trace("Major Version: "+majorVersion);
trace("Major Revision: "+majorRevision);
trace("Minor Version: "+minorVersion);
trace("Minor Revision: "+minorRevision);

Click here to see your version of flash.

Download the source

Flex Builder: Remove css type selector warnings

Derek J Entringer — Wed, 08 Oct 2008 21:23:39 +0000

A small but very irritating problem started coming up during some development I’ve been working on in Flex. I kept getting errors when compiling in Flex Builder regarding some CSS.

“The type selector ‘classNameHere’ was not processed, because the type was not used in the application.”

It’s quite easy to turn this off by going into your project properties panel and select the Flex Compiler option and add the following into Additional compiler options:

-show-unused-type-selector-warnings=false

PHP Developer Best Practices

Derek J Entringer — Wed, 08 Oct 2008 17:52:04 +0000

Start using version control

Version control is like a big UNDO button for your coding. You can go back to your previous code revisions and can compare/rollback to specific code areas anytime you see necessary. It will keep track of all your changes and will empower you to track your development changes across your work/team. Also, in a distributed development team, version control helps prevent overwriting of code by team members and keeps all the members code up to date.

Subversion (SVN) is one of the most popular open source version control system. If you’re on windows platform, you can try TortoiseSVN, a client for SVN.

Use Object Oriented Programming when useful

Not surprisingly, object oriented programming is focused around objects. While the idea of objects may be foreign to you in coding terms, understanding what objects are and why we use them shouldn’t take long. In short, our non-programming world is comprised of objects. Computers, fish, clouds, people, and cars are all objects. Objects have properties like color, size, name, and speed. Objects can also be comprised of other objects: cars have doors; doors have handles; handles have plastic levers; so on and so forth. Objects are everywhere around us. For this reason, many programmers find object oriented programming relatively easy to understand.

In my opinion any OOP language should have:

Abstract data types and information hiding

Inheritance

Polymorphism

This can all be done using PHP classes:

Of course you can use your own nomenclature but having a standardized one is useful.

Use coding standards

To develop anything programatically is difficult enough, this is why all programmers must work in an organised and systematic way. It is not obvious but the coding style you employ plays an important role in achieving this goal.

The idea is very simple: consistent code is much easier to maintain.

So, here are several reasons why to use coding specifications:

Multi-developer projects require coding standards. Your peer programmers have to understand the code you produce. A coding standard acts as the blueprint for all the team to decipher the code.
Even if you develop alone it’s advised to adhere to standards, because it really pays off when you revise your code after a time.
Simplicity and clarity achieved by consistent coding saves you from common mistakes.
Code becomes extensible and reusable. You don’t have to worry if people working on your current application would understand some reusable feature recycled from the previous project.
It just looks professional!

Document your code

So, why do we really need to document our code? Answer to this question may differ from programmer to programmer, but I strongly feel it helps in debugging, reverse engineering, re-engineering, testing and giving the code a neat look. Moreover, it’s a step towards standardization of coding methodology. When you document your code using coding standards, you can then use tools such as phpDocumentor to create professional documentation from your existing php source code.

Use php frameworks

Frameworks provide structure, and speed development. Some popular PHP frameworks such as Zend Framework, CodeIgniter, CakePHP, Symfony, and Kohana follow the Model-View-Controller (MVC) pattern, which itself is a strong advocate of good coding practice. They also usually come with a number of helpful libraries to make your life easier as a web developer.

Re-use code and libraries

Don’t re-invent the wheel. This is the basic concept that should be followed, even though it may seem slightly lazy at times. It actually means that you should not spend much time on solving a problem that has already been solved, in an efficient way, by other programmers. Using already available resources will save you time in your development process.

If you do end up having to create your solution from scratch, give back to the community and share what you’ve accomplished. This is the best part about an open source development community.

Professionally test your code

PHPUnit and SimpleTest are the two most widely used Unit testing suites for PHP. To make code testing viable, good tool support is needed. This is where PHPUnit comes into play. It is a member of the xUnit family of testing frameworks and provides both a framework that makes the writing of tests easy as well as the functionality to easily run the tests and analyse their results. SimpleTest is an open source unit test framework for the PHP programming language and was created by Marcus Baker. The test structure is similar to JUnit/PHPUnit. SimpleTest supports mock objects and can be used to automate the regression testing of web applications with a scriptable HTTP Client that can parse HTML pages and simulate things like clicking on links and submittings forms.

Use an IDE

An IDE provides a one-stop shop for your coding work. An IDE contains an editor in which you can edit the code, debug the code, view your code in a browser (often embedded), and check in and out of source code control. To support that functionality, an IDE has a set of features you don’t find in a basic editor, such as Notepad or Vim. Again, you can extend editors to do a lot of these things, but IDEs have all this functionality in one tidy package and they’re typically pre-configured.

Here are a few well put together and widely used IDE’s.

With so many excellent IDE options out there, some of which are even free, there’s really no reason not to give one a try, particularly if you’re a professional.

Zend To Collaborate With Adobe

Derek J Entringer — Thu, 25 Sep 2008 17:23:40 +0000

“Since bringing Flex to market, we’ve seen strong uptake among PHP developers, and we’re pleased to be collaborating with Zend and the PHP community to deliver deeper integration and increased productivity,” said David Wadhwani, General Manager, Platform Business Unit at Adobe. “The collaboration with Zend furthers Adobe’s commitment to open technology initiatives. Together, we will enable developers using Flex and Zend Framework to rapidly deliver highly engaging applications to both the browser and the desktop.” – David Wadhwani, General Manager, Platform Business Unit at Adobe.

This is really exciting, as a PHP/Flex developer, and it’s going to open even more opportunities for developing and integrating with the two code bases.

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

BorrisPowell.com Fashion Couture

Derek J Entringer — Fri, 22 Aug 2008 04:52:58 +0000

With the inspirations of Borris Powell, I would like to announce the launch of BorrisPowell.com.

From the site:

“Luxury in women’s fashion has a new name—Borris Powell. Born in Alabama, the passionate designer developed his dreams of a career in women’s fashion early on in life. Throughout his childhood, while observing his mother preparing for a night out on the town or even a Sunday visit to church, he trained his young eyes on color and silhouette. This is how his lifelong dream began. He would often advise her on style choices and then, while everyone one was away, he would sneak into the living room to the play with the sewing machine and develop his craft.

Inspired by the masterful shapes of Christian Dior, Powell followed his dreams and moved to Chicago to start his design career in 1997. Over the following decade, at the consistent urge of his friends, he pursued his vision with an infectious entrepreneurial talent and creativity that has built him a devoted following of fans. His trademark silhouettes have the comforting familiarity of his early authentic family memories mixed with a chic nod to high-end city life.“

BorrisPowell.com combines high end fashion with high end web design and development.

The site was created using AS3 and all that Papervision3d has to offer in terms of custom image galleries, created by DerekEntringer.com

Visit the site at BorrisPowell.com

.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

Blog Updated

Derek J Entringer — Thu, 21 Aug 2008 17:45:55 +0000

I had been using AjaxPress for the longest time, and have finally changed-over to WordPress. Should have made the switch a while ago, but there was always something else on my plate.

For anyone new to my site, all of the articles have been ported over to this new setup, but the dates are now all not exactly relevant to when the articles were originally posted.

To those who are not new…be sure to grab the new rss feed.

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

OrbySPV v1.5 Launched

Derek J Entringer — Thu, 21 Aug 2008 16:37:28 +0000

A virtual tour product that I have been working on has finally launched today. OrbySPV (Sequential Panoramic Viewer) technology gives you the power to create highly interactive virtual tours, similiar to the Google Maps Street View, using your own panaromic images. you can check it out at OrbySPV.com. The technology is derived by manipulating spherically projected 360 degree panoramic images to create an interactive experience unlike any virtual tour technology available today. There are a bunch of license options to choose from, tutorials to help you get started, as well as sample viewers and images. If you have any questions about Orby, please use the email form here.

Social Media Optimization

Derek J Entringer — Thu, 21 Aug 2008 16:36:30 +0000

Influential Interactive Marketing has an awesome article on SMO.
From the article:

“For years now, Search Engine Optimization (SEO) for websites has been honed into a fine art with entire companies devoting considerable effort to defining best practices and touting the value of SEO for raising a site’s performance on organic search listings. While I believe in the power of SEO, there is a new offering we have started providing to clients which we call Social Media Optimization (SMO). The concept behind SMO is simple: implement changes to optimize a site so that it is more easily linked to, more highly visible in social media searches on custom search engines (such as Technorati), and more frequently included in relevant posts on blogs, podcasts and vlogs.”

PPC Brand Building?

Derek J Entringer — Thu, 21 Aug 2008 16:35:36 +0000

SEMPO surveys consistently show that brand awareness is the top objective of many paid search programs. But, who would use PPC campaigns for branding?

So is the Internet just another direct marketing medium? I don’t think so. The transformation from one-to-one to many-to-many is occurring in the world of social media. Nothing on the internet fits the concept of branding quite like Web 2.0. Branding is a social phenomenon. Web 2.0 is social media. The desire to fit in is a huge part of branding. Web 2.0 is the sheer momentum of the bandwagon. It is group think, which is what moves t-shirts at the mall, or the latest fashion styles at your local mall.

While viral marketing is all the rage, the means through which a message goes viral is social media. Social media is Internet word of mouth.

The poet W.H. Auden famously said:

“The image of myself which I try to create in my own mind in order that I may love myself is very different from the image I try to create in the minds of others in order that they may love me.”

If you want them to love you on the Internet, you wonâ€™t get there by shouting your name the loudest. You need to be heard, but your message also must resonate emotionally and socially with the consumer. If the message doesn’t resonate, it’s just noise and not signal. Those who make the best use of social media are the ones who will be most successful building their brands on the Internet. Social Media Optimization (SMO), not paid search, is the path to brand building online.

iSalient Featured in PHPMagazine

Derek J Entringer — Thu, 21 Aug 2008 16:34:22 +0000

iSalient has been recently featured within PHPMagazine.net with a short review of some the features available.

The article is available here.

More information on how I was involved in the creation of iSalient is available in the portfolio section of this site.

From the article:

“iSalient has an AJAX interface to create and customize your survey on the fly, intuitive and very easy to use powered by prototype and scriptaculous. There is many options available to create survey general, look and feel, number of response, start and end date, language, status … and more advanced options such for restricted surveys, navigation … etc. Questions are easy to create, simply by choosing from the different options available in the drop down menu (18 options available), you can create from simple true false questions to advanced option with sliders, then you can add conditions and your survey is ready to go.”

BegForPost.com

Derek J Entringer — Thu, 21 Aug 2008 16:33:22 +0000

Looking for reviews on your new startup? Using BegForPost.com you can try to lure other bloggers or news websites into looking into your website, and maybe get some good feedback.

From their website:
“You’ve worked for months building a startup on a boostrap budget and the launch is near. How will you get an initial influx of traffic to propel your product/service into viral bliss? Don’t pay off bloggers to promote your startup, beg! Getting started is quick and easy. Fill out the form below, sit back, and wait for Internet stardom. Youâ€™re almost there!”

BegForPost.com

SEO and mod_rewrite

Derek J Entringer — Thu, 21 Aug 2008 16:32:35 +0000

There are two types of URLs dynamic and static. A dynamic URL is a page address that results from the search of a database-driven web site or the URL of a web site that runs a script. In contrast to static URLs, in which the contents of the web page stay the same unless the changes are hard-coded into the HTML, dynamic URLs are generated from specific queries to a site’s database. The dynamic page is basically only a template in which to display the results of the database query. Instead of changing information in the HTML code, the data is changed in the database.

Static URLs are typically ranked better in search engine results pages, and they are indexed more quickly than dynamic URLs, if dynamic URLs get indexed at all. Static URLs are also easier for the end-user to view and understand what the page is about. If a user sees a URL in a search engine query that matches the title and description, they are more likely to click on that URL than one that doesn’t make sense to them.

If you are hosted on a Linux server, then you will want to make the most of the Apache Mod Rewrite Rule, which is gives you the ability to inconspicuously redirect one URL to another, without the user’s (or a search engine’s) knowledge. You will need to have this module installed in Apache; for more information, you can view the documentation for this module here. This module saves you from having to rewrite your static URLs manually.

How does this module work? When a request comes in to a server for the new static URL, the Apache module redirects the URL internally to the old, dynamic URL, while still looking like the new static URL. The web server compares the URL requested by the client with the search pattern in the individual rules.

For example, when someone requests this URL:

http://www.yoursite.com/forums/seo-and-dynamic-urls.html

The server looks for and compares this static-looking URL to what information is listed in the .htaccess file, such as:

RewriteEngine on
RewriteRule
thread-threadid-(.*)\.htm$ thread.php?threadid=$1

It then converts the static URL to the old dynamic URL that looks like this:
http://www.somesites.com/forums/thread.php?threadid=12345

You now have a URL that only will rank better in the search engines, but your end-users can definitely understand by glancing at the URL what the page will be about, while allowing Apache’s Mod Rewrite Rule to handle to conversion for you, and still keeping the dynamic URL.

Crazy Egg Optimization

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

Standard web statistic packages compete based on who can offer the most statistics, the most colorful graphs and trying to wrap usability around all that information. The guys at Crazy Egg have taken a different approach where you can measure and actually see what your users are doing when they visit your site, and from these results you can immediately optimize your site based on your visitors usage patterns. The result is that you can learn a lot more about your visitors from a lot less information that is found in analytics packages.

The aim of Crazy Egg is for webmasters and site owners to learn from visitor usage patterns and improve their site based on what they learn from the application, as opposed to having page after page of statistics. Some features currently in development will allow users to track ad performance so that ad campaigns can be refined, RSS integration and demographic information of your visitors (filtering the map based on which visitors you wish to see).

Good Internet Citizenship

Derek J Entringer — Thu, 21 Aug 2008 16:30:59 +0000

What is a Good Internet Citizen?

Becoming a good Internet citizen is pretty simple, but by no means easy. Provide a useful service, and do it in a way that makes it easy for your visitors, and you’ll thrive online.

“Please don’t add to my frustration!

Can you hear your customers begging?

“Please don’t make me wait for a movie to run before I can check my order.”
“Please don’t make me search for your contact information.”
“Please try to make this easier for me!”

Listen to your customers and you’ll hear them asking for simplicity when they interact with you through the Internet.

Keep your visitors in mind during the design and planning phase of your website, and you’ll build a better site.

The rewards for good citizenship are greater interest, participation, and loyalty from your visitors. That leads to brand recognition and ultimately business success.

Your website should be intuitive and easy-to-use.
Remember, a website is an extension of your computer. It must serve a logical purpose and perform its responsibility – not just look flashy or expensive.
Your website should perform a useful service.
One of the best reasons to build a website is to give your customers more customer service. Find out what they need and give them access to it on the Internet. You can save time and money.

Your website should be accessible and cross-platform compatible.
This part is simple but one of the most common errors on websites. Test your website on all versions of all browsers on Mac’s and PC’s. Test it with a 14.4 modem! Make sure visitors with physical impairments can access your information.

Your website must be secure.
If you are asking your customers to provide personal information or if you are processing credit card transactions online, your site must be secure.

Your website must be up-to-date.
Why should your visitors return? Because you’re constantly providing new information!

Following the above will lead to great returns on business, as well as provide your website with a constantly growing SEO bottom line.

Considering AJAX

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

“When we were young, we were told that ‘Everybody else is doing it’ was a really stupid reason to do something. Now it’s the standard reason for picking a particular software package.” — Barry Gehm

When you make decisions, one strong bias is the bandwagon effect. The idea is that humans often do or think things just because many others do the same. Now, after convincing yourself that Ajax is something you have to use, be careful not to find artificial excuses to use it. To some people, Ajax is the latest proverbial hammer, and they will use any excuse to find themselves some suitable nails. Remember that Ajax is a tool, not a toy or purpose in itself.

With each new technology that is introduced, people like to experiment and test the tipping point. For instance, when color monitors first came out, a deluge of applications changed their fonts and colors as much as possible, just because they could. No user really wants a mouse trailer, yet a large number of Web designers seem to think that they have to add them to their sites. I feel that, if we’re not careful, the same phenomenon will happen with Ajax.

Ajax is also fueling a venture capital frenzy. The investment climate for technology startups seems to have become friendly again, and one of the magic keywords these days is Ajax. Collaboration-based startup Zimbraâ„¢, a heavy Ajax user, has already secured $16 million. Other startups are scrambling to claim that they are Ajax-based as a result, to sell more products or receive more attention from investors.

If you find yourself wanting to use Ajax, make a balanced decision about where exactly you think it makes sense, and where it does not.

META-Tag Design

Derek J Entringer — Thu, 21 Aug 2008 16:28:48 +0000

A lazy web developer is a good web developer – that is, a clever programmer will save themselves lots of mundane work by automating simple processes. An obvious idea is to write an excellent META Description and use it automatically on every page of your site – better than nothing right?

The problem is, it’s possible the search result for every page on your site will come out looking the same. This is not what you want – you want your site to cover a range of topics and search phrases, and having 1000 pages that look the same is just asking for Google to treat them as duplicate content.

If you aren’t able to create a unique META description for every page, it’s best to leave it blank and let Google create a snippet out of page content. In all fairness, the search engines do a pretty good job of creating relevant snippets. So you should only replace a snippet if you are going to be improving it.

Importance of Backlinks

Derek J Entringer — Thu, 21 Aug 2008 16:27:55 +0000

What are “backlinks”? Backlinks are links that are directed towards your website. Also knows as Inbound links (IBL’s). The number of backlinks is an indication of the popularity or importance of that website. Backlinks are important for SEO because some search engines, especially Google, will give more credit to websites that have a good number of quality backlinks, and consider those websites more relevant than others in their results pages for a search query.

When search engines calculate the relevance of a site to a keyword, they consider the number of quality inbound links to that site. So we should not be satisfied with merely getting inbound links, it is the quality of the inbound link that matters.

A search engine considers the content of the sites to determine the quality of a link. When inbound links to your site come from other sites, and those sites have content related to your site, these inbound links are considered more relevant to your site. If inbound links are found on sites with unrelated content, they are considered less relevant. The higher the relevance of inbound links, the greater their quality.

For example, if a webmaster has a website about how to rescue orphaned kittens, and received a backlink from another website about kittens, then that would be more relevant in a search engine’s assessment than say a link from a site about car racing. The more relevant the site is that is linking back to your website, the better the quality of the backlink.

In other words, good backlinks equals good SEO.

Benefits of XHTML

Derek J Entringer — Thu, 21 Aug 2008 16:27:07 +0000

XHTML is the standard markup language for web documents and the successor to HTML 4. A mixture of classic (HTML) and cutting edge (XML), this hybrid language looks and works much like HTML but is based on XML, the webs markup language, and brings web pages many of XML’s benefits.

Converting from HTML to XHTML is easy, and provides your code with several immediate and long term benefits:

A painless transition to more advanced technology: The web is moving to XML, a powerfully enabling technology. Writing well formed, valid XHTML pages is the easiest way to begin this transition. All it takes is learning a few simple rules of XHTML markup.

Cleaner, more logical markup: XHTML brings uniformity to document structure. The rules of XHTML help restore the structural integrity of documents that was lost during the webs rapid commercial expansion between 1994 and 2001. This is critical for large organizations, whose web pages must interface with logically marked up documents in legacy systems and databases.

Increased interoperability: Unlike old style HTML pages, valid, well formed XHTML documents can easily be transported to wireless devices, Braille readers and other specialized web environments. Moreover, XHTML’s insistence on clean, rule based markup helps us avoid the kind of errors that can make web pages fail even in traditional browsers like Microsoft Internet Explorer, Netscape Navigator, and Opera browser.

Greater accessibility: Because they follow strict rules and avoid non standard markup, well authored XHTML pages are more accessible than old school HTML pages.

If you want your site to work well in today’s browsers and non traditional devices, and to continue to work well in tomorrows, it’s a good idea to author new sites in XHTML, and to convert old pages to XHTML.

What exactly is Ajax?

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

Ajax lets Web developers create interactive Web sites that function more like desktop programs rather than static Web sites. Gmail and Google Maps are two of the most common examples of sites built using Ajax. A variety of techniques allow Ajax to place the interactivity directly within the browser, instead of the browser having to constantly contact a Web server to get information.

When someone visits an Ajax site, the browser loads the HTML page as it would normally. After that, though, Ajax uses JavaScript for interactivity. When a site visitor makes a request for more information — for example, to fetch a map — the JavaScript makes the request. The JavaScript doesn’t make a request for information directly to a Web site, though — instead, it uses an API called XMLHttpRequest to transfer the data back and forth. (The data requested is usually in XML format, although it doesn’t have to be.) This allows the Web page and JavaScript to continue to interact with the user, while the XMLHttpRequest handles communications with the server.

JavaScript takes the information handed to it by the XMLHttpRequest, and then uses it or displays it. But only the portion of the page that needs the information is refreshed. This speeds up the display of information, because the entire page doesn’t have to be changed.

Biomimetic Application Dev

Derek J Entringer — Thu, 21 Aug 2008 16:23:55 +0000

Biomimetics is defined as the development of synthetic systems based on information from biological systems.

It has been debated for quite some time for web design as well as application development to become more biomimetic, at least in the sense that systems in biology appear to deal fairly well with unpredictability, failure, and interaction without strong interdependencies, which is yet to be fully accomplished in application architecture.

The basis of these debates comes from the idea that enterprise-class â€œhard-codedâ€ applications are flawed by nature. Web technologies that mimic biology with the ability to adapt to reactions of users as well as information would be more successful and appropriate for large scale or global use. We see these types of systems such as Technorati, Digg, and Google Maps becoming more prevelant and extremely useful in all different types of applications.

What I’m thinking is that, through web technologies, we’ve spent the last few years walking back from decades of “hardening” of runtime environments and development tools, and consequently of applications. The effect of this being that a lot of web design and application development has become thin (in terms of static/strict checks). Where things like applets failed, DHTML, JavaScript, XML, XHTML, and CSS interfaces are succeeding in creating a rich ecosystem of applications that build on each other or share information across different platforms uniformly.

Social Networking or Social Dependancy

Derek J Entringer — Thu, 21 Aug 2008 16:22:32 +0000

How are social networks effecting how we live on a daily basis? How do they affect young adults or adolescents who are emerging on their own and creating their own theories about relationships they have with others? Have these social networking circles that are so prevalent today brought our world together, or is it going to effect our younger generations in a negative way, creating a social dependence? A great article published by New Science Print Edition asks those exact questions.

Comet Ajax Development

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

Doing some recent research within the area of AJAX led me to a spin-off of the Ajax era of web application development called Comet. Using Comet, developers have the ability to stream data to and from the browser, instead of communication done thru series of call backs between the browser and the server. Seems like a slick idea, but if you have not used JSON before (basically a Java based XML language) you are in for a slight learning curve. Lingr.com is a great example of an easy use of Comet in the development of a web based chat room website, and is really quite slick. Meebo.com is also another good example. A good starting tutorial is also available here.

geoTract.com Released

Derek J Entringer — Thu, 21 Aug 2008 16:18:08 +0000

geoTract.com has been up and running for about two weeks as of the writing of this post, and the users are still rolling in. Many comments have been sent regarding the site itself and lots of feedback is leaning towards the positive side. The site itself is still in Beta at this point, and I’ve been continuing to roll out bug fixes.

Working with the users to complete this project has been more than rewarding, and I’m looking forward to the future of the site in general.

In general:

geoTract.com provides a central commonplace to share experiences and interests in the form of maps mashed with chatting, blogs, friends lists, favorites lists, and general locations. On geoTract users have the ability to open their opinions on restaurants they have visited, post photos of their friends at the club they went to last weekend, or even provide a reference to their favorite nature trails or hikes they have at their favorite camp ground. These experiences are then plotted on gMaps a Google API that allows the placement of markers based on coordinate systems generated by the API. Once a marker has been placed, or as we call it a “Tract” created, users can then share that information with the world, or maybe just their friends and relatives. They can write about their experiences within that geoTract Blog, and post pictures that correlate with that particular area or experience.

geoTract is a new way for people to interact with one another on personal levels outside a boring MySpace type setting. It takes the user away from their reality and into another by showing them exact locations and geographical areas that they might not be familiar with, while still keeping all of the qualities of a myspace setting plus more.

If you’ve ever said that you know all of the perfect hangouts in your neighborhood or city, and love sharing all of those places with your friends, then geoTract.com is going to be one of your favorite online tools. People that are looking to travel to a different region of their country, or another country altogether can look up any spots that might have a good rating by others already in the area. Or, anyone who simply want to keep an online journal for themselves on the places they have been or the experiences that they have encountered, well, here is the perfect place to accomplish exactly that. All of these types of users would find that geoTract.com allows for any of these types of uses, and that actually accomplishing this is really quite easy.