Channels ▼


Flash Lite: Graphics for Mobile Devices

Source Code Accompanies This Article. Download It Now.

Testing the Application

You can use the built-in Flash Lite phone simulators to test the application at any time during development. I recommend testing applications regularly. Just select Test Movie from the Control menu (or Ctrl-Enter).

When the device player is launched, this message is displayed on the Output console:

FTPS030: FSCommand2 FullScreen command not supported
in the emulator, please test it on the device

This message appears because the authoring tool automatically inserts the following command in the first frame of the application. This command is only executed on real devices; emulators don't support it:

fscommand2("FullScreen", true);

At this point, you can edit the phone list you plan to test your application on by selecting Device Settings in the Test Device pull-down menu. This brings up the Device Settings dialog, which you can use to select phones from the list on the left side (Available Devices) and add them in the emulated devices list (Test Devices) on the right.

Also at this point, you can download and install the new device profiles from Adobe by following the link "Check for new devices" in the bottom-left corner of the dialog screen.

Creating Application Structures

Figure 2 illustrates the structure for the baseball application. After opening the application, users land on a selection page, where they can edit the year for which the statistics are retrieved. They then initiate the network data retrieval by selecting either the Top 5 Homeruns or Top 5 Salaries buttons. There is also an Exit button.

[Click image to view at full size]

Figure 2: Application structure.

After the data has been retrieved, users are forwarded to a results page, where they can see the resulting players. By pressing the right softkey, users are returned to the selection page. From that page they make a new selection or exit.

The selection page is the first frame of the application. Because it is helpful to keep the Flash applications organized with layers, you should create an additional layer named "Buttons" between the ActionScript and Content layers. If you want a background that's different for different screens, you should create a Background layer in the bottom of the layer stack.

Create three static text items on the Content layer and enter the text (Top 5 Homeruns,...) previously mentioned. Also, create an input text field for getting the year and a static text field as a label for it. In the property inspector, enter statYear in the Var field of the input text field you created—this ties the statVar variable to the contents of the text field.

The next step is to create the selection rectangles for the menu. First, create an invisible button with the command Insert->New Symbol. That button is placed in the Library and the contents (currently nothing) of that object are shown on the Stage. Define a keyframe in the hit state of the button, and define the clickable area of the button by drawing a rectangle in that state. Change the active layer to Buttons and copy this invisible button on top of the three text items. The screen on the stage should look something like Figure 2.

To make the application functional, add Listing Three (a) on the ActionScript layer of frame 1. The three buttons—homeruns, salaries, and exiting the application—should contain Listings Three (b), (c), and (d), respectively. This lets users move the focus with the joystick from one button to another and select the current button with the selection key.

// this ActionScript sets your  // content to be full screen
fscommand2("FullScreen", true);
statYear = 2006;

on (release) {
    target = "homeruns";

on (release) {
    target = "salaries";

on (release) {
Listing Three

In the main timeline, create keyframes on frames 5, 10, and 15. In the property inspector, name the frames frLoad, homeruns, and salaries, respectively. Go to frame frLoad, place a static text field on the Content layer, and enter "Loading data, please wait..." in the text field. This remains until the data is fully loaded from the server to show populated statistics data pages. To generate a control structure for the waiting screen, create additional keyframes in frames 6 and 7, and name frame 6 wait1.

Next, go to the frame homeruns, and generate the result display on the Content layer. Use a static text field for the title; if you want to show the selected year, create a dynamic text field next to the title. In the property inspector, enter statYear in the Var field. Generate a 5×2 grid using dynamic text fields (you could use borders in these fields), and tie variables to be downloaded from the server to each of these fields. The first row points to variables name1 and value1, and so on. Repeat the steps for frame salaries.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.