Create a Glossy Animated Navigation Bar Using Photoshop and Flash

In this tutorial, you'll learn how to design and create a glassy navigation bar in Photoshop, and then animate it using Macromedia Flash. Click here to see the animated navigation bar.

Part One: Designing the navigation in Adobe Photoshop

Step One: Creating a new document

Create a new Photoshop document with a width of 800px and a height of 40px. Make the background transparent.

Step Two: The Gradient

Fill the first layer with white. Right-click (Mac control-click) on Layer 1 on the layers palette and select Blending Options.

Select Gradient Overlay (2nd from bottom). You can use any colors you want for this. I'm replacing the black and white with these colors:
Black: #1b9417
White: #69c61b

Step Three: Applying the glassy look

Create a new layer (Ctrl+Shift+Alt+N) and set its blending mode to 'Soft Light', and the opacity to 50%.

Draw a white rectangle on this layer at the top of the document that goes a bit past the middle. You should now have this:

Step Four: Adding text

Select the text tool (T). Select the font you'd like to use for the navigation. I'm going to use Franklin Gothic Demi at a size of 18px. If you'd like to get the Apple/Mac look, you can use Myriad Pro, which is what they use, or Tahoma, which is pretty similar to Myriad Pro.

Place your text area on the bar and type 'Home' (or whatever you want first). It doesn't matter if it's positioned correctly - we'll fix that soon. Proceed to type the rest of your page names. I'm going to use 20 spaces between each page name. When you're finished, hold in the Control key and use the arrow keys to set the text at the bottom of the glassy bar. Then select the Move tool (V) and hit Ctrl+A to select the entire document. At the top of the screen on the Tool Options bar, click the Horizontal Center button (see below).

Step Five: Text Reflection

This step is optional, but it adds a nice effect to your navigation bar. Duplicate the text layer (Ctrl+J). On the layers palette, right-click (Mac control-click) on the upper duplicated text layer. Select 'Rasterize Type'.

Next, go to Edit>Transform, and select 'Rotate 180°', then go back to Edit>Transform and select 'Flip Horizontal'. Hold down the Control key and use the arrow keys to move the text down. There should be no space between the top text and the upside-down text.

To fade the reflection, enter Quick Mask Mode (Q). Now select the gradient tool, making sure that the foreground color is set to black and the background color is set to white. With the Gradient tool, drag the line from the bottom of the image to the top. Then hit Q again to exit Quick Mask Mode. You should now see a selection. Finally, inverse the selection (Ctrl+Shift+I), make sure that the top of the selection is at the top of the rotated text, and press the delete button.

Step Six: Preparing the Image for Macromedia Flash

If you are planning to animate the navigation bar in Flash, you'll need to use this step. Merge all your layers using this way: Right-click (Mac control-click) on the bottom layer and select 'Merge Visible'. You should now only have one layer. Create a new layer (Ctrl+Shift+Alt+N). Using the black line tool, draw a straight line about halfway between each page name (see below). It doesn't have to be perfect, because it really won't matter much.

Go back to the layer with the navigation bar on it. Using the Rectangular Selection Tool (M), select each section, copy and paste then into new documents (Ctrl+C, Ctrl+N, Enter, Ctrl+V), and save them as .JPGS at 10-12 quality in somewhere easy to access (your Desktop is the best).

Part Two: Adding the animation in Macromedia Flash

Step One: Creating a new document and importing the images

Create a new Flash file with a width of 800px and a height of 40px (or whatever size your navigation bar is). Change the frame rate to 30fps. Now name the first layer 'Buttons'.

Import your sections into Flash by pressing Ctrl+R, and then moving the images to their correct positions. When finished, your navigation bar should look just like it did in Photoshop, without any spaces between the images.

Step Two: Creating and linking the buttons

Right-click (Mac control-click) on each image and select 'Convert to Symbol'. Select Button, and name it the same thing the image you're converting says (Home, Forums, etc.).

Select the first Button and open up the Actions panel (F9). This is where you'll put the ActionScript to link the buttons. Add the following code:

If you want your link to open up in a new window, simply add "_blank" and seperate the two with a comma:

Do this for each Button.

Step Three: Adding the animation

Zoom into 400%. On a new layer (in Flash this time) named 'arrow', create a small arrow using the line tool, using these settings (I'd draw it above one of the buttons so you know how big to make it):

Now, draw your arrow. Make sure that all the corners meet correctly and the sides aren't lopsided (Tip: Hold in the Shift key to draw straight lines). It may take you a few tries to get it right. When you're finished with that, fill the arrow with black (or whatever color you choose).

Right-click (Mac control-click) on the arrow and select 'Convert to Symbol'. Make it a Movie Clip and name it 'arrow'. Click OK, then make the Movie Clip's Instance name 'arrow'.

Create a new layer and name it 'actions'. Here is where you'll add the ActionScript to the arrow. Open up the Actions panel (F9), and paste the following lines of code there:

Here's what this ActionScript does:

An easy one - this one tells how fast the arrow follows the cursor. You can play around with the speed - I like nine the best. It has a nice, soft feel.

This sets the amount of time between when the cursor moves and when the arrow starts to move. Again, 30 keeps the softer feel. I wouldn't go any higher - then it starts to get choppy.

This just tells what will be triggering the movement of the arrow.

Since we named the Instance name of our arrow 'arrow', we put arrow._x, which tells that the arrow will move along the X axis. _x = speed* adds the .9 speed that we set above. (arrow._x-_xmouse)+_xmouse; just says that the arrow will stay on the X axis when the mouse moves.

If you want the arrow to follow the cursor on a vertical axis, just change all the 'x's to 'y's.

Save your work, then preview it by pressing Control+Enter. You should have this.

To publish your work, go to File>Publish Settings, check what you would like, and hit Publish. Your published files will be wherever you originally saved your work.

If you are having problems, you can download the source file here.