1. Home
2. Developer Connection
3. Mobile and Devices Developer Center

Mobile and Devices Developer Center

 

Packing Lite: A mobile media interface design primer

David Carroll

Professor of Media Design
Parsons The New School for Design
mercurious.com
cdt.parsons.edu

Remember the buzz of "convergence" talk by enthusiasts and pundits—the idea that all of our media devices would dissolve into a single, ultimate, portable "killer app?" Perhaps it is already nostalgic to think fondly of the time we once imagined these essential portable electronic communicators as a mere futuristic possibility. Today, mobile computing and mobile media are intrinsic to our electronic lifestyles. Popular products from Apple, Motorola, Nokia, Samsung, Sony Ericsson and many others offer a dizzying array of mobile interactive media appliances, each touting its own unique flavor of digital lifestyle integration features and platforms. That said, we may wonder again about that one true device as products like Adobe Flash Lite and Apple iPhone rapidly gain market share. It's crucial that the tools to create content and experiences on many of these devices are being delivered to both designers and programmers, alike. Adobe gears up as the official outfitter of creative mobility equipment with the release of Creative Suite 3 (CS3).

In going mobile, designers from both the web and print industries will need to quickly adapt to the opposite of convergence. Ironically, divergence describes the state of the mobile media market, both here in the United States and abroad. In reality, there are more devices and platforms than ever before, and our experiences with them are diverging across a myriad of content and tools. Even web designers' concerns of browser compatibility or plug-in detection pale in comparison to the problems of divergence with mobile devices and the software they run. Designers accustomed to print may appreciate the virtual tactility of mobile media, but will scoff at sparse screen dimensions and the prospect of viewing mobile content in direct sunlight. Indeed, there are challenging hurdles to surmount when confronting the diversity of screen-sizes, device form factors, and capabilities of both software and hardware. But perhaps most importantly, when we're not sitting in front of a stationary computer, we've gone mobile, using with partial-attention as we interact with our environments and devices on-the-go. Fundamental conventions and habits that we've grown accustomed to when designing for desktop computers need to be re-evaluated. As a taste of what's to come and what we can't take for granted, consider that most mobile media is navigated without using an arrow pointer.

This article covers some of the survival skills needed in going mobile and packing lite, Flash Lite, that is. I'll describe how to get started, the unique considerations of designing for mobile devices, where to get more information, and what lies ahead. We'll take a look at both design and development problems you may encounter. Finally, we'll examine the mobile space as an interdisciplinary endeavor of left and right brain working together to solve the user experience problems of mobile media interfaces.

Requirements

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

 Adobe Flash CS3 Professional

• Try
• Buy

Sample files:

•  Adobe Flash Lite 2.0 Content Development Kit  (8 MB)

Prerequisites:

Combining the forces of Adobe and Nokia Series 60, designers of every type can easily approach mobile media. Here's what you'll need to get started:

Basics

Familiarity with Flash Professional 8 is suggested. This article will also cover working with Flash CS3 and Device Central.

Tools

Adobe software, such as Flash Professional 8 or Flash CS3 with Device Central, with the appropriate updater and device profile updates.

• Flash 8 Professional Mac OS X: Install the Flash Lite 2.0 Updater (17.5 MB)
• Flash 8 Professional Windows: Install the Flash Lite 2.1 Updater (21 MB)
• Flash 8 Professional users: Install the Device Profile Update (8.8 MB)
• Flash CS3 users: Install the Device Central Update (11.4 MB)

Documentation

Register and download the Flash Lite Content Development Kits (CDKs). In this article we'll focus on working with the version 2.0 kit, but you might as well grab the 1.1 kit while you're at it.

Devices

A test device is not required but it is strongly recommended. Those using CS3 Device Central will have more success in developing mobile content without a device, because of its improved emulation capabilities. To get the most out of this article, it is recommended to at least target a specific device for the testing purposes. To identify a target device, use Adobe Device Central CS3 or review Adobe's handset reference.

• This article will cover test development using a Nokia Series 60 2^nd Edition device, such as the 6682 and a Series 60 3^rd Edition device, such as the N80—which are both available in the United States on GSM operators.
• Certain Nokia handsets may not have Flash Lite 2.x pre-installed, and in some cases have Flash Lite 1.1 pre-installed. Use the Flash Lite 2.1 developer installers for Symbian Series 60 3^rd or 2^nd Edition as needed.

• This article is somewhat transferable to Flash Lite 2.1 development on Windows Mobile 5 Flash Lite. Visit the Mobile and Devices Developer Center to download the CDK and get more information.

  Device File Transfer Capability

  Bluetooth file transfer to Nokia phones with Mac OS X works well. Mac users without Bluetooth connectivity are not supported — consider obtaining a Bluetooth USB dongle. Windows users in the United States can check for possible Bluetooth support, or use Nokia's USB cable connector and PC Connection Suite software.

Required reading

Designing Engaging Mobile Experiences, Josh Ulm, Principal Designer, Experience Lead, Mobile and Devices, Adobe

Prerequisite knowledge

This article is written for media designers from video, print or web interested in learning how to create content for mobile devices. You might also be a programmer who has dabbled with Flash and wants to learn more about mobile development. Whether you're a Flash designer or developer, or an aspiring one, ready to tackle the new challenge of mobile media with Flash Lite, this article will help get you started. Advanced ActionScript capabilities are not required, so beginner and intermediate Flash users will be supported. Expert users may benefit from some of the tips and strategies discussed in this article.

Installing and configuring authoring tools and device connections

Before we get started, be sure to apply the necessary updates and set up your device transfer capabilities. Refer to the Requirements section above to locate the appropriate installers and updaters.

Using Flash Professional 8 on Windows

1. Install the Flash Lite 2.1 Updater to enable export of Flash Lite 2.x content. To check if it's already installed, open Flash. Create a new Flash document, then choose File > Publish Settings… Select the Flash tab, and see if Flash Lite 2.1 is available in the Player Version drop-down menu (see Figure 1).

   

   
   

   Figure 1. Check the Flash Version drop-down menu in the Publish Settings dialog box to see if your installation of Flash Professional 8 has been updated for Flash Lite 2.1

2. Install the latest device profiles with Adobe Extension Manager.
3. Install Nokia PC Suite. This allows you to transfer SWF files to your Nokia test device over USB or Bluetooth connectivity in some configurations.

Using Flash Professional 8 on Mac with Bluetooth

1. Install the Flash Lite 2.0 Updater to enable export of Flash Lite 2.0 content. Flash Lite 2.1 export is not supported on Flash Professional 8 on Mac.
2. Install the latest device profiles with Adobe Extension Manager.

In Mac OS X, select System Preferences > Bluetooth. In the Settings tab, make sure Bluetooth is enabled. Also make sure the option to "Show Bluetooth status in the menu bar" is checked. This setting makes it easy to send SWF files directly to your Nokia device (see Figure 2).

Figure 2. Make sure the Bluetooth status menu bar icon is enabled for easy access and connectivity with your mobile device

Close the Bluetooth settings dialog box and then use the Bluetooth icon menu in the menu bar to "Set up Bluetooth device…" (see Figure 3).

Figure 3. Use the Bluetooth Connection Wizard to configure the settings to connect with your Nokia phone

Follow the steps in the Bluetooth Connection Wizard to discover and configure it with your Nokia phone. Be sure that Bluetooth is enabled on your device, and that it is set to "Discoverable" mode.

Using Flash CS3

Device Central, included with the Creative Suite 3 software, consolidates mobile device settings across all Adobe design tools and handles device profile updates differently.

1. Open Device Central and click the option to Browse Devices on the welcome screen.
2. Check for Device Updates by selecting Devices > Check for updates… and install the Profile update if necessary. Your default browser will launch, and you'll be prompted to login using your Adobe account.
3. Window users should install the Nokia PC Suite. Mac users should setup the device with Mac OS X Bluetooth as described in the previous section.

Creating and transferring a test file

Learn to quickly target a specific mobile device by making the appropriate settings in Flash.

Using Flash Professional 8

We'll use one of the built-in Flash Lite 1.1 templates to get started quickly (see Figure 4).

1. Choose File > New…
2. Select the Templates tab

3. Choose Global Phones > Flash Lite 1-1 Symbian Series 60

   

   Figure 4. The useful Flash Lite 1.1 templates included in Flash Professional 8 are a quick way to get started with mobile development

4. Choose File > Publish Settings… and note how "Flash Lite 1.1" is selected automatically in the Version drop-down menu (see Figure 5). Click OK.

   

   Figure 5. Use the Flash Version drop-down menu in the Publish Settings dialog box to target the version of Flash Lite desired, based on device capabilities and project requirements

5. Choose File > Device Settings… and select the Nokia 6680 from the list on the right (see Figure 6). This test device is very similar to our Nokia 6682.

   

   Figure 6. Use the Device Settings dialog box to set your Flash Lite Content type, Test devices and check pixel dimensions and platform support

6. Pay attention to the Device Settings characteristics:

   Content type: Standalone Player

   There are many different types of Flash Lite content types available in this drop-down menu. The Standalone Flash Player, however, is by far the most compatible format with the broadest support on mobile devices.

   Current stage type: 176 x 208

   There are many different screen sizes of devices, but this size is common for many older Series 60 devices.

   Test Devices: Various Symbian Series 60 devices

7. Click OK, and then select File > Save and save the Flash source file (.fla) to your local hard drive.
8. Create an extremely simple animation on the stage. As an alternative, you can skip to the section "Analyzing a quick 4-way menu example" below and work on the step-by-step example from the Flash Lite 2 Content Development Kit (CDK). Otherwise, you can focus on the transfer process and save the Flash Lite discussion for later—when you're comfortable with the process of transferring files to actual devices.
9. Choose Control > Test Movie to view your Flash Lite SWF in the built-in Flash Professional 8 emulator.

10. Choose the Nokia 6680 (176 x 208 pixels) option from the Test Device drop-down menu (see Figure 7).

    

    Figure 7. The Test Device simulates the soft key and directional pad interactions of the device

11. Follow the steps below, depending on your platform, to transfer the SWF file—which is now located in the same directory where you saved your Flash source file (.fla) to your Series 60 Flash Lite device.

Using Flash CS3

1. Launch Device Central
2. At the welcome screen, click Create New Mobile > Flash File
3. Select Player Version > Flash Lite 2.0
4. Choose Nokia > 5300 from the Available Devices list

5. Click Create (in the lower right-hand corner), which will launch Flash CS3 with the appropriate settings pre-configured (see Figure 8).

   

   Figure 8. Device Central makes quick work of targeting devices based on versions, content type and pixel dimensions

6. Create a sample animation in Flash CS3. Select Control > Test Movie. Device Central will launch and simulate Flash Lite on the Nokia 5300.

Installing a Flash Lite SWF on a Nokia S60 device using a Mac with Bluetooth

Wirelessly send your Flash Lite content directly to the appropriate location on the device's file structure.

1. Choose Browse Device… from the Bluetooth icon menu bar (see Figure 9).

   

   Figure 9. Select Browse Device from the Bluetooth menu bar

2. Choose your Nokia S60 device from the list and click Browse.
3. Click Yes on the device when it asks you to accept the connection from your Mac.
4. If a C: and E: drive appear in the browser list, it means that your device supports direct Bluetooth file transfer. If not, then your device will accept SWF files as Bluetooth messages that appear in the messaging Inbox. If this is the case, skip to the next section "Sending SWFs as a Bluetooth message with a Mac."
5. Select the E: drive.
6. Choose the Others directory.
7. Click Send and locate your SWF file.

8. Your device may ask you to confirm receipt of the file. You can set your Mac as an authorized device to skip these confirmations in the future. From the Nokia S60 main menu, select Connect > Bluetooth, and then click right to select Paired Devices. Select your Mac by name in the device list, and then choose Options > Set as authorized. You'll see a small Bluetooth lock icon next to the device when it has been successfully authorized (see Figure 10).

   

   Figure 10. Bluetooth settings within Nokia S60 can be updated to streamline the transfer process by taking the pairing a step further towards full authorization.

Sending SWFs as a Bluetooth message with a Mac

If your device doesn't support a direct hard drive-style file browser, then you'll need to transfer files through the messaging Inbox as Bluetooth messages. This process isn't as elegant, but as long as you follow these steps, it is a viable method.

1. Follow the steps above to make a Bluetooth connection to your Nokia device. See step #8 in the section above to set your device as an authorized device. This will streamline sending files to your device, because you won't have to authorize each transfer on the device.
2. Choose Send File… instead of Browse Device… from the Mac's Bluetooth icon menu bar.
3. Navigate to the Flash Lite SWF test file you created on your Mac.
4. Select your device by name in the Bluetooth devices list.
5. You'll receive a new message alert on the device, so click Show on the Nokia.
6. The Flash Lite SWF will open. However, it has opened within the messaging Inbox and the file isn't stored on the memory card, yet. We'll use the save feature in Flash Lite to move the SWF to correct location, and open it from there.

7. On the device, choose Options > Save … (see Figure 11).

   

   Figure 11. The Options menu allows you save a Flash Lite SWF to another location on your device.

8. Select the option to Save to: > Memory card (see Figure 12).

   

   Figure 12. Saving Flash Lite SWF files to the Memory card is a best practice, as it maximizes memory use and keeps your files out of the Inbox

9. Click Save…, which stores the SWF in E:/Others/ on the device's memory card (see Figure 13).

   .

   Figure 13. The Flash Lite directory (E:/Others) can be organized as you collect and make other projects

10. After the movie is saved, click Back
11. Delete the Bluetooth SWF message out of the Inbox to keep the C: drive memory clear.
12. See the section "Viewing Flash Lite SWFs on your Nokia S60 device" to open the Flash Lite file from the device's memory card.

Installing a Flash Lite SWF on a Nokia S60 device using Windows with Nokia PC Suite

The Nokia PC Suite makes it easy to copy your Flash Lite files to your device's memory card.

1. Assuming Nokia PC Suite is installed, connect your Nokia phone via the included proprietary USB data connector cable. As an alternative, you may connect via Bluetooth if your configuration supports it. Drivers may auto-install, and then you will see the phone icon in your System Tray (see Figure 14).

   

   Figure 14. After connecting your device, the Nokia PC Suite launches and displays a phone icon in the System Tray

2. Open Nokia PC Suite and click File Manager.

3. Using the file tree browser, navigate to My Computer\Nokia Phone Browser\Nokia 6682\Memory Card (E:)\Others\ (see Figure 15).

   (Note that in the path above, "Nokia 6682" will be substituted with your Nokia phone's model number.)

   

   Figure 15. The Nokia PC Suite allows your phone's memory card to be accessed like a typical storage device in Windows

   Tip: Always store SWF files on the memory card (E: drive) of the device rather than the phone's internal memory (C: drive) to maximize the amount of free space in the device's memory. Think of the C: drive as RAM and the E: drive as the hard disk.

4. Copy your SWF files into the "Others" directory. The next section of this article will demonstrate how to view your transferred content within the Flash Lite Player on your device.

Viewing Flash Lite SWFs on your Nokia S60 device

Follow these best practices and tips to view your Flash Lite content in its true mobile context.

1. Open Flash Lite on your Nokia S60 device. It's often located in the My Own or Media folders on the device's main menu (see Figure 16).

   .

   Figure 16. Flash Lite is a Symbian Series 60 application, but it must opened first to locate SWF files on the device

   Tip: The Flash Lite 2.1 animation may appear. This animation does not appear on pre-installed consumer devices—only on developer versions of Flash Lite 2.1 acquired by downloading the Flash Lite Player from Adobe.com. You can skip the animation by clicking the right soft key.

2. Click the directional pad on the device once to the right to view files on the memory card (E: drive), where the contents of the "Others" directory will be displayed. Notice the tab icon on the top toggles as you click left and right. This toggle switches between the internal memory and memory card. Select your test file SWF to open in Flash Lite (see Figure 17).

   

   Figure 17. Click to the right to find the Flash Lite directory (E:/Others) on the memory card

   Tip: Consider customizing your phone's standby screen to make a shortcut to Flash Lite (Main Menu > Settings > Phone > Standby Mode), where you can set Flash as either a left or right soft key shortcut, and/or an active standby application to display the Flash Lite icon on the standby screen.

Adjusting your mindset

Let's take a moment to discuss what's different about creating mobile user interfaces.

Designing an interface for a mobile device requires significant rethinking about navigation mechanics. Since devices do not include a mouse or track-pad input device, there usually isn't an arrow pointer. Instead, mobile devices rely on a selector, moved by pressing a directional pad, or offer a touch-screen interface. The interface of a device more closely resembles a DVD menu or an ATM machine. In either case, the region of the interface that triggers an action must be larger and indicate its response differently. Rollovers are used extensively on desktop interfaces to indicate to the user that the cursor has touched a particular element. In selector-based interfaces, the rollover serves a slightly different, but important purpose; it indicates that the current element is selected. Clicking only occurs on a selected element, so the behavior to perform an action requires multiple steps that could potentially involve multiple clicks:

1. Tap the direction pad to highlight the desired interface element.
2. Then, press the select button to trigger the selected action.

On the desktop, we're accustomed to the immediacy of point-and-click. However, our actions are still mediated by the location of the cursor. On touch-screen interfaces, we enjoy tremendous immediacy and can manipulate the interfaces directly.

These subtleties will conspire to prevent you from simply resizing your desktop projects into a mobile screen dimension. Instead, you'll also need to consider how your menus, for example, will adapt to the selector or touch-based interactions. Luckily, Flash button symbols are well equipped to adapt their use across platforms. The Over state of a Flash button symbol acts as the selector in Flash Lite. In the following example, we'll look carefully at how the button states, their positioning, and their pre-selected states affect the user experience on a mobile device.

There are many more crucial aspects to mobile media design. Josh Ulm's excellent whitepaper on the subject articulates other important considerations, such as adapting information design and interfaces together to maximize information density and functionality within the minimum screen dimensions. Pay special attention to how he illustrates the use of a carousel-like menu, which effectively focuses the users' attention by animating the size of the selected element, and uses motion to suggest the act of selection. This technique is ideal for directional-pad devices, but the same approach may not translate well to touch or pointer-based devices (see Figure 18).

• View Larger (+)

Figure 18. As Josh Ulm correctly points out, "When everything is equal, nothing is important. Use techniques like animation and expanding-focus to draw emphasis to the item of attention." This epitomizes how a pointer-less interface on a tiny screen requires serious design reconsideration.

Let's take a look at how to make a very simple main menu interface that adapts well across many types of user input scenarios. We'll take an example from the Flash Lite Content Development Kit (CDK) and develop it further to illustrate these interface concerns. By testing the interface in both the integrated virtual device emulators and actual physical devices, you will begin to develop an intrinsic sensitivity to mobile media design.

Analyzing a quick 4-way menu example

We'll start with a quick menu example from the Flash Lite Content Development Kit (CDK) to emphasize the selector interface, and develop it into something more complete—sampling some FSCommand2 and other useful ActionScript along the way. We'll also describe a testing procedure that is helpful for troubleshooting your mobile content.

1. Open "Flash Lite 2.0 CDK/samples/Flash Lite 2.0/4-way.fla" in Flash 8 Professional or Flash CS3 (see Figure 19).

   

   • View Larger (+)

   Figure 19. Locate the example file inside the Flash Lite 2.0 Content Development Kit (CDK) samples directory

2. You'll see a very simple design on the Stage with orange button symbols arranged in a 3x3 grid. Double-click one of the orange squares to view the symbol definition of the button. Notice that the Up, Over, and Down states change the button symbols to bright colors, respectively (see Figure 20).

   

   Figure 20. Examine the contrasting colors of the button's Over state, by double-clicking the button symbol to view the button in symbol-editing mode

3. Choose File > Publish Settings… and notice that the Version is set to Flash Lite 2.0. Click OK to close this panel.

4. If you're using Flash CS3, just choose Control > Test Movie to launch Device Central CS3, and choose Nokia > Nokia 5300 from the Available Devices list (see Figure 21).

   

   • View Larger (+)

   Figure 21. In Device Central, you'll enjoy a fully-featured device testing environment—a major upgrade from the Flash Lite emulation available in Flash Professional 8

   If you're using Flash Professional 8, choose File > Device Settings… and notice that a Generic Phone is selected with the Content Type selected as Standalone Flash Player. If you'd like, you may add more Flash Lite 2.0 compatible devices the Test Devices list, such as the Nokia 6682. You'll find these in Symbian > Series 60 > Nokia > 6682. Click Add >> to move the selected device to the Test Devices list. This is a satisfying choice because you'll get to see an actual device in the emulator. Go ahead and select the option to Remove the Generic Phone from the Test Devices list, so you are using the Nokia 6682 test device. Click OK to return to the Stage, and then choose Control > Test Movie to emulate Flash Lite (see Figure 22).

   .

   Figure 22. In Flash Professional 8, the Device Settings dialog box allows you to choose the desired test devices, based on their version and Stage size

5. Experiment with clicking the directional pad buttons and notice how the Over and Down state of the buttons employ the selection interface. Also, notice how the 4-way directional pad interacts with the arrangement of the buttons. Indeed, Flash Lite automatically handles the selection based on position in 4-way enabled devices. Notice the thick yellow border that appears around the selected button (see Figure 23). Close the emulator window or Device Central and return to the Stage when you're finished exploring the interface.

       

   Figure 23. Use Device Central or the emulator to interact with the interface and see how Flash Lite indicates selection as you navigate around the button menu

6. The yellow rectangle around the buttons that appears when you first click the direction pad is called the _focusrect and it can be disabled. Let's create a new layer in the movie called "Actions" to consolidate our scripts in one place. Select the Frame 1 of the movie Timeline and open the Actions window (see Figure 24). Add this single line of code:

   _focusrect = false;

   

   • View Larger (+)

   Figure 24. By adding the line of code to the first frame of the movie's Timeline, you can hide the focus rectangle

7. Choose Control > Test Movie again and notice that the focus rectangle no longer appears (see Figure 25). However, the Over states of the buttons serve as visual indicators of the selected state. This demonstrates the importance of making these graphics visually "pop" on the device display—especially since we've hidden the focus rectangle by setting the _focusrect property to false. The focus rectangle may be useful for practical purposes, development and debugging, but it is not pretty.

   

   • View Larger (+)

   Figure 25. Use the directional buttons on the virtual Nokia 5300 in Device Central to test the 4-way navigation with the focus rectangle hidden

8. Next, let's solve the problem of pre-selection. As you test the navigation, notice that you have to click the direction pad in order to even begin selecting buttons. On mobile devices, it's better to always make sure your user has a clear indication of the selection method, and it's a best practice to pre-select a default menu item. This streamlines the interface by reducing the number of clicks while orienting the user at the same time.
9. Back in Flash, select the button symbol in the upper-right corner of the grid arrangement. Enter the following instance name in the Property inspector:
   button1

10. Repeat this step and assign an instance name to each of the nine buttons, until they are all named. The naming convention you use should be "button1" through "button9" (see Figure 26).

    

    Figure 26. Assign an instance name to each of the nine buttons by entering the name in the Property inspector

11. Select the Frame 1 of the movie on the "Actions" layer and open the Actions panel. Add this script underneath the existing line of code:

    Selection.setFocus(button1);

    The line of code above uses the setFocus() method of the Selection object to pre-select the first button on the Stage (see Figure 27).

    

    • View Larger (+)

    Figure 27. Adding the script to pre-select the button in the upper left corner when the Flash Lite movie loads will streamline the user experience

12. Test the movie and notice how the button in the upper left corner of the grid is pre-selected. Experiment with pre-selecting other buttons by changing the instance name reference in the setFocus(instanceName)argument in the Actions panel.
13. If you have an actual test device, it is a good time to transfer the example SWF via Bluetooth or the Nokia PC Suite to your phone to experience the selection process for "real." Follow the instructions outlined in the previous sections of this article to place the Flash Lite test file SWF in the appropriate location on the actual device. Access the SWF on your phone and you'll see that adding the pre-selection makes a big difference in orienting the use of the 4-way grid menu.

14. If you've tested this example on an actual device, you probably noticed that the Flash Lite SWF doesn't appear in full-screen mode. Here's an example of something that the virtual emulation tools in Flash Professional 8 and Device Central do not simulate (see Figures 28 and 29).

    

    Figure 28. Notice how Flash Lite movies load when the full screen fscommand2 is not included in Nokia Series 60.

    

    Figure 29. A full screen Flash Lite movie takes up the entire screen, omitting both the soft key labels and header bar that includes the signal meter and the application's name

    To obtain every bit of available screen real estate, you'll want to exploit the ability to display content in full screen mode in Flash Lite. Add this line of code to Frame 1 of the Actions layer:

    fscommand2("fullscreen", true);

    These fscommand2 actions are unique to Flash Lite, and offer access to specific mobile device features, including screen scaling, vibrate, and accessing information about the phone's battery and signal strength, just to name a few.

    Tip: When you make your Flash Lite project display full screen, you may want to consider making a battery meter and signal bar element to keep the user informed about the status of their device. It's important to remind your user about battery life and network signal strength, especially if your project connects to a remote server. You can find a complete list of fscommand2 actions inside the CDK in the "flashlite2_aslr.pdf" document, as well as in the Flash Help included in Flash and the online Flash Lite 2.x ActionScript Language Reference.

You've probably noticed that these buttons don't trigger any action or event at this point. Of course, the next logical step would be to add frames and labeled key frames to the Timeline, adding new sections of the movie to send the playhead via ActionScript as each button is selected. Rather than detail that process here, go ahead and experiment with this on your own (see Figure 30). Once you've added some sample content on the Timeline, the ActionScript you'll need to add on Frame 1 will look something like this:

button1.onRelease = function() {
     _parent.gotoAndPlay("section1");
};

• View Larger (+)

Figure 30. By adding frame labels and button onRelease event scripts, you can start to build a mobile interface

Once you've set up different content for each of the buttons and tested the movie, you'll quickly realize that you need to add a button to return to the main menu. Take a look at the "softkeys_sample.fla" in the same CDK 2.0 samples folder where you found the "4-way.fla" file. This example demonstrates how to design interfaces for the programmable soft keys on the device, which is an appropriate place to locate a "return to main menu" interaction.

Naturally, you'll want to update the visual design of this menu example and employ some actual content. Now that you have a better understanding for the basics of Flash Lite interfaces, launch yourself into an interesting mobile media project.

Where to go from here

Although you've begun making Flash Lite interfaces and hopefully have some experience now with transferring SWFs and interacting with them on an actual device, you've only scratched the surface. The CDKs offer more samples and documentation to learn about the differences between Flash Lite 1.1 and 2.x, and as you study, you're likely to be inspired about the exciting design possibilities.

If you're looking for a great book on the subject, look no further than Foundation Flash Applications for Mobile Devices, by Richard Leggett, Scott Janousek and Weyert de Boer, published by Friends of ED. The book's website offers more sample files that accompany the chapters to expand upon the documentation and sample projects available in the Flash Lite CDKs. We use this book as the main textbook for our courses in mobile media at Parsons.

If you're looking for more advanced functionality that goes beyond Flash Lite's native capabilities, check out the article Extending Flash Lite 2.1 features with Flyer, which integrates Flash Lite 2.1 with Python on Series 60 to give you access to things like Bluetooth file transfer, sound and camera and more. The possibilities are endless.

If your goal is to make mobile games or information tools with Flash Lite, there are numerous articles and tutorials available in the Flash Lite section of the Mobile and Devices Developer Center.

If you're looking to make a Symbian Series 60 installer to automate the process of incorporating a Flash Lite project into the phone's interface, check out this article in the Mobile and Devices Developer Center: Creating SIS files for distribution.

About the author