Authoring Mobile Video Content for Flash Lite 2.x

***Download the examples and components from the following url http://mmse.acrobat.com/mobilenation/ Use the guest logon and enter your full name***

A basic understanding of Flash is assumed in order to follow along with the Flash editing portion of this article. The examples are provided as is. You will have to provide the name of your own 3gp video for these examples to function. You will find a local video and a streaming video example. The local video requires that you load the video on the device in the same directory as the swf. The streaming example requires that you have access to a streaming server that supports rtsp. I have also included the components discussed as I have made a couple of changes recently and the changes are not yet posted to the Adobe Exchange. You will need a way to install the examples on your device. If you are using a Nokia device PC Suite will allow you to easily move files to your device. If you have a BREW device you will want AppLoader, although you will have to register as a BREW developer in order to download it. If you have a Windows Mobile device ActiveSync allows you to move files to your device.

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

To start, there are many 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 are going to focus on the Symbian, BREW and Windows Mobile environments running the Flash Lite 2.x player. All of the platforms discussed in this article are considered open, in other words you can install Flash applications on the device.

One of the first considerations for an end user thinking about viewing the content will be cost. What will my operator charge me to watch this video? There are several operators with unlimited data plans that make it easier to consider the use of video in your application. The potential cost will be something you should consider communicating to your potential users prior to them playing the content.

Where To Start
The first thing the reader needs to understand is that Flash Lite 2 does not play Flash video it plays device video. In other words Flash Lite 2 provides the rectangle for the device to play the video and passes several rudimentary commands to the system for control of that video. It appears that the video is being played by the Flash Lite player inline but the heavy lifting is being done by the device. Because the video playback is device dependent we will need to pay close attention to the devices capability. For instance what video format and codec is supported by the device? For instance does the device require 3gpp or 3gpp2 video and will you need to target the H.264, H.263 as well as MPEG-4 codecs?

There are several organizations working on mobile video standards 3GPP (3rd Generation Partership Project), 3GPP2 (3rd Generation Partnership Project 2) and ISMA (Internet Streaming Media Alliance). If you were to look at the membership of both 3GPP and 3GPP2 you would see that these organizations are divided down company and technology lines. In other words you would find that Cingular and T-Mobile are in 3GPP and Verizon, Sprint and ALLTEL are members of 3GPP2.

These kinds of issues greatly complicate the life of a content developer. When a Flash developer, targeting the desktop player (e.g. Flashplayer 9), wants to add video to an application they do not need to know if there is a specific codec on the target system but this is a critical first step when considering the use of video for Flashlite 2.x content on a hand-held device.

If you are new to the mobile space you will 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 Device Central in Adobe’s Creative Suite 3 does a great deal to remove the need to investigate each and every device that you might target. Of course this does not remove the need to test on a device just as Dreamweaver does not remove the need to test your CSS content in a browser but it does give the Flash mobile developer a significant productivity boost.

Adobe Creative Suite Device Central

click to enlarge

 

More Device Requirements
There are many other considerations beyond whether the device is capable of playing video, for instance device memory, processor performance, screen size, aspect ratio and orientation to name a few. You will need to consider the length of the video content as well based on whether you plan to stream the video or deliver it with your content as a package. If you decide that streaming is the best option based on the video’s characteristics you will need to target devices that support RTSP. No I did not mean to say RTMP, RTSP is a standard developed by the IETF where as RTMP is the protocol used to stream Flash video. As far as memory and processor speed I have had good luck streaming to a Nokia 6682 with an ARM 9 processor running at 220 Mhz with 8MB of total memory and 2MB dedicated to the Flash player.

Device Video and Devices
The unfortunate out come of supporting device video is that it is dependent on the device. In other words you will find that H.264 is supported on some devices and not on others. You will also find that streaming video is supported on some devices and not others. Lets 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 works fine. With that said I am 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 will leave those combinations up to the individual tester to validate. You will find the same kinds of issues when using BREW devices. When attempting to test streaming video on the LG VX8100 it was 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 for 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 considering the use of device video. You can think of Device Central as the update and upgrade from the mobile emulator in Flash8. The Flash8 emulator was a good start but 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’s Creative Suite 3. It 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 given device supports RTSP. Device Central can educate you on a given set of devices it cannot address the issues associated with using device video namely the differences presented by those same devices.

Device Central Update

click to enlarge

The mobile emulator in Flash 8 was just that an emulator. There is very little device information and what is there is nearly impossible to compare to other target devices. There were also few problems with the emulator for instance when attempting to load device video via http it appeared to work in the emulator but when you moved the swf in question to a Symbian device such as the Nokai 6682 or E62 you got an error.

Encoding Your Video

There are many solutions for encoding video from one format to another. For instance Adobe’s Premiere Pro CS3 can export to mobile formats and allows you to test in Device Central. You could also use Quicktime to encode your device video. I will cover Adobe’s Premiere Pro CS3 in a future article, in this article we will keep it simple and use Quicktime. For the purpose of this article I will walk through 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, in this case Darwin.

For the on device video, I started with a fairly large video file in Quicktime format (approx ~5.5 MB) converted it to 3gpp qcif(176 by 144) and ended up with a file that was approximately 580 KB. There is additional information about video formats on the QuickTime help pages. The following are the settings I used from the Quicktime export settings dialog.

Quicktime Export

click to enlarge

I will leave the settings the same for the streaming example with two exceptions. Under the streaming settings I will check the box called “Enable streaming” as well as the checkbox called “Optimize for server”. Thats all there is to creating a video file capable of being streamed from a media server.

Stream Settings in Quicktime

click to enlarge

Setting up a streaming server is outside the scope of this article but I will say that Darwin has worked 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 will need to take into account screen size, Flash Player and ActionScript version for the targeted device. If you have Flash 8 you can simply go to the “File” menu and select “New”. When the document is visible select the modify menu and the document submenu to set the dimensions to the appropriate size (e.g. 176 width by 208 height). In order to set the Flash Player and ActionScript version select the “File” menu and the “Publish Settings” submenu. When the publish settings dialog opens select the “Flash” tab and then select to Flash Player version and ActionScript version appropriate for the device. What player version and ActionScript version should you choose? That is one of the many reasons to upgrade to Creative Suite 3 and more specifically Device Central. If you are using Flash 8 you will need to create the document choose a Flash Lite and ActionScript version and test (i.e. Control > Test Movie) to confirm whether your settings will work on the target device. On the other hand if you have Flash CS3 Professional with Device Central installed you first investigate the devices capabilities using Device Central and then create the file based on that information. In Flash CS3 select the “File” menu and the “New” submenu. When the “New Document” dialog is visible select “Flash File (Mobile)” and click the “OK” button. Device Central will open and you will have an opportunity to learn about the target device before you make your selections for Flash Player and ActionScript version.

For this example I might want to target the Nokia N95 and need to confirm the device capabilities. When Device Central opens there are two tabs at the top of the application “Device Profiles” and “New Document”. I select “Device Profiles” and find the N95 on the left 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 it to see information about screen size, Flash Player version, video codecs and much more. In addition I can select multiple devices to compare features. In this case I have confirmed that the Nokia N95 ships with the Flash Lite 2 player and has a 240 x 320 pixel screen. I return to the “New Document” tab to confirm that I am targeting the N95. I make sure that the “Player version” is “Flash Lite 2.0” and the “ActionScript Version” is also 2.0 and finally the “Content Type” is set to “Standalone Player”. Unlike PCs today most Flash Players on cellphones are installed as standalone in other words not browser plug-ins. You will also find the content type information in Device Central under the “Flash” category.

Device Central Device Detail

click to enlarge

Now that we have the Flash file created we need to add the video object. Open the library panel from the “Window” menu or by using the shortcut ctrl & L. From the options menu button in the Library panel’s title bar select “New Video”, name the symbol “vid” and confirm that the “Video (ActionScript-controlled)” is selected. You should see the new video object in the library, simply drag it to the stage. If at any point you are having difficulty following these instructions you can download the finished files from the top of this article. We are going to start with the local video example (i.e. the video file is on the device). If you would like to add a battery and signal indicator to your project you will find both on the Adobe Exchange in the “Business” category. The component name is Mobile Components. Now lets add 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 will notice there are a couple of oddities in the preceding ActionScript. The ActionScript is very simple, if you remember this is because Flash is not playing the video, the device is playing the video. You will 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 will 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 I will use in this example. The battery and signal indicators are self explanatory but the keypad mapping component will simplify this example because it has the key listener already created. All we have to do is install the components and restart Flash and you will see the mobile_NAH category in the components panel. You can drag the keypad_mapping component onto the stage. It does not matter where because it will not be visible in your published swf. Once the keypad mapping component is in your working file you can select it and set the mappings in the component inspector.

keypad mapping component

click to enlarge

Notice that I simply copied the function name to the component parameters for the “keypad_mapping” component’s “key_Right” event. When you move the swf to your device and press the right navigation key this component will call the function “playVid” and the left navigation key will call “pauseVid”. You can publish and move to find to your device for testing. To finish the streaming example we are going to make one change to the ActionScript. Instead of vid_video.play(myLocalVideo.3gp); we are going to change the local file myLocalVideo.3gpto the url for a streaming server rtsp://yourRTSPServerIPorName/yourVideoFileName.3gp. That is the only change required. If you have access to a streaming server you can publish and move the file to your device for testing.

Conclusion

I am sure that you are wondering if all this is worth the effort. There are so many devices with different capabilities creating video content that plays across the largest possible number of devices requires a significant amount of work. There is good news, similar to the way that Flash has revolutionized video for PCs on the internet the next version of Flash Lite promises a similar revolution for devices. I will cover Flash Lite 3 in a future article.

Published by

nhippe

I work for Adobe as an SE in focusing on the Flash Media Server family of products.

11 thoughts on “Authoring Mobile Video Content for Flash Lite 2.x”

  1. Pingback: biskero.org
  2. Hello,
    At last an excellent mobile video resource that makes sense ! Ive been doing some testing and have discovered that the swf doesnt play the video when sat in an htm page; does work in the FCS3 test. ‘Cos its a standalone I guess. I have installed the fp7 cab but Ive missed something Im sure as swf files are not recognised to play directly when clicking on them. To allow swf to play as a true standalone is there a cab ?

    Thanks

  3. Hello Bruce,
    Yes you are correct, in order to play in the browser the Flash plugin needs to be ported to the embedded browser. I am not sure what device and OS you are using but if it is Windows Mobile or Symbian you can download the Flash Lite player to play standalone SWFs.

    http://www.adobe.com/cfusion/entitlement/index.cfm?e=flashlite2_1_winmobile_download

    https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs%5Fflashlite3

    We will start to see more browser integration this year. Hope that helps.

  4. Hi Nick,
    Post is excellent. But still have some query on mobile video streaming. Pls clear it …
    I have tried to create a video appliation, viz streams a video from remote server and plays in my device. I used video class and play method. Here, i have some queries ….
    ==> Is video.play() internally connecting to remote rtsp server & streaming video?
    ==>Is decoding and rendering part handled by the device player ???
    ==>Or Play() method is using symbian libraries to demultiplex & decode RTP data for decoding and rendering?
    ==>In remote video streaming, upto what extent play method is using device player?
    ==>Finally, can we customize play() …
    Pls help on this. …

    -MCG4

  5. When you are using device video it is considerably more simple than using Flash Video. You create a video object in the library of the Flash authoring too. You drag the video object to the stage and give it an instance name (i.e. vid). In your actionscript you would use the following to play the video if it is local and in the same directory as the swf

    vid.play(“a1_ring.3gp”);

    If the video is being streamed from a media server via rtsp you would use the following:

    vid.play(“rtsp://whateverserver.com/a1_ring.3gp”);

    Yes that is why this solution is so simple, the device is doing everything. I do not think there is anyway to customize play(). With that said there is a great deal more functionality when using Flash video than device video. In order to use Flash video it will require the Flash Lite 3 player on the device. In the mean time you will need to use device video such that it is. Hope that helps.

  6. hi there, i have a 7610 and i’m using FL 2.0 in it. Also, I’m going to finish my thesis and project. I want to make a learning software that have some video inside. But i think if i put in swf file the swf will be big and may cause the mobile phone crash.

    can i use a swf and use outside 3GP video so the swf only role as a player for the 3GP vid. What do you think? i can build a application like that on 7610?
    or need FL 3 ?

    i also planning to buy a E65 .. but i dont know that E65 support FLite 3 or not. the E65 is a FLite 1.1 enable but can we use FL 3 developer in E65 ?

    sorry.. i’m not a native english speaker
    thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s