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

3. Creating the menu button and setting it up for use at runtime

3.1. You should be on the main timeline now. Lock the gallery menu layer and create a new layer. You don't have to gave any specific name to this new layer at all, because it will serve as a temporary layer only, to create the menu button specimen, after which you will remove it.

3.2. Select the Rectangle tool (R). The settings for this tool should have remained unchanged from the previous use of it: the stroke color (outline) should be blocked, the Object Drawing and Snap to Object options turned off.

You can select any color you like for the fill. I chose a nice hue of blue, #00789F. Now draw a 200 by 20 pixel rectangle anywhere on the stage. You can draw any rectangle at first and then set these exact dimensions in the Property inspector after.

These exact dimensions are important, especially the width, because the mask that you made in the previous section is also 200 pixels wide. They have to match (or the mask can eventually be a little wider than the button) if you want your menu to look professionally designed — clean and sharp.

3.3. Select the rectangle and choose Modify > Convert to Symbol. Select Movie clip as type, call it gallery section button and click OK.

A small note here: the movie clip that you just made is called gallery section button, although it is a movie clip. Don't let that confuse you. I chose to give it such a name because it will in fact serve as a button. Why a movie clip then? Because a movie clip symbol is far more versatile and usable than a button — its possibilities of creation and manipulation are far greater than those of a button symbol. And even if in this particular project a button symbol would maybe serve as well as a movie clip for all purposes, I have just acquired a habit of making movie clips instead of buttons :-).

3.4. Choose the Selection tool (V) and double-click on the gallery section button movie clip on the stage, to enter inside it.

3.5. Call the movie clip's first layer bkg (because this will be the button's background).

3.6. Right-click on frame 2 in this layer and select Insert Keyframe from the contextual menu.

3.7. In the newly made keyframe, the rectangle will automatically be selected. Just change its color to some other of your choice — I used #7C3F52. Do this by clicking on the fill color square in the Colors section of the Tools panel, all the while the rectangle is selected.

Why was this done? Because you need to have a rollover effect for your menu to make it more user-friendly and easier to navigate. So that's why you have to have two keyframes, with the same rectangle inside, but differently colored. You will enable this rollover visual change via ActionScript later.

3.8. Lock the bkg layer and make a new layer above it and call it label.

This new layer will automatically have the same timeline duration as the one below it (2 frames long), which is fine, because the label (the text that will appear on the button) must be visible in both states — the initial one as well as the rollover.

3.9. Select the Text tool (T). In the Property inspector, do the following choices and tweaks:

1. Select Dynamic Text.
2. Select a font that you like.
3. Select 14 as font size, or bigger if necessary. The important thing is that the text field's height should approximately match the height of the rectangular background. You'll see that once you make the actual text field, so you may need to re-adjust this value as necessary.
4. Select white for the text color — this choice will make the button labels visible in both states — initial and rollover.
5. Select the left alignment for the text field. It looks well, unlike the central alignment which would look awkward on this kind of menu and would also make things more difficult to read.
6. Select Anti-alias for readability in the rendering menu.
7. Make sure that the Selectable option stays turned off. If you turn it on, your menu buttons will suck royally and possibly won't be clickable at all.
8. Make sure that Single line is selected. Multiline doesn't make any sense for a text field inside a menu button, right?

3.10. Click and drag on the stage with the Text tool to create a dynamic text field. Create it over the button's backround rectangle, so that the dimensions of the two approximately match. Hit Esc when finished and you'll exit the text field and see a blue border appear around it.

3.11. Now go over to the Property inspector and type in the Instance name for your dynamic text field: call it sectionTitle_txt.

3.12. On the right side of the same panel, click the Embed button.

The Character Embedding window will open up. Select multiple character groups by Shift-clicking them: choose the Uppercase, Lowercase, Numerals and Punctuation options. Click OK.

Embedding the characters in the dynamic text field will ensure the continuity of design accross different platforms and operating systems. No matter if a user has your menu font of choice installed or not, he/she will see the exact same font, thanks to the embed option.

The four groups of characters that you have embedded in your dynamic text field will cover 99% percent of possible gallery names. Of course, you may choose to add any additional special and exotic characters if you wish so. Bear in mind that the embedding of these characters will add about 20-30 KB to your final SWF file.

3.13. Lock the label layer. Make a new layer and call it actions. You can lock this layer also, since ActionScript code can be placed inside it while it is locked too.

Click on the actions layer's first frame to select it.

3.14. Open up the Actions panel by selecting Window > Actions. Enter the following code inside it:

stop();

This simple action prevents the playhead from going forward, as any animation in Flash naturally does. You will create programming code later that will move the playhead to the next frame while the user is over a particular button with his/her mouse, to create the rollover effect I told you about just a few steps before.

3.15. Fine! The button is finished now! Click on the Scene 1 link to go back to the main scene.

3.16. Delete the temporary layer inside which the button was created (Layer 2). This will delete the button from the stage too. You should have only the gallery menu layer on the main scene now. However, the gallery section button is stored inside the Library.

3.17. Go to the Library (Window > Library). Right-click on the gallery section button movie clip inside the Library and select the Linkage option from the contextual menu.

3.18. In the Linkage Properties window that appears, check the Export for ActionScript option. The Export in first frame option will automatically become checked too. You can leave it like that, it's fine.

As for the Identifier option, you can also leave it at the default value, which is the name of the movie clip symbol itself — gallery section button in this case. Click OK.

The Identifier name will serve to pull the button dynamically from the Library and place it inside the menu that you have created on the previous page. This is very, very practical, because you will change just the images and the XML file once the SWF is finished.

This makes possible for dynamic menu creation, also thanks to the dynamic text field inside the button — each button will have its label match the section of the gallery it represents. Why create every single button manually, re-open the FLA, re-export it as a SWF when you can solve this with ActionScript and have the menu created in a split second!

You will now make the remaining elements, so that your photo galleries menu is complete. Namely, you will make two buttons for scrolling through the menu and a title that tells the users what's the menu about. Before that, you'll just position the galleryMenu_mc movie clip.

Save your document before proceeding to the next page of this lesson, where the creation of menu navigation buttons is explained.