Creating a Dynamic Reusable Flash Menu


In this section, you 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 mock photographer's site, and a menu that navigates to those six sections. While that sounds simple enough, you create the menu entirely from ActionScript code. Figure 26-1 displays the menu and its items, as it appears during run time.

image from book
Figure 26-1: The completed Flash movie with the menu items

In the following steps, you build a Flash movie that uses this menu system.

  1. Create a new Flash document (Ctrl+N or z+N).

  2. Rename Layer 1 labels. Create new keyframes (press the F6 key) 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 Property inspector, type //stop in the <Frame Label> field. This creates a frame comment of stop. The stop(); action on frame 2 prevents the Main Timeline from playing past the about section when the movie first loads.

  5. Create another layer called heading. 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). You need this heading layer so that you have some indication that the Playhead on the Main Timeline actually moves when an item in the menu is clicked.

  6. Create another layer called background. Place this layer at the bottom of the layer stack. Draw a filled rectangle that spans the top of the document, as shown in Figure 26-2.

  7. Now you create an array that contains the names of each of your frame labels. Add a new layer to the Main Timeline, and name it menu actions. Select the first keyframe on the menu actions layer. Open the Actions panel (F9), and add the following code (note that the image from book indicates a continuation of the same line of code; do not insert this character into your actual code):

     var sectionNames:Array = new Array("about", "interiors", image from book   "exteriors", "landscapes", "portraits", "editorial") 

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

  8. In the same block of code, add the following line to the Script pane for frame 1 of the menu actions layer, after the existing code:

     var sectionCount:Number = 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 you put six elements into the array (in Step 7), sectionCount will be equal to 6. You may be wondering why you just didn't manually insert the value 6 here. The reason for using an array is that you can change the elements of the array at any point, and the rest of your code will update automatically to reflect the changes. In this way, you are building a dynamic menu system.

  9. Save your Flash document as menuArray_100.fla. At this point, your Flash document should resemble Figure 26-2.

  10. Now you need to create the menu element that you can use to build a dynamic menu from ActionScript. Create a new Movie Clip symbol by pressing Ctrl+F8 (z+F8). Name this symbol itemClip, and choose the Movie Clip behavior.

  11. Within the timeline of the itemClip symbol, rename Layer 1 to button. On this layer, create or add a Button symbol. In our example, we used the Oval buttons — the blue button from the Ovals folder of the Buttons library (Window ð Other Panels ð Common Libraries ð Buttons). This will be the actual button that appears in the menu. Center your Button instance on the Stage, using the Align panel. In the Property inspector, name the Button instance btClick.

  12. Add a new layer to the itemClip symbol, and name it tLabel. On this layer, create a Dynamic text field that can accommodate the longest name you specified in the sectionNames array. In the Property inspector, give this Dynamic text field the instance name tLabel. Use whatever font face you prefer. Place the text field to the right of the button, as shown in Figure 26-3.

  13. Add another layer to the itemClip symbol, and rename it actions. Select frame 1 of this layer, and in the Actions panel add the following code:

     var tLabel:TextField; var btClick:Button; tLabel.text = labelName; btClick.onRelease = function():Void {    this._parent.targetClip.gotoAndStop(labelName); }; stop(); 

    This code will put the value of a variable named labelName into the tLabel text field. You will see how labelName is declared in Step 18.

    The onRelease() handler for the btClick instance will use the value of a labelName variable as the frame label for the gotoAndStop() action. Notice that you will control the Playhead of a dynamically-assigned timeline, indicated by this._parent.targetClip. This value will be assigned to each menu item with ActionScript in a later step. You will use the itemClip symbol as a prototype for the real buttons in the menu. In the remaining steps of this exercise, you'll create a MovieClip object in ActionScript to hold several instances of the itemClip symbol.

  14. Save your Flash document.

  15. Go back to the Main Timeline (that is, Scene 1). Open the Actions panel for frame 1 of the menu actions layer. Add the following ActionScript to the Script pane, after the existing code:

     var mcMenu:MovieClip = this.createEmptyMovieClip("mcMenu", 1); mcMenu._x = 25; mcMenu._y = 70; 

    This code makes an empty MovieClip instance, named mcMenu, at the first depth slot of the Main Timeline (this). The variable menu returns a reference to the mcMenu instance. In the second and third lines, the X and Y coordinates of the mcMenu instance are set to a position just below the heading artwork on the left side of the Stage.

  16. Once you have created a MovieClip object to contain instances of the itemClip symbol, you're ready to prepare the itemClip symbol for use in ActionScript. In the Library panel (Ctrl+L or z+L), right-click (Control+click on Mac) the itemClip symbol and choose Linkage in the contextual menu. In the Linkage Properties dialog box, select the Export for ActionScript check box, as shown in Figure 26-4. The Identifier field will auto-fill with the symbol's name, itemClip. You can now refer to this identifier in ActionScript to dynamically include the symbol in the Flash movie at run time. Click OK to accept the new linkage parameters.

  17. Select frame 1 of the menu actions layer, and open the Actions panel. Now, you're ready to add the ActionScript code that will dynamically attach several instances of the itemClip symbol to the mcMenu instance created in Step 15. Note that the image from book indicates a continuation of the same line of code; do not insert this character into your actual code.

     for(var i:Number=0; i < sectionCount; i++){   var depthCount:Number = mcMenu.getNextHighestDepth();   var item:MovieClip = mcMenu.attachMovie("itemClip", image from book      "item_" + i, depthCount);   item.labelName = sectionNames[i];   item.targetClip = this;   item._y = i*45; } 

    Tip 

    This code uses the MovieClip object method getNextHighestDepth(), which takes the guesswork out of determining which depth slots are unoccupied with existing elements.

    This code inserts a for loop that will attach the itemClip symbol for each element in the sectionNames array. It will also set the value of labelName in each attached instance (item) to the name of the appropriate section name. Notice that you specify i for the index number of the sectionNames array because the position index of every array starts at 0 — your menu item numbering will also start at 0.

    After an instance is attached for the section name, the targetClip variable (mentioned in Step 13) is set to the current timeline, this. All of your frame labels exist on the Main Timeline, where this code is being invoked.

    You then position the item instance at multiples of 45. The first item is positioned at a Y coordinate of 0 (0 × 45 = 0), the second item is positioned at 45 (1 × 45 = 45), the third item is positioned at 90 (2 × 45 = 90), and so on.

    Tip 

    Be sure to click the Check Syntax icon in the toolbar of the Actions panel to make sure you didn't make a typo in the code. As an alternative, you can press Ctrl+T or z+T while focus is in the Actions panel.

  18. Save your Flash document again, and test it (Ctrl+Enter or z+Enter). Unless you had a syntax error in your ActionScript, you will see a dynamic menu, built by ActionScript (as shown in Figure 26-1). Each menu item has a unique labelName value, which is used in the gotoAndStop() action by each Button instance.

image from book
Figure 26-2: The Main Timeline has frame labels and artwork for each section of the presentation.

image from book
Figure 26-3: The itemClip symbol will be used to create each button in the dynamic menu. Using ActionScript, the tLabel field will be filled with the appropriate section name.

image from book
Figure 26-4: The Linkage Properties dialog box

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

On the CD-ROM 

You will find the completed menuArray_100.fla file in the ch26 folder of this book's CD-ROM.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net