How to make a minimalistic vertical menu with slider

In this easy lesson made for Flash 8 and ActionScript 2.0, I will show you how to create a really nice easing slider, for a minimalistic vertical menu. In this tutorial, you will learn:

• How to create minimalistic menu buttons,
• How to quickly duplicate the buttons,
• How to write a really simple but effective ActionScript function that will tell Flash what to do when any of the buttons has been clicked,
• How to write an easing equation (simple, no hard math here :)) so that the slider will move with an ever-decreasing speed towards the clicked button and some more tricks.

You can see the example of the menu that you are building in this lesson below — try clicking on the buttons!

Making a simple minimalistic menu

1. Open a new Flash document. Select Modify > Document (shortcut: Ctrl+J). Type 30 in the Frame rate field. Click OK.

This will make for a decent playback speed of your SWF file. If you leave the speed at the default value (12 fps) your slider would move as if interrupted and that would look just plainly lame.

2. Select the Rectangle tool (R). Down in the Property inspector, select hairline as line type, black for the stroke color and white for the fill color.

3. Click and drag to draw a rectangle. Make it about 85 by 23 pixels.

4. Choose the Selection tool (V). Double-click on the rectangle's fill to select both the fill and the outline.

5. Select Modify > Convert to Symbol (shortcut: F8). In the small window that shows up, do the following:

• Select Movie clip as type (see screenshot below).
• Name it button background. This movie clip will be the background of each button in this lesson's menu.
• Select the middle central Registration point (also see below).
• Click OK.

Why this particular registration point? Because I want to show you later how the stage position of a symbol in Flash is determined programatically by ActionScript, versus the position in the workspace.

NOTE The following three steps can be done in Flash 8 Pro only. You can still make the complete menu in Flash 8 Basic, only without the shadow filter effect.

6. After the conversion, the movie clip will be selected by default, which you can see in The Property inspector. Click on the Filters tab there.

7. Click on the small blue plus icon to open the Filters menu. Select Drop Shadow from the menu (see 1 and 2 on the image below, respectively).

8. Make the following changes to the drop shadow filter's options:

1. Put the Blur X and Y options to 0 (zero).
2. Put the Strength to 70%.
3. Put the Quality option to High.
4. Put the Distance to 3.

All the other options should be left at their default values: the Angle at 45, the color as black and the Knockout, Inner shadow and Hide object options left unchecked. This will result in a nice sharp shadow applied to your rectangle movie clip:

Top of page

Creating a button symbol in Flash

9. Select Modify > Convert to Symbol again. The Registration point should be left on the middle central position. Call the new symbol button 1, but this time choose Button as type, not Movie clip. Click OK.

10. With the newly created button selected, go over to the Property inspector and click on the Properties tab. You will find the Instance name field near the button symbol icon there. Type in menuButton1_btn and hit Enter to confirm.

This is a good thing to make right now, since you will be making other buttons from this one. Giving it an Instance name now saves you from having to re-type it each time later. You will just change the number later (menuButton2_btn, menuButton3_btn, etc).

Also, giving meaningful Instance names to symbols in Flash helps you instantly recognize what's what in ActionScript code. You never know, you may be adding some additional buttons to your movie later, which in turn maybe won't have anything to do with the menu. That's why menuButton1_btn is a better choice than button1_btn. This is especially helpful if you come back to your code days or weeks later. These are considered best practices when writing ActionScript.

NOTE And why the suffix _btn? In this way, you are telling Flash that this is a button you are referring to and not a movie clip (_mc) or a text field (_txt), for example. When coding in ActionScript, you'll see that Flash instantly recognizes what type of symbol you are pointing to if you have given it a correct suffix. By adding _btn to the end of the button's Instance name, Flash will offer you all the methods and properties for a button symbol only, which is very practical.

11. Double-click on the button on the stage with the Selection tool (V) to enter inside it. Flash informs you that you are working inside the button symbol's timeline now, by displaying the relevant information above the layers.

12. Right-click on the Hit state frame and select Insert Frame. This will make all the button's states exactly the same. If you wish for a different thing to be displayed when the user interacts with the button, you should insert a keyframe on each of these states and make some changes.

As you probably now, the four states of a button symbol in Flash correspond to the following:

• The Up state is visible when there is no interaction made with the button,
• The Over state is when the user rolls his mouse over the button,
• The Down state is seen when the button is clicked upon and
• the Hit state is invisible — it defines the clickable area of a button.

For a more thorough explanation of these states and their use, you can check out my designer button tutorial.

13. Lock the first layer inside the button and call it base. Make a new layer above it and call it label.

14. Select the Text tool (T). In the Property inspector, adjust the settings as follows:

1. Choose Static text.
2. Select a pixel font. This is a must if you wish to make a minimalistic menu.
3. Most pixel fonts look good with their size set to 8.
4. Select black for color.
5. You can leave the left text alignment.
6. A must when using pixel fonts: the Bitmap text option should be selected in the drop-down menu for rendering options.
7. The Selectable option must be left turned off, for your button to function properly.
8. There is no eighth option, I inserted it in the picture below by mistake, but I am too lazy to remove it :-)

15. Click over the area of the rectangular base shape and type HOME, for example. Hit Esc on your keyboard to exit the text editing mode.

Use the arrow keys on your keyboard to position the label near the center of the button. The text might seem a bit blurry, but it will look normal once you return to the main stage.

16. Click on the Scene 1 link above the layers to go back to the main scene.

As you can see, the button looks as it should: minimalistic and cool :-).

Let me show you now how to easily create other menu buttons from this one.

Top of page

Duplicating the menu buttons

17. Select the current button on the stage by clicking on it once with the Selection tool (V).

18. Copy the button by pressing Ctrl+C.

19. Paste in place the button by pressing Ctrl+Shift+V. By doing this, you have pasted the copy of the button exactly over the original one. Don't click anywhere now, just follow the next step.

20. Press and hold Shift and click the down arrow button a few times to move the new button copy downwards. The combination Shift+down arrow moves the objects in Flash by exactly 10 pixels.

21. Repeat this until you have six buttons positioned neatly one above the other, as the screenshot below shows:

22. Select the second button from the top. Go to the Property inspector and change it Instance name to menuButton2_btn.

Remember, any object in Flash (movie clip, button, text field) must have a unique Instance name. Since you have assigned the Instance name menuButton1_btn to the first button and then copied it, each copy also has this same Instance name. That's why you have to change it. And changing a single character in an Instance name is much quicker than having to type it all over again.

23. Repeat this for the four remaining buttons: their Instance names should be menuButton3_btn, menuButton4_btn, menuButton5_btn and menuButton6_btn.

24. Open the Library by selecting Window > Library if it isn't open yet. You will find the button 1 and button background symbols there.

25. Right-click on button 1 and select Duplicate from the menu that will pop up. The Duplicate Symbol window will show up. Just change the symbol's Name to button 2 and click OK. Everything else should be left unchanged.

26. Double-click on the newly made button 2 symbol in the Library to enter inside it.

27. Double-click on the text field inside the button to edit it. Type PORTFOLIO or anything else that you deem appropriate for your Flash website menu. Hit Esc when done. Center the text field in relation to the rectangle below it by using the arrow keys on your keyboard.

28. Repeat the steps 25 through 27 four more times to create four more buttons. The label of each one of them should be unique, because each of these buttons will link to a different section of your website.

29. Return to the main scene by clicking on the Scene 1 link just like you did in step 16 of this lesson.

30. Select the second button from the top by clicking on it with the Selection tool (V).

31. Click on the Swap Symbol button in the Property inspector.

32. In the window that will appear, the current, selected symbol is marked with a black dot next to it (button 1). Click the button 2 option to select it and then click OK. You have effectively swapped a button symbol for another one.

33. Repeat the previous operation for the remaining four buttons. Note: in the Swap Symbol dialog window, you can also double-click on a button that you want to replace the current one, without having to click OK. At the end, you should have your menu, with six different buttons, with their respective unique instance names.

And the menu is complete now. To see how to add the slider, please continue onto the next page.