Flash CS3 Documentation

Developing Flash Lite 1.x Applications > Creating Interactivity and Navigation > Handling button events > Creating a simple menu using buttons and tab navigation

Creating a simple menu using buttons and tab navigation

This section shows you how to create a simple menu using buttons and tab navigation. To create the menu, you'll use three button symbols, one for each menu option. You'll attach event handling code to each button instance that displays a message when the user rolls over each menu item--that is, when the user gives focus to the corresponding button--and when the user selects the menu item by pressing the Select key on their device. For more information about handling button events in Flash Lite, see Handling button events.

You'll start with a partially completed Flash document that is preconfigured to target the Nokia 7610 and the Standalone Player content type. You can change these settings to target a different device and content type (see the Adobe Device Central help for more information).

To create a simple menu using buttons:

1. Open the file named simple_menu_start.fla, which is located at www.adobe.com/go/learn_flt_samples_and_tutorials. On the Samples and Tutorials page, locate, download and decompress the .zip file for your Flash Lite version, and then navigate to the Samples folder to access the sample.
2. Open the Library panel (Window > Library).

   Notice that the Library contains three buttons symbols named News Button, Weather Button, and Sports Button.

3. In the Timeline (Window > Timeline), select the layer named Menu Buttons.
4. Drag an instance of the News Button symbol from the Library panel to the Stage.
5. Repeat step 4 for the Sports and Weather buttons.
6. Align the three buttons vertically, as the following image shows:

   
   
   

7. In the Tools panel, select the Text tool and create a text field along the bottom of the Stage.

   This text field displays a short message when the user rolls over each menu item.

8. With the new text field still selected, do the following in the Property inspector:
   1. Select Dynamic Text from the Text Type pop-up menu.
   2. Type status in the Var text box.
9. On the Stage, select the News button and open the Actions panel (Window > Actions).
10. In the Actions panel, type the following code:

    on(rollOver) {
        status = "Press to select News"
    }
    on(press) {
        status = "You selected news"
    }
    

    This code assigns some text to the dynamic text field when the user rolls over the News menu button.

11. Select the Sports button and type the following code in the Actions panel:

    on(rollOver) {
        status = "Press to select Sports";
    }
    on(press) {
        status = "You selected Sports";
    }
    

12. Select the Weather button and type the following code in the Actions panel:

    on(rollOver) {
        status = "Press to select Weather";
    }
    on(press) {
        status = "You selected Weather";
    }
    

13. In the Timeline, select Frame 1 of the layer named Actions.
14. In the Actions panel, type the following code:

    _focusRect = false;
    

    This disables the yellow focus rectangle that Flash Lite draws by default around buttons and text fields that have focus (see About the focus rectangle).

    At this point, the Stage should look something like the following image:

    
    
    

15. Select Control > Test Movie to preview the application using the Adobe Device Central emulator.

    Click the Down Arrow key with your mouse (or press the Down Arrow key on your computer's keyboard) to navigate between menu options; to select a menu item, click the Select key by using your mouse (or press the Enter key on your computer's keyboard).

    
    
    

Flash CS3