Requirements

 

Prerequisite knowledge

Familiarity with the basics of putting together a Flash Media Server application. If you have none, I suggest reading:

Understanding ActionScript 2.0 class structures or basic object-oriented programming. If not, I would suggest reading:

User level

Advanced

 

 

Required products

Flash Media Server (Download trial)

 

 

Sample files

 

Flash Media Server 2 offers a unique combination of traditional streaming media capabilities and a flexible development environment for creating and delivering media experiences to your audiences. These include traditional media like video on demand, live web-event broadcasts, and MP3 streaming, as well as rich media communication applications like video blogging, video messaging, and multimedia chat environments.

One new feature of Flash Media Server 2 is the File Object feature, which enables real-time read/write file access to a defined sandbox on your server, enabling content management systems and database applications without using Flash Remoting. This is a simple example that you can expand for use with File Object applications.

In this article, you will learn about a rather simple application that lets you display FLVs and MP3s on demand with predefined components you build using Flash Professional 8. This application automatically grabs FLVs and MP3s from a specific location on your server but is extensible for other uses. For example, to customize this application for a photo album using JPEGs, you would just redefine the filter so it calls JPEGs.

This application demonstrates new File Object properties on the server side and works in conjunction with the DataGrid, FLVPlayback, and MediaPlayback components on the client side. It demonstrates an alternative to XML-driven playback lists. If you wish to learn more about XML FLV lists, check out Lisa Larson's article, Creating a Dynamic Playlist for Streaming Video.

 

Setting Up Your Environment

To follow this code walkthrough, you will need on_demand_player.zip, the sample file download that accompanies this article. Here's what you should do with the contents of the ZIP archive:

  1. Place the FileObj and MyCollection folders in your Flash Media Server applications directory (by default, this is Flash Media Server 2\applications\).
  2. Put the OnDemandPlayer folder anywhere on your development machine.
  3. Place the MP3s and FLVs that you want to stream into the MyCollection/streams/_definst_/ folder.

It's easy to change your default applications folder. Open conf/fms.ini in a text editor and change the variable VHOST.APPSDIR.

Flash Media Server 2 has two applications that control the logic, FileObj and MyCollection (see Figure 1). When OnDemandPlayer.swf is instantiated, it accesses FileObj, which returns the content into a DataGrid. When the user clicks an object in the DataGrid, it calls the video based in MyCollection.

 

Connection between OnDemandPlayer.swf and Flash Media Server 2

 

Setting Up Flash Media Server

To make this application to work, you need to configure File Access and Stream Access.

File Access

The File Object class allows access to a sandbox within your server file system. To protect against any misuse, Flash Media Server allows access to files within a sandbox specified for the virtual host where the application instance is running.

To define your server-side sandbox, go into your application.xml file in the FileObj folder. Define where you are storing the FLVs and MP3s that you wish the server to find:

 

<FileObject> <VirtualDirectory>/approot; C:\Program Files\Macromedia\Flash Media Server 2\applications\MyCollection\streams\_definst_\ </VirtualDirectory> </FileObject>

 

You have just enabled secure file access to this defined sandbox. You can set up multiple file object directories by consecutively adding virtual directories.

 

Stream Access

You will also need to set up your Vhost.xml, which you can find in your conf/_defaultRoot_/_defaultVhost_/ subfolder in the Flash Media Server 2 folder because you must tell the server when you call "/approot" from the Vhost instance that it should look in the specified directory. You will need to define where you streams are located (should be the same as the setting you defined earlier for FileObject):

 

<VirtualDirectory> <Streams>/approot; C:\Program Files\Macromedia\Flash Media Server 2\applications\MyCollection\streams\_definst_\ </Streams> </Virtual Directory>

 

Examining the Server-Side ActionScript

 

There are two applications running on the Flash Media Server:

  • FileObj supports file access and filter functions pointing to your stream sandbox.
  • MyCollection supports FLVPlayback component functions.

Both run using the same default server-side ActionScript file, main.asc.

When you develop any Flash Media Server application, it is always easiest to start with the server-side ActionScript. Doing this allows you to debug and simulate the client-side actions using trace statements. This not only cuts down on your development time but prevents headaches later on.

You may notice that there are extra functions in main.asc in your FileObj folder. Notice there is more server-side ActionScript than is required for this application. This is what I use to handle all the file access commands in a familiar framework or API. I hope you will find this code useful and repurpose it for future file access functions.

Let's go over a few key functions in this file.

Constructor for File Class
this.myFile = new File(name);

 

This construct command creates an instance of the file class as object myFile. The variable, name, can be either a file or directory. In this demonstration, you will be passing your alias directory into here to gather information about it (by default, approot).

 

File.List for File Class
var dirList = this.myFile.list(filter);

 

This is the list function from which the DataGrid on the client side takes information. The list method returns an array with an element for each file in the directory. You can filter this further with the filter function:

 

function filter(name) { if ( name.lastIndexOf( ".flv") != -1 || name.lastIndexOf(".mp3") != -1){ return true; } return false; }

 

For instance, if you wanted to build from this and display only JPEG images, you could use this filter and list command to control what is being transferred to your client.

Here is a brief summary of other functions in this main.asc file in case you want to repurpose them for other applications using File Object. To find more specifics on the details of these function, read the Flash Media Server LiveDocs, which are a great resource for more information on each of these functions.

Here is a brief summary of the other File Object functions:

  1. newClient.mkdir creates a directory defined by dirName
  2. newClient.remove removes the given file object
  3. newClient.rename renames the given function
  4. newClient.copy copies the object to a given variable
  5. newClient.closeFile closes access to the file object

 

FLV_Playback Server-Side ActionScript

One of the most common errors that occurs when streaming with the FLVPlayback component in Flash Professional 8 is when you forget to add the main.asc file into the streaming Flash Media Server video directory. I have included it as a part of this package so you will not encounter this problem yourself.

 

Examining the Client-Side Setup

This client-side setup is rather simple because it is built with pre-existing components using basic OOP principles. The client-side framework consists of the following files located in the OnDemandPlayer folder:

  • OnDemandPlayer.fla
  • OnDemandPlayer.as

FLA Components

The FLA consists of three basic controls:

  • FLVPlayback: Used for streaming FLVs (new in Flash Professional 8)
  • MediaPlayback: The MP3 controller
  • DataGrid: Used for connecting FLVs and MP3s with the underlying architecture
  • OnDemandPlayer: A movie clip brought in pointing to ActionScript on the first frame (check the Library)

Connecting these client-side components is rather simple. Let's go over a few key points.

ActionScript 2.0 and MovieClip Classes

A common best practice using OOP principles for scalable applications involves attaching movie clips as classes (see Figure 2). This is an excellent method for organizing and attaching ActionScript classes to the Stage. Peldi, one of the architects behind Breeze, describes this as a best practice. So if you are wondering how OnDemandPlayer.as is attached to OnDemandPlayer.fla, check out the Library.

 

Linking ActionScript to a movie

 

This is comparable to using an #include file but is more manageable by simply attaching a movie clip from the Library:

attachMovie("OnDemandPlayer","mc",0);

 

Connecting with the Server

The file access handshake with the server is set up through a basic makeConnection function:

public function makeConnection():Void { nc = new NetConnection(); nc.connect("rtmp://"+serverName+"/"+appName); nc.owner = this; nc.onStatus = function(info) { if (info.code == "NetConnection.Connect.Success") { owner.dir(); } }; }

 

Publishing Your Folder Directory

This connects to and sends Flash Media Server the folder name from which you wish to obtain your FLVs and MP3s:

nc.call("createFileObj", null, foldername);

 

Getting the Stream Length

This connects with Flash Media Server to obtain the length for the FLV and MP3 lengths:

var streamlength = owner.nc.call("getStreamLength", null, stream_name);

 

The FLVPlayback component has stream lengths built in. To set the MP3 length in MediaPlayback and display the length in the DataGrid, it must grab the information from the FileObj main.asc file.

Obtaining the List of File Objects

On the client side, you must gather the stream names as well as other information regarding File Object in an array. This is done with the dirResult function:

 

private function dirResult(folderName, owner):Void { this.onResult = function(retVal) { for (var i = 0; i<retVal.length; i++) { var flv_name = (retVal[i].name).substr((retVal[i].name).lastIndexOf("/")+1); var index = flv_name.lastIndexOf("."); var stream_name = flv_name.substring(index + 1, flv_name.length) + ":" + owner.folderName + "/" + flv_name.substring(0, index); var streamlength = owner.nc.call("getStreamLength", null, stream_name); owner.myDP_array.addItem({Name:flv_name, Length:retVal[i].streamlength, CreationTime:retVal[i].creationTime, LastModified:retVal[i].lastModified, Size:retVal[i].length}); } };

 

Notice that the object retVal contains more than simply the stream name. It contains also creationTime, lastModified, and length (size of file).

These are just a few of the details you can gather using the List command on the server side. For a more complete list of File Objects check out Property Summary for File Class in the Flash Media Server LiveDocs.

 

Where to Go from Here

Using the file access and File Object features in Flash Media Server is an easy way to display content as an alternative to XML-driven data lists. The example shown in this article is a simple use case for just showing whatever media assets you have on your server. For other applications, you may want to consider combining the extensibility and organization of XML and ease of use with File Access as the perfect method for Flash Media Server on-demand applications. With this application you can easily drop your entire Flash video and MP3 media collection onto your server to stream your collection.

As learn about and come up with questions regarding Flash Media Server development, check out the Chattyfig list. This is the premier list for Flash Media Server developers and always contains informative development discussions. As a developer, I rely on this valuable resource whenever I face a tough problem. Just be careful what you ask, however, because if the answer is a simple Google's search away, they will hound you for it.

I hope this has helped you understand the new file access feature built into Flash Media Server. I wish you the best of luck with your future Flash Media Server adventures.