Nick Hippe

Adobe
mobilenation.wordpress.com

There are many considerations when authoring video content to play back on the desktop Flash Player—so you can begin to imagine the possible difficulties encountered when authoring video content to play back on a hand-held device.

To begin with, there is a wide variety of devices, operating systems and operators, as well as several different versions of the Flash Lite Player, to consider. For the sake of this article we'll focus on the Symbian, BREW and Windows Mobile environments running the Flash Lite Player 2.0. All of the platforms discussed in this article are considered open, which is another way of saying that you can install Flash applications on the device.

One of the first considerations for an end user about to view mobile video content will be cost. What will my operator charge me to watch this video? Fortunately, there are several operators with unlimited data plans that make it easier to consider the use of video in your mobile application. However, the potential cost associated with viewing video content is an aspect you'll need to consider communicating to your potential users prior to them playing the video content.

This article will cover the requirements and considerations for developing a mobile project that includes video for playback in Flash Lite 2.0. We'll also provide details about encoding the video and how to work with Device Central to test the content on the targeted device.

Requirements

To complete this tutorial, you will need to install the following software and files:

 Adobe Flash CS3 Professional

• Try
• Buy

Sample files:

• flash_device_video.zip (ZIP, 136K)

Prerequisites:

To get the most from this article, you should have a basic understanding of Flash in order to follow along with the instructions provided. When working with the sample files, you'll need to update them with the name of your own 3GP video file to make the project function. The sample files include both a local video and streaming video example.

The local video example requires that you load the video on your device in the same directory as the SWF file. The streaming video example requires that you have access to a streaming server that supports Real Time Streaming Protocol (RTSP).

The sample files also include the components discussed in this article, because I have made a couple of changes to them recently and the updated versions of these components are not yet posted on the Adobe Exchange.

To follow along with the steps in this article, you'll need a way to install the examples on your device. If you are using a Nokia device, the Nokia PC Suite will allow you to easily transfer the files. If you have a BREW device, you can register as a BREW developer and download AppLoader to transfer the files. If you have a Windows Mobile device, use ActiveSync to move the example files to your device.

Developing video projects for Flash Lite 2.0

The first thing to understand is that Flash Lite 2.0 does not play Flash video (FLV)—it plays device video. In other words, Flash Lite 2.0 provides the rectangle for the device to play the video and passes several rudimentary commands to the system in order to control playback of that video. From the end user's point of view, it appears that the video is being played by the Flash Lite Player, but in reality, the heavy lifting is being performed by the device. Because the video playback is device dependent, we'll need to pay close attention to the device's capability. You'll need to know which video formats and codecs are supported by the device. Does the device require 3gpp or 3gpp2 video? Will you need to target the H.264, H.263 as well as MPEG-4 codecs? These are all questions you'll need to ask yourself before you begin a mobile video project.

There are several organizations working on mobile video standards. The 3GPP (3rd Generation Partnership Project), 3GPP2 (3rd Generation Partnership Project 2) and ISMA (Internet Streaming Media Alliance) are all participating in this process. If you take a close look at the membership of both 3GPP and 3GPP2, you'll notice that these organizations are divided down company and technology lines. In other words, Cingular and T-Mobile are involved in 3GPP and Verizon, Sprint and ALLTEL are members of 3GPP2.

These polarizing forces involved with mobile video standardization can greatly complicate the life of a content developer. When a Flash developer targets the desktop player (Adobe Flash Player 9), and decides to add video to their application, they do not need to know if there is a specific codec available on the target system. For a mobile developer, this is a critical first step when considering the use of video for Flash Lite 2.0 content on a handheld device.

If you are new to developing content for the mobile space, you will likely hear and read about many unrecognizable abbreviations like 3GPP2, CIF, QCIF, QVGA, etc. Just when you thought you knew all the abbreviations, along comes the mobile space with an entirely new set. The great news is that the mobile emulator also known as Adobe Device Central CS3 in Adobe Creative Suite 3 gives you a significant advantage when testing mobile devices and removes the need to investigate each and every device that you might target. Of course this does not eliminate the need to test your content on an actual device—just as Dreamweaver does not remove the need to test your CSS content in a web browser. But using Adobe Device Central CS3 provides Flash mobile developers with a significant productivity boost because it makes it possible to simulate your content's playback and test it with emulations of a wide variety of available devices (see Figure 1).

• View Larger (+)

Figure 1. Play simulations of your content and get specific details about devices with Adobe Device Central CS3

More device requirements

There are many other considerations beyond whether the device is capable of playing video. Device memory, processor performance, screen size, aspect ratio and orientation are a few of the factors that will affect your project in the pre-planning stage. You will need to consider the length of the video content as well, and decide whether you plan to stream the video or deliver it with your content as a package. If you evaluate the video's characteristics and decide that streaming is your best option, you'll need to target devices that support RTSP (Real Time Streaming Protocol). Not to be confused with RTMP, RTSP is a standard developed by the IETF. RTMP is the protocol used to stream Flash video. As far as memory and processor speed, I have had good luck streaming video to a Nokia 6682 with an ARM 9 processor running at 220 Mhz with 8MB of total memory and 2MB dedicated to Flash Lite Player.

Working with device video and devices

The unfortunate outcome of supporting device video is that it is dependent on the device. In other words, you'll find that H.264 is supported on some devices and not on others. You'll also find that streaming video is supported on some devices and not others. Let's take a look at a couple of examples. It is possible to stream video to a Nokia 6682 (Symbian OS) from a streaming server via the RTSP protocol. It is not possible to stream device video to a Windows Mobile device using RTSP, although local device video plays without issues. With that said, I'm sure that I will get a response from someone that has knowledge of a mystical combination of patches and drivers that will make this possible. I'll leave those combinations up to you to validate. You will find the same kinds of issues when using BREW devices. When attempting to test streaming video on the LG VX8100, I found that it does not "officially" support any video format—let alone streaming. Running the same test on the Motorola V3C revealed that this device does support streaming. Anyone familiar with Flash video understands that it is possible to access video in a number of ways. You can embed the video in a SWF file, you can stream the video from a Flash Media Server and you can access video via http, (also known as progressive download) with little concern of the hardware it is playing on. This is not the case with device video, which requires a great deal more preparation and testing.

Device Central is an incredible resource when you're considering integrating device video into your projects. You can think of Device Central as the update and upgrade from the mobile emulator in Flash 8. The Flash 8 mobile emulator was a good start, but it pales in comparison to Device Central. Device Central has a great deal of information about device capabilities (updated quarterly via the web) as well as an emulator that can be used from nearly every tool in Adobe Creative Suite 3. You can use Device Central to periodically check for Device Updates to ensure you have the newest information (see Figure 2). Device Central provides information about the color depth, screen size, Flash version, memory, video formats, content scaling, etc. The only information that I would like to see added to Device Central is whether or not a specific device supports RTSP. Device Central can educate you on a given set of devices; however it cannot address the issues associated with using device video—namely the differences inherent in that set of devices.

Figure 2. Device Central CS3 is updated quarterly and you can check to see if you have the latest version by choosing Devices > Check for Device Updates…

The mobile emulator in Flash 8 was just that: an emulator. There was very little device information included and the provided information was nearly impossible to compare to other target devices. There were also a few problems with the Flash 8 mobile emulator. For example, when attempting to load device video via http the file appeared to work in the emulator. But when you moved the same SWF file to a Symbian device, such as the Nokai 6682 or E62—the operation resulted in an error.

Encoding video for mobile devices

There are many solutions for encoding video from one format to another. For instance, Adobe Premiere Pro CS3 can export video files to mobile formats and allows you to test the exported files in Device Central. You could also use QuickTime to encode your device video. I plan on providing instructions on how to work with Adobe Premiere Pro CS3 to prepare video for mobile projects in a future article. For the purposes of this article, we'll use QuickTime. To give you a taste of both methods, I'll walk through the process of encoding two videos. The first is a standalone video that will be loaded and accessed from the device. The second will be a streaming video file loaded and accessed from a streaming server, Darwin.

For the standalone device video, I started with a fairly large video file in QuickTime format (approximately 5.5 MB) and converted it to 3gpp qcif (176 by 144). I ended up with a file that was approximately 580 KB. If you'd like to learn more, there is additional information about working with video formats available in the QuickTime help pages. For this project, I used the following settings in the QuickTime Export Settings dialog box (see Figure 3).

• View Larger (+)

Figure 3. When creating the standalone video file, I used the settings above in the QuickTime Export Settings dialog box

With the exception of two settings, I left the settings the same when exporting the streaming video file. Under the streaming settings, I made two changes. I checked the option to "Enable streaming" and also checked the option to "Optimize for server". That's all there is to creating a video file capable of being streamed from a media server (see Figure 4).

• View Larger (+)

Figure 4. When creating the streaming video file, I used the settings above in the QuickTime Export Settings dialog box

Setting up a streaming server is outside the scope of this article. I have had good success with using Darwin for my purposes. It can stream 3GP video over RTSP to devices that have the appropriate codec and support for RTSP.

Creating the Flash files

When creating the Flash file, you'll need to take the targeted device's screen size, Flash Lite Player version and ActionScript version into account. If you have Flash 8, you can select File > New. When the document is visible, select Modify > Document to set the dimensions to the appropriate size (such as 176 width by 208 height). To choose the Flash Player and ActionScript versions, select File > Publish Settings. When the Publish Settings dialog box opens, select the "Flash" tab, and then select the Flash Player version and ActionScript version appropriate for your targeted device.

You may be wondering which Flash Player version and ActionScript version to choose. That is one of the many reasons to upgrade to Flash CS3 and use Device Central. If you are using Flash 8, you'll need to create the document, select a Flash Lite and ActionScript version and choose Control > Test Movie to confirm whether your settings will work on the targeted device.

On the other hand, if you have Flash CS3 Professional with Device Central installed, the workflow is much simpler. First you investigate the devices capabilities using Device Central, and then create the file based on that information. In Flash CS3 select File > New. When the "New Document" dialog box appears, select "Flash File (Mobile)" and click OK. Device Central will launch automatically and you'll have an opportunity to learn about your target device before making your selections in regards to the Flash Player and ActionScript versions.

For this example I'm going to target the Nokia N95 and I need to confirm the device's capabilities. When Device Central opens, two tabs are displayed at the top of the application: "Device Profiles" and "New Document". I select "Device Profiles" and find the N95 on the left side under "Available Devices". I can sort the catalog of devices by vendor, Flash Player version, carrier, etc… Once I find the N95 I can select that device to find out information about screen size, Flash Player version, video codecs and much more. In addition, I can select multiple devices to compare their features. In this case, I have confirmed that the Nokia N95 ships with the Flash Lite 2.0 Player and has a screen dimension of 240 x 320 pixels. I return to the "New Document" tab to confirm that I am targeting the N95. I make sure that the "Player version" is set to "Flash Lite 2.0″ and the "ActionScript Version" is also 2.0. Finally, I set the "Content Type" to "Standalone Player". Unlike PCs today, most Flash Players on cell phones are installed as standalone players and are not browser plug-ins. You will also find the content type information in Device Central under the "Flash" category (see Figure 5).

• View Larger (+)

Figure 5. Device Central provides in-depth detail specific to each device

Now that we have created the Flash file, it's time to add the video object. Select Window > Library or access the Library with the keyboard shortcut (Control+L). Click the options menu button in the Library panel's title bar and select "New Video." Name the symbol "vid" and make sure that the option "Video (ActionScript-controlled)" is selected. You should see the new video object listed in the Library. Simply drag the video object onto the Stage.

If you are having difficulty following these instructions, you can download the sample files from the first page of this article and examine the finished file. We are going to start with the local video example (the scenario where the video file is played on the device).

Here's the ActionScript required to play the video:

fscommand2("FullScreen", true);

  function playVid(){
  vid_video.play("myLocalVideo.3gp");
  status_txt.text = "";
  status_txt.text = "Play";
  }
  function pauseVid(){
  vid_video.pause();
  status_txt.text = "";
  status_txt.text = "pause";
  }
  function resumeVid(){
  vid_video.resume();
  status_txt.text = "";
  status_txt.text = "resume";
  }
  function closeVid(){
  vid_video.close();
  status_txt.text = "";
  status_txt.text = "close";
  }
  vid_video.onStatus = function(info){
  status_txt.text = "";
  status_txt.text = info.level +" :: "+info.code;
  }

You'll notice there are a couple of oddities in the ActionScript shown above. The ActionScript is very simple, because Flash is not playing the video—the device is playing the video. You'll also notice that the name of the video myLocalVideo.3gp ends in a .3gp extension. This again is based on the fact that the device is playing the video, not Flash Lite. This is not all of the ActionScript required to play the video; we'll need to capture key events from the device that will call our functions. I have created a couple of simple components, mentioned earlier, that provide some basic functionality that we'll use in this example. The battery and signal indicators are self-explanatory, but the keypad mapping component complements this example well because the key listener is already created. All you have to do is install the components and restart Flash. After you re-launch Flash you'll see the mobile_NAH category listed in the Components panel. Then you can drag an instance of the keypad_mapping component onto the Stage. It doesn't matter where you place the component because it will not be visible in your published SWF file. Select the keypad mapping component instance on the Stage so you can adjust its parameters in the Component inspector (see Figure 6).

• View Larger (+)

Figure 6. Select the keypad mapping component instance on the Stage and then use the Component inspector to update the parameter settings

For this example, I simply copied the function name in the ActionScript to the parameters for the "keypad_mapping" component's "key_Right" event. When you move the SWF file to your device and press the right navigation key, the component will call the function "playVid" and the left navigation key will call the function "pauseVid." After you've updated the parameters, publish the file and transfer it to your device for testing.

To finish the streaming example, we just need to make one change to the ActionScript. Instead of vid_video.play("myLocalVideo.3gp"); we are going to change the local file "myLocalVideo.3gp" to the URL of a streaming server rtsp://yourRTSPServerIPorName/yourVideoFileName.3gp. That is the only change required. If you have access to a streaming server, you can publish your test file and transfer it to your device for testing.

Where to go from here

If you would like to add a battery and signal indicator to your project, you'll find both available for download on the Adobe Exchange in the "Business" category. The component name is Mobile Components.

Working with video can be challenging, especially when targeting a constrained device. At this point, you may be wondering if this is worth the effort. There are so many devices with different capabilities that creating video content that plays across the largest possible number of devices requires a significant amount of work. However, there is good news. Just as Flash has revolutionized video for PCs on the Internet, the next version of Flash Lite promises a similar revolution for video playback on mobile devices.

To get development strategies, helpful tutorials and sample projects, visit the Mobile and Devices Developer Center.

Also, stay tuned for a future article I'm writing that covers the process of authoring mobile content for Flash Lite 3.0.

About the author