Arrays, for loops and tweens: the question

1

Hi all,

Since this is my first post, I will shout out a big THANKS for your tutorials on this site. They’ve helped me out a lot over the course of 2006. A great service :slight_smile:

Now, onto my question. I am trying to achieve the following…please don’t be scared away by my large description - i feel its better if I explain what I want to achieve, before I explain what isn’t working :slight_smile:

I have a set of four navigation buttons (subnav1, subnav2, subnav3, subnav4).

The effect I want is when you rollover one of them, it tweens to the left (takes .5 a second) and stops until you rollOut of it - which causes it to tween back to its origonal position (which takes another .5 seconds).

If you are to rollOver then quickly rollOut, the button still tweens to the left and then straightaway tweens back to its starting position. Each button should be independant - i.e. one button doesn’t need to finish tweening before another button starts :slight_smile:

Straightforward, no? It should be, but i’m having all sorts of trouble with it.

OKAY, now i’ve told you what I want to happen, here is where i’m at with it:

Note: I am open to a totally different way of doing this. I dont have to do it this way. This is just the way I thought was the easiest way to do it.

import mx.transitions.Tween; 
import mx.transitions.easing.*;
 
//a for loop which sets the _x position of all buttons
//and declares a couple of variables for later use
for(i =0; i < 4; i++){
 sub_nav_mc["subnav" + (i + 1)]._x = 92;
 var xNumber:Number; //= sub_nav_mc["subnav" + (i + 1)]._x;
 var currentSubNav:MovieClip = sub_nav_mc["subnav" + (i + 1)];
 var selectedSubNav:MovieClip;
 
  
// this code is for the rollOver of each button
//& sets curentSubNav as 'this'
//and then finally calls function 'BarStretch'
  sub_nav_mc["subnav" + (i + 1)].onRollOver = function(){
  currentSubNav = this;
  xNumber = this._x;
        barStretch();
    };
 
// this code is for the rollOut of each button
//& sets selectedSubNav as 'this'
//and then finally calls function 'BarRollOut'
 sub_nav_mc["subnav" + (i + 1)].onRollOut = function(){
  selectedSubNav= this;
  xNumber = this._x;
  BarRollOut();
 }
}
 
//Barstretch is called onRollOver
//It says if xNumber is less than 92, dont animate,
//but if xNumber is 92, then execute tween 'xRollOver', which is the tween that pushes
//the current button to the left
barStretch = function() {
 onEnterFrame = function() {
        if(xNumber < 92) {
  }else{
   var xRollOver:Tween = new Tween(currentSubNav, "_x", None.easeOut, 92, 65, 0.5, true);
   delete onEnterFrame;
  }
    }
}
 
//BarRollOut is a function called onRollOut
//It loops until xNumber is is at 65, then it tween back to the right
BarRollOut = function() {
 onEnterFrame = function() {
  xNumber = selectedSubNav._x;
        if(xNumber > 65) {
  }else{
   var xRollOut:Tween = new Tween(selectedSubNav, "_x", None.easeIn, 65, 92, 0.5, true);
   delete onEnterFrame;
  }
    }
}
 
 
xRollOver.onMotionFinished = function() { 
stop();
}; 
xRollOut.onMotionFinished = function() { 
stop();
};

This works just fine if I rollover each button one at a time. But if I quickly rollOver more than 1 button in succession, things go all screwey. Say I rollOver all 4 buttons in one swoop, only the last button rolled out of executes the tween back to starting position. It’s as if something is being overwritten?

I’m sorry for my long windedness - I am just at my wits end with this and need some help semi urgently…much appreciated in advance!