So You're Thinking About Using Flash Instead of J2ME?

Starting a Project

When you start up the Flash IDE, you'll be presented with a start page that enables you to choose a project from one of three categories: Open a Recent Item, Create New, and Create from Template. For this project, click Global Phones from the Create from Template category, and then select the "Flash Lite 1-1 Symbian Series 60" template. Click OK and you'll be starting your first Flash project. Select File > Save As and give it a name (for example, stock.fla).

If you're expecting an Eclipse type of IDE, then you're going to be surprised at the first sight of the Flash IDE. Flash adopts a different programming model than J2ME. The concept of a movie clip lies at the core of a Flash application. There's no main() or startApp() method. Instead you have a Timeline displayed at the top into which you can insert frames. Think of it as a movie for which you create individual frames by adding images, controls, and so on.

The toolbox on the left displays the usual drawing tools. As a J2ME programmer, you're probably wondering, "Where's the code?" Well, Flash uses a scripting language called ActionScript. With Flash Lite 2.0 you get a subset of the entire ActionScript capabilities, but it has more than enough features for creating powerful mobile applications.

To ensure that you are using the correct ActionScript version, select File > Publishing Settings to set the publishing settings. In the Publishing Settings dialog box, click the Flash tab. In the Version pop-up menu, select Flash Lite 2.0. In the ActionScript Version pop-up menu, select ActionScript 2.0.

Now you're ready to move on and start creating the application.

Adding Buttons and Menus

The next step is to create the start menu. Here you really have to stop thinking in J2ME terms and start thinking in terms of graphical elements. Select Insert > New Symbol, click the Button option, enter Stock Tracker in the Name text box, and then click OK.

When you look at the Library panel on the right, you'll see that it contains your newly created menu button (see Figure 1). But where is it and what about the label? Here is where your artistic powers come into play: You have to draw the button. Notice the four tabs at the top in the Timeline: Up, Over, Down, and Hit. You can draw what the button will look like for each of these states. Select the Text tool and drag the mouse pointer over the canvas to create the button. Then select the Text tool to add a name for the button. To draw the button in the Down state, you first must insert a keyframe. Select Insert > Timeline > Keyframe and then draw the button in its depressed state.

Figure 1. Stock Tracker button in your library

Tip: Copy the Up state, paste it in the Down state, and then just change the background color.

To use your newly created button, select the Scene 1 tab and add two frames. Frame 1 will be a welcome page and Frame 2 will display the menu. Click Frame 2 and drag your menu button onto the canvas and repeat this procedure for the remaining menu items. Press Control+Enter to test the menu in the emulator. Your menu will appear in a window (see Figure 2).

Figure 2. Stock Tracker button in the Flash Lite emulator

Creating a button illustrates a fundamental difference between J2ME and Flash. With J2ME you have prefabricated controls such as menus that you programmatically create. In Flash you have to draw them, but you can make them look however you want. To exploit the power of Flash to the fullest, you should take a closer look at the tutorials showing what all the various tools do, working with layers and much more. I've experimented with the various tools to make the buttons in the accompanying Flash file nicer.

Now that you have completed the start menu, you need to create new frames to show when a particular button is selected. Create a new keyframe in Scene 1 and then create the corresponding elements such as menus or text boxes, following the same steps as before. One cool thing is that you can create the entire user interface graphically without writing any code. An even cooler thing is that you can also do this using code if you want, but that's beyond the scope of this article.

Using the Event Handler

Now you can wire up your buttons to jump to a particular frame, which are numbered consecutively: Frame 1, 2, 3 and so on. You want to jump to Frame 3 when the Settings button is clicked, so go to Frame 2 and select the Settings button that you created. Open the Actions window (Window > Actions) and add the following code:

on (press) {
   // Jump to Frame 3 and stop there
   gotoAndStop(3);
}

Note: The ActionScript window shows the ActionScript associated with the highlighted object. Clicking the canvas enables you to associate a script with the currently displayed frame, which will be executed when the frame is displayed. Be careful: Always correctly select the object with which you want to associate the script.

When you try this out in the emulator, you'll get a strange flickering effect: The first frame containing the menu is displayed but the next frame follows immediately. This is because Flash uses frames just like a movie: It plays them one after another unless you tell it to stop at a particular point. Once you grasp this concept and know how to stop at a frame and jump to another, you will start to make real progress.

To stop the flickering, just click the first frame and enter stop(); in the Actions window. Your code should look like this:

// this ActionScript sets your content to be full screen
fscommand2("FullScreen", true);
// Stop and wait 
stop();

Similarities with Java

You'll be glad to see that comments in ActionScript use the same syntax as Java, and you can use /* */ for multiline comments. If you want to output some debugging info, you can use the trace() function:

trace("Setting full screen");

ActionScript shares many similarities with Java. You'll quickly feel at home with it. The editor enables you to add functions from the toolbar, using the blue "+" icon. Clicking this icon helps you see what methods, events, and so on are available (see Figure 3). The editor helps out with autocompletion and showing which options are available. For example, typing on ( displays a list of events from which to choose.

Figure 3. Using the ActionScript tools to browse the available functions

Using Variables

Of course you want to be able to store the input symbols. You can assign a variable to an InputText field. The value of the variable is assigned the contents of the input field. Here is where you need to be careful because Flash doesn't need explicit variable declarations like Java does. Variables can be implicitly declared, which can lead to all sorts of strange things if you happen to mistype a variable name. Watch out for that.

Storing to Persistent Storage

Take a look at the ActionScript code associated with Frame 2 and the Add Stock button. In J2ME, we store data in a RecordStore. The Flash Lite equivalent is called a SharedObject, which you load from memory. You can add your own properties and save them. The data is read from storage using a callback mechanism in the script associated with Frame 2 and stored in the object in the script associated with the Add Stock button.

I had some difficulty with this in the emulator because the emulator does not support emulated storage. However, when I tried it out on a real device, it worked just fine.

Page 2 of 4

Previous Page

Next Page