Deconstructing the Floogle SMS Application

The Floogle SMS Interface

One of the most important things to remember before you start building an application for a small screen—well, any screen, but especially small ones—is to figure out a way to let the user navigate the application with ease. This can be tough, especially since most of us are used to our audience having a mouse.

My biggest challenge with the Floogle application was to make it easy to use, but still display all the relevant information for the different search types. Fortunately, what I love about developing Flash Lite applications is that you have total control over each and every pixel on the screen. However, since Flash Lite is grounded in Macromedia Flash 4, you still have some scripting and navigation limitations that no longer exist with newer versions of Macromedia Flash Player.

Tab Order

First of all, you cannot set the tab order of buttons and input text fields in Flash Lite manually. This makes the arrangement of symbols on the Stage an important task, since you have to take into consideration that Flash Lite will determine the tab order. For more information, see How is the tab order for form fields in the Flash player determined? (TechNote 14075). When developing Flash Lite applications (as well as regular Flash applications), it's a bit difficult to lay out the symbols on the Stage according to the tab order formula. So, the most effective way to test your tab order is basically trial and error. Floogle SMS does in no way have a perfect tab order, but the layout of the screen still makes sense (see Figure 1).

Figure 1. The layout of the Floogle SMS interface makes sense.

You have the application title at the top, then the Query Type combo box and the input text field. Taking up the most space is the tab box, which displays details about the selected query type and sample queries. At the bottom are the labels for the Submit and Exit soft keys.

In Flash Lite, the button or input text field that has focus has a yellow rectangle around it. You might want to bypass this and make over states on your buttons instead. To disable the focus rectangle, add _focusrect = false to the first frame in your application. However, since input text fields have no over states, the focus rectangle is necessary to show when an input text field has focus. So here's a tip: Don't use the _focusrect property in movies with input text fields.

Deconstructing the Query Type Combo Box

If you haven't done so already, download the sample files for this article and open the flooglesms.fla source file. (I've also included the flooglesms.swf file which you can copy to your handset.) Navigate to the combo box.

Note: I've broken apart all static text in the application to prevent font substitution when you open the source file.

Go to frame 55 in the Timeline and double-click the mc_content movieclip in the main movie layer, and then double-click the mc_combo movieclip in the combo box layer.

The combo box movieclip is fairly simple. It consists of the following elements:

• A comboLabel movieclip that displays the selected query type
• A masked comboListHolder movieclip that holds the comboList movieclip
• A btn_comboButton that triggers the comboListHolder to display the comboList
• The artwork (box and arrow) for the movieclip

Take a closer look at the btn_comboButton button actions:

on (release, keyPress "#") {
    // Get the current frame of the list_mc movieclip
    listFrame = getProperty("list_mc", _currentframe);
    if (listFrame == 1) {
        // The combo box is closed, so open it
        tellTarget("list_mc") {
            gotoAndPlay("open");
        }
        // Tell the parent timeline to go to the disabled frame.
        // The disabled frame have no buttons which may interfere
        // with the combo list
        tellTarget("../") {
            gotoAndStop("disabled");
        }
    } else {
        // The combo box is open, so close it
        tellTarget("list_mc") {
            gotoAndStop(1);
        }
        // Tell the parent timeline to go to frame 1

        tellTarget("../") {
            gotoAndStop(1);
        }
    }
}

Basically, the btn_comboButton button opens the combo box if it is closed, and it closes the combo box if it is open. In addition, when opening the combo box, it tells the parent Timeline to go to a frame called disabled, where all the buttons on that Timeline are removed (tab buttons, scrollbar buttons). The input text field is also replaced with a dynamic text field. I do this so the buttons and input text field do not interfere with the buttons in the combo box.

If the combo box is open, I close the combo box and tell the parent movieclip to return to frame 1.

Now, take a closer look at the mc_comboListHolder movieclip (the masked one). To add a little animation, I've masked the movieclip "holding" the combo list and tweened the comboList movieclip on the Stage with a simple motion tween. I could have just as easily accomplished the main task of displaying the list by just adding, for example, comboList_mc._visible = true to the button actions above. However, I would spice up the application with a small tween.

Go to frame 12 in the mc_comboListHolder movieclip and take a look at the business button actions:

on (release) {
    // The smscode variable is used when submitting the query
    set("/:smscode", "");
    
    // The activeType variable is used by the tab box
    set("/:activeType", "bizz");
    
    // Tell the tab box to display details about the
    // selected query type
    tellTarget("../../tabbox_mc") {
        gotoAndStop(activeType add "Details");
        textbox.scroll = 0;    // resets the text field scroll
    }
    
    // Sets the combo label according to the chosen query type
    tellTarget("../label_mc") {
        gotoAndStop(/:activeType);
    }
    
    // Close the combo box
    tellTarget("../../") {
        gotoAndStop(1);
    }
    gotoAndStop(1);
}

The combo list button takes care of the following tasks:

• It sets the smscode variable. This code is appended to the string that is sent when submitting the SMS to the Google SMS service. (For more details, see the following section).
• It sets the activeType variable. This variable is used by the tab box when switching between the two tabs to determine what info to show (that is, what frame label to go to).
• It tells the tab box to display details about the chosen query type.
• It sets the combo label.
• It closes the combo box.

Page 2 of 5

Previous Page

Next Page