Working with the video object to create a simple stream

The first part of the development process involves choosing a target device. In other words, we need to determine which device or devices to target with this application. Launch Device Central CS3 and sort the device list by the version of Flash Lite, and then choose 3.0. You should see a few devices in the list. If you don't, then make sure to download the newest device profile update.

For the purposes of this example, I am going to use a generic Flash Lite 3 (240× 320) profile. I'm using the generic version because there is a problem with the new Nokia N95 8GB profile and DoCoMo removed support for video from the 905i series. The issue with the Nokia N95 8GB profile is a known issue and should be fixed shortly. Additionally, DoCoMo indicates that it will add video support to the 906i series in the near future. You may be wondering why I instructed you to download the device profile update. It is a best practice to get in the habit of checking and downloading the newest device profiles from Adobe.com so that you always have the latest information about the mobile devices that support Flash.

Create a new, blank ActionScript 2.0 Flash file in Flash CS3 Professional. We'll start our ActionScript development by creating the video object that we'll use to attach the streaming video. Open the Library by selecting Window > Library. Click the Library options menu icon in the top right corner of the Library panel and select "New Video…" (see Figure 1).

Figure 1. Use the Library options menu to create the new video object

Name the video object ("vid") and drag it to the Stage. After dragging it on the Stage, you'll need to assign a name to the instance of the video object. Click the video object to select it, and then look at the Property inspector located below the Stage (see Figure 2).

Figure 2. Enter the instance name below the word "Video" in the Property inspector

I've assigned the instance name "vid_video" to the instance of the video object. The instance name is very important, because we will reference this name in ActionScript to attach the video stream to this instance. Now we're ready to roll up our sleeves and write some Actionscript.

This is a very simple example. In order to keep it simple, I'm going to place my ActionScript on Frame 1 of a layer that I named "AS".

I'm using an if(inited code block as the starting point of my application. Inside the if statement, I've set up a connection to my Flash Media Server (FMS) using the "connect" method of the NetConnection Class, like this:

if (inited == null) {
inited = true;
    nc = new NetConnection();
    nc.connect("rtmp://localhost/simpleVideo/");
    playvid();
}
function playvid(){
    ns = new NetStream(nc);
    vid_video.attachVideo(ns);
    ns.play("melissaInterview");
}

The parameter in nc.connect("rtmp://localhost/simpleVideo/") points to the application on the Flash Media Server. RTMP is the protocol used to carry the content. There are several types of RTMP, but Flash Lite 3 only supports the basic RTMP protocol without tunneling or encryption. Here's a list of all of the flavors of RTMP:

RTMP protocols

RTMP	Real-Time Messaging Protocol
RTMPT	Real-Time Messaging Protocol tunneled over HTTP
RTMPE	128-bit encrypted Real-Time Messaging Protocol
RTMPTE	128-bit encrypted Real-Time Messaging Protocol tunneled over HTTP
RTMPS	Real-Time Messaging Protocol over SSL

The default port for FMS is 1935. That port can be changed, but if you use the default port you do not have to include the port in the server reference. The application name (simpleVideo), simply means that there is a folder located in the applications folder (inside the installation folder of the Flash Media Server) called simpleVideo (see Figure 3). Here's where that folder should live on a Windows system:

C:\Program Files\Adobe\Flash Media Server 3\applications\simpleVideo

Figure 3. The simpleVideo folder lives inside the FMS directory structure

Using a reference to the connection created in the previous step, we'll create a one-way channel inside the connection using NetStream.

ns = new NetStream(nc);

Using the reference from the previous step, the next line of code attaches the stream to the video object on the Stage.

vid_video.attachVideo(ns);

Finally, we'll add functionality to play the video. Notice that we leave off the ".flv" file extension when referencing the video file.

ns.play("melissaInterview");

That's all pretty straightforward so far.

Now let's add a little control to this example. I assume that most people viewing a video will want the ability to pause and play the video. So we'll create a function called pausePlayVid(). Inside of that function we'll add the pause method of the NetStream Class, like this:

function pausePlayVid(){
    ns.pause();
}

To keep it simple, I am going to use a component that I created to map the device's navigation keys to function names. In other words, this sample project assumes that the mobile device you are targeting has left, right, up and down navigation keys. This component allows you to pick one of those navigation keys, (in this case I'm choosing the right navigation key), and map that key to the function we just created called "pausePlayVid". This is a simple component that you can download along with the sample files for this article. Now when I test the video playback example in Device Central, the video starts to play. When I press the right navigation key, the video pauses. And if I press it again, the video resumes playing.

This first example is a very basic demonstration of how you can control playback of streaming video from Flash Media Server using ActionScript in a Flash Lite-enabled device.

In the next section we'll take a look at how to detect the available bandwidth for a specific device—which is a critical piece of the puzzle towards delivering streaming video on a mobile device that provides the best user experience.

Page 2 of 3

Previous Page

Next Page