Start/Stop setInterval function onRollOver problem

[alpineedge3]

[Link to my Zip File] (http://web.mit.edu/gmarz/public/flash/gmarz.zip)

I have set up 5 mc's (balls) that all rotate +30 degrees every 30ms using setInterval. But I want them to pause when the mouse hits one of the balls. and then on rollout, I want them to resume spinning.

So I've tried using "clearInterval" onRollOver and setInterval "onRollOut" to start the spinning again. it works perfectly the first rollover and rollout, but then if the mouse hits a ball again, it doesn't stop but rolls faster, as if it began another setInterval of my rotation function. and if the cursor remains still, the next ball rolls into it and they roll faster, and it rolls faster and faster in an infinite loop.

Can somebody help me? It seems like the clearInterval is only executed the first time, but I may be wrong. Also, instead of the balls stopping, I would prefer to eventually have the balls switch to a lower spin rate onRollOver, and then return to normal speed onRollOut. Can I do that by something like:


// pseudocode
somemc.onRollOver=function(){
// clearInterval(spin@30degrees function);
// setInterval(spin@5degrees function,30);
}
somemc.onRollOut= function(){
// clearInterval(spin@5deg);
// setInterval(spin@30deg);
}

?

The following is my .as file that is also included in the zip. Perhaps somebody can see the problem immediately without having to open flash.

[Link to my Zip File] (http://web.mit.edu/gmarz/public/flash/gmarz.zip)


var rootCenterHeight:Number = Stage.height/2;
var rootCenterWidth:Number = Stage.width/2;
var links:Number = 5;
_root.attachMovie("ballSet", "ballSet", 1, {_x:rootCenterWidth, _y:rootCenterHeight});
//
//
for (i=0; i<links; i++) {
_root.ballSet.attachMovie("ballray", "ball"+i, i, {_x:0, _y:0, _rotation:i*360/links});
_root.ballSet["ball"+i].ball.onRollOver = function() {
clearInterval(_root.linkSpinPlay);
};
_root.ballSet["ball"+i].ball.onRollOut = function() {
setInterval(_root.linkSpin, 30);
};
}
var sq2 = function (x) {
// squares a number
return (x*x);
};
_root.angle = 5;
//degrees per iteration
function linkSpin() {
for (i=0; i<links; i++) {
_root.ballSet["ball"+i]._rotation += _root.angle;
}
}
function shrinkNGrow() {
var mouseDistToCenter:Number = Math.round(Math.sqrt((_root._xmouse-_root.rootCenterWidth)*(_root._xmouse-_root.rootCenterWidth)+(_root._ymouse-_root.rootCenterHeight)*(_root._ymouse-_root.rootCenterHeight)));
//trace(mouseDistToCenter);
// radius & angular velocity change as function of mouseDistToCenter
for (i=0; i<links; i++) {
if (mouseDistToCenter<=283) {
//
// zoom function y=-.5*x^2+200
_root.ballSet["ball"+i].ball._x = Math.abs(-sq2((1/20)*mouseDistToCenter)+200);
//
//
var deltaR = Math.abs(mouseDistToCenter-_root.ballSet["ball"+i].ball._x);
if (Math.abs(mouseDistToCenter)<=350) {
var sizeFn = Math.abs(.6*(350-mouseDistToCenter)+100);
_root.ballSet["ball"+i].ball._xscale = sizeFn;
_root.ballSet["ball"+i].ball._yscale = sizeFn;
//trace(_root.ballSet["ball"+i].ball._xscale+" = "+mouseDistToCenter+"+100");
} else {
_root.ballSet["ball"+i].ball._xscale = 100;
_root.ballSet["ball"+i].ball._yscale = 100;
}
//trace(_root.ballSet["ball"+i].ball._xscale+"%"+" ballR = "+_root.ballSet["ball"+i].ball._x);
} else {
_root.ballSet["ball"+i].ball._x = 0;
_root.ballSet["ball"+i].ball._xscale = 140;
_root.ballSet["ball"+i].ball._yscale = 140;
}
}
}

linkSpinPlay = setInterval(linkSpin, 30);
shrinkNGrowPlay = setInterval(shrinkNGrow, 30);


TIA

[sleekdigital]

In order to clear an interval, you have to set the return value of the setInterval call to a variable, then use that variable as the parameter in the clearInterval call. In the rollout handler you are not setting it to a variable, so it cannot be cleared

[misterjerry]

ok I just check your code .... line 12

_root.ballSet["ball"+i].ball.onRollOut = function() {
setInterval(_root.linkSpin, 30);
};


there is no var for your setInterval, you need something like this :

myInterval = setInterval(_root.linkSpin, 30);

To clear it :

clearInterval(myInterval );

On the other hand you must insert a clear interval before setInterval like this ....

_root.ballSet["ball"+i].ball.onRollOver = function() {
clearInterval(myInterval);
};
_root.ballSet["ball"+i].ball.onRollOut = function() {
clearInterval(myInterval);
myInterval = setInterval(_root.linkSpin, 30);
};

hope this help !! sorry for my english

MisterJerry

[alpineedge3]

sorry i'm a little confused. i thought i set the return value of setInterval as a variable: (linkSpin is the function, linkSpinPlay is the setInterval function). so the variable has to be within the for loop?


for (i=0; i<links; i++) {
_root.ballSet.attachMovie("ballray", "ball"+i, i, {_x:0, _y:0, _rotation:i*360/links});
_root.ballSet["ball"+i].ball.onRollOver = function() {
clearInterval(_root.linkSpinPlay);
};
_root.ballSet["ball"+i].ball.onRollOut = function() {
setInterval(_root.linkSpin, 30);
};
}
// at end of code
linkSpinPlay = setInterval(linkSpin, 30);
shrinkNGrowPlay = setInterval(shrinkNGrow, 30);

[alpineedge3]

ah i got it to work... thanks misterjerry and sleekdigital