Flash Explained

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.

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.

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

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.

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

Comments

Submit a comment