Basic Sliding Menu/Navigation with Easing

[kirupa]

Hey everyone,
Here is a file that I was working on earlier today. It is a sliding menu with a slight ease. Depending on how much free time I have, I might make a tutorial out of this.

Here is the code:

var currentPosition:Number = contentHold.content1._x;
var startFlag = 0;
menuSlide = function (input:MovieClip) {
if (startFlag == 0) {

startFlag = 1;

var finalDestination:Number = input._x;
var distanceMoved:Number = 0;
var distanceToMove:Number = Math.abs(finalDestination-currentPosition);
var finalSpeed:Number = 5;
var currentSpeed:Number = 0;
var dir:Number = 1;

if (currentPosition<=finalDestination) {
dir = -1;
} else if (currentPosition>finalDestination) {
dir = 1;
}

this.onEnterFrame = function() {
currentSpeed = Math.round((distanceToMove-distanceMoved+1)/finalSpeed);
distanceMoved += currentSpeed;
contentHold._x += dir*currentSpeed;
if (Math.abs(distanceMoved-distanceToMove)<=1) {
contentHold._x = maskMovie._x-currentPosition+dir*distanceToMove;
currentPosition = input._x;
startFlag = 0;
delete this.onEnterFrame;
}
};
}
};
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);
};
Cheers!
Kirupa :cowboy:

[freeskier89]

Looks good kirupa :) I assume it is using masks and it moves movieclips, no? I can't look at the source at the moment, but looks good :) One of these days I'll get around to writing some good tutorials for you. :P I have been really really busy lately

[kirupa]

Yeah, it uses a mask and a main movieclip called contentHold (I think). Within that, there are five 250px wide movie clips that contain solid blocks color. To add new content, you would add another 250px wide movie clip right next to whatever the last movie clip is on the list.

With all the entries you did for the current contest, I'm sure wanting to write tutorials is probably the last thing on your mind :P

:cowboy:

[freeskier89]

With all the entries you did for the current contest, I'm sure wanting to write tutorials is probably the last thing on your mind :P haha :P

Well I couldn't pass up the contest, I thought I would give it my best shot even though I should have been doing other things :P Thanks a ton for having it, I have learned a lot from it :kommie:

Well, when I do around to right some tutorials I was thinking about having a large section on the practical implementations of recursion, including but not limited to fractals, path-finding, spacefilling, multi-tier menus, etc. Alright i'll stop hijacking your thread now :hugegrin:

[kirupa]

Well, when I do around to right some tutorials I was thinking about having a large section on the practical implementations of recursion, including but not limited to fractals, path-finding, spacefilling, multi-tier menus, etc. Alright i'll stop hijacking your thread now :hugegrin:
Those topics sound great, and best of all, they haven't been covered before on the site :)

[asael2]

Hi kirupa, that´s just a very good menu system, I´m trying to use it in a proyect, but when I resize it to fit in my area into a 640*480 stage, it doesnt fit, I mean: When click in boton 1 it goes to rigth place, "content 1" but that doesn´t happend with the oters clips, it just stop in middle of those or off screen, I´ve check the code, but can´t find what can I change to make it work.
attached is the swf, so you can see the problem.

In Advance, thanks for your help

[Gupps]

you have to go to the align tool and set it to top left for each content box. I'm pretty sure that is your problem. Send me your fla if you still have problems with it

[asael2]

Hi Grupps, thanks for your quiclky answer, Im not pretty sure how this should be function , but I need this menu to function in the place it is in my proyect, fla attached for you to check.

Thanks for your help

[Joppe]

Is it hardcoded or does it check the exact width of each movieclip and then tells the script how much to scroll?
Sorry for the stupid question (:P) But all the menus ive seen like this are hard coded :o

[asael2]

;( I resize it manually to fit the content needed, .....somebody tellme it´s urgent

[asael2]

;( I resize it manually to fit the content needed, .....somebody tellme it´s urgent

yeap that was the problem... hard coded, not manual resize, it needed to recreate the mc contianers ...... (-:

[so1980]

here's what i've done with kirupa's menu. i'm going to put it on a site i'm working on, but basically when you press a button, you get a random sentence that slides over. there's only 15 sentences right now, as a test, taken from the oxford english dictionary, so you might get a lot of repetition. anyways...feedback is welcome. :be:

[dariux@dariux.c]

Hi guys this is my first post. I liked the menu system kirupa's but when i did the test doesn't work correctly, but yours posts help me to resolve the problem. I integrated the menu in my recent proyect. Thanks and excuse me for my bad english.:pir:

[Gupps]

@asael2 you scaled the first contenthold mc why did you do that. that is what is causing the shift. it needs to be 100percent by 100 percent. same as your hold mc has to be 100percent as well. and why did you space your 5 mcs should be stacked one beside the other

[Gupps]

if you can't figure it out still i will send the fla. i just want you to realize the simple error that you did

[asael2]

thanks Guppss, already solved I´ve understood "phisical" behind that, I did some modifications to fit into mask for main proyect

:smirk2:

[kos010]

here's what i've done with kirupa's menu. i'm going to put it on a site i'm working on, but basically when you press a button, you get a random sentence that slides over. there's only 15 sentences right now, as a test, taken from the oxford english dictionary, so you might get a lot of repetition. anyways...feedback is welcome. :be:

nice gadget dude!

[sansimian]

Hey, I am using this in one of my projects and it all is working sweet, but I have a query.

If you want your movie clips to have an animation which loads the content etc, is there any way of having it so the animation only plays when the menu slides to that page?

I've tried using the following code but it doesn't work:

stop();

if (currentPosition=_root.contentHold.content2) {
play();
}


Any ideas?

[spazbites]

Hello all,

Is it possible to "modify" the code in the way so it slide vertically instead of what it is doing now? Really appreciate it if someone could help me out there.

Thank you