Design a reflective site navigation menu in Flash 8

In this lesson you will see how easy it is to create a nice Flash website menu interface and make it work also! Particularly, you will learn how to:

• Create simple buttons and duplicate them,
• Make your link text look crisp and readable,
• Make mirror copies of your buttons easily,
• Design and code a simple navigational system.

In the Flash example below you can see what you are going to create with this tutorial. Try clicking the buttons!

Drawing the gradient sky background

1. Open a new Flash document. Call the first layer sky.

2. Select the Rectangle tool (R). Use only the fill color - go to the colors portion of the Tools panel, click on the pencil icon (see 1 below) and then the small square with the red line (see 2 below).

3. Draw a borderless rectangle wider than the stage, and about 70 pixels high.

4. If the rectangle is selected, unselect it by clicking anywhere outside it with the Selection tool (V).

Go to the Color mixer panel (Window > Color Mixer). In the upper right part of this panel, select Linear as type of fill.

In the bottom, a color stripe will appear. Click on the small right rectangle and enter the #B6E2FA as color code in the appropriate field. Then click on the right rectangle and enter #78B0E9. The alpha (transparency) properties for both colors should be set to 100%.

5. Select the Paint Bucket tool (K). Click with your mouse on the top of the rectangle and start dragging it diagonally to create a nice diagonal linear gradient fill.

Creating the menu buttons

6. Lock the sky layer. Create a new layer and call it menu.

7. Select the Rectangle tool (R). Go to the Properties panel. Set the outline color to a light gray hue, and the fill color to a dark blue one. You can see the colors I used in the image below. Also, set the thickness of the outline to hairline.

8. Draw a 90 by 30 pixel rectangle, over the sky background, near the left edge of the stage.

To have the exact dimensions of the rectangle (because it's difficult to get them when drawing by hand), double click on the rectangle's inside (fill) with the Selection tool (V). After you did this, both the outline and the fill will be selected.

Go to the left side of the Properties panel and you'll see the the W (width) and H (height) fields there. Just enter the dimensions for your rectangle manually and hit Enter to confirm. Make sure that the little padlock icon on the left is unlocked so that you can enter the width and height values independently from one another.

Also, make sure that the position (coordinates on the stage) of the rectangle (the X and Y fields) is set to round numbers. There must be a zero at the end, not any other number.

Why is this necessary? Because when you are drawing precise graphics (like the hairline outline of the rectangle) or using bitmap fonts, crisp pictures, and so on, you must set their coordinates to round numbers. Otherwise you will get blurry and messy results in your SWF movie.

9. Select your rectangle on the stage once again (both the outline and the fill).

Press F8 (or select Modify > Convert to Symbol). In the dialog window that shows up, select Button as type and call it home button. Click OK.

You will see that the rectangle has changed - it is now a button symbol. The small circle in its middle is it's registration point. This point is relevant when making changes and issuing commands to the button via ActionScript. For example, when you want to move the button programatically, this point's coordinates are taken as button's position.

10. Double-click with the Selection tool (V) on your newly made button to enter inside it. You know that you are inside the button if you look above the layers - the indication is there.

11. Call the first layer inside your button symbol rectangle. Lock this layer. Make a new layer and call it text.

12. Select the Text tool (T). In the Properties panel, select static as type of text.

REMEMBER Static text is used for text that will not change, unlike the dynamic or input text field types. The important thing here is to know that you can choose whatever font you like, because this kind of text field will be seen exactly the same by all users who are viewing your flash movie (or site), regardless if they are having that particular font installed on their computer or not. So you are free to choose any font you like, and that font will become embedded in your flash movie.

Choose a font you like. Make its size 12 or so. Select white as color, to make it stand out from the blue rectangle background. In the menu below the font size and color options, select "Anti-alias for readability". This will make your link text look sharp.

13. Click with the Text tool somewhere inside the blue rectangle area and type "Home".

14. Open up the Align panel (Window > Align). With the link text you just typed still selected, turn on the "Align to Stage" button (see 1 marked on the picture below).

Align the text horizontally (2) and vertically (3) inside the button. So, since the "Align to Stage" button is turned on and you are working inside the button, the text field will be centered in relation to the button's central point. If you're interested, I made a separate tutorial on the use of the Align panel.

15. However, there are still manual changes that need to be made. To ensure that your text renders correctly, without any blurry parts, to make it more readable, go once again to the Properties panel and set its position (coordinates) to round numbers.

If the last number in the X an Y fields is equal or above 5 (like 18.9 in the picture above), round the whole number to the upper value. If it is below 5, round it to the lower value. For example, if it is 14.3, round it to 14.0, and if it's 14.5 or 14.8, round it to 15.0.

Once you have done this, if your text isn't centered in relation to the blue rectangle below it, position it with arrow keys on your keybourd. Just press the up or down (or left and right if needed) key - this will move your link text by 1 pixel, and it will stay on round coordinates.

16. One last thing before you move on: be sure that the "Selectable" option is turned off. Check if this is so in the options for your text field below the scene.

Why is this necessary? If you have this option turned on, once a user moves her mouse over the button, the cursor for selecting text will appear, instead of the hand cursor. In addition to the fact that this sucks (a text selecting mouse cursor appearing over a button definitely does), your button may even not function at all!

Turn this option on only intentionally - for example, when you want your users to be able to select a piece of text on your flash site, like your address, etc.

17. Click on the "Scene 1" link above the layers to return to the main scene.

There! The button is finished. Making the other buttons will be easy now.

Duplicating the other menu buttons from the existing one

18. Open the Library (Window > Library). Right-click on the home button symbol and select "Duplicate" from the menu that appears.

19. Call the new symbol gallery button and click OK.

20. Double-click on the newly created gallery button symbol in the Library to enter inside it.

Click on the link label text field to edit it. You can do this by double-clicking with the Selection tool (V), or by clicking once with the Text tool (T). Write "Gallery" (without the quotation marks, of course). Press Esc to exit the text editing mode.

Use the left arrow and right arrow keys if necessary to center the link label inside the button.

21. Go back to the Library and repeat steps 18 through 20. Make three more button symbols. Call them music button, links button and contact button. Change their labels accordingly.

You don't need to return to the main scene to do this. Just duplicate them inside the Library, double-click on each one of them, change the text and center it. When finished with all the buttons, return to the main scene. You will have five different buttons for your menu in the Library.

Placing the site menu on the stage

22. Choose the Selection tool (V). Click once on the home button to select it.

Press Ctrl+C (Cmd+C on a Mac) to copy this button. Press Ctrl+Shift+V (Cmd+Shift+V on a Mac) to paste this button in place, exactly over the original one.

Now don't click anywhere and don't select any other tool. It may seem that you have just one button on the scene right now, but there are two. They are placed exactly one over the another (thanks to the Paste in Place command).

Just press and hold Shift on your keyboard and while holding it, press the right arrow key to move the copy of the button horizontally. Each time you press the right arrow key, you will move the button by exactly 10 pixels. Press the key 10 times to move the button exactly by 100 pixels to the right.

If you had pressed just the arrow key without holding shift, you would have moved your button by 1 pixel at time. This comes in handy when you must design a precise layout.

23. Repeat the previous step by copying and pasting in place the second button and moving it 100 pixels to the right. Do this two more times to have five buttons in all on the scene.

Finalizing the site menu by swapping the button symbols

You will see now how easy it is to place every menu button in its right place. I love Flash! It is wonderful and really easy to work with :)

24. Click once with the Selection tool (B) on the second button from the left. Go to the Properties panel and press the "Swap" button.

25. In the window that appears, select gallery button and click OK.

Repeat this procedure 3 more times for each of the remaining buttons. In the end, you will have all the particular buttons required for your flash website menu on the stage.

27. Copy the buttons (Ctrl+C) and paste them in place (Ctrl+Shift+V).

28. While holding Shift press the down arrow 3 times to move the copies down 30 pixels from the original symbols.

Release the Shift key and press only the down arrow key five times. You have moved your button copies exactly 35 pixels downwards.

If you followed the dimensions I gave you at the outset of this tutorial for creating your buttons, the copies will be now spaced just a few pixels from the originals. This will make for a nice and more realistic mirror reflection effect. Also, you don't want to move your mirrored buttons too far from the real menu, to save space.

29. Keep the copies you just moved down selected. Select Modify > Transform > Flip Vertical.

You have just made a mirror reflection of the menu. Now ain't that easy? Sure it is :) But let's give it a more realistic look.

30. You must have your reflection buttons still selected. In the Properties panel, click on the Filters tab (1 in the image below).

Then click on the little blue plus icon (2) and select the "Adjust color" blending filter. The controls for adjusting the colors of your buttons will appear.

By dragging their respective sliders to the left, set the Brightness to -18 and Saturation to -36. Or just enter these values manually in the appropriate fields. Leave the other two values (Contrast and Hue) at zero.

31. Click on the Properties tab (right next to the Filters tab you clicked in the previous step). Select Alpha from the Color menu and set it to 41%.

32. Lock the current (menu) layer. Create a new layer between the two existing ones and call it blue background.

You will draw a blue gradient here. This will make your navigational header look more realistic and beautiful. Since you already have a sky-like graphic behind your menu, it makes sense to create a reflection of it too.

33. Select the Rectangle tool (R). Block the outline color and select a fill color that is in good contrast with the existing graphical elements. You are doing this only to draw and position your rectangle more easily. You will change its color to a gradient later.

Draw a rectangle that 48 pixels high. The width isn't important - only make it the same size as the scene or wider than that.

It is important to place the rectangle so that its upper edge is between the real buttons and their reflections.

Unselect the rectangle by clicking on an empty part of the scene with the Selection tool (V).

34. Go to the Color Mixer panel, click on the paint bucket icon to adjust the fill color (and not the outline - the pencil icon - just in case it is selected by default). Select Linear as fill type. Make the following choices for your gradient:

The first color (little square on the left) should be set to #B6E2FA and the second to #78B0E9. Leave the alphas for both colors at 100%. Leave the left color on the gradient's left edge and move the right one a little bit inside (just click on the quare and drag it).

This gradient is just a little bit different from the one you made in step 4.

35. Select the Paint bucket tool (K), click on the rectangle's bottom edge and start dragging upwards to make a vertical fill. In this way, the darker color will be at the top.

You don't have to make the exact mirror copy of the sky beneath the menu buttons. What you're making now will look very nice and interesting.

36. Select the rectangle and copy it (Ctrl+C). Lock the current layer (blue background).

37. Make a new layer above all the existing ones and call it overlay.

38. Paste in place (Ctrl+Shift+V) here the rectangle you just copied.

39. Go back to the Color Mixer panel and make the following gradient: you must have four color squares. Add a color square just by clicking anywhere between the two existing ones.

All the squares should have their color set to pure white (#FFFFFF). But their alphas should have the following percentage values (from left to right): 100, 79, 50 and 28.

Drag the squares so that they look like shown on the image below.

Lock this layer.

Now isn't this a nice menu with its mirror reflection below it? Sure it is :)

Before making your menu functional via ActionScript, you must first make place for the different sections of your site, which is exactly what you will do in the next few steps. Onward!

Setting up the navigation system for your Flash website

40. Make a new layer on top of the existing layers and name it site content.

41. Right-click on frame 5 of the newly made layer and select Insert Keyframe from the menu.

42. Draw any kind of content here. Paint something with a brush, make a circle, anything at all. This is just temporary dummy content. Don't lose time on making real content now, you will do it later. Follow through to the end of this lesson, it is easy to make changes later.

43. Repeat the previous step 3 more times: right-click on frames 10, 15 and 20, select Insert Keyframe from the menu and insert some kind of dummy content there.

You can draw over the existing content or erase it and make something new. I am telling you this because when you insert a keyframe into a layer, Flash automatically copies the content from the previous one, if there existed something.

44. When finished, go back to the first keyframe of this (site content) layer by clicking on it (standard left mouse click). Create some content here too. Write "home" or draw a house :)

Your timeline should now look like the one shown on the image below.

45. Lock this layer and make a new one above it and name it labels.

46. Click on the first (and only, so far) keyframe of the labels layer to select it. Go to the Properties panel - you'll find the "Frame label" input field on its left side.

Click inside it, type home and hit Enter to confirm.

47. Still in the same layer, right-click on frame 5 and select Insert Keyframe from the menu. Do this again for frames 10, 15 and 20. Your upper two layers should have keyframes in exactly the same places.

48. Click on the frame number 5 to select it. Go again to the Properties panel and give it a name: gallery. Repeat this for the remaining three keyframes (10, 15 and 20): call them music, links and contact, respectively. All these frame labels will be visible on the timeline.

Lock this layer.

49. Right-click on frame 20 of the overlay layer and select "Insert Frame" from the menu (not Insert Keyframe).

This will make this layer's content appear throughout your flash site. If you don't this, these contents will only be visible on the first keyframe, at the beginning.

And of course, all the other menu elements must be visible throughout the timeline. So make this for each of the remaining layers: menu, blue background and sky.

Below you can see the final look of the timeline.

Now that the site's navigation system is in place, you will name your buttons (all of them) so that you can issue them commands programatically later.

Naming the menu buttons

50. Unlock the menu layer. Select the Selection tool (V). Click somewhere on stage to unselect anything and everything that might be selected.

51. Click on the first button on the menu from the left to select it (the Home button). Don't click it's reflection.Go to the Properties panel, and enter its Instance name in the appropriate field: call it homeBtn. Hit Enter to confirm.

52. Repeat the procedure from the previous step for each one of the menu buttons: call them galleryBtn, musicBtn, linksBtn and contactBtn, respectively.

The Instance names make possible to control your buttons via ActionScript.

IMPORTANT You must always give unique names to your buttons, keyframe labels and movie clips. You can't have two objects in your Flash movie which have the same name. That's why you had to call the first keyframe home and its corresponding button homeBtn. Also, remember that ActionScript is a case-sensitive programming language. If you called your button galleryBtn and later typed it as gallerybtn in your ActionScript code, your button will not function because those are two different Instance names. So, keep track of your Instance names and always type them in your code exactly as you have when you named your objects.

53. Now, select the first mirror button - the reflection of the home button (the first from left in the second row). Give it an Instance name - call it homeBtn1.

Why give Instance names to these mirror buttons? Well, precisely because their purpose is to serve only as visual elements - mirrored reflections of real menu buttons. If you left them like this, when a user moved his mouse over them, the hand cursor would have appeared. This would create a really inappropriate confusion. You must always be user-friendly! So, you are naming these mirrored buttons to turn them off later via ActionScript. Once you are going to do that, they won't function anymore, and will just be graphical elements, which is what you want to accomplish!

54. Give Instance names to all the other mirrored menu buttons: call them galleryBtn1, musicBtn1, linksBtn1 and contactBtn1.

Writing the ActionScript code that powers the menu and the website navigation system

55. Lock this (menu) layer. Create a new layer above all the others and call it actions.

56. Click on the first (and only) keyframe of the new actions layer to select it.

57. Open up the Actions panel (Window > Actions). Write the following line of code inside:

stop();

This simple command stops your movie from going on and looping endlessly.

Now, I want you to do a little test. Test your movie (Control > Test Movie). Move your mouse accross the buttons and their reflections (mirrored buttons). As you can see, the hand cursor will appear over both the menu and its mirror image. And you don't want that, so now I am going to show you how simply it is to disable these buttons.

58. Write this piece of ActionScript just below the first line you entered in the previous step:

homeBtn1.enabled = false;
galleryBtn1.enabled = false;
musicBtn1.enabled = false;
linksBtn1.enabled = false;
contactBtn1.enabled = false;

Test your movie again (Ctrl+Enter on a PC, Cmd+Enter on a Mac). Move your mouse over the reflection buttons. As you can see, there's only the standard arrow cursor now - the hand cursor doesn't appear anymore. You can even try clicking on them - nothing will happen.

Yep, it is that simple! The enabled property of the button symbol can have two values: true or false. By default, it is set to true. So when you set it to false, the button is visible, but doesn't function any more - it cannot be clicked, even if you tell it to do so via ActionScript. The button stays disabled until its enabled property is set to true again (of course, you'll leave it at false for the reflected buttons).

59. Append your code with the following lines (again, just put it after the existing code):

homeBtn.onRelease = function():Void {
gotoAndStop("home");
}
galleryBtn.onRelease = function():Void {
gotoAndStop("gallery");
}
musicBtn.onRelease = function():Void {
gotoAndStop("music");
}
linksBtn.onRelease = function():Void {
gotoAndStop("links");
}
contactBtn.onRelease = function():Void {
gotoAndStop("contact");
}

Test your movie (Ctrl+Enter). If you did everything exactly as i wrote up to this point, you should be able to navigate your site. Click on the menu buttons and see for yourself! Easy navigation, isn't it?

Explaining the ActionScript behind the site menu buttons

First, I want to explain you why you named the frames. Using frame labels (like gallery for example) instead of a frame number (5) has one practical benefit:

If you ever change your site contents by moving the keyframes or inserting new ones, all you have to do is move the frames with labels so that thay stay above their corresponding content keyframes. There is no need to go back to your ActionScript code and rewrite or change the numbers.

Now let's see how the code for the buttons works. I will explain the code functionality just for one of the menu buttons, because they are basically all the same - only the button Instance name and the frame label change.

homeBtn.onRelease = function():Void {
gotoAndStop("home");
}

The first line,

homeBtn.onRelease = function():Void {

says that a function is assigned the onRelease event for the homeBtn button. The onRelease event happens when a user clicks and releases his mouse over the button.

If you want you can put the onPress event here instead, that happens immediately when a user has just pressed his mouse over the button. But that event is more likely to be used in games, when something has to happen immediately when the mouse has been pressed - like a spaceship shooting, for example. I like to assign the "standard" (onRelease) click for the buttons, menus and various other kinds of website interfaces.

So, once the onRelease event has happened, a function gets executed. You certainly noticed the :Void keyword after the function() keyword. This means that the function in question does not return a value. In many cases, a function in ActionScript has to return a value. Look at this example:

function mySum():Number {
var a:Number = 3;
var b:Number = 4;
var sum:Number = a+b;
return sum;
}

This function calculates a sum of two variables' values. The last line tells to return the value of sum to whatever object that called the function. So that's why the :Number keyword after the function's name. It states that the value returned by this particular function will be a numerical one and not a text value or any other.

So, in the case of your menu button, the type of value that the function returns is Void. This means nothing, zero - the function does not return any value, it just serves to advance the playhead to a particular frame on the timeline.

And just what is it that gets run when the function is executed? Everything between its curly braces - { and }. Here it's about just one line of code:

gotoAndStop("home");

This line tells Flash to jump to the frame which is labelled home and stay there. That's all there is! Simple! Just one more thing, however: if you wanted to insert a frame number instead of a frame label here, you must do it without the quotation marks. Like this:

gotoAndStop(1);

Fine. Before wrapping this tutorial up, just read some advice below.

A little bit about site navigation and usability

You have seen how to make a slick menu. However, always keep in mind your site (or your client's site) users. The user is king. If a site happens to be difficult to navigate and counter-intuitive, the most beautiful and appealing graphics and design won't help.

In fact, what is often overlooked, is that the design inolves thinking and responding to your users' needs. Make a button look like a button - this doesn't mean it has to look ugly or too similar to a real-world button. There many, many examples of beautifully designed navigation interfaces and menus who are also intuitive and easy to use.

You know that the reflection buttons you made in this lesson are real button symbols. The user sees them as a nice graphic element only, which is exactly how it should be.

Usabilty is a science in itself, that applies equally to HTML and Flash websites. HTML is simple, and yet there are many things you have to think about when building such a site. When confronted with all the powerful and rich possibilities that Flash has to offer, this just gets more complicated. When you have a myriad of possibilites for design and developement, don't get overwhelmed and think that you must try and implement every single great gizmo in your Flash website. Be nice to your users and they'll like your site :)

NOTE: You can download the source files for this lesson below. The second link is for downloading the example which has animated clouds running in the menu background!

Download the zipped source FLA file for this lesson.