Flash Streaming Version 2: Going interactive

Flash Media Server

The Flash Media Server is Adobe's server software for both streaming and other live, interactive Flash applications. It comes in 3 different versions, one which is for live streaming only, one for full interactive application development and oe which is available as a free download for development but is limited to 10 simultaneous connections.

FMS uses the RTMP protocol (Real Time Messaging Protocol) to communicate with Flash clients and has an slightly different ActionScript language for server side application development (Server Side Action Script).

There are two competitors out there at the moment that in a sense are clones of FMS, the first is the very popular Wowza media server and the second is the Red5 Open Source Flash Server. Both are written in Java, programmed using Java and getting very popular. They are worth a look.

ITPs Flash Media Server

ITP has a new Flash Media Server setup on itp.nyu.edu. This server allows unlimited number of connections for both streaming and interactive applications and should be setup for use by anyone in this class. (If it isn't setup for you, please contact the helpdesk).

You can determine if you have access to the server by logging into itp.nyu.edu through SSH or SFTP and looking to see if you have a "flash" directory in your home directory.

That directory is automatically mounted on the Flash server in the correct place for you to run server side applications.

There is a console accessible on ITP's server at http://itp.nyu.edu/fms/ which takes your normal net-id and password. From this you can connect to the server (server address: itp.nyu.edu:1111, username: itpstudent, password: (you know this already)) and look at currently running applications, refresh your applications and so on.

Development Overview

When using the Flash Media Server you are generally using three separate technologies. The first and probably most familiar to you is the webserver. The second is Flash itself and the third is FMS (Flash Media Server).

Flash itself is used to create SWF (Shockwave Flash files) that run in the browser via embed tags in HTML. The SWF file is placed on a webserver and embedded in a page with the following tags:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0 WIDTH="CHANGEME" HEIGHT="CHANGEME" id="myMovieName">
	<PARAM NAME=movie VALUE="CHANGEME.swf">
	<PARAM NAME=quality VALUE=high>
	<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="CHANGEME.swf" quality=high bgcolor=#FFFFFF WIDTH="CHANGEME" HEIGHT="CHANGEME" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>		
		

The Flash SWF can through ActionScript connect to the Flash Media Server to make multi-user, live applications such as streaming applications and so on.

A very simple Flash Media Server application is simply a directory created within your "flash" directory on itp.nyu.edu.

Flash connects to FMS applications via RTMP (Real Time Messaging Protocol) using a class called NetConnection as well as a class called NetStream.

var nc:NetConnection = new NetConnection();
nc.connect("rtmp://itp.nyu.edu/sve204/test");


// The rest is optional but allows us to see if we connected
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);

function netStatusHandler(event:NetStatusEvent):void 
{
	if (nc.connected)
	{
		trace("Yay!  Connected");
	}
	else
	{
		trace("Sorry, couldn't connect");
	}
}
		

ActionScript 3

Recently Adobe upgraded the scripting language used in Flash to version 3. It is called ActionScript 3 and now resembles Java and other Object Orientated languages very closely.

Flash still support previous versions of ActionScript for those of you who know them but now is a great time to get up to speed with AS3.

Flash Development without Flash

In it's quest to appeal to developers along with designers, Adobe has released a couple of things. The first is Flex which is an Eclipse based IDE (integrated development environment) for AS3 and MXML (which is an XML language to define the layout of the user interface of a Flash application (kind of like HTML is for web pages)).

As a student you can download a free version of Flex here: Adobe Flex Builder 3 Pro for Education.

There is also a free open source SDK for developing AS3 applications available from Adobe, Flex SDK. (This is what I generally use.)

After downloading and installing it you can compile AS3 classes on the command line

/Developer/Flex/flex_sdk_3/bin/mxmlc --file-specs something.as		
		

Simple AS3 Application

// Always start with a "pacakage"
package 
{
	// Like Java you need to import the classes you are going to use
	import flash.display.Sprite;
	import flash.text.TextField;

	// The class name is the same as the file name, case sensitive
	// Extending Sprite or MovieClip gives you the ability to do most things you can do in Flash
    public class Simple extends Sprite
    {
		// Declare a String variable
		private var astring:String = "Hello World";
		
		// Declare a Text Field		
		private var displayText:TextField = new TextField();
		
    	public function Simple():void
    	{
    		// Set the text of the textfield to be our string
			displayText.text = astring;
			
			// Display it
			addChild(displayText);
		}
	}
}
		

Flash Debugging

One very useful thing to be able to do when developing anything with Flash is to use a debugging player. Adobe provides access to a debugging player through Flash but you might also want to have a stand alone version for development that might take place outside of Flash.

ActionScript and the Flash IDE

If you are more comfortable with using the Flash IDE (I am unfortunately not), you can still use AS3 along with all of the normal things in Flash. Simply open up the Actions on the first frame (or anywhere really) and start programming. You don't need the package definition or really to define a class.

var astring:String = "Hello World";
displayText.text = astring;
trace(displayText.text);		
		

If you have an external AS3 script, you can bring that into Flash by associating it with a MovieClip symbol.

Create a MovieClip (draw something and convert to Symbol/MovieClip), give it any name, in the "advanced" portion, select "Export for AS3" and choose the name of the AS3 class as the "Base class". Give it any "Class" name you like.

Building a Broadcasting Application

To build a video broadcasting application that uses the Flash Media Server the easiest thing to do is build your Flash application and then use the existing "Live" applicaiton in your Flash directory.

Here is the AS3 code for a bare bones broadcasting application: Broadcaster.as. We will go through it.

Building a Player Application

Building a Video Conferencing Application

// Server side actionscript (a bit different from client side as3)

// Array to hold clients
videoStreams = new Array();

// On Start (when the application is first instantiated)
application.onAppStart = function()
{
        trace("Starting Conference Application");
};

// When someone connects from Flash
application.onConnect = function(newClient)
{
        if (videoStreams.length >= 4)
        {
                // If all of the positions are in use
                // Don't let a new person connect
                application.rejectConnection(newClient);
                trace("sorry, full");
        }

        // Client object
        // creating a property called clientName
        if (videoStreams.length == 0)
        {
        	newClient.clientName="one";
        }
        else if (videoStreams.length == 1)
        {
        	newClient.clientName="two";
        }
        else if (videoStreams.length == 2)
        {
        	newClient.clientName="three";
        }
        else if (videoStreams.length == 3)
        {
        	newClient.clientName="four";
        }

		// Accept the connection
        application.acceptConnection(newClient); 

        // Add it to the array
        videoStreams.push(newClient.clientName);

		// Function that get's called by the client to determine where to go
        newClient.streamSelect = function() 
        { 
                trace("Stream " + newClient.clientName + " used"); 

                //Send the property to Client object 
                return newClient.clientName; 
        };
};