Is there a more efficient way than this...? 1

[carmenMiranda]

I have a movie with three navigation tabs. These tabs all have the same behaviours. The code I have written works perfectly well, but it just isn't very elegant. There must be a better way than the way I have done it.

Can anyone help me by showing me a more efficient way to code this? :-

//-----------define all button actions-----------------

tab01.onRollOver = function() {
	moveTab(tab01, moveSpeed);
};
tab01.onRollOut = function() {
	returnTab(tab01, moveSpeed);
};
tab01.onPress = function() {
	colourTab01.setTint(255, 0, 0, clickShade);
};
tab01.onRelease = function() {
	colourTab01.setTint(0, 0, 0, 0);
	gotoAndStop("tab01");	
	interaction(1);	
};


tab02.onRollOver = function() {
	moveTab(tab02, moveSpeed);
};
tab02.onRollOut = function() {
	returnTab(tab02, moveSpeed);
};
tab02.onPress = function() {
	colourTab02.setTint(255, 0, 0, clickShade);
};
tab02.onRelease = function() {
	colourTab02.setTint(0, 0, 0, 0);
	gotoAndStop("tab02");
	interaction(2);
};

tab03.onRollOver = function() {
	moveTab(tab03, moveSpeed);
};
tab03.onRollOut = function() {
	returnTab(tab03, moveSpeed);
};
tab03.onPress = function() {
	colourTab03.setTint(255, 0, 0, clickShade);
};
tab03.onRelease = function() {
	colourTab03.setTint(0, 0, 0, 0);
	gotoAndStop("tab03");
	interaction(3);
};

//-----------------end button actions---------------------

 

[kennethkawamoto]

I'd use a loop:

for (var i = 1; i<=3; i++) {
	var tab = this["tab0"+i];
	tab.onRollOver = function() {
		moveTab(this, moveSpeed);
	};
	tab.onRollOut = function() {
		returnTab(this, moveSpeed);
	};
	tab.onPress = function() {
		this["colourTab0"+i].setTint(255, 0, 0, clickShade);
	};
	tab.onRelease = function() {
		this["colourTab0"+i].setTint(0, 0, 0, 0);
		gotoAndStop("tab0"+i);
		interaction(i);
	};
}

Kenneth Kawamoto

http://www.materiaprima.co.uk

 

[carmenMiranda]

Well many thanks for the advice, but this code isn't working for me. I put trace actions in place to see what tab was being interacted with and they tell me that code always refers to tab04 - which doesn't exist.

I've tried to see why this might be, but the loop looks good and I can't see the problem. Here's the code with the traces in place:

for (var i=1; i<=3; i++) {
    var tab = this["tab0"+i];
    tab.onRollOver = function() {
		[COLOR=red]trace("Rolled Over Tab0" + i);[/color]
        moveTab(this, moveSpeed);
    };
    tab.onRollOut = function() {
        returnTab(this, moveSpeed);
    };
    tab.onPress = function() {
        this["colourTab0"+i].setTint(255, 0, 0, clickShade);
    };
    tab.onRelease = function() {
        this["colourTab0"+i].setTint(0, 0, 0, 0);
		[COLOR=red]trace("Clicked Tab0" + i);[/color]
        gotoAndStop("tab0"+i);
        interaction(i);
    };
}

Any ideas as to what might be going wrong here?

 

[kennethkawamoto]

OK let's get it working. What do you get if you do this trace instead?

tab.onRollOver = function() {
trace(this);
moveTab(this, moveSpeed);
};

Kenneth Kawamoto

http://www.materiaprima.co.uk

 

[carmenMiranda]

OK - thanks. Using that trace, I get the full path to the tab in question - thus:

_level0.brandElems.tab01_mc
_level0.brandElems.tab02_mc
_level0.brandElems.tab03_mc

 

[kennethkawamoto]

If "moveTab" is defined in the _parent timeline (i.e. "brandElems") you may need to do this:

tab.onRollOver = function() {
this._parent.moveTab(this, moveSpeed);
};

Kenneth Kawamoto

http://www.materiaprima.co.uk

 

[carmenMiranda]

All of the code is defined on the main timeline. The tabs each have a shortcut coded for easy reference:

var tab01:MovieClip = brandElems.tab01_mc;
var tab02:MovieClip = brandElems.tab02_mc;
var tab03:MovieClip = brandElems.tab03_mc;

So even though the tabs are contained within a mc called 'brandElems', this shortcut allows them to be referenced form the main timeline using just 'tab01'.

Does this help explain what's going on?

 

[kennethkawamoto]

Then it should be:

tab.onRollOver = function() {
this._parent._parent.moveTab(this, moveSpeed);
};

Kenneth Kawamoto

http://www.materiaprima.co.uk

 

[carmenMiranda]

Thanks for all your efforts here, but this still isn't working.

My main timeline uses attachMovie() to load a movieclip which is then named 'brandElems'. My tabs sit within this movie, hence the reason for using the shortcut to reference them from the main timeline.

It's frustrating that I can't get the loop to work, no matter what I try, as I can see it's a much better solution.

Unless you have any other ideas, although I really don't want to, it looks like I'll just have to stick with my original code:

var tab01:MovieClip = this.brandElems.tab01_mc;
var tab02:MovieClip = this.brandElems.tab02_mc;
var tab03:MovieClip = this.brandElems.tab03_mc;

//-----------define all button actions-----------------

tab01.onRollOver = function() {
    moveTab(tab01, moveSpeed);
};
tab01.onRollOut = function() {
    returnTab(tab01, moveSpeed);
};
tab01.onPress = function() {
    colourTab01.setTint(255, 0, 0, clickShade);
};
tab01.onRelease = function() {
    colourTab01.setTint(0, 0, 0, 0);
    gotoAndStop("tab01");    
    interaction(1);    
};


tab02.onRollOver = function() {
    moveTab(tab02, moveSpeed);
};
tab02.onRollOut = function() {
    returnTab(tab02, moveSpeed);
};
tab02.onPress = function() {
    colourTab02.setTint(255, 0, 0, clickShade);
};
tab02.onRelease = function() {
    colourTab02.setTint(0, 0, 0, 0);
    gotoAndStop("tab02");
    interaction(2);
};

tab03.onRollOver = function() {
    moveTab(tab03, moveSpeed);
};
tab03.onRollOut = function() {
    returnTab(tab03, moveSpeed);
};
tab03.onPress = function() {
    colourTab03.setTint(255, 0, 0, clickShade);
};
tab03.onRelease = function() {
    colourTab03.setTint(0, 0, 0, 0);
    gotoAndStop("tab03");
    interaction(3);
};

//-----------------end button actions---------------------

Once again, many thanks for trying to help me out.

 

[kennethkawamoto]

Don't give up so fast!

If all your code is in the main timeline (good practice) you can just do like this without setting "tab01" etc:

for (var i = 1; i<=3; i++) {
	var tab = this.brandElems["tab0"+i+"_mc"];
	tab.onRollOver = function() {
		moveTab(this, moveSpeed);
	};
}

Kenneth Kawamoto

http://www.materiaprima.co.uk

 

[carmenMiranda]

Thanks so much for your help - this is working for the rollover and rollout.

The 'gotoAndStop' for the onRelease button is not working, but I'm going to try and see if I can figure it out based on what I've learnt from you so far.

If I can't fix it, I may be cheeky and ask for your help again tomorrow

Many thanks again.