Flash Explained

Learn Flash easily.

How to make a minimalistic vertical menu with a slider

October 21st, 2008 | Author: Luka | Category: Menus & Interfaces

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.

Adjusting the speed of the SWF file.

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.

Selecting the colors and line type for the Rectangle tool.

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

A nice rectangle drawn in Flash.

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

Selecting the rectangle shape.

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.

Selecting the attributes of the new symbol.

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.

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.

Selecting the Filters panel for a symbol in Flash.

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).

Selecting the Drop Shadow filter for the movie clip.

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.

Drop shadow filter options.

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:

The rectangle has a drop shadow now.

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.

Makin a new button symbol in Flash.

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.

An Instance name was just assigned to the button on the stage.

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.

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.

Inside the button symbol.

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.

The duration of the first state of the button was prolonged to span all the four button states.

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.

A new layer made inside the button symbol in Flash.

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 🙂

The options of the Text tool in Flash.

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.

The label was just created inside the button.

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

Back to the main scene in Flash.

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

The cool minimalistic button done entirely in Flash. Sleek!

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.

The two exact copies of the same object on the stage.

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

The six identical buttons that are going to be replaced with different ones to form a cool menu.

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

The new Instance name of the second button in the menu.

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.

Duplicating a symbol in Flash.

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

Accessing a button symbol from the Library in Flash.

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.

Changing the label of the seccond menu button.

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.

Preparing to swap a symbol.

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.

Swapping symbols in Flash.

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.

The vertical menu is complete now.

And the menu is complete now. Let me show you now how to add the slider.

Top of page

Creating the slider

Making the slider in Flash is extremely simple. Here's how.

34 Name the current layer on the main scene menu. Make a new layer and call it slider.

A new layer for the slider was added.

35 Select the Rectangle tool (R) and draw a 10 by 10 pixel square on the left side of the first button. Position it (use the Selection tool for this) so that horizontally it is exactly aligned with the button's horizontal center, like the screenshot below shows you.

The small rectangle drawn near the menu.

36 Select the square and hit F8 to convert it into a symbol. Select Movie clip as type, call it menu slider or whatever you like and click OK. Just pay attention that you really selected Movie clip as type, because the selection has stayed on the Button type from before.

37 Go to the Property inspector and assign the Instance name slider_mc to this movie clip.

The Instance name of the menu slider.

Let me show you now how to create some simple ActionScript code to power this little dude.

Top of page

Creating the ActionScript for the menu slider

38 Lock the slider layer. Make a new layer and call it actions.

A separate layer for actionscript has been made.

39 Select the first keyframe of the actions layer.

Selecting the first keyframe of the actions layer.

40 Select Window > Actions (shortcut: F9) to open the Actions panel. Place the following code inside:

var speed:Number = 9;
menuButton1_btn.onPress = menuButton2_btn.onPress = menuButton3_btn.onPress = menuButton4_btn.onPress = menuButton5_btn.onPress = menuButton6_btn.onPress = function () {
var clickedButtonPosition:Number = this._y;
var currentSliderPosition:Number = _root.slider_mc._y;
_root.onEnterFrame = function() {
_root.slider_mc._y += (clickedButtonPosition-currentSliderPosition)/speed;
currentSliderPosition = _root.slider_mc._y;
if (currentSliderPosition>=(clickedButtonPosition-0.8) && currentSliderPosition<=(clickedButtonPosition+0.8)) {
currentSliderPosition = clickedButtonPosition;
delete _root.onEnterFrame;

41 Test your movie by selecting Control > Test Movie. Click on the menu buttons to see the slider follow your clicks. Nifty effect! Now let me explain you how this works.

Top of page

Using the coordinate system in Flash to move an object

The first line sets the speed variable (of the Number type) to the value of 9. The lower the number, the greater the speed of the slider will be. You'll see this explained later.

var speed:Number = 9;

Now comes the line where the main code for this project begins, the onPress event handler function for all the buttons. This is one single line of code — you will see it wrapped in your browser probably, as well as in the Actions panel in Flash, if you have code wrapping turned on like me.

All the code of this function gets executed whenever any of the buttons is pressed. This code is placed inside the function's curly brackets: { and }.

menuButton1_btn.onPress = menuButton2_btn.onPress = menuButton3_btn.onPress = menuButton4_btn.onPress = menuButton5_btn.onPress = menuButton6_btn.onPress = function () {

This is a very practical solution: instead of writing the same thing six times, you write it just once, because all the buttons do the same thing. As you can see above, the onPress events for all buttons are followed by an assigment operator (=), and the last one is followed by the keyword function. So, no matter which button is pressed, the same thing will happen. And what will get executed is this, starting with two variable definitions:

var clickedButtonPosition:Number = this._y;
var currentSliderPosition:Number = _root.slider_mc._y;

The clickedButtonPosition is a Number type of variable (it stores a numerical value inside itself). As the variable's name suggests, this variable will hold inside itself the vertical position (the Y coordinate) of the button that was clicked: this._y. The keyword this is inside the onPress event handler function, so it is pointing to the button which was pressed, because the function is associated with the clicked button.

The _y property of an object in Flash refers to its vertical position, either on the stage (the main timeline, as is the case with the menu buttons here) or inside a movie clip symbol. A movie clip has its own coordinate system, with the origin point located at its registration point. The coordinates are expressed in pixels.

The main scene (main timeline, the stage) has the origin point located in its upper left corner.

The coordinate system in Flash explained.

The horizontal position of an object on stage is a positive value to the right of the origin point, and a negative one to its left. This is exactly like the coordinate system that you have learned about in high school. However, the vertical position of an object in Flash is different than in a classical coordinate system: in Flash, an object's vertical position becomes a negative value above the origin point and is positive below it.

Now comes a catch: while drawing and creating graphics in Flash, each object's position is determined by its upper left point, while ActionScript uses a symbol's Registration point to determine and/or change its position.

Let me clarify you the above point a little bit. While working in Flash, If you move an object (a drawing, an image, a symbol) so that its upper left point is placed exactly over the upper left corner of the stage, both the X and Y coordinate values of the object will be 0 (zero). You can try that yourself: draw a simple shape like a rectangle for example, and using the Align panel, place it in the upper left corner of the stage. Then take a look at the Property inspector and you'll see that X and Y equal zero.

The above applies equally to symbols (movie clips, buttons). But, once you want to manipulate the position of a symbol via ActionScript, the symbol's Registration point determines its position on the stage. The Registration point of a symbol is chosen by you during the creation of a symbol:

The selection of the registration point for a symbol in Flash.

This point may or may not coincide with the object's upper left corner — this dependes entirely on you. I have told you on the previous page to select the middle central point as the Registration point for all the buttons on purpose, so that you can see how this works in Flash and to more easily create the slider (more on this later). Here is the difference between the two refernce point used by Flash, shown for any of the menu buttons made in this lesson:

The two reference points of a button symbol in Flash.

So, as I said, the first line will result in the creation of the clickedButtonPosition variable which will store the vertical coordinate value of the button that was clicked (its _y property):

var clickedButtonPosition:Number = this._y;

When executed, the following line will create the variable currentSliderPosition and store the current vertical position of the slider_mc movie clip inside it:

var currentSliderPosition:Number = _root.slider_mc._y;

As you may see, the slider is referenced like this: _root.slider_mc. This is obligatory, because a button symbol is only aware of itself. The keyword _root denotes the main timeline in Flash. By saying _root.slider_mc, you tell the button "I am referring to the movie clip called slider_mc which is situated on the main (_root) timeline".

Top of page

How an easing equation works in ActionScript

Now comes an interesting event handler function, which actually enables the slider to move towards the button which was clicked and stop there:

_root.onEnterFrame = function() {
_root.slider_mc._y += (clickedButtonPosition-currentSliderPosition)/speed;
currentSliderPosition = _root.slider_mc._y;
if (currentSliderPosition>=(clickedButtonPosition-0.8) && currentSliderPosition<=(clickedButtonPosition+0.8)) {
currentSliderPosition = clickedButtonPosition;
delete _root.onEnterFrame;

You have already encountered an event handler here: onPress, which is used to handle what happens when the user has clicked a menu button. As you can see in the code above, I am now using the onEnterFrame event handler. This event handler doesn't wait for an event to happen, unlike most of the other ones, but begins to execute the code within its curly braces as soon as Flash reads it. If you had written this code outside the onPress event handler function, it would be executed immediately. Since you have placed it inside the onPress event handler function, it will start to run only when a button is pressed by a user. This is a smart choice, because an onEnterFrame event handler keeps running all the time, unless deleted via ActionScript.

How does it work? The onEnterFrame event handler is directly related to your movie's speed (its frame rate). Remember, you have set it to 30 fps at the very beginning of this tutorial. This means that the onEnterFrame event handler will execute 30 times in a second. This is particularly useful in games, when the movement of objects and characters has to be checked constantly, or in a simple application like a Flash clock, for example. In this tutorial, onEnterFrame is essential in the creation of easing movement for the slider.

The first line makes the slider move towards the menu button which was clicked:

_root.slider_mc._y += (clickedButtonPosition-currentSliderPosition)/speed;

This is done by telling Flash that the slider's new vertical position (_y) will be the sum of its current position and the value on the right side of the addition assignment operator (+=). This operator is really simple to understand. For example, let's assume that you have a variable myNumber, which has a numerical value of 7.

myNumber = 7;

Now suppose that you want to add 3 to the current value of the variable. You can do it like this:

myNumber = myNumber + 3;

Which is exactly the same as this:

myNumber += 3;

As you can see, the addition assignment operator (+=) serves to make your ActionScript code more compact and to avoid writing the same code again. And what will be added to the current vertical position of the slider? The result of the expression on the right side of the operator:


First, Flash will calculate the expression inside the parenthesis. You must put it this way, because, as in maths, multiplication and division in ActionScript are always calculated before addition and substraction. If you omitted the parenthesis, Flash would first make the division of currentSliderPosition with speed and then substract the result from clickedButtonPosition.

But, because of the correct placement of the parenthesis, Flash will first substract the current vertical position of the slider (currentSliderPosition) from the vertical position of the clicked button (clickedButtonPosition) and then divide the result by speed (the value of which is defined at the beginning of the code).

And, as you know by now, the onEnterFrame event handler function will keep on running repeatedly. So the vertical position of the slider will change constantly. Let's see how this actually works, with real values. Suppose that the _y value (the vertical position) of the slider is 50 at the start and that the _y value of the clicked button is 200 (this one won't change, because the button is not moving) and the speed is set to 10. It would be calculated like this:

_root.slider_mc._y += (clickedButtonPosition-currentSliderPosition)/speed;
50 += (200 - 50)/10
50 += 150/10
50 += 15

At the next execution of onEnterFrame, 65 is the new vertical position of the slider, so the it goes like this:

_root.slider_mc._y += (clickedButtonPosition-currentSliderPosition)/speed;
65 += (200 - 65)/10
65 += 135/10
65 += 13.5

And so on. As you can see, the slider will get closer to the button each time the onEnterFrame event fires. This is how the easing motion works: in this case, you have deceleration (slowing down), because the slider gets closer to the button, but the "jump" it makes towards it gets smaller and smaller each time. Theoretically, this approach would continue ad infinitum, with the slider never reaching its target.

To make sure that the slider reaches its target and also that the onEnterFrame event handler gets deleted, there is an if conditional statement inserted in the function. But before that, you have to update the currentSliderPosition variable's value to reflect the current position of the slider:

currentSliderPosition = _root.slider_mc._y;

And here is the condition that evaluates if the slider has come close to the button:

if (currentSliderPosition >=(clickedButtonPosition-0.8) && currentSliderPosition<=(clickedButtonPosition+0.8)) {
currentSliderPosition = clickedButtonPosition;
delete _root.onEnterFrame;

I will show you now the condition that is being evaluated — it contains two conditions, actually. If they both turn out as true, the code between the if statement's curly braces will be executed. If either one turns out as false, the code is ignored as if it didn't exist. The onEnterFrame event will fire repeatedly until both conditions evaluate as true.

The first one,

currentSliderPosition >=(clickedButtonPosition-0.8)

tells Flash to check if the current vertical position of the slider (currentSliderPosition) is greater than or equal to (>=) the vertical position of the button minus 0.8 pixels (clickedButtonPosition-0.8).

this is followed by the logical AND operator (&&), which tells Flash to also evaluate the second condition,

currentSliderPosition <=(clickedButtonPosition+0.8)

which serves to check if the current vertical position of the slider (currentSliderPosition) is lesser than or equal to (<=) the vertical position of the button plus 0.8 pixels (clickedButtonPosition+0.8).

These two serve to see if the slider has approached the button close enough so that you can stop it. 0.8 pixels is close enough. Don't make this number any bigger or the halting if the slider will be done abruptly. Here is an image which nicely shows the area into which the slider must enter in order for the if conditional statement to be true:

The zone where upon slider's entry, the onEnterFrame event will cease to exist.

And why two conditions? Because the slider has to move upwards if it is in the lower part of the menu and the user clicks on some of the above buttons — you have to enable it to go back too. Hence the 0.8 pixel zone above and below the button's vertical position.

Soooo, when both conditions evaluate as true, the code that will be executed is this one:

currentSliderPosition = clickedButtonPosition;
delete _root.onEnterFrame;

The first line makes the position of the slider equal to the clicked button's position. This will make them nicely aligned. The second line deletes the onEnterFrame event handler. Always delete this event handler if it's no longer needed, because this takes some load off the user's computer processor.

Remember, earlier I said that besides wanting to show you how ActionScript positions symbols in relation to their registration point, I instructed you to make each symbol's registration point in the middle center for another reason also: To more easily position the slider in relation to the buttons.

For example, If the slider had its registration point in the upper left corner, it would end up positioned like this:

The slider near a menu button, after the change of its registration point.

See? Its registration point (in its upper left corner) would be on the same level as the button's, which is in the middle of the button. Had that been the case, you would have to substract half of the slider's height from its position to have it placed correctly.

One nice fact: this menu weighs only 1.4 KB!

And that's it! It was quite simple and you learned a lot. For more menus and ActionScript, visit my menus and interfaces tutorials page and ActionScript section.

Download the source file for this lesson

Be Sociable, Share!


Submit a comment

  • Waqar Oct 22, 2008 at 4:42 am

    it is just wonderful work you are going to do luka, i m a big fan of you!
    you are simply the best……..

  • Luka Oct 22, 2008 at 5:08 am

    Waqar: thanks, spread the word!

  • wiranto Nov 1, 2008 at 11:16 am

    you are the best luka…you are my HERO…

  • Luka Nov 1, 2008 at 12:26 pm

    Thanks wiranto. Spread the word about flashexplained.com/… 🙂

  • tom Dec 13, 2008 at 6:02 am

    thanks for the slider script…awesome! but i had a question regarding it…my buttons are on an angle (in other words, its not a perfect vertical situation)…therefore the slider must go up and down on an angle…i was trying to edit your script in hope’s i can do something about the “_x”…i.e… “_x=-10” hoping that as it goes down, x coordinate gets reduced by 10…i’m sure its not hard to do, but i cant figure it out….can you help…thanks again!

  • Todd Dec 16, 2008 at 11:12 pm

    Awesome Tutorial….thank you!

  • Alex Boenisch Jun 3, 2009 at 4:19 am

    I followed this tutorial and everything worked out fine, except when I then tried to apply it to a website, it didn’t work for me. So I’ve managed to figure out that it only works on the main timeline whereas I have it in a big movie clip that sits on the main timeline. Any clue how to resolve this issue?

  • Alex Boenisch Jun 3, 2009 at 4:23 am

    Nevermind! I removed the word “root” in the code and it worked perfectly.

  • gtz Sep 16, 2009 at 12:08 pm

    wow, cool idea, great job everything works well. you are the best luka.

  • Dav Nov 25, 2009 at 1:28 am

    How do I use links and other functions with the buttons? Every time I try, either nothing happens, or the slider wont move

  • Yehuda Brynin Feb 3, 2010 at 2:06 am

    i used this to make a menu, but it doesn’t seem to work. is there something i missed? i uploaded the file to http://www.stopsmoking.coop/flash/menu.fla

  • Rob May 18, 2010 at 3:52 pm

    works perfectly accept i cant figure out how to make it work after importing it in to dreamweaver? any ideas on how to keep in constant?

  • syahrin Jan 28, 2011 at 8:40 am

    i learn more about flash 8 from this website, thanks very much to admin, ur brain is so smart, one more time… thanksssssssssssssss a lot

  • Adam Togni Jul 5, 2011 at 2:16 pm

    Hi Luka

    I was wondering if it is possible to do the reverse almost of what you have here, i.e. when you click on a button it automatically moves to the top of the navigation.



You must log in to post a comment.