Creating a Dynamic Reusable Flash Menu Flash

In this section, we use arrays to create a dynamic code-built menu that you can adjust for any Flash movie. You create a Main Timeline with six sections for a photographer’s site, and a menu that navigates to those four sections. While that sounds simple enough, we create the menu entirely from ActionScript code.

  1. Create a new Flash movie (Ctrl+N or Command+N). In the Movie Properties dialog (Ctrl+M or Command+M), set the frame rate to 20 and the background color to white. Use any movie frame size you prefer.
  2. Rename Layer 1 to labels. Create new keyframes (press F6) on frames 2, 10, 20, 30, 40, and 50. Select frame 60 and press F5.
  3. Starting on frame 2 of the labels layer, assign the following label names to the keyframes you created in Step 2: about, interiors, exteriors, landscapes, portraits, and editorial.
  4. Add a new layer, and name it actions. Add a keyframe on frame 2 of the actions layer. With that keyframe selected, open the Actions Panel and add a stop() action. In the Frame Panel, type //stop in the Label field. This will create a frame comment of stop. The stop() action on frame 2 will prevent the Main Timeline from playing past our about section, when the movie first loads.
  5. Create another layer called artwork. Add keyframes on this layer, matching the keyframes in the labels layer. Insert some graphics in each keyframe for each section. As a starting point, you can simply add text headings to each section (for example, About the Company, Interior Photography, and so on).
  6. We need this artwork layer so that we have some indication that the playhead on the Main Timeline actually moves when an item in the menu is clicked.
  7. Now we create an array that contains the names of each our frame labels. Add a new layer to the Main Timeline, and name it menu actions. Double-click the first keyframe on the menu actions layer. In the Actions Panel, add the following
  8. code (note that the ¬ indicates a continuation of the same line of code; do not insert this character into your actual code):

    sectionNames = new Array(“about”, “interiors”, ¬ “exteriors”, “landscapes”,”portraits”, “editorial”);

    This line of ActionScript will create an array object named sectionNames. We can now refer to each section of our timeline using array syntax, such as sectionNames[0], sectionNames[1], and so on. We use this array to build the actual button text in our menu.

  9. In the same block of code, add the following line to the Actions list for frame 1 of the menu actions layer:
  10. sectionCount = sectionNames.length;

    This code creates a new variable named sectionCount. The length property of an array will return the current number of elements inside of the array. Therefore, because we put six elements into the array (in Step 6), sectionCount will be equal to 6. You may be wondering why we just didn’t manually insert the value 6 here. The point to using an array is that we can change the elements of the array at any point, and the rest of our code will update automatically to reflect the changes. In this way, we are building a dynamic menu system.

  11. Save your Flash movie as menuArray.fla. At this point, your Flash movie should resemble below.
  12. The Main Timeline has frame labels and artwork for each section of the presentation.

    Main Timeline has frame labels and artwork for each section of the presentation.

  13. Now we need to create some menu elements that we can use to build a dynamic menu from ActionScript. First, we need to make a Movie Clip “container” for the menu items. This container will be a Movie Clip instance on the Stage. Press Ctrl+F8 (Command+F8) to create a new symbol. Name this symbol menu, and keep the default Movie Clip behavior. Flash automatically switches to Symbol Editing Mode.
  14. Within the timeline of the menu symbol, rename Layer 1 to menuItemBase.
  15. This layer will hold a template Movie Clip instance for the menu item(s). Again, create a new Movie Clip symbol by pressing Ctrl+F8 (Command+F8). Name this symbol menuItem, and keep the default Movie Clip behavior.

  16. Within the timeline of the menuItem symbol, rename Layer 1 to button. On this layer, create or add a Button symbol. In our example, we used the Pill Button from the Buttons Library (Window➪Common Libraries➪Buttons).
  17. This will be the actual button that appears in our menu. Make sure that the Button is wide enough to accommodate the names of our sections. We stretched our button, shown in Figure below, to 175 percent. Also, center your Button instance on the Stage, using the Align Panel.

    The menuItem instance will be used to create each button in the dynamic menu. Using Action Script, the label Name text field will be filled with the appropriate section name.

    menuItem instance will be used to create each button in the dynamic menu

  18. Add a new layer to the menuItem symbol, and name it textField. On this layer, create a Dynamic Text field that is the length of the Button instance. In the Text Options Panel, give this Dynamic Text field the variable name labelName. Use whatever font face you prefer, in the Character Panel. In the Paragraph Panel, align the text to the center of the text field.
  19. Add another layer to the menuItem symbol, and rename it actions. Add a stop() action and frame comment of //stop to the first frame of the actions layer. (See Step 4 for more information.)
  20. Select the Button instance that you added in Step 10. Open the Actions Panel, and type the following code in the Actions list:
  21. This code will use the value of the labelName text field as the frame label for the gotoAndStop() action. Notice that we will control the Main Timeline’s playhead by indicating _root. Shortly, we will assign each instance of menuItem a unique labelName value.

  22. Open the menu Movie Clip symbol by double-clicking it in the Library. Drag an instance of menuItem from the Library to the menuItemBase layer on the menu timeline. With this instance selected, open the Instance Panel and assign a name of menuItemBase, as shown in Figure below. We will use this instance as a template for the real buttons in the menu symbol. Align this instance to the center of the Stage.
  23. We will duplicate the menuItemBase instance in ActionScript, to build each button in the menu symbol.

    duplicate the menuItemBase instance in ActionScript, to build each button in the menu symbol.

  24. Save your Flash movie.
  25. Go back to the Main Timeline and create a new layer named menu. On this layer, place an instance of the menu Movie Clip symbol from the Library. In the Instance Panel, give this symbol the name menu.
  26. Open the Actions Panel for frame 1 of the menu actions layer. At the end of the Actions list, type the following line:
  27. menuItemSpacing = 10;

    This line of code establishes a variable named menuItemSpacing. This value will designate the space (in pixels) to space each menuItem instance apart.

  28. Then, add the following ActionScript to the Actions list for frame 1 of the menu actions layer (note that the ¬ indicates a continuation of the same line of code; do not insert this character into your actual code):
  29. This code inserts a for loop that will duplicate the menuItemBase instance (inside of the menu instance) for each element in the sectionNames array. It will also set the value of labelName in each duplicated menuItem instance to the name of the appropriate section name. Notice that we specify i-1 for the index number of the sectionNames array because the position index of every array starts at 0 and our menuItem numbering starts at 1. After an instance is duplicated for the section name, we then reposition the menuItem instance below the previous one. We only need to perform this operation for instances greater than 1 because the starting instance does not need to be moved down. Notice also that we use the menuItemSpacing variable add a buffer space between the menu items.

  30. Before we can test the movie, we need to hide the menuItemBase template instance in the menu instance. After the for loop code, insert the following action:
  31. _root.menu.menuItemBase._visible = false;
  32. Save your Flash movie again, and test it (Ctrl+Enter or Command+Enter).
  33. Unless you had a syntax error in your ActionScript or forgot to name a Movie Clip instance, you will see a dynamic menu, built by ActionScript (as shown below).

    The ActionScript code in the menu actions layer duplicates the menuItemBase instance in the menu instance. Each duplicated instance has a unique labelName value, which is used in the gotoAndStop() action by each Button instance.

    ActionScript code in the menu actions layer duplicates the menuItemBase instance in the menu instance

    You can enhance this dynamic menu by adding animation to the menuItem symbol timeline. You can also restructure the ActionScript to work with separate Movie Clips for each sectionName, instead of frame labels. If used properly, you may never need to script a menu again! Simply change the Button instance artwork and text styles for unique menu interfaces.



Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics