Beginner's guide to using ActionScript 3.0 with Flash Media Server 3.5

This article is the third in my series of beginning-level Flash Media Server 3.5 tutorials. This particular tutorial shows you how to use ActionScript 3.0 to stream an H.264 video from the vod folder, and then stream that same video from an application.

Here are all the articles in the series:

• Part 1: Installing Flash Media Server 3.5
• Part 2: Streaming video with Flash Media Server 3.5
• Part 3: Using ActionScript 3.0 with Flash Media Server 3.5
• Part 4: Security features in Flash Media Server 3.5
• Part 5: Streaming audio through Flash Media Server 3.5
• Part 6: Streaming live video with Flash Media Server 3.5
• Part 7: Dynamic streaming with Flash Media Server 3.5

First, I'll show you how to stream H.264 video from the vod folder using ActionScript:

1. Download the files used in this article. The MP4 file is one created by the Film and Television Production students at the college where I work.
2. When you unzip the file, copy the Vultures.mp4 file to the Clipboard.
3. Navigate to C:\Program Files\Adobe\Flash Media Server 3.5\applications. Inside this folder you will see a folder named vod. Open it.
4. Open the media folder and paste the video on the clipboard into this folder.
5. Close the open window.

Nothing new here. If you have been following this series, you know the vod folder is seen as a publishing point. To date, all we have done is to simply set the Content Path of the FLVPlayback component to rtmp://localhost/vod/mp4:Vultures and the video plays.

In this tutorial we are going to skip using the FLVPlayback component and, instead, feed the video from the vod folder into a video object on the Stage. Here's how:

1. Open the H264_StreamVOD.fla file in the sample download. For those of you who have migrated to Flash CS4 Professional, the FLA files can be found in the FlashCS4 folder.
2. When the file opens, you will see I have created the interface for you.
3. The video object with the instance name of "myVideo" is found in the video layer. All you need to do now is to "wire this project up" with ActionScript 3.0. Select the first frame in the actions layer and press the F9 key to open the Actions panel.

   Note: The video object you use should match the dimensions and/or aspect ratio of the FLV or MP4 file it plays. The default size for a video object on the stage is 160 × 120. This is a 4:3 aspect ratio and works with FLV files that use this ratio. If you are using HD content that uses the common 16:9 aspect ratio, failing to resize the video object will result in a distorted video when it appears in the video object.

4. Click once in the Script pane and enter the following:

The first line sets up the NetConnection and the second line tells Flash the NetConnection is to the vod folder in FMS 3.5. If you have been using a video object to progressively download a file, you will notice the connection string is the path to the vod folder on the FMS 3.5 server and not a "null" string. In this example, you are working locally with the developer version of FMS 3.5. If you have a commercial account, localhost will be replaced with an actual RTMP address (which is a series of numbers) and there might, or might not, be a path to the vod folder, depending upon your ISP's unique requirements.

With the connection made and the NetStream established, it's time to do a little bit of housekeeping and make sure you have successfully connected to the server—also to increase the amount of the video that will be buffered before it streams. Here's how:

1. Press the Return/Enter key twice and enter the following code:

The code starts by using an onStatus event to check if you have successfully connected to FMS 3.5. You do this by by capturing the code string ("NetConnection.Connect.Success") sent to Adobe Flash Player when the SWF connects to FMS 3.5. The trace statement will open the Output panel and actually display that code (see Figure 1) if there has been a successful connection.

If the connection is successful, the setBufferTime() method of the NetStream class is used to put two seconds of video into the buffer. The default buffer value is 0.1 seconds; it's up to you how big a buffer to set.

2. Press the Return/Enter key and enter the remaining code:

The first line attaches the NetStream to the video object with the instance of myVideo on the Stage. The second uses the NetStream play() method to actually play the video. It is important to note that you need to include the media type, mp4: (including the colon), in the string. Also, because you are using FMS 3.5, you don't need to add the extension to the video's name.

Note: If you were using an FLV file instead, the play string would be "Vultures". You don't need to add the media type for FLV files.

3. Save and test the movie. There will be a slight delay as two seconds of the video is added to the buffer. When it finishes buffering, you get to visit a nest of baby turkey vultures, as shown in Figure 2.

So far, in this series, you have essentially been operating on autopilot and letting FMS 3.5 automatically feed a video stream from the vod folder into the FLVPlayback component or a video object on the Stage. There will come a time when the vod folder is more of a hindrance than an asset, however. Also, the vod folder is a feature of Flash Media Streaming Server. If you are using Flash Media Interactive Server, you will need to know how to create an application that plays from this server.

Actually, it is not terribly mysterious to use, but if you are new to FMS 3.5 it can be a bit confusing. To start with, your publishing point is not a vod folder; it is your applications folder. This folder is placed in the applications folder of FMS 3.5 but it is named by you.

The next big difference is the use of an instance. This has nothing to do with ActionScript. An instance is a specific folder named _definst_ that you must create and into which you place the video or audio files.

In addition, there is usually an .as file in the application folder that contains some relatively simple server-side code. Take a look at what I am talking about:

1. Inside the download folder is a folder called Exercise. Open it. Inside is a folder named BabyVultures. This is the application you will be using.
2. Open this folder and you will see a folder named streams and a file named main.asc (see Figure 3). This file must be named main.asc; it contains the server-side code that makes stuff work.

   Note: I would like to thank my colleague Lisa Larson-Kelley for the use of this particular main.asc file.

An .asc file is created by selecting ActionScript Communication File from the Flash Start Panel in Flash CS4 Professional (see Figure 4) or by selecting File > New and selecting ActionScript Communication File in the New Document dialog box.

3. Open the main.asc file and you will see how simple this server-side code really is:

All that this code says is that when the movie start playing, the FMS 3.5 server is ready to accept the connection. This is an extremely simple example of a main.asc file. As you start moving into the realm of shared objects and even the use of custom components, this code can become very complex and run hundreds of lines.

4. Close the open Flash document and open the streams folder. Inside the streams folder is the _definst_ folder. This is where the media gets placed. In this case, if you open _definst_, you will find a copy of the Vultures.mp4 file.

Now that you know how these things are structured, it's time to put your new knowledge to good use and stream the video:

1. Open the applications folder, C:\Program Files\Adobe\Flash Media Server 3.5\applications, and copy the BabyVultures folder from the Exercise folder to the applications folder. You have just created an application named BabyVultures whose path is C:\Program Files\Adobe\Flash Media Server 3.5\applications\BabyVultures. Now all you need to do is to "wire up" the application.
2. Double-click the H264_StreamApp.fla file in the Exercise folder to open it in Flash CS4 Professional.
3. Click once in the first frame of the actions layer and open the Actions panel.
4. When the Actions panel opens, click once in the Script pane and enter the following code:

The big difference from the previous example is in the NetConnection string in line 2. The publishing point has changed from the vod folder, which you have used in all examples in this series, to BabyVultures, which is the application.

Note: If you want to add a degree of security or digital rights management (DRM) to this file, change rtmp to rtmpe and you will automatically encrypt the stream.

5. Press the Return/Enter key twice and enter the remaining code:

If you test the movie in Flash at this point (see Figure 5), the video will play. The great thing about the Flash Media Server is that it is "smart." When the connection is made, it automatically looks for a streams folder. When it finds the folder it then thinks, "Ha! The video found in the ns.play() method is in the _definst_ folder!" It immediately scoots into that folder, finds the video, and tosses it onto the stream.

Where to go from here

Now that you know how to play video through an application you create on the FMS server, you might want to expand your knowledge. The best place to start is right here by checking out these articles (currently still focused on FMS 3):

• Scaling and securing streaming media applications with Flash Media Server (Lisa Larson-Kelly)
• New buffering strategies in Flash Player and Flash Media Server (Fabio Sonnati)

The next article in this series shows you how to encrypt your web video streams and set up SWF verification in Flash Media Server 3.5.