Sliding Menu - Page 5

All right! It's the last page. In the previous page, 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.

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

• Menu with Slider
• Sliding Menu

1 | 2 | 3 | 4 | 5