Developing and Adapting Flash Games for Flash Lite 1.1

Converting the Game

Your first step is to open the original game file and start identifying the features that need to be changed in order for the game to work effectively on the target device.

In the fl_game_exercise folder, find the start folder and open the file presiDance_start.fla. This is a simple dancing game featuring two prominent American politicians. (You can choose whomever you'd like to be—it's completely bipartisan!) In the following sections I show you how to apply the necessary adaptations step by step.

Verifying the Stage Size

You want to take PresiDance and place it on a Nokia Series 60 handset, so your first move is to ensure that you have the correct Stage dimensions for your target device. The full-screen Stage dimensions for Nokia Series 60 handsets are 176 x 208. For simplicity's sake, I have already set presiDance_start.fla at these dimensions. Flash MX Professional 2004 comes with a range of templates for supported devices. You can access them by selecting the Templates tab when opening a new document and selecting the Mobile Devices option. A list of devices appears, from which you can select your model—in this case a Nokia Series 60 such as the Nokia 3650. When you open the template, you see a graphic of the handset at the correct Stage dimensions.

Welcome Back tellTarget! A Refresher Course in Flash 4 Scripting

As with any Flash project, it's the ActionScript that makes this game tick. If you've read the Development Guidelines in the Flash Lite 1.1 CDK you know that this essentially means using Flash 4 ActionScript commands (there are exceptions, as you'll see soon).

Here are some key points to bear in mind when using Flash 4 ActionScript:

• Slash Syntax: Since the release of Flash 5, we've been able to use dot syntax in ActionScript when targeting symbols and variables. Prior to this, slash syntax was used and this is what we now use for Flash Lite. For example, when targeting a movie clip with dot syntax, you might write this:

  _root.parentClip.childClip

  Using slash syntax this becomes the following:

  /parentClip/childClip

• tellTarget: You must use the deprecated tellTarget command for the movieClip control. For example, in dot syntax you would tell myMovieClip to stop at myFrame by writing this:

  myMovieClip.gotoAndStop("myFrame")

  Using the tellTarget command, this becomes the following:

  tellTarget("myMovieClip"){ gotoAndStop("myFrame"); }

• Targeting Variables: The way you target variables also changes to accommodate slash syntax. In dot syntax you could use this:

  _root.myMovieClip.myVariable = myValue

  In slash syntax this is expressed as follows:

  /myMovieClip:myVariable = myValue

As you look at presiDance_start.fla, notice that the file is already set for publishing as a Flash 4 file. By looking through the ActionScript, you can see that the principles highlighted above are in use. As always, Flash warns you in the Output window if any of your ActionScript will not work with the publish settings you select. The ActionScript dictionary is also an invaluable source of information here because it lists Flash 4–friendly commands and suggests alternatives for commands that are not Flash 4–friendly.

I mentioned exceptions to the use of Flash 4 ActionScript for Flash Lite 1.1. In many instances these are commands that are inappropriate for use on mobile handsets and, therefore, are not supported. For example, startDrag, stopDrag, and certain button events (see the Development Guidelines for more details) are not supported. Other key exceptions are a new group of commands aimed at giving developers better control over the handset.

Introducing the New FSCommand2 Commands

The new FSCommand2 commands enable you to control how your movie works on the handset, giving Flash Lite 1.1 far more scope for delivering a better user experience.

The following examples demonstrate how you can use the FSCommand2 commands on your game. You can set up many of these in the first frame of the movie because they will apply globally as soon as the game opens. First, verify that the movie runs full-screen on our target device. Do this by using a FullScreen command:

1. In presiDance_start.fla, select Frame 1 of the Actions layer. Open the ActionScript window and type the following below the existing commands:

   FSCommand2("FullScreen", true);

2. Verify that the quality is set to high to get the best out of your graphics by using the SetQuality command. Below the FullScreen command you have just entered, type the following:

   FSCommand2("SetQuality", "high");

   The FullScreen and SetQuality commands may well be familiar to you from previous Flash projects but the next command is phone-specific.

   Most handsets have certain non-numeric keys to provide functions such as opening menus or quitting applications. On the Nokia Series 60 handsets you have so-called shoulder buttons (see Figure 2). It makes sense to use these buttons to provide additional game control. In this case, you create a Quit button.

   

   Figure 2. Nokia Series 60 handset shoulder buttons

3. Select Frame 6 (labeled "choose") of the Actions layer. Open the ActionScript window and type the following below the existing commands:

   FSCommand2("SetSoftKeys", "left", "right");

   You place this command in Frame 2 because it enables you to use predefined Flash Player functions for the shoulder buttons on the game's splash-screen. These include the save and volume features, so it's important to allow the user access to them. The SetSoftKeys command tells the handset that you will be defining a function for the left and right shoulder keys.

4. Place the command on the Exit button that is already on the Stage. This command enables you to exit the Flash movie. Select Frame 6 of the Shoulder Buttons layer. Click the Exit button in the lower right corner of the Stage. Open the ActionScript window for this button and type the following command:

   on (keyPress"<PageDown>"){ FSCommand2("Quit"); }

   Note: When you publish for Flash Lite 1.1, the PageUp and PageDown keyPress commands correspond to the left and right shoulder keys, respectively.

Your game now has the commands in place to make it play at the right size and quality, and to enable gamers to control it using the shoulder keys. Next you need to look at optimizing some of the other features to keep things running smoothly.

Vector Graphics versus Bitmap Images

When making Flash games for the web, it's easy to overlook processor speeds and assume that the majority of users have sufficiently capable machines to play games in all their glory. With mobile devices, however, you should not make these assumptions because users have far less processor power at their disposal.

One common source of problems that occurs when porting a Flash game to the Flash Lite platform is a large number of vector graphics. This might seem strange to you at first because vector graphics are one of the key strengths of Flash, but vector backgrounds or background animations can easily slow down foreground action.

Note: Testing on the actual handset is vital at this stage because these problems may not show up when testing the SWF on your desktop machine.

The easy solution to this problem is to import your backgrounds into Macromedia Fireworks and export them as bitmap images. These bitmaps can then be placed in Flash instead of the vector graphics.

For your convenience, I've already imported the bitmap versions of your backgrounds into the library in the Bitmaps folder.

Now take these bitmap versions of the backgrounds from the library and replace the vector versions currently used in the movie:

1. In the library, open the Graphics folder. Locate g_bg_splash and double-click this item to open it on the Stage. Delete the contents of the bg layer. This removes the vector version of the splash-screen background
2. In the library, open the Bitmaps folder and drag splashscreen.png on the bg layer of g_bg_splash. Position this item at x = 0, y = 0. This bitmap version of the background is now in place.
3. Repeat Steps 1 and 2 for the game background. Because this background is animated, you need to replace two graphics. In the Movie Clips folder, locate mc_bg_stage and double-click this item to open it. Click in Frame 1 of the bg layer marked; this is where the vector version of the background is located. Delete the contents of this layer. Now, in the library, open the Bitmaps folder and drag the item marked background.png onto the bg layer. Position this item at x = 0, y = 0.
4. Select Frame 6 of the bg layer and delete the contents of the frame. Drag the item marked background_2.png from the Bitmaps folder to the Stage. Position this item at x = 0, y = 0. With the background graphics changed, the main characters in the game will be animated much more quickly.

Using Sound

Sound is a vital part of a game, but again there are some issues specific to mobile devices to be aware of. On the web you can use many formats such as WAV or MP3 for event sounds or background loops. On mobile handsets you have to use a different range of formats. Read Nader Nejat's excellent article, Using Sound in Flash Lite 1.1, for deeper insight into this issue.

For clearer sound quality and smaller file size, MIDI files offer a great solution. Substitute MIDI sounds for the MP3 files that are currently in the game (see Figure 3).

Figure 3. MP3 files replaced with MIDI sound files

Publishing the Movie

Now that you have made the changes needed to allow your Flash game to work in Flash Lite 1.1, you need to publish your movie. If you have followed the instructions in the Flash Lite 1.1 CDK, you should be able to select Flash Lite 1.1 as a custom player in your publishing options. After you do this, publish the movie and transfer it to the target handset for testing.

Where to Go from Here

This article highlighted some of the key issues and techniques you need to be aware of when developing and adapting Flash games for Flash Lite. By looking at the completed game (in the complete folder), you might notice some extra possible adaptations, such as battery and signal level indicators. Take a look at these and see how they use the principles covered in this article.

Flash Lite 1.1 provides you with the tools to approach an exciting new medium for your work. I hope this article has helped or inspired you and I'm looking forward to seeing the results!

For detailed information on authoring for mobile devices, see the Content Development Kits on the Mobile & Devices Developer Center.

Page 3 of 3

Previous Page