Creating a simple menu using movie clips

In this section you'll learn how to create a simple menu using movie clips. In this method, rather than relying on the default tab navigation between buttons--and attaching code to each button--you use a key catcher button to listen for keypress events and update the user interface as needed. This technique does involve more development work than the button menu approach (see Handling key events), but it offers some advantages:

Control over tab order. Rather than tab order being determined by the Flash Lite player (as with buttons), you (the developer) can decide what object has focus and how it responds to keypress events.

Maintain menu selection between application states. For example, suppose you want your application to "remember" the last menu item the user selected so you can return the focus to the same item at a later time. This isn't possible using a button menu because you can't assign button focus using ActionScript.

In the following procedure, you start with a partially completed Flash document. For a sample of the completed application (movieclip_menu_complete.fla), see the Flash Lite Samples and Tutorials page at www.adobe.com/go/learn_flt_samples_and_tutorials. Locate the .zip file for your version of ActionScript, download and decompress the .zip file, and then navigate to the Samples folder to access the sample.

To create a simple menu using movie clips:

Download and open the file named movieclip_menu_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 Samples folder to access the sample.

In the Timeline, select the layer named Menu Items.

Open the Library panel (Window > Library) and drag an instance of the movie clip symbol named Menu Item Clip from the Library panel to the Stage.

This movie clip contains two keyframes, or visual states: one for the menu item's initial, unselected state, and the other for its selected state, which appears when the menu item receives focus. The following image shows the first keyframe of the movie clip's timeline. It contains a dynamic text field to display the menu item's label, and a red background graphic. The text field and background graphic extend across all frames in the movie clip's Timeline.

The following image shows Frame 5 in the movie clip's Timeline. The only visual difference between this frame and the first one is the yellow border highlight that surrounds the menu item's red background.

Drag two more instances of the menu item movie clip to the Stage and align them vertically in a column.

Select the upper movie clip and, in the Property inspector, type menu_1 in the Instance Name text box.

Assign the instance names of menu_2 and menu_3 to the middle and lower movie clips, respectively.

The numeric suffix appended to each instance name lets you dynamically refer to each movie clip in code, which you'll add shortly.

Using the Text tool, create a text field along the lower edge of the Stage.

In the Property inspector, select Dynamic from the Text Type pop-up menu, and type status in the Var text box.

As in the simple menu example, this text field displays a status message about the menu item that is currently selected.

In the Timeline, select the first frame on the layer named Actions.

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

// Initialize menu item labels:
menu_1.label = "News";
menu_2.label = "Sports";
menu_3.label = "Weather";

// Initialize variable that specifies number of menu items
numItems = 3;

// Initialize selectedItem variable, which contains 
// the index of the current menu selection
selectedItem = 1;

// Initialize status text field
currentLabel = eval("menu_" add selectedItem add ":label");
status = "Press to select " add currentLabel;

// Send the first menu item to its "over" state
tellTarget("menu_1") {
    gotoAndStop("over");
}

In the Timeline, select the layer named Key Catcher.

Open the Library and drag an instance of the button named key catcher to the Stage.

Next you'll attach event handler code to this button that handles user keypress events and update the user interface.

With the button selected on the Stage, open the Actions panel.

Type (or copy and paste) the following code into the Actions panel:

on(keyPress "<Down>") {
    if(selectedItem < numItems) {
        // Turn off highlight on previously selected menu item:
        tellTarget("menu_" add selectedItem) {
            gotoAndStop("off");
        }
        // Increment selectedItem variable 
        // and turn on highlight for new selection
        selectedItem++;
        tellTarget("menu_" add selectedItem) {
            gotoAndStop("over");
        }
        // Update status text field with label of selected item:
        currentLabel = eval("menu_" add selectedItem add ":label");
        status = "Press to select " add currentLabel;
    }
}
        
on(keyPress "<Up>") {
    if(selectedItem > 1) {
        // Turn off highlight on previously selected item:
        tellTarget("menu_" add selectedItem) {
            gotoAndStop("off");
        }
        // Increment selectedItem and turn on highlight for new selection
        selectedItem--;
        tellTarget("menu_" add selectedItem) {
            gotoAndStop("over");
        }
        // Update status text field with label of selected item:
        currentLabel = eval("menu_" add selectedItem add ":label");
        status = "Press to select " add currentLabel;

    }
}

on(keyPress "<Enter>") {
    // Update status field with selected item
    status = "You selected " add currentLabel;

}

Select Control > Test Movie to test the application in the Adobe Device Central emulator.

To interact with the menu, click the Up and Down Arrow keys on the emulator with your mouse, or press the corresponding arrow keys on your keyboard.

Flash CS3