Building and running your first Flash Lite application

This section describes the main parts of Flash Lite development by showing you how to create and deploy a very simple Flash Lite application. Before starting with this example, make sure your development environment complies with the requirements listed in section Before you start.

In this example, you learn to create a new Flash Lite movie file with the correct settings for mobile deployment. You can open the HelloWorldFlash.fla file in Adobe Flash or apply the following steps to create one from scratch. The example utilizes Flash Lite 1.1 and ActionScript 1.0, so it is portable to all Nokia devices that support Flash Lite.

If you are interested in the publishing and testing considerations, see phase Testing and publishing.

Creating HelloWorldFlash

This example generates a Hello World! text in a random location on the device screen. The text starts from a single point and grows larger on the screen over time while fading into the background. After the text has completely faded, a new instance of the text is created, which then repeats the process.

The example is designed for 240x320px resolution displays but it can be scaled for different sized displays as well.

Figure 8: HelloWorldFlash example running on different displays

To create the HelloWorldFlash movie:

  1. Launch the version of Adobe Flash that you have installed.

  2. Create a New movie. You can create a general Flash Lite project and then customize it later, or use a template. In this example, a Nokia S60 - 240x320 template is used.

    Figure 9: Creating a new Flash Lite application

  3. Right-click on the Library tab (usually located in the bottom right corner) and create a New Symbol. Give the symbol a name and keep the type as Movie clip. In this example, the movie clip is named Growth.

    Figure 10: Creating the Growth Movie Clip

  4. In the movie clip, create a text object with the Text tool from the main toolbar. Choose the size, font, and other features of the text. Then, right-click on the text object and select Convert to symbol. Again, keep the type as Movie clip and give the symbol a name such as HelloWorld.

    Figure 11: Creating the HelloWorld Movie clip

  5. Give the text movie clip instance a name by selecting it and entering a name in the Properties tab at the bottom of the Adobe Flash window. In this example, the instance is named hw.

  6. Add three more frames to the movie clip using the timeline at the top of the Adobe Flash window, so that frames 1-4 are set.

    Figure 12: Adding frames

  7. Create a new layer in the timeline and add two keyframes in frames 2 and 4.

  8. Select the keyframe you have just created in frame 2, and press F9 button to open up the ActionScript window. Enter the following code in the window:

    //initial horizontal position, with some randomness
xpos = 80;
hw._x = Math.random() * xpos + 70;

//initial vertical position, with some randomness
ypos = 120;
hw._y = Math.random() * ypos + 50;

//initial scale and opacity attributes
//in the beginning, the object is fully visible, but scaled to zero pixels
hw._xscale = 0;
hw._yscale = 0;
hw._alpha = 100;

//how fast the object grows
growth = 2;
//how fast the object fades
fade = 1;
//when to start drawing a new object
max_scale = 250;

    Select the keyframe in frame 4, and enter the following code in there:

    width = hw._xscale;
//if the ocject's scale is under the limit, grow and fade it by steps defined in frame 2
if (width <= max_scale) {
 hw._xscale = hw._xscale + growth;
 hw._yscale = hw._xscale;
 hw._alpha = hw._alpha - fade;

//the third frame contains no ActionScript, so this code is repeated until the if{}-loop is closed (until max_scale is reached) 
 gotoAndPlay(3);
}

    Figure 13: The ActionScript window

  9. Backtrack all the way to the root of the movie (Scene 1) by default), drag the Growth movie clip from the Library into the Flash area. The Flash Lite movie is now finished.

Testing and publishing

Flash publish settings can be accessed from the File > Publish Settings menu. You can change the Flash Lite version and the ActionScript version from the drop-down menus. Flash Lite versions are backwards compatible, so devices that support later Flash Lite versions can also play movies created for Flash Lite 1.1.

Figure 14: Flash Lite publish settings in Adobe Flash CS3 Professional

After you have selected the correct publishing settings, you can test the movie in an emulator. Select Control > Test Movie, and the according emulator in Adobe Device Central is launched.

Note: Remember that an emulator is different from a real mobile device and, thus, has some limitations. For example, performance and size of the emulator drives may differ from what can be expected with real device hardware. Moreover, the emulator environment treats processes differently, and the maximum size of the memory stack is notably larger than in real mobile devices. The Internet connection from an emulator is created based on the network settings of the PC.

When you have made sure your Flash Lite movie works correctly, you can publish it by selecting File > Publish. This creates a SWF (SHockwave Flash) file into the same directory that you have saved your project in. This SWF file can be opened straight in Adobe Device Central, if needed.

Running on a mobile device

For instructions on installing the published Flash Lite movie (HelloWorldFlash.swf in this example) onto a mobile device, see section Deploying Flash Lite applications.

© Nokia 2008.