Considerations:

After writing a couple of articles I realized that some people do not know that there are both open and closed cellphones. Open devices allow you to create and load applications on the device where closed devices do not. Open devices, for the most part, include Symbian, Windows Mobile and sometimes Linux. Some examples of open devices include the Nokia N95, N73, E62 and Palm Treo 700w (Windows Mobile).

The reason that I am making a point of explaining open versus closed is that you will need the Flash Lite player installed on a device in order to player converted Adobe Presenter content. Adobe makes developer versions of the Flash Lite player available for download on the developer network site. For the time being the only Flash Lite 3 player available is for Symbian (e.g. N95, N73, etc…). I would assume that there will be a Windows Mobile version later this year but if you want to get started today and do not have an open handset buy a Nokia device with the Symbian OS. Because Flash Lite requires a decent amount of performance and memory I would buy an N95 or an N73 or equivalent.

The Nokia N95 8GB has Flash Lite 3 integrated into the browser. Before you get too happy I tested Presenter content on this device using the browser with Flash Lite 3 in a number of different scenarios including accessing the content on a Connect server, using an html wrapper for the viewer-lite.swf on a standard web server and using an html wrapper for the view.swf on a standard web server and none of the scenarios loaded the content. There seems to be a problem playing Adobe Presenter content using http, I would assume that at least in part the problem is a security sandbox issue as there is no way to set the security settings for the converted Adobe Presenter content. In addition to the previous issue there is a strange bug that affects the ability to play video on the N95 8GB, when you play a slide that has embedded video the screen rotates to landscape. This is not a problem if you are already in landscape mode. I would assume that Nokia will have a fix for the video problem soon but for now I would stick with content loaded onto an Nokia N95. I will use the term device and Nokia N95 (non-8GB model) interchangeably in this article.

The object of this article is to show how you can create content using Adobe Presenter 7 that will run on an open handset running Flash Lite 3. If you are not familiar with Adobe Presenter check out the following example . If you are still looking for additional Adobe Presenter information you will find a number of PDFs that go into some detail on the resource site for Adobe Presenter and Adobe Connect.

Authoring:

It should go with out saying that we need to use every available pixel of these small screens for content. With that said it should also be obvious that some content will simply not work on some devices based on the resolution of the device, input device requirements(mouse) as well as memory and processor requirements.

There is an unwritten rule that you should not use more that five or six bullets on a slide when creating a PowerPoint presentation. I would say that when creating a presentation for a small screen that it should be more like three or four bullets at most. Using a larger font will go a long way to improving readability of text. In addition the issue of readability is abrogated to some degree by adding audio to the presentation using the Adobe Presenter plug-in. In the following the image on the right is a screen capture of the original slide from a PC and the image on the left is a screen capture from a Nokia N95, with a 320 by 240 resolution, running the converted content.

As you can see the fidelity of the conversion is very good. The image is scaled and placed correctly as is the text content. The image should also help make the point that it is a good idea to use a slightly larger font if you are thinking of using the converted content on a device with a small screen.

The original image that was added to the presentation was approximately 4004KB. The size of the slide with out the image was approximately 1KB. When I added the image and published the presentation the slide with the image was 231KB. This is still fairly large for some devices, you may want to optimize your images before adding them to PowerPoint and converting them with Adobe Presenter.

There are several problems that may or may not be obvious with the preceding content image. First the content requires a mouse to start, stop and pause the content not to mention use the sidebar functionality (thumbs, notes, search), most cellphones do not have a mouse. Second too much screen real estate is used by the sidebar. Third the images of the headphones and microphone are too big for small screens. The good news is that Presenter 7 addresses most of the issues for us either during the publish process or at runtime. When you publish the PowerPoint content using Presenter 7 there are two swf files, used as viewers, created in the publish folder the viewer.swf and viewer-lite.swf. The viewer.swf is the file that is used to play the content on PCs while the viewer-lite.swf is the file used to play the content on non-PC devices with a minimum client requirement of Flash Lite 3. The view-lite.swf solves some of the previously mentioned issues by removing the mouse requirement and not loading the sidebar.

Audio:

Audio works the way that you would expect it to in Adobe Presenter content. The Presenter plugin for PowerPoint gives you the ability to record and edit audio for each slide in the presentation. When the viewer-lite.swf and the data folder are moved to the device you will hear the recorded audio for the given slide.

Video:

Video is a favorite media type for learning content authors. Adobe Presenter allows a content author to import and set preferences for video. When importing video you have the option to place the video on the slide or the sidebar. In order to use video in content converted by Adobe Presenter on a device the video needs to be placed on the slide not the sidebar as the sidebar will not be loaded by the viewer-lite.swf. As a test I imported a Quicktime video that was fairly small (200 x 160 pixels) and set the placement to slide and the datarate to 400kbps. The video played well with no visible dropped frames and decent quality audio on a Nokia N95.

Themes and Custom Animations:

Adobe Presenter gives the content author the ability to create and reuse themes as well as the ability to retain custom animations created in the PowerPoint presentation. Since a different viewer is used to play converted content on a device(viewer-lite.swf) than on a PC (viewer.swf) and that viewer does not support themes, they are not retained.

Custom animations are created in PowerPoint and retained after conversion by Adobe Presenter. I tested several custom animations including Fade, Dissolve In, Fly In, Checkerboard and Spin and all worked as expected on the device.

Imported Flash Content:

Using Adobe Presenter a content author has the ability to import Flash content and place it on a slide or the sidebar. As mentioned previously the Flash content will need to be placed on the slide not the sidebar. Most Flash content imported using the Adobe Presenter plugin for Powerpoint is retained but will have limited use on devices based on the limited input options available on devices. For instance the lack of a mouse means that you use the navigation keys on the device to advance the converted PowerPoint slides. Which means that the content author cannot use those keys to interact with imported Flash content. It would be helpful if Adobe Presenter had a method for remapping the keys used for slide navigation to adjust for the input requirements of the imported Flash content. Since content converted by Adobe Presenter uses different keys to advance slide content on the device based on the orientation of the content it is impossible to use the devices navigation keys for Flash content as it would move the slides forward or back. If you could remap the keys you could have converted content always use the same navigation keys to advance the slides. For instance when you start the presenter content in portrait mode the right navigation button on your 4-way rocker is used to advance the slide content. When you switch to landscape it is the down navigation button on your 4-way rocker that advances slide content. This will limit the amount of interactivity that you can expect on a mobile device as the author of the Flash content would have to take into account whether the slide content was in portrait or landscape mode. One solution would be to use screenResolutionX and screenResolutionY from the Capabilities class in your Flash content to figure out if the content is being run in portrait or landscape and adjusting input keys accordingly.

Fonts can also be a source of confusion when targeting a device. I recently found that the use of device fonts, fonts that rely on the host to have the type face, do not work in Flash content imported using Presenter. If you use a font such as Arial or Times New Roman the outlines are embedded with the content and work well. If you have dynamic text you will need to embed the characters you intend to use (e.g. Lowercase, Uppercase, Numerals, etc…).

Quizzes:

Adobe Presenter allows the content author to create or import a quiz that will be published with the other content from the presentation. Unfortunately the quiz functionality from the Presenter plugin for PowerPoint is not supported when using viewer-lite.swf as the viewer on a device. A nice feature for a future release would be to enable quizzes with out reporting so that learners could at least test their knowledge of a subject. Of course it would be great to get reporting as well but this would be a good first step.

Move Content to Device:

Another important consideration is how will the content author get the content onto the device. Since, as previously mentioned, it is not possible to access Presenter content from a device using a browser (http) the content, for now, will need to be manually loaded onto the device. I am hoping that someone proves me wrong on this point as it would greatly increase the usefulness of this content if it could be accessed across the Internet. The good news is that you will find it is a simple process to load content onto the device using Nokia’s PC Suite.

From the following image of the Adobe Presenter publish directory you will notice that there are six files and one directory. You will only need to move the viewer-lite.swf and the data directory to the device in order to play the content. You can leave behind all the other files as they will not be used on the device to play Presenter content.

Summary:

The ability to play content from Adobe Presenter on a mobile device is a welcome ability that portends the beginning of a trend that I have been talking about for some time, mobile learning. With that said there are a few features that I would like to see added to the product in future releases.

Feature Requests:

1. Configurable key mapping inside Adobe Presenter
2. Ability to access content over the Internet via http
3. Ability to use quizzes and store results locally to submit when connected
4. Client-side API to enable the manipulation of Presenter content from other Flash content using Actionscript (e.g. fullscreen)
5. Ability to set security settings

Examples Used in this article:
simpleStreamingExample.fla
bwcheckExample.fla

In this article I am going to cover two scenarios for streaming Flash video from the Flash Media Server to Flash Lite 3. The first is the simplest possible example the second will use script based bandwidth detection to determine the bandwidth available to the device and then stream the appropriate video based on that information.

Flash Lite 3 as has support for streaming content from Flash Media Server. I am sure that most of you already know that it cannot be the same support that is in the desktop Flash player and you would be right. There are several exceptions, for example you can stream content to a device with the FashLite 3.0 player but not from a device with the FlashLite 3 player to the Flash Media Server. I hope that one day soon we will be able to stream video from a cellphone to a Flash Media Server and broadcast to the world but for now we will have to settle for consuming that content on our FlashLite 3 enabled devices. The approach for creating a Flash Lite 3 application that receives streaming content from a Flash Media Server is very similar to creating that content and targeting the desktop player. I should also say that for now you cannot create FlashLite applications using Flex, I hope that changes soon but today the Flex component foot print is too large for devices. I will use Flash CS3 and Device Central for the examples in this article.

The example we are about to create should be familiar to you if you have created an application that took advantage of the Adobe Flash Media Server in the past. We will use NetConnection and NetStream to create the connection and video.attachVideo() and NetStream.play() to attach and play the stream. Two notable exceptions to functionality as compared to the desktop Flash player are the lack of support for Remote SharedObjects and one-way streaming as I mentioned earlier. We are going to focus on video in this article, I will cover data in a separate article in the near future.

In order to test this example you will need to have Flash Media Interactive server 3 installed. If you do not already have it installed you can use the developer version which provides a connection limited development server. It is fully functional but will only allow a limited number of connections.

You can download this example (simpleStreamingExample.fla) and other examples from my Connect meeting room. When you download this example you will need to substitute your FMS servers name or ip address for the following yourserver.com in the actionscript of the simpleStreamingExample.fla file. If you have the FMS server installed locally that would be localhost or 127.0.0.1. In addition you will need to substitute the name of a video file that you created and placed in the _definst_ directory under your FMS applications folder for the following melissaInterview in the actionscript of the simpleStreamingExample.fla file. You could also use one of the flv files on my Connect meeting room in the zip file called videos_for_streaming_example.zip.

The first part of the process will be to choose a target device. In other words what device or devices are we going to target with this application? Launch Device Central and sort the list by the version of FlashLite then choose 3.0. You should see a few devices in the list, if you don’t make sure to download the newest device profile update #5. For this example I am going to use a generic Flash Lite 3 (240 x 320) profile 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 and DoCoMo will add video support to the 906i series. Before you wonder why I asked you to download the update, I just wanted to see if I could get you to do it. Just kidding there will be other updates and I want you to get in the habit so that you always have the latest intel on devices that support Flash. Now that you have a new blank Flash file open in Flash CS3 we will move on to the next major step which is to create the video object that we will use to attach our streaming video. Open the Flash library from the Windows menu in Flash CS3 or you can use the short cut keys (cntrl & L). From the Display panel menu options of the library panel select “New Video…”.

Give the video object a name (”vid”) and drag it to the stage. Once it is on the stage you will need to give it an instance name. Simply click on the video object that you moved to the stage then look at the property inspector at the bottom of the stage.

The instance name is “vid_video”. We will use this name in the Actionscript to attach the video stream to this object. Now its time for a little Actionscript. This is a very simple example and in order to keep it simple I am going to place my Actionscript on the first frame of a layer that I named “AS”.

I am using an “if(inited” code block as the starting point of my application. Inside of this “if” statement I am setting up a connection to my Flash Media server using the “connect” method of the NetConnection Class.

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 FMS server. “RTMP” is the protocol used to carry the content. There are several types of RTMP but Flash Lite 3 only supports basic RTMP no tunneling or encryption.

The default port for FMS is 1935, that can be changed if you use the default you do not have to include the port in the server reference. Finally the application name (i.e. simpleVideo), simply means that there is a folder in the applications folder inside the installation folder of the Flash Media Server called simpleVideo.

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

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

ns = new NetStream(nc);

Using the reference from the previous step we attach the stream to the video object on stage.

vid_video.attachVideo(ns);

Finally we start to play the video. Notice that we leave off the “.flv” file extension.

ns.play(”melissaInterview”);

Pretty simple huh?

Now lets add a little control to this example. I would assume that most people viewing video might want to pause and play that video. I am going to create a function called “pausePlayVid()” and inside of that function I am going to add the pause method of the Netstream class.

function pausePlayVid(){

ns.pause();

}

To keep it simple I am going to use a component that I created to map navigation keys to function names. In other words I would assume that your device has left,right,up and down navigation keys, this component allows you to pick one of those navigation keys, in this case I will use the right navigation key, and map that to the function we just added to the example called “pausePlayVid”. This is a simple component that you can download with the samples for this article. Now when I test this example in Device Central and the video starts to play if we hit the right navigation key it will pause and if we hit it again it will play.

There is one more thing we should consider if we want this to work on mobile phones, bandwidth! I am sure you have noticed that you can have a conversation with someone on your cellphone and simply turn around and loose the connection? If you haven’t then you must live in cell tower heaven. For all the rest of us we should consider a way to stream different content based on available bandwidth. There is nothing we can do for a lost connection although that would be a neat trick. At this point I was planning to show how we could use the native bandwidth detection of FMS 3(Flash Media Server) to automatically select the best streaming content for the current bandwidth of the FlashLite enabled device but unfortunately there is a problem that will not allow this functionality to be used with Flash Lite 3.x.

I am still looking into the cause of this but all is not lost. Even though we cannot use the native bandwidth detection we can use an approach developed back in the days of Flash Communication Server (i.e. predecessor to FMS) and described by Stefan Richter on Adobe’s Developer Connection.

This is a very good article that covers in detail the approach for bandwidth detection that will work with FlashLite 3 content. In this article you will also find tutorial files and the server side script that performs the bandwidth detection. The approach involves a call from the client to a server side script. The server side script calls a method on the client to determine the devices bandwidth and sends the value back to the device. At this point the device can use this information to choose the most appropriate content. You will need to download the server side script (bwcheck.asc) and place it in a folder called “bwcheck” under the applications directory of the Flash Media Server 3 installation directory.

For all those not familiar with the Flash Media Server, the “.asc” extension denotes this as a server side script.

Now lets take a look at an example (bwcheckExample.fla) that uses bandwidth detection to determine the appropriate video to play on the device. You can download this example and other examples from my Connect meeting room. When you download this example you will need to substitute your FMS servers name or ip address for the following yourserver.com in the actionscript of the bwcheckExample file. The video files for this example are in the videos_for_streaming_example.zip archive. Unzip the video files and place them in the _definst_ directory inside the streams folder of the Flash Media Server as the following screen capture illustrates.

There is a brief description of the approach in the help files for Flash Media Server. Even though the description mentions “native bandwidth detection” the actionscript will work for script based detection as well with one exception. You will need to set the following to false in the “Application.xml” file on your Flash Media Server.

<BandwidthDetection enabled=”true”>

In the following example we will use two connections to the server. The first is a connection to get the available bandwidth and the second is to connect and play the appropriate stream. Just to be clear I had to create the different video files (”.flv”) manually. There are server solutions to realtime transcoding but they are either too expensive or outside the scope of this article to explain, that maybe a topic for a future article. It is also worth noting that in this example we only check the bandwidth once, it would be a good idea to check the bandwidth again in the event of an error or possibly poor video play back performance. That might also be the topic of a future article as well. As I have already covered the basics I will only cover the bandwidth detection in this example. The following example starts the same way the previous example started with a new NetConnection(). When the connection is made and accepted by the server side script (”bwcheck.asc“) the process of detecting the bandwidth begins. The server calls the method “onBWCheck” and sends packets of data in order to determine the clients bandwidth. When the process is complete the server sends the results to “onBWDone”.

We create the connection that will be used to check the bandwidth of the client.
nc = new NetConnection();

On the server the following code in the bwcheck.asc file on the FMS server accepts the connection and kicks off the detection process by calling the function calculateClientBw inside the same file.

application.onConnect = function(p_client, p_autoSenseBW){
this.acceptConnection(p_client);
if (p_autoSenseBW)
this.calculateClientBw(p_client);

The following is method on the client is called by the server to assist in determining the bandwidth of the client.

nc.onBWCheck = function() {
return ++counter;
};

When the process is complete the server calls the client with the following and passes in the bandwidth, deltaDown, deltaTime and latency.

p_client.call(”onBWDone”);

On the client the following method retrieves the bandwidth, deltaDown, deltaTime and latency and then calls the function on the client that will determine the appropriate video file to use.

nc.onBWDone = function(p_bw, deltaDown, deltaTime, latency) {
initVideo(p_bw);
};

The following function uses the bandwidth information passed to it to set a variable called useVideo to the appropriate video file. For simplicity I named the video files for the bandwidth they will use (e.g. 200kbps). In addition I am also changing the amount of video that will be buffered before playing each video.

function playVideo(param_detected_bw:Number) {
var detected_bw:Number = param_detected_bw;
if (detected_bw>200) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 256kbps_Stream”;
useVideo = “200kbps”;
bufferlength = 4;
} else if (detected_bw<200 && detected_bw>=160) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 150kbps_Stream”;
useVideo = “150kbps”;
bufferlength = 7;
} else if (detected_bw<160 && detected_bw>=120) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 100kbps_Stream”;
useVideo = “100kbps”;
bufferlength = 9;
} else if (detected_bw<120 && detected_bw>=85) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 75kbps_Stream”;
useVideo = “75kbps”;
bufferlength = 10;
} else if (detected_bw<85 && detected_bw>=65) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 50kbps_Stream”;
useVideo = “50kbps”;
bufferlength = 12;
} else {
bdwdth_txt.text = “bandwidth too low. Sorry”
};

Well thats it. I hope that helps get you started creating streaming Flash video content for Flash Lite 3.x. The following articles will help you round out your understanding of Flash video support in Flash Lite 3.

Flash Lite 3 video capabilities

How to play FLV video from YouTube using Flash Lite 3

I hope you found this article useful.

Well I tried to get the stock quote application signed so that I could create an installer for Nokia phones but I finally had to give up. I do not think the process is ready for prime time. At any rate I posted the swf files for four resolutions (i.e. 176×208, 240×320, 240×240, 320X240). I wish that I could make this a little easier but in order to install this application you will need to create a folder called “Trusted” at the following location on your Symbian device “c:\Data\Others\Trusted” this is only required on 3rd edition Symbian devices. You can use the Nokia PC Suite to create the “Trusted” folder previously mentioned as well as to move the Flash swf file appropriate for your device into that folder. If you have not installed the Nokia PC Suite you can find it at the following url:

http://www.nokiausa.com/A4735050

This application should work where ever a Flash Lite player (version 2.x) is present. In other words if you have a Windows Mobile device with one of the previously mentioned resolutions it should work.

You will find the swf files at the following location:

http://mmse.acrobat.com/mobilenation/

Simply logon as a guest with your first and last name. The Connect meeting room will load and you will see the following:

Download the Flash swf file appropriate for the resolution of your device. In order words if you have an N73 or an N95 you would download “stockQuote_240×320.swf” and place it in the “Trusted” folder mentioned earlier. You must have the Flash Lite 2.x player installed on the device.

If you have a 1st or 2nd edition you can download the sis file and the install should work with out issue. I have not tested this n windows mobile but if you have a palm device with a resolution of 240×240 you will find a swf file that works for that resolution as well.

If have a few planned updates to this application, stay tuned.

I have posted the first edition of the Stock Data application. This version was formatted for a Nokia 6680 (176 by 208). It will work on slightly different screen sizes but not 320 by 240. I will post a version for QVGA in the next couple of weeks. I have not done extensive testing but I have found a few problems. Please let me know if you find any problems.

Start by entering stock symbols into the “Symbl” column. Use the navigation keys on the phone to move the selection rectangle to the first field under the title “Symbl”. Press the select button to allow entry into the field. Enter a stock symbol then press enter again to exit the text editing mode. Once you have entered one or more symbols hit the right softkey “update” to initiate a look up for the symbols that were entered. If you have a connection the application should update the stock data. If there is no connection it will wait the number of minutes set for the interval and try again. The application updates on an interval that can be adjusted under the menu and settings. You will also notice two dates near the top of the application “Last Trade” represents the last time that a stock was traded while “Last Update” is the last time data was loaded from the server.

You can download the sis file at the following url:
http://mmse.acrobat.com/mobilenation/

Simply select the file “StockQuote.sis” and click the button called “Save to my computer”. When you install the application you can launch it from the icon in the application folder. The icon is

What can I say I am not an artist. I am looking forward to any feedback you might have. Thanks

It has been a while but I have some news. I have been working on a Flashlite stock data application that takes advantage of the localshared object for storing stock info when not connected. I hope to have it completed shortly. The high level is that when you first run the application it will ask you to enter an interval in minutes. The application uses this interval to update the information based on the symbols that the user enters into the symbol column. After you have entered the stock symbols you would like to track hit the right softkey (update) and the application will fetch the data for the symbols that you entered. This data is stored locally so that if for some reason you are disconnected the data will persist. You will not need to enter the symbols every time you launch the application because they are stored locally. I will leave you with a screen shot until I post the application. Please drop me a note to let me know if you are interested in the application.

***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.

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.

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.

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.

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.

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.

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.3gp” to 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.