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

Socialize Your Flash Content Using Gigya & Adobe Distribution Manager

Derek J Entringer — Tue, 05 Oct 2010 23:30:13 +0000

Social media permeates every niche of the web and using the Adobe Distribution Manager, built in conjunction with Gigya, it can now easily be integrated into your Flash content, widgets, and applications. It also enables the tracking and analysis of the extent of any campaigns reach into the social web.

Using the Distribution Manager, Flash developers now have the ability to easily allow for their content to be sharable. It provides code that gives your end users options to share the content to Facebook, MySpace, Twitter, iGoogle, Yahoo! and many other social destinations.

The Adobe Distribution Manager (ADM) itself is an Adobe AIR application. The ADM is beneficial for both businesses as well as developers.

Adobe Distribution Manager: Developers

Developers can use the ADM to create new campaigns, and generate both the embed code as well as the necessary AS2 or AS3 needed to setup the share menu within their Flash project.

There is also a Flash Component that allows for the setup of new share buttons, but I’ve found that using the ADM is much quicker and maybe even slightly more simple.

Adobe Distribution Manager: Businesses

Tracking the effectiveness of the campaigns is also something ADM does very well. Each campaign allows for the tracking of Views, Menu Views, Interactions, Installs, Stickiness, Emails Sent, Viral Grabs, Unique Users, and any Custom Events setup within the content. You can divide these analytical results by country and destination, and analyze on a variation of timescales.

Once you have a campaign setup, and your content is ready for sharing, you also have the option to purchase ad campaigns using the Promotion Service. “The Promotion service provides free and paid methods of distributing your applications on social, desktop, and mobile platforms. It also provides tracking with a rich set of traditional and social analytics and enables application monetization through ad-hosting.”

A Few Recent Projects That Use ADM and Sharing

Pearson Education wanted to take a card game focused on first grade math addition skills into an interactive Flash widget. This allows a viral penetration of the game. I was also involved in the creation of their iPhone Application. Download it here.

Yahoo! De Moda created a campaign that allows users to share video content across social media. This allows their website visitors to share the content with friends and promotes more visits to their main site. This widget uses both the share code from the Adobe Distribution Manager as well as the custom Gigya Connect Share Toolbar. I also created both an iPad and iPhone app for Yahoo! De Moda. Download the iPhone app here. Download the iPad app here.

Download Adobe Distribution Manager

Learn more about the Promotion Service

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?

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

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

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

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 what you are going to 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 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 definately 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