Simple Scripted MC Movement/Easing

Okay, I quit. I’ve tried incrementing _x, startDrag’s with easing…nothing. Anyone that can help explain how to code the little red bar for the navigation on this site ( http://www.brandnewrock.com/index.php ) will become my hero.

I’m kind of new, kind of not new…which is why I feel like an *** posting this question, because I SHOULD KNOW THIS.


MovieClip.prototype.easeX = function(tX){
this.onEnterFrame = function(){
this._x = tX-(tX-this._x)/1.6;
this._x > tX-1 && this._x < tX+1 ? delete this.onEnterFrame : null
}
}
btn1.onRollOver = btn2.onRollOver = btn3.onRollOver /*...*/ = function(){
redLine.easeX(this._x);
}

Heh…yea…about ten seconds after posting I checked the Flash MX 2004 forum…and saw your post almost identical to this one.

Thanks a bunch, and I amended the function a bit to set the underline MC’s width equal to the MC it resides under, as well as easing the movement.

Sorry to bother this thread again, but again, I can’t get this to work the way I want it.

How can I set it so that if the mouse is not over the navigation buttons (ie. home, portfolio, etc.) the underline moves away from all navigation buttons (by setting its x equal to -300, for example)?

I used a a function that used hitTests and setIntervals…but the action would still fire (with the appropriate delay a-la setInterval) when the mouse was over the nav MCs.

Oh, and here’s the AS:

On frame one:

MovieClip.prototype.easeX = function(tX, tWidth) {
	this.onEnterFrame = function() {
		this._x = tX-(tX-this._x)/1.2;
		this._width = tWidth-10;
		this._x>tX-1 && this._x<tX+1 ? delete this.onEnterFrame : null;
	};
};
function easeOff() {
	homeTest = hitTest(home._x, home._y);
	portfolioTest = hitTest(portfolio._x, portfolio._y);
	questionsTest = hitTest(questions._x, questions._y);
	experimentsTest = hitTest(experiments._x, experiments._y);
	employmentTest = hitTest(employment._x, employment._y);
	if (!homeTest && !portfolioTest && !questionsTest && !experimentsTest && !employmentTest) {
		underline.easeX(-300, 46);
		clearInterval(easeInterval);
	}
}
function easeFunction() {
	easeInterval = setInterval(easeOff, 4000);
}
home.onRollOver = portfolio.onRollOver=questions.onRollOver=experiments.onRollOver=employment.onRollOver=function () {
	this.gotoAndPlay("mouseOver");
	underline.easeX(this._x, this._width);
};
home.onRollOut = portfolio.onRollOut=questions.onRollOut=experiments.onRollOut=employment.onRollOut=function () {
	this.gotoAndPlay("mouseOut");
	easeFunction();
};

The code works fine for a few rollOver’s…but then it starts to act screwy. Any help?

Using trace, I found that the main problem is that the setInterval keeps getting called every four seconds, instead of just being called once and clearing by way of the easeOff() function. Any suggestions?

How can I get it to stop calling the setInterval? I have the clearInterval…but it doesn’t work…

Anyone? Please? I can offer my first born as payment. :pir:

Well, here’s a sample FLA:

Try this:


MovieClip.prototype.easeX = function(tX){
        this.onEnterFrame = function(){
                this._x = tX-(tX-this._x)/1.6;
                this._x > tX-1 && this._x < tX+1 ? delete this.onEnterFrame : null
        }
}
easAway = function(){
redLine.easeX(-300);
clearInterval(wait);
}
btn1.onRollOver = btn2.onRollOver = btn3.onRollOver /*...*/ function(){
        redLine.easeX(this._x);
}
btn1.onRollOut = btn2.onRollOut = btn3.onRollOut /*...*/ function(){
wait = setInterval(easeAway,2000)
}


That exactly what I’m trying, and it works…except that it doesn’t clear the setInterval and keeps calling it over and over (and multiple times, for each rollOut call).

Try :


MovieClip.prototype.easeX = function(tX){
        this.onEnterFrame = function(){
                this._x = tX-(tX-this._x)/1.6;
                this._x > tX-1 && this._x < tX+1 ? delete this.onEnterFrame : null
        }
}
easAway = function(){
        redLine.easeX(-300);
        clearInterval(_root.wait);
}
btn1.onRollOver = btn2.onRollOver = btn3.onRollOver /*...*/function(){
        redLine.easeX(this._x);
}
btn1.onRollOut = btn2.onRollOut = btn3.onRollOut /*...*/function(){
        _root.wait = setInterval(easeAway,2000)
}