Flash CS3 Documentation

Getting Started with Flash Lite 1.x > Creating a Flash Lite Application > Creating the application > Creating the menu for the main screen

Creating the menu for the main screen

In this section, you'll create the menu for the application's main screen. The menu consists of two options: Specials and Reservations. The Specials option takes the user to a screen to view images and descriptions of specials at the cafe. The Reservations option initiates a phone call to the cafe so that the user can make reservations.

The menu consists of two standard Flash buttons that define up, over, and down states. The user gives focus to one of the buttons by pressing the Up or Down Arrow keys on their device. When a button has focus it displays its over state. The button that has focus generates a button press event when the user presses the Select key on the device. This default tab navigation provides an easy way to create a simple user interface for a Flash Lite application. For more information about using tab navigation, see Using tab navigation in Flash Lite in Developing Flash Lite 1.x Applications.

To create the main screen's menu:

1. In Flash, open the file you saved in the previous section (see Selecting your test devices and content type).
2. In the Timeline window (Window > Timeline), select Frame 1 on the menu layer.
3. To create the menu, open the Library panel (Window > Library), and drag an instance of the button symbol called Specials to the Stage.

   Position the button beneath the text field (already in place) that introduces the restaurant.

4. Drag an instance of the button symbol named Reservations to the Stage and position it below the Specials button, as the following image shows:

   
   
   

5. Select the Specials button, and open the Actions panel (Window > Actions).
6. Add the following code to the Actions panel:

   on(press) {
       gotoAndStop("specials");
   }
   

   This event handler code sends the playhead to the frame labeled specials when the user selects this button. You'll create the content for that frame in the next section (see Creating the specials screen).

7. On the Stage, select the Reservations button and open the Actions panel again.
8. In the Actions panel, enter the following code:

   on(press) {
       getURL("tel:1-415-555-1212");
   }
   

   When the user selects the Reservations menu item, Flash Lite initiates a phone call to the specified number. Flash Lite always prompts the user to allow or deny a request from a SWF file to dial a number. For more information, see Initiating a phone call in Learning Flash Lite 1.x ActionScript.

9. In the Timeline, select Frame 1 on the Actions layer.
10. Open the Actions panel and enter the following code:

    stop();
    _focusRect = false;
    fscommand2("resetsoftkeys");
    fscommand2("setquality", "high");
    fscommand2("fullscreen", "true");
    

    This code does the following:

11. Stops the playhead at this frame.
12. Disables the yellow focus rectangle that Flash Lite draws by default around the button or input text field with the current focus (see About the focus rectangle in Developing Flash Lite 1.x Applications.
13. Resets the soft keys to their default state. (Later in the tutorial, you'll add code that registers the soft keys for your application to use.)
14. Sets the player's rendering quality to high. By default, Flash Lite renders graphical content at medium quality.
15. Forces the player to display the application full screen.
16. To test your work so far, select Control > Test Movie.
17. In the emulator, click the Up or Down Arrow keys on the keypad with your mouse (or press the Up or Down Arrow keys on your computer's keyboard) to give focus to the Specials button.

    When the Specials button item gets focus, you will see the button's over state.

18. Click the Select key on the emulator's keypad (or press the Enter key on your keyboard) to select the menu item.

    At this point, the specials screen contains no features. In the next section, you'll add interactivity and animation to create the specials screen (see Creating the specials screen).

Flash CS3