Create the menu for the home screen

In this section, you'll create the menu for the application's home screen. The menu consists of three options: Specials, View Video, and Reservations.

Open the partially completed source file named cafe_tutorial_start.fla 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 Tutorial Assets folder to access the file.

In the Timeline window (Window > Timeline), select Frame 1 in the menu layer.

To create the menu, open the Library panel (Window > Library), and drag an instance of the button symbol called specials button to the Stage.

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

With the specials button selected, in the Property inspector, type specials_btn in the Instance Name text box.

Drag an instance of the button symbol named video button to the Stage and position it below the specials button.

With the video button selected, in the Property inspector, type video_btn in the Instance Name text box.

Drag an instance of the button symbol named reservations button to the Stage and position it below the video button.

With the reservations button selected, in the Property inspector, type reservations_btn in the Instance Name text box.

The Stage of your application should look something like the following example:

In the Timeline, select Frame 1 in the layer named ActionScript.

Open the Actions panel (Window > Actions) and enter the following code:

stop();
_focusrect = false;
fscommand2("SetSoftKeys", "Set Location", "Exit");
fscommand2("SetQuality", "high");
fscommand2("Fullscreen", "true");

This code does the following:

Stops the playhead at this frame.

Disables the 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 2.x Applications).

Registers the soft keys for your application to use.

Sets the player's rendering quality to high. By default, Flash Lite renders graphical content at medium quality.

Forces the player to display the application full screen.

When Flash Lite is in full-screen mode, the labels you specify in the SetSoftKeys command are not visible. For this reason, you must add custom soft-key labels to the Stage.

Add the following code to handle button events for the menu buttons, and for selection focus:

// Set initial focus when the application
// starts and also upon returning to the main
// screen from another screen.
if (selectedItem == null) {
    Selection.setFocus (specials_btn);
} else {
    Selection.setFocus (selectedItem);
}
// Assign onPress event handlers to each menu button,
// and set selectedItem variable to selected button
// object:
specials_btn.onPress = function () {
    gotoAndStop ("specials");
    selectedItem = this;
};
video_btn.onPress = function () {
    gotoAndStop ("video");
    selectedItem = this;
};
reservations_btn.onPress = function () {
    if (location_so.data.phoneNumber == undefined) {
    // User hasn't specified location so 
    // go to "set location" screen:
        gotoAndStop ("options");
    }
    else {
        // Call number in shared object:
        var phoneNum = location_so.data.phoneNumber;
        getURL ("tel:" + phoneNum);
    }
    selectedItem = this;
};

The onPress event handlers assigned to the buttons named specials_btn and video_btn send the playhead to frames labeled, respectively, "specials" and "video." You'll create the content for those sections later in the tutorial (see Create the specials screen and Create the video screen).

When the user selects the Reservations option, the onPress handler dials the phone number specified in the location_so shared object. (Later in this procedure, you'll create code to create the shared object.) If the user hasn't yet specified a location to call for reservations, the application sends the playhead to the frame labeled "options," where the user selects the preferred location for making reservations.

Now add the following code to create a key listener for the left and right soft keys:

Key.removeListener(myListener);
var myListener:Object = new Object();
myListener.onKeyDown = function() {
    var keyCode = Key.getCode();
    if (keyCode == ExtendedKey.SOFT1) {
        // Handle left soft key event:
        gotoAndStop("options");
    } else if (keyCode == ExtendedKey.SOFT2) {
        // Handle right soft key event: 
        fscommand2("Quit");
    }
};
Key.addListener(myListener);

This code uses a key listener object to handle right and left soft key events. When the user presses the left soft key, the playhead is sent to the frame labeled "options," and the right soft key closes the application.

For more information about using event listeners, see Using a key listener to handle keypress events in Developing Flash Lite 2.x Applications.

Finally, add code to initialize the shared object that saves the user's preferred location for making reservations:

// Define Shared Object listener function:
function so_listener (the_so:SharedObject) {
    if (the_so.getSize () == 0) {
    // The shared object doesn't exist, so the user
    // hasn't set a preference yet. 
    }
    SharedObject.removeListener ("location");
}
// Create shared object:
location_so = SharedObject.getLocal ("location");
// Add SharedObject listener object:
SharedObject.addListener ("location", this, "so_listener");

To test your work so far, select Control > Test Movie.

At this point you should be able to select a menu item by giving the corresponding button focus, and then pressing the emulator's select key (or the Enter key on your computer keyboard). In the following sections, you'll create the specials and video screens, as well as the screen to specify the default location.

Flash CS3