Making the ultimate dynamic image gallery in Flash 8 — part 3

4. Making the menu navigation buttons

4.1. You have to select the galleryMenu_mc movie clip to be able to position it. Since this movie clip is almost invisible, it isn't as easily selectable as any othe movie clip might be. Here's how you do it (follow the pictures below the list):

1. Unlock the gallery menu layer.
2. Click on the layer's first frame to select it.
3. The Property inspector tells you that a frame has been selected.
4. Once you select a frame, all the content inside it is selected too. Because of this, the movie clip you are looking for will appear. Click on the movie clip once with the Selection tool (V) to select it (you must click on its registration point since no other content of this symbol is visible).
5. The movie clip is selected, which is indicated in the Property inspector.

4.2. Enter the following values for the movie clip's coordinates (inside the Property inspector): 10 for X and 99 for Y.

Fine. Let me show you now how to create a couple of sleek navigational buttons.

4.3. First, make a line that will separate the menu buttons from the menu navigation. Select the Line tool (N). In the Property inspector, select black for the line color and hairline for the line thickness.

4.4. Hold down Shift on your keyboard, click with your mouse somewhere above the galleryMenu_mc movie clip and draw a horizontal line. Holding Shift will enable you to make a perfect horizontal line. You can select the line later and position it via the Property inspector. Also, make it as wide as the menu, to have a more coherent and professional design.

4.5. Select the Rectangle tool (R). Go to the Options part of the Tools panel and make sure that both the Object Drawing and Snap to Objects options are turned off (see 1 and 2 on the screenshot below).

Next, click on the Set Corner Radius button (see 3 above). In the Rectangle settings window that will show up, enter 7 as the corner radius value, then click OK. This will enable you to draw rectangles with smooth, rounded corners.

4.6. Go over to the Color Mixer panel (to access it, select Window > Color Mixer, although it is probably open already, by default). Block the stroke color and make a nice bluish-turquoise linear gradient for the fill color, like this:

1. Click the small pencil icon.
2. Click the little square next to it and select the No Color option (the white square with the red diagonal line).
3. Click the paint bucket icon to select the fill color.
4. Select the Linear option in the Type menu.
5. Click on the left color (the small square) in the gradient stripe to select it.
6. Enter the hexadecimal code for this color: I chose #00789F.
7. Repeat the two previous steps for the right-side color: select it and enter #81E6FE as its code.

4.7. Hold Shift (to draw a square and not a rectangle), click on the stage and draw a 29 by 29 pixel square.

This square looks nice, but since it is a navigational element, I think that it would look much better if the gradient spreads from top to bottom instead from left to right. Follow the next step to see how to do this simple modification.

4.8. Select the Gradient Transform Tool (F). Turn on the Snap to Objects option in the Tools panel. Now, rotate the graident like this:

1. Click on the square that you drew in the previous step to select it. The controls for gradient modification will appear.
2. Click the circle with the small black arrow in it and start dragging your mouse counter-clockwise.
3. Once you reach a 90-degree turn, release your mouse button. There!

4.9. Select the Selection tool (V) and turn off the Snap to Objects option. Click on the gradient-filled square to select it.

4.10. Select Modify > Convert to Symbol to make a symbol out of this square. This time, select Button as type (not Movie clip), call it scroll menu down and click OK.

4.11. Double-click on the newly made scroll menu down button on the stage to enter inside it. Once inside the button's timeline, lock the first layer and call it bkg. Make a new layer above it and call it arrow.

4.12. Draw a white arrow that is pointing downwards, inside the arrow layer.

You can do it easily like this (see the sequence of images below):

1. Using the Rectangle tool (R), draw a square (I made a 19 by 19 pixel square).
2. Choose the Selection tool (V) and bring your cursor near the square's upper right corner. A small right angle will appear near your cursor.
3. Click and drag your mouse toward the square's center. Once your cursor is near the center, a circle will appear, indicating that it is ready to snap into place.
4. Release your mouse button and you've got yourself a nice triangle.
5. Select the Free Transform Tool (Q) and rotate the triangle by 45 degrees counter-clockwise. There! You have the arrow for your button now.

Note that I have used the blue color just to show you how it's done. You can use any color you want while making the triangle — once you move it over the button's background, change its color to white.

4.13. Add a third layer inside the button and call it label.

4.14. Select the Text tool (T) and change the type of text field to Static Text in the Property inspector. Click somewhere over the button's background area and type DOWN.

As you can see above, I chose a pixel font for the label (it looks cool). If you do the same, be sure to set the rendering option to Bitmap text, which is the best for pixel and bitmap fonts. Also, most pixel fonts have to be typed with a font size of 8, to render properly and sharply.

4.15. Click the Scene 1 link to go back to the main scene, because the button is complete now.

4.16. Assign an Instance name to this button because you'll need to manipulate it via Actioncript later. Name it menuDown_btn.

Place this button above the thin line, on the right.

Now you need to make the second button, for scrolling the menu upwards. This one is going to be easy to do, because you'll just clone the existing button and make a few modifications.

4.17. Go to the Library. Find the scroll menu down button symbol, right-click on it and select Duplicate from the contextual menu.

In the Duplicate Symbol dialog that appears, enter scroll menu up as the new symbol's name, leave the other options as they are and click OK.

4.18. Double-click on the newly made scroll menu up button symbol inside the Library to acces its timeline. Once inside, unlock the arrow layer.

4.19. Select the triangular arrow shape in this layer. Now select Modify > Transform > Flip Vertical. The arrow will now point upwards, thanks to the flipping you did. Also, Change the static text from DOWN to UP. Remember, these changes will not affect the first button you made, because the duplicated scroll menu up button is an independent symbol, not linked to any other one in any way.

4.20. Click on the Scene 1 link above the timeline to exit the button's timeline and to return to the main one.

4.21. Click on the scroll menu up button inside the Library once, hold your mouse button and drag out an instance of it out onto the scene. Place it next to the scroll menu down button, like shown below.

4.22. Select the "UP" button and assign it an Instance name: call it menuUp_btn.

4.23. Add some text near the buttons, so that the users actually know what's the menu about — don't leave anyone guessing. Do this with the Text tool (T) set to Static text.

TIP Always think about the user who is the least web-savvy. Creating a user-friendly site with the lowest common denominator in mind will enable you to have a much bigger public and also, the users will want to return to your site because they found it easy to use.

4.24. Lock the gallery menu layer.

That's it for the menu! You have completed it. Let me show you now how to create the image placeholders for the gallery.