Workshop Home | Schedule | Introduction | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5

Lesson 5: Creating Non-linear Menu Interaction

In this lesson, we will create a simple three-button menu that jumps to three separate 'pages' in a non-linear fashion, and we will add an additional button that returns us to our main menu.

We will begin by creating a new document and saving it as "lesson5.fla". Next, in Layer 1 on your Timeline, right-click on frame 20 and select "Insert Frames". Rename Layer 1 to "Menu buttons". Right-click in frame 5 of this layer and select "Insert Keyframe". Select frame 1 in this layer and select "Buttons" from your Window>>Common Libraries menu. This should open the Buttons library in the panel on the right. Scroll down until you find the "buttons rect bevel" folder. Double-click the folder to open it and click and drag three of these buttons to the Stage (any three of your choice is fine). Each button will have the text "Enter" in it. We will change this next. Your Timeline and Stage should appear similar to the image below:

We also want to align and properly distribute our buttons. On your Stage with the Selection Tool, click and drag a rectangle around all three of your buttons to select them. Open your Align window (Window>>Align, or Ctrl-K). First, select the button to align centers horizontally:

Next, click the button to distribute centers vertically:

Your buttons should now be aligned and evenly distributed on your Stage. Now let's change the text for each button to correspond to the different pages they will be linked to. First, double-click the first button on your Stage. You should see a Timeline resembling:

Double click the text string "Enter". If nothing happens, your "text" layer may be locked. If so, click the little lock icon on the text layer to unlock the layer. Once you double-click to edit your text string, delete the text "Enter" and type "Page 1". Move the playback head to the "Down" frame and do the same text edit. Now, exit the button editing mode and return to your main scene by clicking the "Scene 1" link above the Timeline. Repeat this process for your other two buttons, but rename them to "Page 2" and "Page 3".

Next, we will add the pages to your application. First, add a new layer to your Timeline and name it "Page numbers". Right-click frame 5 of this layer and select "Insert Keyframe". Select the Text tool from the Tools palette, then click in the upper left corner of the Stage and type "Page 1". Right-click frame 10 of layer "Page buttons", select "Insert Keyframe", select the Text tool from the Tools palette, then click in the upper left corner of the Stage and type "Page 2". Right-click frame 15 of layer "Page buttons", select "Insert Keyframe", select the Text tool from the Tools palette, then click in the upper left corner of the Stage and type "Page 3". Your Timeline should resemble:

Next, we will add Markers to your Timeline that your buttons will use to identify which frame to jump to when clicked. First, add a new layer to your Timeline and rename it to "Markers". Right-click in frame 5 of layer "Markers" and select "Insert Keyframe". Then, in the Properties panel at the bottom of the screen, you will see a Frame parameter text box. In this box, type "page1":

Repeat this step for frame 10 and frame 15 (type "page2" and "page3" respectively), and also remember to select frame 1 and add a marker named "menu" to it. Your timeline should now look like:

Next, we will add scripts to your menu buttons (similar to the process we used for Lesson 1) that will jump you to each of these pages. Return your playback head to frame one and select your first button for "Page 1". In your Actions panel, click the blue cross and select Global Functions>>Movie Clip Control>>on. Select "release" from the popup menu. Then click the cursor at the end of the first line of your Actionscript and hit Return so your cursor is now on line 2 and the line should be blank. Then click the blue cross and select "Global Functions>>Timeline Control>>gotoAndStop. Type "page1" into the parentheses for the gotoAndStop command. Your script should now resemble:

on (release) {
        gotoAndStop("page1");
}

A quick way to duplicate this script for your other two buttons is to copy it, select your next button, and paste the text into the Actionscript panel, then edit the "page1" text to become "page2". Repeat this process for your third button.

You will also need a "stop" script at the beginning of your Timeline so that when you play your movie it stops at the main menu and waits for a mouse click event. To do this, select frame 1 of your Markers layer, then click the ActionScript blue cross and select Global Functions>>Timeline Control>>stop.

Finally, we will add a "Return" button to your three pages so you can click it to return to the main menu. First, add a new layer to your Timeline and rename it to "Return button". Next, right-click frame 5 on this layer and select "Insert Keyframe". Now drag a new button to your Stage from the same button library you used for your three menu buttons. This button will also have the default text string "Enter". Change this text to "Return" in a manner similar you how you modified your menu button text. Next, add a script to this "Return" button that will perform a "gotoAndStop" function but will jump to the frame with the "menu" marker in it.

Your application should be complete. Save and test your file. It should function similar to the file below:

Click to download the file used for this animation (lesson5final.fla)