How to make a minimalistic vertical menu with slider — part 2

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.

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.

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.

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.

39. Select 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 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.

IMPORTANT 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:

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:

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:

(clickedButtonPosition-currentSliderPosition)/speed;

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
65

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
78.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:

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:

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

If you have found this tutorial useful, please consider donating to support lukamaras.com.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!