Navigation Bar | Flash 3D Cheats Most Wanted

Let's look at how 3D can be useful in Flash navigation. You'll create a simple navigation bar where the buttons look as though they can be physically pushed down. You'll take a look at how the shadow really convinces you that the button is indeed down as opposed to up. Although this is a simple navigation bar, explaining how to create it can get tricky. Read closely and dig in:

Open a new Flash document. The stage size is not really important for this demonstration, but you will need to adjust your frame rate to 31 fps ”this is a workaround to ensure that both PCs and Macs will play back at the intended frame rate (in previous versions of Flash, if the frame rate was set to 30, then it would play back at 21 to 24 fps on a Mac).
Create seven layers and name them as shown at right.
In the outline layer, create a frame for your navigation bar with the Rectangle Tool. Hide the fill, make the stroke black, and make sure the weight of the stroke is set to 2. Drag out a rectangular outline of 464x21 pixels, and then center it on the stage:
Next , build one of the buttons. Create a new movie clip ( Insert > New Symbol ... or CTRL/CMD+F8) and call it button1. Make four layers inside this clip labeled as shown below:
In the background layer, create a black rectangle that is 9321 pixels. Make sure that it is centered within the movie clip:
The main button needs to be created next. Create a new movie clip (CTRL/CMD+F8) and call it button_graphic . Make two layers in this movie clip and call the bottom layer bottom and the top layer (yep ”you guessed it) top. With the top layer selected, drag out a rectangle that is 89x17 pixels. Fill the rectangle with a gradient pattern as shown at right.

The colors from left to right are as follows : #D5D5D5, #C7C7C7, and #626262 .
Now select the Fill Transform Tool and rotate the gradient to match the following:
For the beveled edge, create a rectangle 9321 pixels in size in the bottom layer, centered on the stage. You will need to select different parts of this rectangle and colorize them like this (light: #E6E6E6 , dark: #333333 ):

We've found that using the Line Tool to cut the rectangle so we can select the different sections is easiest . Be sure to set the line weight to Hairline. With the line drawn out, you can select the different sections and color them accordingly . After you are finished, be sure to select and delete the lines.
Now that you have the main part of the button complete, edit the button1 movie clip located in the Library. Drag the main_button movie clip into the main button layer in the button movie clip. Make sure the button_graphic is centered on the button1 stage.
You will now create the down movement of the button. Still editing button1, on the main button layer create a keyframe on frames 4 and 8. Select button_graphic in the fourth frame, resize it to 98% x 86%, and move it approximately to the x position -44 and y position -8 . It should look something like the image at right:
Finally, for this down state you need to add a darker tint to the button to indicate that it is being pushed down, creating a sort of shadow. So with the button in the fourth keyframe selected, choose Tint from the Property Inspector and give it the color #ACA899:

As usual, we like to tweak things until we feel comfortable with them. This being the case, we wanted to change the color of the button's up state. Select the button in frame 1 and tint it with the color #ECE9D8. Do the same for the button in frame 8 ”this keyframe should be a duplicate of the first so no change is needed. Now create a motion tween ( Insert > Create Motion Tween ) between each keyframe in the main button layer.
Next you will create the label. In the layer named label in the first frame, select the Text Tool (T). We chose Arial Black with a point size of 11 and the color black (of course, you can choose any font you like). Type Button One , or whatever you want, and make sure that the text is centered. Next, make the text a movie clip (F8) and call it button1_text . Again, create keyframes in frames 4 and 8.
Back in frame 1, with your new button1_text movie clip selected, apply a tint to the movie clip with the color #666666 (dark gray). Do the same in the frame 8, but leave frame 4 as it is ”no tint, just black. In frame 4, resize button1_text to 98% and move it to where it is centered with the main button but more toward the bottom of the button, as shown at right.
Now tween all the frames in the labels .layer. In the actions layer put stop commands ( stop() ; ) in frames 1, 2, and 4. You should now have the button ready to go. If you scrub the timeline back and forth, you should see the button basically looks like it's moving up and down.
Next, you need to create five more of these buttons, all with different names and different labels. The best way to do this is to open the Library and duplicate button1 , calling it button2 , and so on until you have five different button movie clips. You will need to do the same for the label movie clips, button1_text, button2_text , and so on. For reference, at right are the contents of our Library (F11) at this point. Edit each button and each text label accordingly.
Back on the root timeline ( Scene 1 ), add each of the buttons from the Library into its respective layer, button2, button3, and so on, to the stage. Place each button side by side, 1 through 5:

At this point, you can label each button so that you will be able to control each button separately with some simple ActionScript. Select the first button and in the Property Inspector give it an instance name of button1. Now select all of the other buttons and name them accordingly (as shown above): button2, button3, button4, and button5 .
You're nearly finished now ”you just need to add a hidden button that will control the timeline of each navigation button so you can manage the push down effect you've created. In the hidden_button layer drag out a rectangle 93x21 pixels. With the rectangle selected, make it a button (F8) and name it (you guessed it) hidden_button . Edit this button and move the rectangle from frame 1 to frame 4 (the Hit state frame). Navigate back to the root timeline, Scene 1 .
You should notice that your button is now a greenish-blue. That indicates that it is a hot spot and you can now add actions to the button. Copy and paste hidden_button four times on the layer hidden button and move them directly over the other buttons below it.

On the hidden buttons, you need to add the ActionScript that controls the movement of each button. Select the first hidden button and place the following code in the Actions panel (F9):

In the code, button1 is the reference to your movie clip button (remember, you gave it this instance name in Step 16). For the other four hidden buttons, copy this code and place it on the button. For each button, you will need to replace the button1 reference with the name of the button the code is to control. For example, when you copy this code on the second hidden button, the hidden button that controls button2 , the code will look like this:
```
 on (rollover) {     button2.gotoAndStop(2);   }   on (rollOut) {     button2.gotoAndStop(1);   }   on (press) {     button2.gotoAndPlay(3);   }   on (release){     button2.gotoAndPlay(5);   } 
```
Continue with the rest of the buttons, modifying the code as needed.

The finished effect, nav_bar.fla , can be found with this chapter's sample files. On testing your navigation bar movie (CTRL/CMD+ENTER), you should have a set of buttons that appear darker when they are pushed down:

Several concepts about light and shadow are in use here. The highlight around the button in its up state tells you where the light is coming from (the top left). When the button is pressed, it gets darker, denoting that it is below the area that light can reach, which further emphasizes the idea that it is being depressed. The black around the button, once the button is pushed down, also tells you that this is an area that light cannot reach, and the overall effect is of a believable 3D navigation bar.