Making a Flash website menu with a preloader for external sections – part 2 of 4
This is the second part of the lesson on creating a Flash menu system with loader for external content.
Animating the white rectangular stripes
19 Use the Selection tool (V) to select all the stripes. Just click and drag to encompass all of them.
20 Select Modify > Convert to Symbol (shortcut key: F8). The symbol should be a Movie clip and the registration point the same as before. Call this movie clip stripes and click OK.
21 Right-click on frame 23 in the blue background layer and select Insert Frame from the context menu.
The context menu is the one that appears when you right-click anywhere in Flash, and has different options depending on where you clicked.
Your timeline should now look like this:
Why was this made? Because the blue background layer should last as long as the animation, which you are going to make now.
22 In the stripes layer, right-click on frame 23 and select Insert Keyframe from the context menu.
In the previous step, you have inserted a frame, because you just prolonged the duration of the background — the time span during which it is visible. Here, you are inserting a keyframe because you are going to animate the stripes. So, whenever a change must occur in the timeline, a keyframe is being inserted.
Here’s how your timeline should look like now:
23 You will now move the stripes movie clip in this keyframe. Select the stripes movie clip by clicking on it once with the Selection tool (V).
Move the stripes movie clip 14 pixels to the right either by pressing the right arrow key fourteen times or by holding Shift, clicking the right arrow key once and then releasing Shift and pressing the right arrow key four times.
You can also do this by entering the right coordinates in the Property inspector. The initial horizontal position (its X coordinate) of the stripes movie clip in my case was -60, so the new one is -46. This may differ for you, depending on the width of your stripes movie clip. The important thing is to move it by 14 pixels to the right.
24 Now right-click anywhere between the two keyframes on the stripes layer and select Create Motion Tween from the context menu.
Your timeline should now look like this:
25 Test your movie by selecting Control > Test Movie or pressing Ctrl+Enter. You should have a seamless animation. Below is the example which shows the animated stripes moving properly and also how they look like when the animation isn’t done correctly.
In the example where the animation is flawed, the stripes “jump” just because they were moved only 12 pixels to the right instead of 14. Yes, even a pixel or two make a huge difference when delicate and precise animations in Flash are being created.
So, if you happen to have the same “jump” in the animation as the example shows, just move your stripes movie clip in the 23 frame by 1 pixel either to the left or to the right and then test your movie again. If the animation plays even worse then before, then you must move the movie clip in the opposite direction. Play around with it until you get it right.
Also, remember that the 14 pixels by which the movie clip was moved in this example isn’t an absolute value. This is just fine for this animation. You will create many more animations in your Flash explorations and work, which will all have different settings and parameters that you will need to tinker with to get them right. That’s the beauty of learning and working — everything becomes easier with more practice and each time you learn something new :).
Masking the animation
The stripes’ animation that indicates some content is loading is fine in this example — it does not spill over the visible edges of the menu. But what if the menu were smaller than the stage or if you had some colored background for your movie? Then the stripes would protrude from the menu and that would look bad. There is a really simple solution that will ensure that the stripes stay visible only inside the blue background area — a mask.
26 Lock the stripes layer and unlock the blue background layer.
27 Click on the big blue rectangle with the Selection tool (V) to select it. Then press Ctrl+C to copy it.
28 Lock the blue background layer. Make a new layer above the stripes layer and call it mask.
As you can see, a frame has automatically been added to frame 23 of the new layer, to last as long as the ones below it. This is exactly what you need, because the lifespan of the mask in the timeline must be exactly long as the content below it that is going to be masked — the stripes animation in this case.
29 Select Edit > Paste in Place to paste in place the big blue rectangle here.
If you want, you can change the color of the rectangle in the mask layer, just so that you know this is the mask and not the blue background when editing or modifying your Flash document later. You can do this without any worries, because a mask is invisible.
30 Lock the mask layer. Next, right-click on it and select Mask from the context menu.
As you can see on the screenshot below, the stripes layer has automatically become the masked one. The two green icons indicate the mask and the maskee.
You can test your movie if you want now (Ctrl+Enter). You will not see an apparent change. But, as I said, if you had a dark background for your movie, the stripes would not be seen outside the menu, thanks to the mask.
Making the buttons for the menu
31 Make a new layer and call it buttons.
32 Select the Rectangle tool (R). Draw a 88 by 22 pixel borderless rectangle. As you know by now, you can set these dimensions directly in the Property inspector. Use any color you like for the fill, for now.
I have hidden the mask and stripes layers so that I can work more easily, and I recommend that you do the same until you have finished creating this button.
33 Select the Paint bucket tool (K) and go to the Color Mixer panel. You will make a linear gradient now, following the same procedure described in step 9 of this tutorial. Choose the Linear type for the fill, like you did before.
Select a hue of yellow for the color on the left (I used #FFDA39) and an orange hue for the color on the right side of the linear gradient (my choice was #F49302). Both color should have their Alpha properties set to 100% (complete opaqueness). These colors will make an excellent effect when placed against the blue background of the menu.
34 While holding down Shift vertically fill the rectangle with the Paint bucket tool, so that the yellow comes on top.
35 Select the rectangle and press F8 to make a symbol out of it. Pay attention: this time, select Button as type. Call it home and click OK.
36 Double-click on the newly made button symbol on the stage with the Selection tool (V) to enter inside it. As you can clearly see thanks to Flash, you are inside the home button which is itself nested inside the menu movie clip.
37 Select the yellow-orange rectangle inside the button. Press F8 to make a symbol out of it. This time, select Graphic as type, call it button background and click OK. This symbol will be the base for all the buttons that are going to be a part of the menu.
38 Right-click on the Hit frame of the first layer and select Insert Frame from the context menu.
39 Lock this layer and call it background. Make a new layer and call it label.
40 Select the Text tool (T). In the Property inspector, make the following choices:
- Choose Static text.
- Pick any font you like. Hint: for this menu, sans-serif fonts look really nice :).
- Choose a big enough size for the font.
- Select white for the color.
- In the menu that defines how the text will be rendered, choose Anti-alias for readability. Since the buttons won’t be animated, this is a good choice.
- Lastly, the Selectable options must stay turned off.
41 Click somewhere over the rectangle and type “HOME”. Hit Esc to exit from the text field and center it over the rectangle either by using the arrow keys or the Selection tool (V).
42 Lock this layer and make a new one above it and call it rollover.
43 Select the Rectangle tool (R) again. Pick a strong red hue for the fill color (I used #D9090E). The Stroke color should stay blocked. Draw a rectangle that is 4 pixels high and slightly wider than the label on the layer below it. Center it below the label.
44 In the rollover layer, click on the keyframe in the Up state and drag it onto the Over state.
45 Right-click on the Hit state’s frame and select Remove Frames from the context menu. Repeat this for the Down state. Your button’s timeline should look like this in the end:
Test your movie (Ctrl+Enter). Roll your mouse over the button and the red rectangle that underlines the label will appear, and disappear once you place your cursor outside the button.
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.
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.
Go to the next page to see how to make a movieclip for information display and a placeholder for external content. You'll also insert the ActionScript code and test your movie.