Getting started with the wallpaper

In this first walkthrough of this series, you're going to create a Flash Lite wallpaper for the Series 40 platform. The wallpaper that will be created is an animated aquarium or fish tank (see Figure 1). It's a very simple screensaver that will make you familiar with the process of designing, developing, and deploying Flash Lite wallpaper for Nokia Series 40 devices supporting this Flash Lite content type.

Figure 1. Fish tank wallpaper

Most of the wallpaper will be generated through timeline animation. However, you will also be using a bit of ActionScript as well. I'll cover that soon enough; but first I'd like to introduce the target Series 40 device we'll be using.

The target device: Nokia 6125

Now that you have an idea of what you're creating, it's time to pick the target device(s). You'll be using the Nokia 6125, a Series 40 3rd Edition handset that supports wallpaper on both its primary as well as secondary screen (see Figure 2).

If you don't have the 6125, you are not out of luck, however. You may freely substitute another compatible Series 40 3rd Edition Nokia device in its place. Alternatively, you could use the emulator contained in the Nokia Series 40 SDK 3rd Edition for testing purposes. The only requirement for the testing environment is that it must support the Flash Lite 1.1 wallpaper content type.

Note: If you do decide to use a different device, just be aware that you may need to make the necessary modifications to the wallpaper screen size to match those of the target device chosen. (For example, the Nokia 6136 supports 240 x 320 for its primary screen.) This may vary from device to device, so consult your device documentation to verify this information.

Consult the Nokia Series 40 Handsets page in the Mobile and Devices Developer Center for the latest and most up-to-date information on Series 40 devices that support the Flash Lite wallpaper content type.

In our case, the Nokia 6125 has the dimensions of 128 x 160 for its primary screen, and 96 x 65 for its secondary display, or Mini Display (see Figure 2) as it is sometimes referred to.

Figure 2. Nokia 6125 Flip Phone (Series 40 3rd Edition device) in its closed state: sub-LCD is running Flash Lite content

Note: Incidentally, the Nokia 6125 is also a decent Series 40 handset for testing because the screen does not have the same pixel density as some other Nokia Series 40 phones. In fact, its screen is of a somewhat lower quality than other Series 40 devices such as the 6131 or 6233. Due to this factor, and others, this device provides a good baseline for Series 40 development. If it'll work and look nice on this device, it should also work well on other Series 40 devices with some minor tweaks (changing the screen size, possibly adjusting the frames per second, and so on). Nevertheless, always remember to also test on actual physical target devices!

Setting up the Flash environment for the target device

Now that you know what you're creating and have picked the target device, let's get started creating the Flash Lite wallpaper:

1. Open Flash Professional 8.

2. Begin creating your content by selecting the Global Phones folder under the Create From Template category (see Figure 3). All Nokia Series 40 3rd Edition handsets fall under this selection because you are dealing with GSM-enabled handsets.

   

   Figure 3. Selecting Create from Template (Global Phones) on the Start page in Flash

3. Select the Flash Lite 1.1 – Symbian Series profile from the Templates list (see Figure 4) in the New from Template dialog box.
4. Click OK.

Note: Even though Series 40 Devices are not Symbian–based (the operating system is based on Java), you needn't be concerned about this reference regarding Symbian. The FLA template merely contains the basic Flash Lite timeline setup and not much else. It's OK to use this template—or create your own custom Series 40 FLA template—for development purposes. Just remember to update the screen size of the FLA in the steps that follow so they match those of your target Series 40 device.

Figure 4. Steps to selecting the template in the New from Template dialog box

Configuring the device settings

Great. Now you should have your Stage to work within to create the wallpaper. You'll note however, that the default content type is still set to Standalone Player and that the target device (see Figure 5) is still not set to the Nokia 6125. It's time to configure both of these settings:

1. Open the Document Properties panel, if it's not already available, by selecting Modify > Document. Next, click the Settings button (see Figure 5) to access the Device Settings dialog box.

   

   Figure 5. Document Properties panel

2. From the Available Devices section on the left, select Nokia 6125 inside the Nokia Series 40 folder (see Figure 6). Then click the Add button to move the target device to your test device list.

   

   Figure 6. Steps to adding a device in the Device Settings dialog box

   You may also optionally click the Make Default button to save this device as your current device profile.

   Note: If the Nokia Series 40 folder does not appear in your version of the Flash Authoring environment, download the latest Mobile Device Profile Update. Click the "Check for new devices" link found at the lower left of this panel to access the download page to retrieve a page that contains the latest MXP installation file(s).

3. Choose the wallpaper selection from the Content Type pop-up menu at the top of the dialog box.

   Your device should now be listed in the Test Devices section shown in Figure 6. You'll notice that in the Selected Device area, Name is set to Nokia 6125, Available Stage is set to 128 x 160 pixels, and the Supported Platforms setting for this device is now Flash Lite 1.1. Click OK to wrap up the settings and properties in this dialog box.

The Available Stage setting tells you how much "screen real estate" (available dimensions you have to work with) you have when the content is run as wallpaper. You'll need to match the dimensions listed here with screen dimensions in the steps below; otherwise, unwanted scaling will occur when the content is run on the actual target device which, in this case, is the Nokia 6125 device running at 128 x 160 pixels.

Tip: It is always prudent to use the "Check for new Devices" link on this dialog (Figure 6). This will open an external web page where any new and recently modified profiles are posted and available for download. I recommend that you download and install the latest Mobile Device Profiles as they become available from Adobe. These often contain corrections and/or changes which may solve existing issues within the templates.

Adjusting the frame rate, background color, and screen size

Now you need to change the frame rate and screen size dimensions to match those of the Nokia 6125 Series 40 device. Remember that 128 x 160 is the default dimension for this device's primary screen.

Modify the default Document Properties (refer to in Figure 5) to match those for our Nokia Series 40 device, the 6125. To change these properties, simply select Modify > Document from the Flash authoring menu bar. Alternatively, click the Size button found in the Document Properties panel (see Figure 5). You should see the Document Properties dialog box shown in Figure 7.

Figure 7. Steps to modifying the document properties for the wallpaper

You'll now need to complete the following three steps within the Document Properties dialog box:

1. Change the frame rate. For the frame rate, select 15 fps. I found this to be acceptable value after running the FPS Speedometer (see Figure 8 in Part 1) and Flash Lite 1.1 capabilities application (see Figure 2 in Part 1). Both of these benchmark applications indicate that this is an appropriate target frame rate for the 6125 to start with. Enter 15 into the Frame Rate text box.

2. Update the screen dimensions. The dimensions for the Main Display of the Nokia 6125 device are 128 x 160. You should change the Stage height and width to match those settings so that the wallpaper occupies the full screen area of your target device. In the case of the Nokia 6125 we are using, you should enter the value of 128 x 160 for width and height entries listed under Dimensions (see Figure 7).

   Note: If you do not change this value, it will result in your content scaling to fit the device (which may not look so pretty).

3. Modify the default background color. Now we'll want to change the background color to blue, or #0066FF in hex code, using the color picker in the Document Properties panel. When you are done, click OK. You should now have the updated Document Properties shown in Figure 8.

Figure 8. Document Properties after the modifications are completed thus far

Page 2 of 4

Previous Page

Next Page