Tutorials
Books
Videos
Forums
This is an archived tutorial from the kirupa.com legacy collection. It covers software that may no longer be available, but it is kept online because the ideas still hold up.
The sliding menu is a nice, compact way of displaying information. Instead of displaying content over multiple pages, all of your content is located one large movie clip. The content the user wishes to access simply slides into place.
In this tutorial, I will explain how to create an easily extensible, horizontal sliding menu. You can see an example of the sliding menu below:
[ click on the colored squares on the left to see the menu in action ]
Let's get started:
First, download the partial source file for this tutorial. It only contains the sidebar with the buttons. That way, you can focus your energies on creating the sliding menu as opposed to worrying about other, unnecessary details:
Once you have downloaded and extracted the contents of the file, open the easing_tutorial source filein Flash. After you open it, you should see a large gray rectangle with sidebar on the left with five buttons. Each button has an instance name: b1, b2, b3, b4, b5.
[ background and buttons ]
Let's create the sliding content rectangles. Insert a new layer and call it content. On your new layer, draw a colored rectangle using the Rectangle Tool.
Select your newly drawn rectangle and, by using the Properties Panel, ensure it has a width of 250, height of 200, X offset of 50, and a y offset of 0:
[ the width and height properties ]
As you can see, the rectangle now covers up the large gray space not occupied by the sidebar. This will be our first content movie clip. Select the rectangle again and press Ctrl + F8 (Modify | Convert to Symbol). Select Movie Clip and press OK.
Your rectangle is now a movie clip. Give your rectangle movie clip the instance name content1.
Let's create another rectangle. On your content layer,
using your rectangle tool, draw another rectangle with width of 250 and a
height of 200. This time, set its X offset to 300, and the Y offset will
again be 0.
Your new rectangle should neatly appear directly to the right of your
earlier rectangle:
[ the new rectangle you drew ]
Just like you did before, convert this Rectangle into a movie clip. Give it the instance name content2.
Repeat steps vii and viii to create three more rectangle movie
clips. Ensure that each rectangle movie clip's x position is 250 pixels more
than the x position of the rectangle it is following.
The following list should help you with the x positions:
Rectangle 3's x position: 550
Rectangle 4's x position: 800
Rectangle 5's x position: 1050
The other properties for the rectangle will stay the same. The width for all of the rectangles will be 250 pixels, the height will be 200 pixels, and the Y offset will still be 0.
Note
Do not copy and paste a previous rectangle movie clip and place it in your new location. When you want to add content to your movie clip, you will find that the same content will be displayed in all three of your other duplicated movie clips. You usually do not want that!
Ensure that you now have five rectangle movie clips on the
stage. Each movie clip should have the instance name content1, content2,
content3, content4, or content5.
The following is an image of my stage at 25% zoom level:
[ a zoomed out view of all of the rectangles ]
So far, in this page you saw an example of what you will create, and you made some good progress in recreating the example animation. You now have five movie clips that will represent the content (menus) in our animation.
In the next section, we will pick up from here and get a few steps closer towards finishing up this sliding menu.
In the previous section, you created the content movie clips. Let's pick up from where we left off on this page.
[ insert a new layer called mask ]
[ you should only see the masked content1 movie clip now ]
Recreating the effect is only half the fun. In the next few pages you will learn the design choices that went into creating our sliding menu, and that will be wrapped up by a line by line explanation of how our code correlated with the design choices made.
In the previous two pages (page 1, page 2), you created a working sliding menu. In this page, I will explain the design choices that led to our final sliding menu.
In designing the menu, I focused on two things:
Overall, the design is not complicated. Combining both of those choices well is, as you will find out, quite straightforward.
Instead of fiddling with each individual content movie clip in the menu, I place all of the content movie clips into a larger movie clip called contentHold. The following diagram is an example of how the menu layout in this tutorial looks like:
Placing the content inside a separate movie clip provided a level of (techno-babble alert!) abstraction. I can treat all of the content movie clips as one movie clip instead of individual movie clips with their own x and y positions.
Adding more content movie clips now becomes as easy as tagging another movie clip to the end of your contentHold movie clip. To our code, the only thing that changes is the width of the contentHold movie clip. It does not, and it need not know that an extra content movie clip was added. Isn't abstraction a time-saver?
Like I mentioned earlier, the speed at which you ease from one content movie clip to the next movie clip depends on the distance between the movie clips. The following graph displays approximately how your speed varies as you reach your final destination:
Now that you have a brief overview of the sliding menu's design, let's take a look at how our code wraps up our animation.
In the previous section, I provided a brief overview of the design behind the animation. In the next few pages, we will shift gears and focus on the code that runs the sliding effect.
Let's get started:
b1.onRelease = function() {
menuSlide(contentHold.content1);
};
b2.onRelease = function() {
menuSlide(contentHold.content2);
};
b3.onRelease = function() {
menuSlide(contentHold.content3);
};
b4.onRelease = function() {
menuSlide(contentHold.content4);
};
b5.onRelease = function() {
menuSlide(contentHold.content5);
};The above lines of code execute when any of our five buttons are clicked because they are tied to the onRelease event handler. When a button is clicked, you make a call to the menuSlide function. The menuSlide function takes in the argument of a movie clip, and in our case, the movie clip our button is associated with. For example, button b1 is associated with the content1 movie clip located in our contentHold movie clip.
var currentPosition:Number = contentHold.content1._x;
var startFlag:Boolean = false;The currentPosition variable stores the x position of the movie clip that is currently displayed. Our initial position is the content1 movie clip's x position because that is the default movie clip that displays when your animation loads.
The startFlag variable stores a boolean value, true or false. When you click on a button, the menu slides to a new location. If you happen to click on another button while the menu is moving, nothing happens. Our startFlag value, as you will later see, ensures that you do not change the final destination while our menu is moving.
menuSlide = function (input:MovieClip) {The menuSlide function is responsible for actually moving our menu. It takes a movie clip object as its argument, and it references that movie clip object as the variable input.
if (startFlag == false) {In the menuSlide function, I immediately check to see whether the startFlag value is set to false. If our startFlag variable is not set to false, that means our menu is still moving.
If our startFlag is set to False, the rest of our code executes.
startFlag = true;I now set the value of startFlag to true. This means that we are in the process of moving the slider and that it is too late to change your final destination.
var finalDestination:Number = input._x;
var distanceMoved:Number = 0;
var distanceToMove:Number = Math.abs(finalDestination-currentPosition);
var finalSpeed:Number = .3;
var currentSpeed:Number = 0;
var dir:Number = 1;The above six lines are variable declarations. The finalDestination variable stores the final destination of our movie clip. The distanceMoved variable is a counter that increments each time our menu actually moves.
The distanceToMove variable gets the magnitude of the distance you need to travel. I subtract our finalDestination value with our currentPosition value. That ensures we have a positive number representing the total distance we have to travel.
The finalSpeed variable stores the maximum speed our menu moves. The speed should be between 0 and 1. The currentSpeed variable stores the speed your movie is currently moving in, and the dir variable is stores the direction your menu should slide.
All of these variables are only declared and initialized here. When your menu is sliding, most of the variables will change their values.
if (currentPosition<=finalDestination) {
dir = -1;
} else if (currentPosition>finalDestination) {
dir = 1;
}These lines are fairly straightforward. I check to see if where I need to go is to the left of where I am now or to the right of where I am now. The dir variable stores either a negative 1 or a positive depending on the answer to my question.
I can use the dir value to determine the direction my menu moves easily. For example, instead of having separate this._x +=5 or this._x -= 5 statements, I can cleanly write this._x += dir*5. When dir is 1, I am either moving right by 5, and when dir is -1, I am moving left by 5.
All right! It's the previous section. In the previous section, I started explaining the ActionScript. In this page I will finish explaining the remaining lines of code.
We left off here:
this.onEnterFrame = function() {I create an onEnterFrame handler to process the code related to actually moving the slider from one point to another. Because any code contained within onEnterFrame executes at the frame rate of the movie, it is a great place to execute code that needs to be updated quickly enough to be drawn on screen.
currentSpeed = Math.round((distanceToMove-distanceMoved+1)*finalSpeed);
distanceMoved += currentSpeed;The currentSpeed variable subtracts our distanceToMove and distanceMoved data to figure out what the speed at this moment in time should be. A value of 1 is added to avoid having distanceToMove and distanceMoved subtract themselves out to 0. The difference is then multiplied by our finalSpeed value and rounded.
The distanceMoved is incremented by what the currentSpeed value is. Essentially, we want to measure how far our slider has moved. The distance moved is dependant only on the currentSpeed, as you will see in the next line:
contentHold._x += dir*currentSpeed;Our contentHold movie clip's x position is incremented by the value of our direction variable, dir, and the currentSpeed value. Notice that in order to determine the final destination, I used the nested content movie clips inside contentHold. But, in order to move the actual slider, I am only moving the contentHold movie clip. The reason is that it is simply easier to move one movieclip containing nested movie clips as opposed to moving each nested movie clip individually.
if (Math.abs(distanceMoved-distanceToMove)<=1) {This line checks to see if we have slid our way to the final destination. If the difference in magnitude of the distance to our destination and the distance moved is less than one, then that means that we have reached our destination.
Geekspeek
You should notice that I check if the magnitude (of the difference between where we are and how far we have already traveled) is less than one as opposed to zero. The reason is, you will never reach a magnitude of zero.
The currentSpeed value will approach a number close to zero, but it will never quite reach it. Your distanceMoved or the contentHold._x variables could be incremented by something really small as .00001 but never 0. The number 1 is a good tradeoff between ending the movement without having the stop look jerky and missing a few frames.
Mathematically, the currentSpeed variable has a horizontal asymptote at y = 0.
contentHold._x = maskMovie._x-currentPosition+dir*distanceToMove;
currentPosition = input._x;
startFlag = false;
delete this.onEnterFrame;These lines execute when the above if statement says "Hey! The menu has reached its destination!" In other words, we are essentially done. What we need to do is restore some of our variables and the contentHold's position to its absolute position based on the button pressed.
I explicitly specify contentHold's final position because as you keep running the animation, your contentHold's x position will start to be offset by a few fractions of a pixel. Over a period of time, the position offset will become annoyingly noticeable. I ensure consistency by hard-encoding the end x position of our contentHold movie clip.
The currentPosition value is reset to be the value of your input movie clip, input. Because we are done with the animation, startFlag is reset to false. This means that you can press another button and have the menu move to the new location you specify.
Our final line, and arguably the most important, deletes the onEnterFrame I created earlier. Because onEnterFrame continually executes code contained in it, deleting the onEnterFrame ensures that Flash does not consume unnecessary CPU cycles when you are not actively playing around with the menu.
Wasn't this fun? Sliding menus are great ways of displaying information. The sliding menu you created in this tutorial allows for easy extensibility. Adding new content is as simple as tagging another movie clip onto the end of your contentHold movie clip.
I have included the final source file for you to look through:
If you wish to learn more about sliding menus, there are a few more tutorials on kirupa.com that cover this topic:
Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.
Your support keeps this site going! 😇
:: Copyright KIRUPA 2026 //--