In this thoroughly explained, detailed lesson made for Flash 8, I will show you how to create a really cool, complete Flash website navigation and loading system. The menu that you will make has a built-in animated preloader. You will learn:
- How to design a menu with a built-in preloader (a numerical one),
- How to create a preloader animation behind the menu buttons,
- How to create stylish menu buttons,
- How to make ActionScript code that will enable the preloading of external Flash (SWF) content
- How to make a main preloader for the menu system and much more.
This Flash menu/preloader system works seamlessly in the following browsers on a Windows machine: Firefox 2, Internet Explorer 6 and Opera 9. I have yet to test it on a Mac, but I suppose it will work perfectly there too.
Below is an example of the Flash website system that you are going to create. Try clicking the buttons to see what you’ll learn to make!
Creating the base for the menu
1 Open a new Flash document and hit Ctrl+J on your keyboard (or select Modify > Document) to access the Document Properties panel. Change the width of your document to 480 pixels (see 1 in the screenshot below) and change the Frame rate to 30 fps (see 2 below). Click OK.
The change of speed for your movie (frame rate) is necessary to be able to have a smooth animation for the preloader. As for the width of the document, the change has been made just so that you can more easily follow this tutorial. Of course, once you learn how to create the menu with the preloader as explained here, you will be able to apply it to any document, no matter how big or small.
2 Select the Rectangle tool (R). Go over to the Colors area of the Tools panel and select the Stroke color by clicking on the pencil icon (see 1 below). Then click the No color icon (see 2 below). This will enable you to draw a borderless rectangle.
Click on the color square of the Fill color (see 3 below). Select a dark blue color for the fill. You can type the color code directly in the palette that will show up — I selected #203E7A.
3 In the Options area of the Tools panel, make sure that the Object Drawing and Snap to Objects options are turned off, like in the screenshot below. This will enable you to draw freely.
4 Click and drag your mouse on the stage to draw a 480 by 52 pixel rectangle. As you can see, the width of the rectangle is equal to the width of the stage. It isn't easy to match these exact dimensions by drawing freely, so I recommend that you select the rectangle with the Selection tool (V) and then go over to the bottom left part of the Property inspector. There, you will find the input fields for the shape's width and height. Enter the dimensions there manually.
After you have done this, center the rectangle on the stage horizontally and place it on the stage's top. You can do this manually too, by entering zero as the rectangle's X and Y coordinates, as is shown in the screenshot above. Your rectangle should look and be positioned like this at the end:
You will now proceed to make a symbol out of this rectangle — a movie clip that will contain all the elements of both the menu and the preloader.
Creating the white stripes menu background
5 Select the rectangle with the Selection tool (V) and choose Modify > Convert to Symbol. In the Convert to Symbol window, enter menu as the Name (see 1 below). select Movie clip as Type (see 2) and choose the upper left little rectangle as the Registration point (see 3). Click OK.
Selecting this particular Registration point is good if any menu positioning will be made via ActionScript later. Although there won't be such code present in this tutorial, this choice is good for the majority of your Flash projects, so make it a habit.
6 Double-click on the newly created menu movie clip on the stage (do it with the Selection tool) to enter inside it. If you look at the top of your document, above the layers, you can see that Flash always keeps you informed of your current whereabouts. Your inside the menu movie clip symbol now.
7 Call the first layer blue background and lock it. Make a new layer above it and call it stripes.
8 Select the Rectangle tool (R) and change the fill color to any one that is in good contrast with the white document background and the blue rectangle drawn previously. I picked orange. Next, draw a 5 by 48 pixel rectangle anywhere on the stage. You can do this manually the same way you did it for the big blue rectangle in step 4 of this tutorial.
9 Select the Paint Bucket tool (K). Go to the Color Mixer panel — it is usually open by default, if not, simply select Window > Color Mixer to acces it. Select the following options and adjustements (the numbers on the list correspond to those in the screenshot):
- Click on the paint bucket icon to select the Fill color.
- Choose Linear as Type.
- Click and drag the small color rectangle that is on the left side of the gradient strip a little bit towards the center.
- Make sure that the Alpha property (transparency) for this color is set to 100%.
- The rectangle's color should be set to white — the hexadecimal code for it is #FFFFFF.
- Click on the second rectangle and set its color to white too, but change its alpha property to 0% (completely transparent).
Now you have a nice linear gradient that fades from pure white to complete transparency.
10 Still using the Paint bucket tool, press and hold Shift on your keyboard, click somewhere near the bottom of the rectangle that you made in step 8 and start dragging your mouse upwards. When you reach the rectangle's upper edge, release your mouse.
Note: I have zoomed in on the rectangle to be able to work more precisely. The screenshot below shows the filling process while the zoom is set to 200%.
You have successfully filled the rectangle with the linear gradient. But it seems that the rectangle has disappeared completely? No sweat, it is still here, but since the gradient fill is essentially white, this can't be discernible on your document's white background.
11 Select the Selection tool (V). Click and drag on the stage around the area where your rectangle is supposed to be and you'll quickly make it visible.
12 Move the small gradient rectangle and place it over the blue rectangle either by dragging it with the Selection tool (V) or by using the arrow keys on your keyboard.
13 Select the Free Transform tool (Q) and turn on the Snap to Objects option in the Tools panel: 
.
14 The handles for transformation and manipulation should appear on your rectangle if it is still selected. If not, just click on it with the Free Transform tool and they'll show up. Do the following:
- Place your cursor near the upper right handle until you see a circular arrow appear — you can see it in the second image in the sequence below.
- Click and start rotating your mouse clockwise. Your rectangle will begin to snap to precise values — it will do so every 15 degrees. Release your mouse at athe second snap, when the rotation has reached 30 degrees, as seen in the image below.
15 Choose the Selection tool (V) and click on the rotated rectangle to select it. You should place it now near the registration point of the menu movie clip (you're still working inside the menu movie clip, remember), by entering zero as its X coordinate and 11 as its Y coordinate.
16 Now, while it is still selected, copy the rectangle shape by pressing Ctrl+C. Press Ctrl+Shift+V (or select Edit > Paste in Place) to paste the new copy of the rectangle exactly over the original. Don't click anywhere or you'll unselect it and the two shapes will merge. Just follow the next step.
17 Press and hold Shift and click the right arrow key on your keyboard once. This will move the shape by 10 pixels exactly. Release the Shift key. Now press the right arrow key five times. This will move the shape further by 5 pixels. Finally, the copy of the rectangle will be placed at the distance of 15 pixels from the original one.
18 Repeat this process until the white stripes cover the whole of the blue rectangle area. Make sure that there are a few stripes outside the blue area, both on the left and right.
You can make this task easier for yourself by selecting both stripes, then copying, pasting and moving them to the right distance. After that, select the four stripes and so on. This will cut down your copy-paste-move work significantly. Here’s how your final result should look like:
On a sideline note, if you need stripes like these as an image, make sure to check out the great background stripes generator. You may even import the image directly into your Flash file. It will be a little bit heavier, but you will cut down the design time.
OK. You will now learn how to animate the stripes.