How to make a complete Flash website navigation system with a built-in preloader for external content — part 3

Making the remaining menu buttons

46. Open the Library by selecting Window > Library. Inside, all the symbols that you have made so far are stored.

47. Find the home button that you have just completed. Right-click on it and select Duplicate from the context menu.

48. In the Duplicate Symbol window that will show up, type in services as the new symbol's name, leave the Button type and click OK.

49. Double-click on the services button symbol's icon in the Library to acces the symbol's timeline.

50. Once inside, unlock the layer label and select the Text tool (T), then click on the text field and replace the text "home" with "services".

Press Esc to exit the text field and center it in relation to the background rectangle if necessary.

51. Lock the layer label and unlock the rollover layer. Go to the Over frame and click on the thin red rectangle to select it. In the Property inspector, change the rectangle's width (the W field found on the left side of the panel) to about 55-60 pixels so that it is a little bit larger than the button's label. Center it.

52. Repeat the steps 47 through 51 three more times, so that you have five buttons in total. Call the remaining three buttons "products", "quality" and "about us", or whatever you deem appropriate for your website.

53. Once you have completed all the buttons, click on the Scene 1 link on the top of your document window, no matter which button you are currently inside in.

Top of page

Finalizing the menu buttons

54. Use the Selection tool (V) to double-click on the menu movie clip to enter inside it. The buttons layer should be unlocked from before.

55. Drag all the four buttons from the Library into the buttons layer and arrange them properly.

56. Select the first button, home. (Click on it once, not twice, because you don't need to enter inside it, just select it.)

57. Go to the Property inspector and find the Instance name option on its left side. Type home_btn inside it and hit Enter to confirm that.

58. Repeat the previous step for all remaining buttons: call them services_btn, products_btn, quality_btn and aboutus_btn.

Top of page

Creating the movie clip for loading information display

59. Lock the buttons layer, then create a new one above it and call it preloader.

60. Using the Rectangle tool (R) draw a 120 by 17 pixel rectangle and place it above the buttons, centered horizontally inside the menu. Fill it with white color, with Alpha set to about 34%.

61. Select the rectangle and press F8 to convert it to a symbol. Choose Movie clip as type, call it loading info display and click OK.

62. With the newly made symbol selected, go to the Property inspector and give the Instance name loadinfo_mc.

63. Double-click the loadinfo_mc movie clip to enter inside it. Call the first layer background and lock it. Create a new layer inside the movie clip and call it text.

64. Select the Text tool (T). Make the following changes and selections in the Property inspector:

1. Change the type of the field to Dynamic text.
2. You can keep the same font as before, so that the menu looks more coherent. If you find a different font that will look even better, go for it :-)!
3. Increase the font size a little bit. The font size I chose for the buttons was 14, and here it is 16.
4. Use the white color for the font, but turn its Alpha to 100%.
5. Select the central alignment.
6. You can keep readability as the Anti-alias option.
7. The Selectable option should stay turned off.
8. Single line, and not multiline should be selected.

65. Click and drag your mouse to create a text field. Press Esc to exit the text field.

66. While the dynamic text field is still selected, go back to the Property inspector and click the Embed buttton.

In the Character Embedding window, select the Numerals option (see 1 below). Then, enter the characters "LOADING", a blank space (that's right, press the space bar too) and the percentage sign: % (see 2) . Click OK.

These are all the characters you need for the loading information that is going to be displayed. You must embed them if you want all the users who will visit your Flash website to see the same font. Because it is highly improbable that every, if not any, user has that nice exotic font you like installed on her machine :-).

Also, the blank space is needed if you want everything to be displayed properly. The information on the rendering of a non-breaking space character is included in every font too. If you don't embed it, Flash will improvise and that won't look as good as it can when it is embedded within the text field.

You can type in lowercase letters if you prefer them for your design. Just be sure to update your ActionScript code later accordingly.

67. Now go to the left side of the Property inspector and assign an Instance name to your dynamic text field, to be able to manipulate it via ActionScript later. Call it infodisplay_txt.

68. Click the appropriate link above the layer to return to the main scene.

69. The menu movie clip should be selected. Go to the Property inspector and assign it the Instance name menu_mc.

Excellent! You have just completed the menu and all the elements of the preloader! Go to the next page to see where to place the content for your Flash website.