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 "lesson1.fla". If you do not already have a new document open, please create one with a width of 550 pixels and a height of 400 pixels. Once you have done this, in the File menu select "Save As ...". There should be an icon on the left of the dialog box for the Desktop. Click this icon.

You should see the listing of files and folders on your desktop. If you have not already created a folder on your desktop for files created and used during this workshop, do so now. Click the "Create New Folder" icon on the toolbar along the top of the Save As dialog box.

A new folder icon should appear in the list of files and folders. Give this folder any name you like as long as it includes your first name and is easily identifiable as yours. Then double-click the new folder to open it and click Save to save your blank file.

Set Up Your Timeline

The first step is to organize your Timeline. In Layer 1 of your Timeline, right-click on frame 20 and select "Insert Frames". You will now have 20 active frames in Layer 1. Rename Layer 1 to "Menu buttons" by double-clicking the "Layer 1" text. Right-click in frame 5 of this layer and select "Insert Keyframe". This keyframe will serve as a "base" for your first page.

Add Buttons To Your Stage

Select frame 1 in the "Menu Buttons" layer. Open the Window >> Common Libraries >> Buttons library panel. This should open the Buttons library in the panel on the right. Double-click a folder icon to open it and view the buttons. Click a button to view its style in the panel view window.

Find a button style you like that has text in it (many have the word "Enter" in them, for example). Click and drag three of the buttons to the Stage. You may choose three of the same kind of button, or three different colors of the same style. In a moment we will change the text in the button. Here is a collection of most of the button styles available through the Buttons Library that comes with Flash:

Download the file for the above example of the Flash Button Library

Your Timeline and Stage should appear similar to the image below:

We 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.

Modify Your Buttons

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".

Add Page Numbers

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:

Add Markers to the Timeline

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:

Add scripts to the menu buttons

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.

Add a 'Stop' script to the Timeline

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.

Add a 'Return' button to return to the main menu

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.

Add a Title

Select frame 1 of the "Page numbers" layer and select the Text tool from the Tools Palette. Add some title text to your main page just like you added your page numbers.

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 (lesson1final.fla)

That's it for this Lesson Supplement!!

Jeff Sale