Friday, July 20, 2007

Sliding Navigation

I just made a sliding navigator that will stop when it gets to the end of the menu...
Here is is in action, with a few added bonuses:
This is also a good example of xml...
[view slider] :::: Download all the files (zipped): [download]
[click] This is how it was implemented. It doesn't slide cuz there are only 4 right now.

And here's the code:
and you can download fla here (simple version)

you need to make 3 movieclips first
slider_mc = the clip with your buttons/nav
mask_mc = will mask the slider_mc
hitState_mc = pretty self explanitory

center = hitState_mc._x+(hitState_mc._width/2); //determines the center of the hit state
active = false; //you're mouse isn't over the hit state
minGoal = mask_mc._x; //tells it how far to the right it can go
maxGoal = minGoal-(slider_mc._width-mask_mc._width); //how far to the left it can go
speed = 50; //sets the initial speed
speed /= 100; //sets the acceleration
destination = minGoal; //this will be used to tell it where to animate to first

//this is what happens when you roll over hit state
hitState_mc.onMouseMove = function() {
if (this.hitTest(_xmouse, _ymouse, true) && active == false) {
moveMenu(); //calls the mover function
active = true; //reset variable
} else if (!this.hitTest(_xmouse, _ymouse, true) && active == true) {
delete (slider_mc.onEnterFrame); //stop moving clip
active = false; //reset variable

////// MOVER FUNCTION ////////////
function moveMenu() {
slider_mc.onEnterFrame = function() { //give it a brain
if (_xmouse < center) { //if mouse is LEFT of center
//trace("move right");
if (slider_mc._x //increment = Math.abs(slider_mc._x - minGoal) / speed;
increment = Math.abs(_xmouse-center)*(speed/10); //how far is the mouse away from center?
slider_mc._x += increment; //move the clip RIGHT
} else {
//trace("move left");
if (slider_mc._x>maxGoal) { //mouse is to the RIGHT
//increment = Math.abs(slider_mc._x - maxGoal) / speed;
increment = Math.abs(_xmouse-center)*(speed/10); //how far from center?
slider_mc._x -= increment; //move clip LEFT

No comments: