Add navigation and text to the specials screen

In this section, you'll add interactivity to the specials screen that lets the user control the transition between each animation. You'll also add dynamic text fields that display the name and description of each image.

In Flash, open the file you completed in Create the menu for the home screen.

In the Timeline, select Frame 10 in the Text layer.

In the Tools palette, select the Text tool and create a text field below the first masked-specials image.

This text field displays the name of the special whose image is shown on the screen.

With the text field selected on the Stage, make the following changes in the Property inspector:

Select Dynamic Text from the Text Type pop-up menu.
Type title_txt in the Instance Name text box.
Select the Italics text style option.
Set the font size to 10.
Select Use Device Fonts from the Font Rendering Method pop-up menu.

Create another text field below the first text field to display a short description of the specials that the user is viewing.

Using the Selection tool, resize the new text field so that it's about three times as tall as the text field above it.

With the text field selected on the Stage, make the following changes in the Property inspector:

Select Dynamic Text from the Text Type pop-up menu.
Type description_txt in the Instance Name text box.
Select Multiline from the Line Type pop-up menu.
Set the font size to 10.
Select Use Device Fonts from the Font Rendering Method pop-up menu.

In the Timeline, select the keyframe in Frame 10 in the ActionScript layer.

Open the Actions panel and add the following code:

stop();
fscommand2("SetSoftKeys", "Home", "Next");
title_txt.text = "Summer salad";
description_txt.text = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette.";

This code displays the name description of the first special in the two dynamic text fields. It also stops the playhead on the current frame, and registers the device's soft keys.

In the ActionScript layer, select the keyframe in Frame 20 and enter the following code in the Actions panel:

stop();
title_txt.text = "Chinese Noodle Salad";
description_txt.text = "Rice noodles with garlic sauce, shitake mushrooms, scallions, and bok choy.";

In the ActionScript layer, select the keyframe in Frame 30 and enter the following code in the Actions panel:

stop();
title_txt.text = "Seared Salmon";
description_txt.text = "Filet of wild salmon with caramelized onions, new potatoes, and caper and tomato salsa.";

In the ActionScript layer, select the keyframe in Frame 40 and enter the following code in the Actions panel:

stop();
title_txt.text = "New York Cheesecake";
description_txt.text = "Creamy traditional cheesecake served with chocolate sauce and strawberries.";

In the ActionScript layer, select the keyframe in Frame 50 and enter the following code in the Actions panel:

gotoAndStop("specials");

This code returns the playhead to the beginning of the animation sequence. The first and last images in the animation sequence are the same, which creates the illusion of a continuous animation.

Save your changes.

Next you'll add navigation to the specials screen that lets the user navigate between images and descriptions of each special.

Open the file you completed in the previous procedure.

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

Open the Actions panel and enter the following code:

Key.removeListener (myListener);
var myListener:Object = new Object ();
myListener.onKeyDown = function () {
    var keyCode = Key.getCode ();
    if (keyCode == ExtendedKey.SOFT1) {
        // Handle left soft key event    
        gotoAndPlay ("home");
    }
    else if (keyCode == ExtendedKey.SOFT2) {
        // Handle right soft key event
        play ();
        description_txt.text = "";
        title_txt.text = "";
    }
};
Key.addListener (myListener);

The left soft key sends the playhead to the main application screen, and the right soft key advances the image animation to the next image in the sequence.

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

Select Control > Test Movie to test the final application in the emulator.

Flash CS3