How to Hook your Adobe Flash Files into Flash Media Server 2

CATEGORIES: Columns, Flash, May/June 2006, Tutorials | Charles E. Brown | May 22, 2006

Videos in the Stream

Flash Video is becoming an increasingly important topic in design. If you want to use Flash to put your video on the Web, odds are (to save file size) that you’ll want to stream the video rather than embed it into the SWF. That being the case, you’ll need to learn how to hook your Flash files into Flash Media Server 2 (FMS2). You’ll need to do a little coding; but the code is quite simple and can be easily reproduced in almost any situation.

In this simple tutorial, we’ll set up the media server on your local machine, convert a video to an FLV file, and then add some controls for the video.

One word before we begin. Unfortunately, Flash Media Server 2 is only available for the Windows and Linux environment. However, if you’re a Mac user (or you don’t want to purchase FMS2) and you subscribe to a service that uses FMS2 for streaming media, such as VitalStream, you can use this technique.

STEP 1 Download Flash Media Server 2
The first step (if you’re using a Windows or Linux machine) is to download Flash Media Server 2. You can find it at www.macromedia.com/downloads. It’s an easy download at about 7.5 MB. And it’s self-installing. While it’s installing, you will be prompted for a username and password. Choose any you want.

It will install in the directory: C:\Program Files\Macromedia\Flash Media Server 2. This will be important in a bit. (Don’t forget that if you want the benefits of Flash Media Server but don’t want to set up and maintain streaming servers, you can use a streaming service like the one mentioned above.)

STEP 2 Create New Flash Document
Start a new Flash document and save it in the directory of your choice with the name of your choice.

STEP 3 Select Video
For this tutorial, you can either use your own video or, if you don’t have one, you can download a sample video at www.footagefirm.com. This is a great company for stock footage. I chose the San Francisco sample clip, which is about 53 MB and AVI in format.

STEP 4 Import Video
Before you can use the video in Flash you must convert it to an FLV format. This is easy to do. Just select File>Import>Import Video. Browse to the location of the video you want to convert.

STEP 5 Choose Deployment Method
After clicking Next, select the Progressive Download from a Web Server option to use the Flash Media Server. If you use a streaming service, such as VitalStream, select Stream from Flash Video Streaming Service. The other two options assume you’re going to use the older Flash Communications Server (which Flash Media Server 2 replaces) or embed the video in the SWF file.

STEP 6 Choose Compression Rate
Select Next again and you’ll see a preview of your video. This is also where you can set the compression rate for the output. If you set it too low, you lose some quality; if you set it too high, your file sizes become too large. I find that the default setting of Flash 8-Medium Quality (400kbps) works fine for most situations. You may want to experiment with different settings on your own.

STEP 7 Select a Skin for the Player
After clicking Next, you can select a skin for the controls around your video. Select any one you want. Note: If you want to customize the controls, you should select None and then add the controls manually using Video Components in the FLA file. Click Next and Finish. This will allow On2 compression to convert your video to an FLV file and compress it.

STEP 8 Compress Video and Preview
When it completes, several remarkable things have happened. First of all, the Flash FLVPlayback component is on stage and ready to roll. You can preview your video now. (Note: When you preview, you may need to enlarge the window to see the controls—you’ll not have this with a full publish.)
Even more interesting, go to where your new FLV file is created. In the San Francisco video, the original file was about 53 MB. But the compressed FLV file is only 858 KB. The On2 VP6 compressor does a remarkable job at making your video files smaller with a minimum of quality loss.

STEP 9 Create Folders and Copy File
It’s now time to get your video on the Flash Media Server and modify your Flash file to find it. In the following steps, it makes no difference if the server is local to your machine or not.
Copy your new FLV file and go to: C:\Program Files\Macromedia\Flash Media Server 2\applications. Under applications, create a new folder using any name you want (I used “test” in this tutorial). Under test, create a folder called “Streams”; and under Streams, create a folder called “_defInst_”. Paste your FLV file into this folder. (In a live environment, you would probably FTP the FLV file to wherever the server is.)

STEP 10 Delete FLVPlayback Component
Unfortunately, it’s not easy to use FLVPlayback component with the Media Server. Here’s an easy way to fix it: Return to your Flash file and delete the FLVPlayback component from the Stage. Open the Library panel. Select the Library menu and select New Video. In the Video Properties dialog, select Video (ActionScript-controlled) for the Type option.

STEP 11 Drag Video to Stage; Create New Layer
After selecting OK, your video object, Video 1, is in the Library. Drag it to the stage, use the Transform tool to resize it, and give it an instance name of your choice (for this exercise, I called it myVideo). Also, in preparation for some programming, create a new layer called Actions as the topmost layer.

STEP 12 Set Code for Server Connection
Select Frame 1 of the Actions layer and enter the following:

This is the pipeline that will carry your video. I called this connection “nc”; but you can call it whatever you want.

The second line of code calls the URL of the Media Server using rtmp:// instead of http://. I’m using localhost because I’m running Media Server locally. In a live environment, I’d enter the actual URL of the server. The last part of the URL is the name of the folder that was created under the applications folder earlier. I called mine “test”.

STEP 13 Set Code for Stream
Now enter the following line of code:

Think of the NetStream as what flows through the pipeline we created in the last step. Here we are telling the stream, “ns”, to flow through the pipeline “nc”. I think you can easily see that we could have multiple pipelines and multiple streams as needed.

STEP 14 Set Code to Attach Stream to Video
Our last step simply needs to attach the stream, going through the pipeline, to the video component we put on the stage and tell it to play.

We declare the name of the video component we put on the stage, attach the stream to it, and tell it what video to play.

All you need are those 6 simple lines of code. You’re ready to roll. Give it a test. The steps I presented here can be followed generically and should produce a trouble-free connection every time.

Share This