Erain site: effect how-to?

1

Hello guys!

I’m trying to make the same effect that you guys see in this page.

There is a bar on top of the page below the one with Products…Store…Suport…etc. When you do a rollOver on it, a white bar comes from the right to the left and stops at the button that you’re on. I would like to know which script I can use to get the same effect.

I’m trying to do this

the name of the object (bar) : bluebar

on(rollOver){

bluebar._x: …
bluebar._y: …

}

it gives me what I want. the bar stops at the botton that I’m touching but it moves too fast, I want something smooth. Please if you know how to do this, post the script here.

Thanks !!! :slight_smile:

2

actually, just make a movie clip of the thing and place it in the “over” section of the button(s)

3

Here you go, Yean :slight_smile:

4

Thanks for your help… just one question…I would like to undertand a little bit more the script and I haven’t seen before easeTo <—what does that mean?..whats his function?

Thanks :slight_smile:

5 

MovieClip.prototype.easeTo = function(x, y) {
	this.onEnterFrame = function() {
		this._x = x-(x-this._x)/1.2;
		this._y = y-(y-this._y)/1.2;
		this._x>x-1 && this._x<x+1 ? delete this.onEnterFrame : null;
	};
};
home.onRollOver = products.onRollOver=services.onRollOver=support.onRollOver=function () {
	bar.easeTo(this._x-this._width/2-15, this._y);
};

I define easeTo in the prototype object of the MovieClip class, so that every movieclip can access it. As arguments, I define x and y to ease to. Y is actually not necessary here, but it can come in handy for later use.

Then, I define the onEnterFrame handler of the movieclip you use easeTo on. Say I’d use voetsjoeba.easeTo(500,250), then I’m setting the onEnterFrame handler of the movieclip voetsjoeba.

Inside that handler is the code that makes the movieclip ease to the x and y position you passed along to the function as arguments, plus a line that checks if it has reached it’s target, and if so delete the onEnterFrame handler, if not, do nothing.

The first two lines are the actual code that create the movement. What they basically do is get the distance to the target, then dividing that distance by 1.2 onEnterFrame, creating an easing movement. Both for x and y can this be applied. The way you should remember this code is:

property = targetvalue-(targetvalue-property)/1.2

That is my code for easing a property. There are others, but I invented this one myself and I’m sticking with it. You can alter the speed by changing 1.2 to a higher or lower value - higher is faster, lower is slower. Just don’t set it to 1 or anything underneath or you’ll get no movement for 1 or a failed elastic like movement with a value less than one. You can also apply this code on many properties, such as height, width, alpha (thought that doesn’t have much use), even colour easing.

The longer line checks if the current x position is less than target + 1 and more than target -1, so we are actually having a buffer here in which the movieclip may stop easing. I only check for the x position, since logically the y will be there at the same time of the x. The dividing by 1.2 in the easing code takes care of that. If it is inside that buffer, it deletes his onEnterFrame stopping the movement. We need the buffer because it wxill never reach it’s target value, always something very very close to it because of the dividing by 1.2.