4.6. A Dynamic Navigation Bar

Now it’s time to tie much of this together and create a dynamic navigation bar. This project will create a five-button navigation bar that will be centered on the stage as shown in Figure 4-9. To simulate functionality, each button will trace its name to the Output panel when clicked. Later in the book, you’ll combine additional skills to create a similar navigation bar that will use XML and load external assets.

Figure 4-9. A dynamically generated navigation bar

This script can be found in the dyn_nav_bar.fla source file. Lines 1 and 2 initialize the number of buttons used and the space between each button (in pixels). Line 4 creates a container that will hold not only the buttons, but also background art. The container doesn’t need a timeline, so for efficiency (and practice), a sprite is used rather than a movie clip. Next, line 5 adds the sprite to the display list.

1    var btnNum:int = 5;
2    var spacing:Number = 10;
3
4    var navBar:Sprite = new Sprite();
5    addChild(navBar);

Lines 6 through 15 create the buttons. Line 6 types a variable as SimpleButton, which allows you to use (or create) button symbol instances, rather than relying solely on movie clips. The loop defined in line 7 creates five buttons, based on the value of btnNum assigned in line 1.

6    var btn:SimpleButton;
7    for (var i:int = 0; i < btnNum; i++) {
8        btn = new Btn();
9        btn.name = "button" + i;
10       btn.x = spacing + i * (btn.width + spacing);
11       btn.y = spacing / 2;
12       btn.addEventListener(MouseEvent.CLICK, onTraceName,
13                            false, 0, true);
14        navBar.addChild(btn);
15    }

---

Note:

The SimpleButton class, used to create custom buttons, is so named because a Button class already existed. The latter is used to create instances of the Button component.

---

Each time through the loop, a new button is created from a button symbol in the library with the linkage class, Btn (line 8). The button is given a name by combining the string “button” and the loop counter value (line 9). The first button is called button0, the second is called button1, and so on.

Each button is positioned horizontally (line 10) using the spacing gap set in line 2, plus the width of the button (in this case, 65 pixels) and another spacing gap. Figure 4-10 shows the measurements in use. The first button is positioned only 10 pixels to the right of the container’s edge, while the second button is positioned 85 pixels to the right of the container’s edge. In both cases, the spacing is 10, and the button width (65) plus spacing is 75. So, the first result is 10 plus 0 * (65 + 10), or 10 + 0, or 10. The second result is 10 plus 1 * (65 + 10), or 10 + 75, or 85. This process continues for each button. The vertical position is also set for each button, moving the button down 10 / 2, or 5 pixels.

Figure 4-10. Object positioning in the dynamic navigation bar

The last lines in the loop add a mouse click event listener to the button (line 12) that will call the onTraceName() function when the event is received, and add the button to the navBar parent container (line 14).

16    var bg:MovieClip = new NavBarBack();
17    bg.width = spacing + btnNum * (btn.width + spacing);
18    bg.height = btn.height + spacing;
19    navBar.addChildAt(bg, 0);

Starting with line 15, a background is added to the navBar. Similar to the calculation used to position each button, its width is set to an initial spacing gap plus the total number of buttons times the sum of the button width and spacing (line 16). It’s height is set to the button height plus spacing (line 17). The background is then added to the navBar at position 0, ensuring that it’s placed behind all the buttons (line 18). The result is, no matter how many buttons you need, or what the button size is, the buttons will be spaced uniformly within the background, both horizontally and vertically.

Finally, the last script block positions the finished navBar and creates the listener function. The bar is centered horizontally by subtracting its width from the stage width, and dividing that value by two for a left and right margin (line 19). It is also positioned vertically at a y coordinate of 20 pixels (line 20). The onTraceName() function (lines 22 through 24) traces the name of each button when the user clicks on it.

20    navBar.x = (stage.stageWidth - navBar.width) / 2;
21    navBar.y = 20;
22
23    function onTraceName(evt:MouseEvent):void {
24        trace(evt.target.name);
25    }

This exercise demonstrates how to create a simulated navigation bar using the display list, when no assets previously existed on the stage. Later in the book, you’ll also learn how to create the buttons and draw the background shape entirely with ActionScript, removing the need to precreate these assets as library symbols. You’ll also learn how to create a class-based version of this system to control the playhead of a movie clip (Chapter 6), and load images or SWFs (Chapter 13).

---

Note:

Push Yourself: A bonus file in this chapter’s source archive expands on this example. It’s called dyn_nav_bar_urls.fla and shows how to load web pages based on this dynamic navigation bar example. It uses information explained in Chapter 13, but if you want to learn more at the same time you put this chapter into practice, give the file a look!

---