Note: This article is reprinted from a previous post on mobilenation.

This article describes how to 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 this live example. To learn more about Adobe Presenter, visit the Adobe Presenter resource page on Adobe.com. You'll find online examples of interactive media and more details about working with Adobe Presenter and Adobe Connect.

Requirements

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

Flash Lite 3 player

• Download the developer edition of the Flash Lite 3 player

Adobe Presenter

• Buy
• Try

Testing eLearning content on devices

Mobile technology is quickly evolving as the number of device users continues to increase. More developers are targeting mobile handsets as the delivery method for distributing a wide variety of applications. And with the release of Adobe Presenter 7, it is easier than ever before to create interactive Flash multimedia for mobile training and self-paced eLearning courses. The challenge is to develop compelling content while staying on top of the newest technologies, device functionality and player support.

It's important to realize that devices come in two flavors: open and closed cell phones. Open devices allow you to create and load applications on the device. 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).

As a mobile developer, there's a big difference between open versus closed devices. The primary consideration is that the Flash Lite player must be installed on a device in order to play SWF files, including converted Adobe Presenter content. Adobe provides the developer edition of the Flash Lite 3 player on Adobe Labs so that you can install it on supported open devices to test your mobile content. However, at the time of writing, the only Flash Lite 3 player available is for Symbian (Nokia N95, N73, and others). It seems likely that there will be a Windows Mobile version available later this year, but if you want to get started today you'll need an open device to install Flash Lite 3. If you do not already have an open handset, buy a Nokia device with the Symbian OS. Flash Lite requires a decent amount of performance and memory, so I recommend buying a Nokia N95, N73 or an equivalent handset.

The Nokia N95 8GB handset has Flash Lite 3 integrated into its browser. However, it is not as easy as simply uploading the content to a server, then navigating to that URL to play it. I performed a series of tests to display Adobe Presenter content on an N95 device using the Flash Lite 3-enabled browser. I attempted a number of different scenarios including accessing the SWF 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. None of the scenarios loaded the content. There appears to be an issue playing Adobe Presenter content using HTTP. This is likely due, at least in part, to the security sandbox restrictions—because there currently isn't any way to set the security settings for the converted Adobe Presenter content.

I also encountered a strange display issue that affects the ability to play video content on the N95 8GB handset. When a slide with embedded video plays, the screen always rotates to landscape orientation. This is not an issue if you are already viewing the slide in landscape mode. I think this is a known issue, and hopefully Nokia will resolve the video display issue soon. For the short term I recommend loading your mobile content directly onto a Nokia N95 to test it. For the purpose of clarity, I'll use the terms device and Nokia N95 (the non-8GB model) interchangeably in this article.

Authoring mobile content using Adobe Presenter

It goes without saying that mobile developers need to use every available pixel for content displayed on small device screens. Additionally, some content will simply not work on some devices—based on the resolution of the device, memory and processor requirements, and input device requirements (lack of a mouse).

There is an unwritten rule that states you should not use more than five or six bullets on a slide when creating a PowerPoint presentation. When it comes to mobile devices and creating a presentation for a small screen, that rule should be revised to say that you shouldn't display more than three or four bullets. Using a larger font will go a long way to improving the readability of text. You can also augment your presentation to some degree by adding audio to the presentation with the Adobe Presenter plug-in.

It is helpful to evaluate the resolution of presentation on a computer versus the same content displayed on the device. In the figure below, the image on the left is a screenshot from a Nokia N95, with a 320 by 240 resolution, running the converted content. The image on the right is a screenshot of the original slide from a computer (see Figure 1).

Figure 1. Compare the original image from the N95 (left) with the computer (right)

As you can see, the fidelity of the conversion is very good. Both the image and text content are scaled and positioned correctly. The screenshots above also illustrates that it is a good idea to use a slightly larger font if you are planning on displaying the converted Adobe Presenter content on a device with a small screen.

The original kitten image added to the presentation is approximately 4004K. The size of the slide without the image is approximately 1KB. When I added the image and published the presentation, the combined file size of the slide and the image is 231KB. This is still fairly large for some devices. Optimizing your images before adding them to PowerPoint and converting them with Adobe Presenter will help you deliver the smallest file possible.

Now let's take a look at an example of some Adobe Presenter Content (see Figure 2).

Figure 2. A presentation that describes various aspects of audio recording

There are several problems that may or may not be obvious with the preceding screenshot. Can you guess what they are? First, the content requires a mouse to start, stop and pause the content as well as use the sidebar functionality (to navigate the tabs titled Thumbs, Notes, and Search). This is an issue because most cell phones do not have a mouse. Second, the sidebar is taking up too much screen real estate. Third, the images of the headphones and microphone are too big to display on small screens.

The good news is that Presenter 7 addresses most of these issues, either during the publishing process or at runtime. When you publish PowerPoint content using Presenter 7 you create two SWF files, used as viewers. These two files are named viewer.swf and viewer-lite.swf and they are created automatically in the publish folder. The viewer.swf is the file that is used to play the content on computers. 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 file solves some of the previously mentioned issues by removing the mouse requirement and not loading the sidebar.

Recording audio to use with your Presenter mobile content

Audio works just as you would expect it to in Adobe Presenter content. The Presenter plug-in for PowerPoint allows you to record and edit audio for each slide in the presentation. When you upload the viewer-lite.swf and the data folder to the device you can listen to the recorded audio for the corresponding slide.

Preparing and integrating video into your Presenter mobile content

Video is a favorite media type for learning content authors. Adobe Presenter allows you to import and set preferences for your video assets. As you import video, you have the option to place the video on the slide itself or in the sidebar. In order to display video in content converted by Adobe Presenter on a device, the video needs to be placed on the slide, not the sidebar. As mentioned previously, the sidebar will not load when the viewer-lite.swf file is uploaded to a device.

I tested video playback by importing a QuickTime video that was fairly small (200×160 pixels). I set its placement to the slide and set the data rate to 400kbps. After uploading the project to the N95, I found that the video played well with no visible dropped frames and with decent quality audio.

Working with themes and custom animations

Adobe Presenter includes the functionality to create and reuse themes, as well as the ability to retain custom animations created in the PowerPoint presentation. However, the viewer SWF that is used to play the converted content on a device (viewer-lite.swf) does not support themes, and they are not retained. The same project viewed on a computer uses the other viewer SWF (viewer.swf) and that viewer does support themes.

You can create custom animations in PowerPoint, which can then be used on devices. The animations you create are still displayed after the conversion process by Adobe Presenter. I tested several custom animations including Fade, Dissolve In, Fly In, Checkerboard and Spin. All of the animations worked as expected on the device.

Integrating imported Flash content

Adobe Presenter allows you to import Flash content and place it on a slide or the sidebar. As mentioned previously, you'll need to ensure the Flash content is located on the slide, not the sidebar, if you are planning to distribute your presentation on a device.

Most Flash content imported using the Adobe Presenter plug-in for PowerPoint is retained, but interactivity can be restricted on devices (depending on the limited input options available on a specific device). For example, the lack of a mouse means that device users will utilize the navigation keys on their device to advance the converted PowerPoint slides. As a result, you cannot use those keys to interact with the 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 device's navigation keys for Flash content. When a user presses a navigation key, they will move forward or back in the list of slides.

If it was possible to remap the keys, you could set the converted content to always use the same navigation keys to advance the slides. For example, when the presentation content is displayed in portrait mode, the right navigation button on the 4-way rocker is used to advance the slide content. When the user switches to landscape mode, they could use the down navigation button on the 4-way rocker to advances slide content. This approach would allow you to determine which keys are available, but it would limit the amount of interactivity that you can expect on a mobile device, because you'd still have to programmatically evaluate whether the slide content was currently being displayed in portrait or landscape mode. One solution would involve using screenResolutionX and screenResolutionY from the Capabilities class in the Flash file to find out if the content is being run in portrait or landscape, and then adjust the input keys accordingly.

Choosing fonts to improve legibility in mobile presentations

Fonts can also be a source of confusion when targeting a device. I recently discovered that device fonts, (fonts that rely on the host to have the type face) do not display in Flash content imported using Presenter. If you use a generic font, such as Arial or Times New Roman, the outlines are embedded with the content and the text displays as expected. If you are planning to display dynamic text, you'll need to embed the characters you intend to use (including the lowercase, uppercase, numerals, etc…).

Adding quizzes to your eLearning mobile content

Adobe Presenter allows you to create or import a quiz that will be published with the other content from the presentation. Unfortunately the quiz functionality from the Presenter plug-in for PowerPoint is not supported when using viewer-lite.swf as the viewer SWF on a mobile device. In future releases, it would be great to have a feature that enables quizzes without reporting. This would at least allow learners to test their knowledge of a subject. Of course, it would be optimal if the reporting functionality was supported as well, but this would be an excellent first step.

Uploading Presenter content to a mobile device

Another important item to consider: how to get the eLearning content onto the device. As previously mentioned, it is not currently possible to access Presenter content from a device using a browser (HTTP). For now, the content must be manually loaded onto the device. I am hoping that someone proves me wrong on this point, because it would greatly increase the distribution options if the Presenter content could be accessed via the Internet. Fortunately, it is a simple process to load Presenter content onto the device using Nokia's PC Suite.

Let's take a look at a screenshot of the Adobe Presenter publish directory. Notice that there are six files and one directory. When you upload your Presenter content to the device, you only need to move the viewer-lite.swf and the data directory to play the content. It is not necessary to upload the other files, because they will not be used on the device to play Presenter content (see Figure 3).

Figure 3. Only upload the viewer-lite.swf and the data folder to the device

Where to go from here

Mobile eLearning is a trend I've been discussing for some time. As more users own devices and as more devices become Flash Lite-enabled, I believe the demand for and the distribution of eLearning content on devices will continue to increase. The ability to play content from Adobe Presenter on a mobile device is a welcome functionality that will encourage more development in this area. With that said, there are a few features that I would like to see included 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 (such as adding full screen mode, etc.)
5. Ability to set security settings

I'm excited to see what the future holds for Adobe Presenter, as well as the upcoming advancements in handsets and their support for Flash Lite 3. I believe it is an emerging opportunity for both learners and Flash developers that wish to cater to mobile audiences.

Be sure to visit the Mobile and Devices Developer Center to learn more about the newest advancements in devices, download updates, and access tutorials and sample projects. If you enjoyed this article, check out the other articles I've written recently:

• Working with Flash Lite 3 and Flash Media Server video
• Authoring mobile video content for Flash Lite 2.x

About the author