Sliding Menu - Page 4

In the previous page, 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.

Onwards to the next page!

1 | 2 | 3 | 4 | 5