Using a simple and useful template for creating Flash Lite wallpaper

The release of Flash Lite 3.0 will make a huge impact in the user experience of mobile and consumer electronic devices because the included features present developers with new opportunities to build and design compelling content for mobile applications.

To many users, mobile phones are as much of a statement of individuality as a functional device. One of the many ways in which people customize their mobile phones is to choose wallpaper, (a graphic piece of content that is formatted to fill the background of the display area). The concept behind personalization is that users enjoy customizing their devices with their favorite content—they choose settings based on their preferences to define a unique experience that matches their personality. Downloadable options available to the user include audio content, such as ringtones and visual content, such as screensavers, wallpapers, interactive applications, mobile games, learning aids, and much more. By creating more options for mobile devices, developers can further enhance the users ability to relate to their phone as an extension of themselves—making a portable electronic device even more personal.

In this article, we'll examine how you can use this template, which provides you an additional visual view in Adobe device central to see how your wallpaper or Flash Lite content looks in actual Flash Lite-enabled phones.

Requirements

In order to follow along with this article, you'll need the following software and files:

Flash CS3 Professional

• Try
• Buy

Adobe Device Central CS3

Adobe Device Central is available as a component of each edition of Adobe Creative Suite 3, including: Adobe Creative Suite 3 Web Premium, Web Standard, Design Premium, Design Standard, Production Premium, and Master Collection. Adobe Device Central is also available as a component of these standalone products: Adobe Flash CS3 Professional, Adobe Photoshop CS3, Adobe Photoshop CS3 Extended, Adobe Illustrator CS3, Adobe Dreamweaver CS3, Adobe Premiere Pro CS3, and Adobe After Effects CS3.

Sample files:

• flashlite_wallpaper_templates.zip (ZIP, 532K)

Prerequisite knowledge

Some prior experience working with Flash is recommended, but this article is useful for anyone interested in learning more about considerations when developing content for Flash Lite.

When creating graphic content, (such as wallpaper) for a mobile device there are many aspects to consider during the pre-planning phase of the project. It is especially important to take a close look at the existing user interface of the device when designing a background image. As you choose a design direction and begin creating mockups, notice if any part of your wallpaper graphic overlaps the device's UI. Usability is always a primary goal. Also review the wallpaper's overall design. Is the background pattern so complex that it is distracting? Imagine how the wallpaper will display on the actual device. As you develop your design, think of all the possible ways the phone will be used, and balance the best practices of interaction design with your personal aesthetics.

In this article we'll cover the process of how you can use this template while creating wallpaper for a Nokia Series 40 (Nokia 6131) mobile phone, which is a very popular target device. There are many versions of the S40 phone series that support Flash Lite content in various ways. Nokia Series 40 phones include functionality for installing content like screensavers, wallpapers, and web browsers as well as offering support for SubLCD—a way to increase the apparent resolution of a device's liquid crystal display (LCD). Today's Nokia handheld devices are commonly distributed with Flash Lite 1.1 or Flash Lite 2.0 preinstalled.

Before we begin, it is also important to take a quick look at a mobile developer's best friend, Adobe Device Central CS3. As mentioned in the requirements section, Device Central CS3 is included with Adobe Creative Suite 3 products. If you haven't previously worked with Device Central CS3, there are some great video tutorials available online to get you up to speed. In a nutshell, Device Central CS3 includes an emulator with a library of device profiles designed to help you author, preview and test your Flash Lite projects, without having to load each iteration directly onto the device. If you are developing content for Flash Lite 3.0, you'll want to download the free Flash Lite 3.0 Update for Device Central CS3 and the Flash Lite 3.0 Update for Flash CS3 Professional.

Let's get started. If you download the sample files linked at the beginning of this article and open them in Flash CS3 Professional, you'll see that there are two FLA files named S40_main.fla and S40_subLCD.fla. These templates are useful when designing a background design because they allow you to see your design with an overlay of the Nokia user interface, as we'll see in the next section.

To illustrate how Device Central CS3 can be used to test and preview your project, I created a sample wallpaper design using the provided S40_main.fla template, previewed the SWF and took a screenshot of the Emulator tab (see Figure 1).

Figure 1. The Emulator in Adobe Device Central CS3 displays a wallpaper design as it will appear on a Nokia Series 40 phone.

To get a better understanding of the purposes of using a UI template during the design process, I created a different wallpaper design without the template. Again, I previewed the SWF and took a screenshot of the Emulator tab in Device Central CS3 (see Figure 2).

Figure 2. The emulator in Adobe Device Central CS3 displays a wallpaper design for the Nokia Series 40 phone without the user interface template.

Now compare the screenshots above of Device Central CS3 with photographs taken of the actual Nokia Series 40 phone with the wallpaper loaded (see Figure 3).

Figure 3. A wallpaper design displayed on the Nokia Series 40 phone without active standby.

As with any project, it is a best practice to test early and often. When developing content for mobile devices, it is especially important to preview your designs as they will appear to the user in every possible situation. With that in mind, I took another photograph of the wallpaper design on an actual Nokia Series 40 phone, this time with active standby enabled (see Figure 4).

Figure 4. The wallpaper design displayed on the Nokia Series 40 phone with active standby.

As you can see from the images above, wallpaper designs can look cluttered depending if active standby is on. Testing various designs using a variety of scenarios will allow you to develop the best background graphic based on your project goals. Usability is paramount, and therefore it is critical that your design does not reduce the legibility of the existing user interface elements.

Now that we've familiarized ourselves with the sample file templates and seen some examples of wallpaper designs emulated in Device Central CS3 and loaded on a real phone, it is time to roll up our sleeves and make a new wallpaper project.

First, open the sample file s40_main.fla in Flash CS3 Professional, if it is not already open. In order to preserve the template, choose File > Save As and give the new version a different name, such as wallpaper1.fla. Once the new file is saved, investigate the FLA file by turning off the visibility of all the layers, and then turn on visibility for just one a layer at a time, to see the content placed on each layer.

Layer 2 of the Timeline contains the horizontal Active Standby icons.

Layer 3 of the Timeline contains the basic UI elements of the Nokia phone, including the network icon, battery level, Bluetooth, alarm indicator and a display of the current time.

If you turn off visibility for Layers 2 and 3, you'll see that Layer 4 of the Timeline contains only a gradient background. This is the layer you can use to add your own graphic designs, because any content added here will display beneath Layer 2 and 3. At this phase, designing the wallpaper with Active Standby on or off is as easy as turning the visibility of Layer 2 on and off. This is the first level of testing to ensure that the wallpaper design will look good in either scenario.

Once you are pleased with your wallpaper design, select File > Publish. The published SWF file of your project is saved in the same folder alongside the FLA file. The SWF file is the published project we'll use to preview in Device Central CS3 using the Emulator tab, as well as the file we'll ultimately upload and test on the target device.

Launch Device Central CS3 and preview your SWF in the Emulator tab. The user interface elements of the Nokia Series 40 phone are displayed since they are present in the template file, and you can review your design. As you can see, having the UI elements of the device visible at this stage of testing can save time in your development workflow. If overlap occurs, it is a simple matter to return to Flash CS3 Professional and make the necessary adjustments. The extra step of loading the SWF file to the target device does not take place until you've already ensured that the wallpaper displays acceptably in the emulator with Active Standby on and off. It is important to test your design as it will appear with the UI elements of both Layer 2 and Layer 3 overlaid (see Figure 5), and then also preview the display with an overlay of just Layer 3 (see Figure 6), until you are satisfied with the wallpaper.

Figure 5. The wallpaper design displayed on the Nokia Series 40 phone emulator with both the normal user interface and active standby icons overlaid.

Figure 6. The wallpaper design displayed on the Nokia Series 40 phone emulator with the normal user interface overlay. This simulates the display when Active Standby is not turned on.

Once you've tested the SWF file in all scenarios and are pleased with the display in the Emulator tab of Device Central CS3, you are ready to publish the file to test it on the actual phone. First, right-click on Layer 2 and Layer 3 and set these layers as guides, so that they will not be published. Then, select File > Publish to generate the new SWF file. Since Layer 2 and 3 are set as guides, only the content placed in Layer 4 will be visible. Upload the SWF file to your target device (mobile phone) and set the wallpaper to see the design on the actual device display.

Creating content for SubLCD

The process for creating content for SubLCD is very similar to the process shown above for creating wallpaper, except the screen dimensions are smaller and you may encounter some limitations based on device accessibilities, depending on the model of phone being targeted.

To illustrate the differences between normal wallpaper display and SubLCD, I have provided some visual examples. The first screenshot displays the S40_subLCD.swf sample file template as viewed in the standalone Flash Player (see Figure 7).

Figure 7. The template file S40_subLCD from the sample files as viewed when published and displayed in the standalone Flash Player.

Next, I uploaded the published template's SWF file to the device. I took a photograph of the phone's display area, showing the S40_subLCD.swf sample file as it appears on the actual mobile phone (see Figure 8).

Figure 8. The template file S40_subLCD from the sample files as viewed when published, uploaded to the mobile phone and displayed on the mobile device.

The steps for developing wallpaper for SubLCD are identical to those provided in the previous section of this article. Simply open the S40_subLCD.fla file in Flash Professional CS3 and add your graphic content to Layer 3 in the Timeline, using Layer 2 as a guide. Once you are satisfied with the design as it appears in Flash, publish your SWF and use the Emulator tab in Device Central CS3 to preview the design. After you've tested the design thoroughly in Device Central CS3, upload the SWF file to your mobile phone and test it again on the actual device's display.

Where to go from here

As you create new wallpaper designs, try customizing the templates in the sample files to suit your project needs. The main goal of the templates is to provide a visual guide that replicates the device's user interface so that you can create content that is graphically pleasing while ensuring the features of the phone are easily accessed.

As mentioned previously, there are many helpful online resources available to help you get up to speed with mobile development.

For example, be sure to check out Scott Janousek's excellent two-part article series titled Working with Nokia Series 40 Flash Lite content. In part two, Scott provides more information about creating wallpaper for Flash Lite-enabled devices.

And if you haven't already, be sure to join the Adobe Mobile Developer Program to get the latest information, opportunities to participate in beta software releases, access to exclusive tutorials and sample files, and much more.