back

Tutorial: Creating Flash Lite content
for mobile and devices

by John Ulliman and Tommi West

Mobile content is poised to be the next big thing for Flash developers. Working in the device market means building content that will be displayed on phones, PDAs, or any type of device with a screen. In the United States, there are currently about six times as many phone customers as personal computer users — and the number of device users is growing every day. If you're a Flash developer, it's time to start thinking about the opportunities in creating mobile Flash applications for devices.

The Flash Lite player is the way to deliver mobile content to that audience, and we need to be ready for the explosion that will occur when the North American market catches up to the Japanese mobile device market (see Figure 1).

Flash Lite devices currently available in Japan

Figure 1. Flash Lite devices currently available in Japan.

The Flash Lite player offers the same advantage we have grown accustomed to with Flash Player: a common development environment. The ability to develop for multiple device types within a single development environment makes it easy to test and deliver content for a wide variety of devices from the same content source. And the wider range of devices you develop for, the more revenue you can generate.

In this article, we show you how easy it is to start creating Flash Lite content for mobile devices. We also take you through the steps to begin developing an application in the Adobe Flash CS3 Professional authoring environment, using a sample photo viewer project (see Figure 2). To follow along, download the sample files (ZIP, 536K).

 

Get Adobe Flash Player

 

The history of Flash Lite

In any development project, the preplanning stage is critical to ensure success. It's important to understand the different levels of functionality available because the first step involves determining your target audience and target devices. So before we get started, here's a quick overview of the various flavors of Flash Lite and their capabilities:

Flash Lite 1.0 and Flash Lite 1.x were early versions of a mobile player based on Flash Player 4 and included only the basics — no external data, no complex data types, and no user defined functions. The release of Flash Lite attracted a lot of attention among the phone suppliers, and it is thriving today in Japan.

Flash Lite 2.0 was based on Flash Player 7. This version includes more support for the ActionScript 2.0 language structure. It enables you to work with classes, and it understands programming language conventions that weren't available in Flash Player 4. It covers almost everything that Flash Player 7 can do as well as a few special mobile device features that Flash Player 7 does not offer.

Flash Lite 3.0 is the most recent mobile player for Flash content. It supports streaming video and includes many other Flash Player 8 features, such as the ability to access external data. It also comes with significant performance improvements.

Working with the sample web application

After downloading and uncompressing the sample files folder, open the file named photoViewer_web.fla in Flash CS3. Test the movie to see the photo viewer in action. This simple web application will serve as the foundation for our project. It has two buttons, Next and Previous, that control a movie clip animation that displays a series of photos.

As you review the Flash file, notice the simple alpha transparency effects and fly-in motion tweens that add to the application's aesthetic look and feel. The slideshow movie clip contains the frame labels and stop function commands. Open the Actions panel and review the code. Frame 1 of the AS Main layer includes some typical ActionScript 2.0 functions that hook up the project's Next and Previous buttons to the slideshow's timeline.

Creating a Flash project for mobile devices

Begin with a new Flash document. Choose File > New > Flash File (Mobile), and click OK.

Adobe Device Central appears, allowing you to choose the desired version of the Flash Lite player, ActionScript model, and content type. After you make your selections, Device Central provides you with a list of devices that fit the profile.

You can either pick a feature set and see which phones support those features or pick a handset and find out what you need to use in order to develop for a specific device or set of devices.

For the purposes of this article, use the following settings (see Figure 3):

Selecting the player version, ActionScript model, content type, and handset in Device Central

Figure 2. Selecting the player version, ActionScript model, content type, and handset in Device Central.

Once you have chosen your settings, click Create. You are presented with a new Flash document derived from a custom template that precisely matches the type of phone selected. This is especially handy when you consider that the entire Device Central database is updatable. You can download new device profiles from Adobe.com to ensure that your installation of Device Central contains the information you need about the newest devices as soon as they are released.

As you peruse the new document in the Flash authoring environment, take a look at the Publish settings. This file is set to use Flash Lite 2.0 and ActionScript 2.0. Additionally, the Stage size is set to 240x320 pixels to match the device's screen size.

Now you can begin developing just as you would with any Flash application. Try adding some content to the Stage and experiment with typing some text. Get creative and repurpose some of your previous Flash assets to experiment with how they display on the smaller screen area.

If you want to re-create the photo viewer project:

  1. Set the Stage color to black.
  2. Create three layers: Buttons, Photos, and AS main.
  3. Use the drop-down menu in the Library to select the photoViewer_web.fla file's library.
  4. On the Buttons layer, drag the Next button and Prev button symbols and arrange them on the smaller Stage of your new project file.
  5. On the Photos layer, drag the slideshow movie clip and resize it to fit in the center of the Stage.
  6. While the slideshow movie clip is selected, assign it the instance name mPhotos (see Figure 4).
Re-creating the photo viewer project

Figure 3. Re-creating the photo viewer project.

Updating the mobile device content

The project file you've just created requires some code to make the soft keys of the device interact with the photo viewer application. To facilitate this process, open the photoViewer_mobile.fla file from the sample files folder. Frame 1 of AS Main in the mobile version of the project contains all the code you need to make the device's soft keys work as the Next and Previous buttons to control the slideshow movie clip. Flip between projects to copy the code from the completed mobile file and paste it into the Actions panel of your new Flash file.

As you review the photoViewer_mobile.fla file, you'll notice the publish settings are already configured to match the Nokia 5300 phone. Choose File > Publish Settings to see that this mobile project targets Flash Lite 2.0 and ActionScript 2.0, and uses a smaller Stage size.

Mobile applications differ from web applications because the user doesn't have a mouse — a phone uses a key input interface instead. To enable users to navigate through the photos, the ActionScript in the mobile version of the sample project has been modified to use the soft buttons on the phone.

Compare the completed web and mobile versions of the sample file project in Adobe Flash CS3 to review the differences in the code. To make the interface work on the mobile device, the photoViewer_mobile.fla file has been updated to use the fscommand2 function to hook up the soft keys to the application's Next and Previous buttons. Working with the fscommand2 function is very important when creating the interface for mobile applications. See the ActionScript Language Reference to learn more.

If you continue reviewing the two sets of code, you'll notice a listener object was added to the mobile version that calls an onKeyDown function when the user presses a soft key on the device. This replaces the code in the web version that uses the onRelease event tied directly to the Next and Previous buttons.

The code within the functions remains the same in both the web and mobile versions. It simply increments or decrements the value of the variable numPhotos as the Next and Previous buttons are pressed.

Using ActionScript, you can rewrite a web project's interface controls to use common phone inputs — such as the soft keys, the four-way switch, and the number pad of a handset. You can also target special keys available on a particular device.

Now let's take this mobile project for a test drive. Choose Control > Test Movie (see Figure 5).

 

The photo viewer application displayed in the Nokia 5300 handset emulator

Figure 4. The photo viewer application displayed in the Nokia 5300 handset emulator.

Device Central appears, displaying the SWF file using an emulated version of the selected device. The emulator enables you to check how the graphics look in context with the phone itself, as well as to test interaction using the phone's soft keys.

Use your mouse to click the onscreen buttons in Device Central to interact with the phone interface. You can test the photo viewer application using a variety of different phones to see how the design works on different devices. You can also update the device list with the newest phones by installing new profiles. Device Central gives you the ability to research specific phone features and provides a testing environment for your mobile projects.

Don't be daunted by the wide range of handsets available. Get started with mobile development and try porting one of your existing Flash web projects to a device. It's the wave of the future, and Device Central makes it easy to design and test your mobile Flash applications.

— Visit the Mobile and Devices Developer Center
— See what's new in Adobe Device Central CS4

 

‹ Back


John Ulliman founded On The Wave in 1991. His studio produces digital media, and he provides both live and DVD training. Ulliman is an Adobe Certified Expert and Instructor for Flash, Fireworks, Dreamweaver, Director, and mobile development.

Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.