You've all seen those menus where you roll over one of the buttons and an object slides into place right underneath it, right? Well, in this tutorial you will learn how to create one of those. We will be creating a very basic example, but like everything else, once you learn how to do it you can create something better!

We will be using:

• ActionScript
• Instance Names
• Button & Movie Clip Symbols

Here's how our finished product will look and act:

[roll over each button]

Let's begin:

1. Start a New Document in Flash, size and background color do not matter.
2. Name the current layer: Buttons, then create a new layer and name that one: Slider. Create one more layer and name it: Actions.

[this is what your timeline should look like so far]

4. In the Buttons layer draw four (4) boxes and turn each one into a Button Symbol. What you name them is up to you. Give each button an Instance Name, like this (Instance Name in Bold):

   1st Button - button_1

   2nd Button - button_2

   3rd Button - button_3

   4th Button - button_4

5. Next, in the Slider layer draw your "sliding" object. I used a rectangle with an arrow on it. Turn your object into a Movie Clip Symbol, what you name it will be used in the Action Script. So for this tutorial, name it: slider_mc and give it an Instance Name of: slider. Place your slider underneath one of the buttons in your menu. It'll slide horizontally from this position. Here's what your Properties Panel should look like with the slider_mc selected:

   

   [properties for slider_mc]

   ActionScript:

6. With your slider_mc selected, open the Actions Panel (F9) and copy and paste this:

    

   onClipEvent (load) {

   xMove = _x;

   easeSpeed = 5;

   }

   onClipEvent (enterFrame) {

   _x += (xMove-_x)/easeSpeed;

   }

    

7. Next, in the Actions layer select the blank frame and open the Actions Panel (F9). Copy and paste this (notice your button's Instance Names in the script):

    

   easeSpeed = 5;

   //slider_mc is your Movie Clip's name, not the Instance Name.

   slider_mc.onEnterFrame = function() {

   this._x += (xMove1-this._x)/easeSpeed;

   };

   button_1.onPress = function() {

   xMove = button_1._x;

   };

   button_2.onPress = function() {

   xMove = button_2._x;

   };

   button_3.onPress = function() {

   xMove = button_3._x;

   };

   button_4.onPress = function() {

   xMove = button_4._x;

   };

    

8. Select your first button (button_1) and again open the Actions Panel (F9). Copy and paste this:

    

   on (rollOver) {

   // slider - Movie Clip's Instance Name. button_1 - Button's Instance Name.

   slider.xMove = button_1._x;

   }

    

9. Repeat the previous step for every button, but remeber to change the code where it says "button_1._x;" to match the Instance Name of every button (button_2, button_3, button_4).

10. In my example I added a line underneath the "slider" to make it seem like the object was actually sliding on that line. This of course is optional.

11. You're done!!! Test your movie out to see if it functions properly.

Well, you have successfully completed the "Menu with Slider" tutorial. Congratulations! In the next page I will explain the ActionScript code that makes our menu work.

---

page 1 of 2

---