Hey guys,
I’m working on a navigation component for a site that is similar to the one on yugop.com, particularly the 1|2|3|4|5 buttons at the bottom. The idea is that based on the button you have hovered the others adjust accordingly to allow it to expand.
Nothing too complicated but this is where I run into trouble.
In my init() function there is a variable that sets the Easing for my animations like so:
easingSpeed = 1;
The method in which easingSpeed is used is performed every frame and it sets the width of the buttons using this variable like so:
grow_mc.bg_mc._width += (maxWidth-grow_mc.bg_mc._width)/easingSpeed;
The problem occurs if I try to set the easing to anything over 1.
Here is an example of the swf with Easing of 1:
http://www.fueladvertising.com/navigation_examples/navigation_easing_1.html
And here is an example of the same nav with Easing of 2:
http://www.fueladvertising.com/navigation_examples/navigation_easing_2.html
Notice how the last button, in this case Portfolio, shifts to the right if you hover over the other buttons, the faster you hover them the more it moves to the right.
My guess is that somehow pixels get added to some of the buttons’ widths and that forces the last button to move further on the _x axis.
I would really really appreciate any help that I can get, as I’ve been trying to figure this out for days now but to no avail. 
Here is the full code if I anyone would like to tackle this issue:
// Import the easing equation class
//import com.robertpenner.easing.Elastic;
import mx.transitions.Tween;
import mx.transitions.easing.*;
function init() {
trace("init");
// set navigation properties
space = 0;
easingSpeed = 1;
minWidth = 100;
maxWidth = 150;
selectedItem = 0;
clickedItem = 0;
growingItem = null;
reducingItem = null;
growDelay = 1;
growTime = 0;
items_arr = [];
textanimTime = 50.5;
textanimDuration = 75;
//////////////////////////////////////////////////////////////////////////////////////////////
// CREATE MCs that will run every frame and will modify button widths based on selected/hovered
this.createEmptyMovieClip("updater_mc",-2).onEnterFrame = update;
//////////////////////////////////////////////////////////////////////////////////////////////
// CREATE text animation movie clip
this.createEmptyMovieClip("textanim_mc",-1);
//////////////////////////////////////////////////////////////////////////////////////////////
}
function addItem(label, blurb, data) {
var i = items_arr.length;
// SET data properties and duplicate button
if (i == 0) {
data.id = 0;
data.mc = item0_mc;
data.smalltext = label;
data.shortdesc = blurb;
items_arr.push(data);
} else {
data.id = i;
data.mc = item0_mc.duplicateMovieClip("item"+i+"_mc", i);
data.smalltext = label;
data.shortdesc = blurb;
items_arr.push(data);
}
//////////////////////////////////////////////////////////////////////////////////////////////
// SET button movie clip properties
data.mc.id = i;
data.mc.label = label;
data.mc.shortdesc = blurb;
data.mc._x = i*(minWidth+space);
//////////////////////////////////////////////////////////////////////////////////////////////
// SET total width | 11/18 Added the space modifier in case of future updates and requirements
//totalWidth = ((items_arr.length-1)*minWidth)+maxWidth;
totalWidth = ((items_arr.length-1)*minWidth)+maxWidth+(items_arr.length-1)*space;
//////////////////////////////////////////////////////////////////////////////////////////////
}
// ANIMATE text
function startTextAnimation(oldId,newId){
items_arr[oldId].mc.shortdesc = items_arr[oldId].shortdesc;
trace(items_arr[oldId].mc.shortdesc);
trace(items_arr[oldId].shortdesc);
// RETRIEVE total length of the string to be animated
//var strlen = items_arr[newId].text.length;
var strlen = items_arr[newId].mc.shortdesc.length;
//////////////////////////////////////////////////////////////////////////////////////////////
// RUN every frame
textanim_mc.onEnterFrame = function(){
var rndstr = "";
// ANIMATE text and POPULATE text fields
if ((textanimDuration - textanimTime) < strlen){
rndstr += items_arr[newId].shortdesc.substr(0, strlen - (textanimDuration - textanimTime));
for (var i = 0; i<(textanimDuration - textanimTime); i++){
rndstr+= String.fromCharCode(random(1));
}
} else {
for (var i = 0; i<strlen; i++){
rndstr+= String.fromCharCode(random(1));
}
}
//////////////////////////////////////////////////////////////////////////////////////////
// Changed FROM items_arr[newId].mc.label = items_arr[newId].smallText +":"+ rndstr
items_arr[newId].mc.shortdesc = rndstr;
if (textanimTime++ > textanimDuration){
// Changed FROM items_arr[newId].mc.label = items_arr[newId].smallText +":"+ items_arr[newId].text
trace(items_arr[newId].text);
items_arr[newId].mc.shortdesc = items_arr[newId].mc.shortdesc;
textanimTime = 0;
delete this.onEnterFrame;
}
}
//////////////////////////////////////////////////////////////////////////////////////////////
}
//////////////////////////////////////////////////////////////////////////////////////////////
// ROLLOVER event - Receives button as argument
function selectItem(itemId) {
trace("rollover");
trace(itemId);
trace(items_arr[itemId]);
var grow_mc_alpha_tween:Object = new Tween(items_arr[itemId].mc.bg_mc, "_alpha", Regular.easeOut, 99, 30, 0.6, true);
var grow_mc_tween:Object = new Tween(items_arr[itemId].mc.labelTxt, "_y", Regular.easeOut, 38, 15, 0.6, true);
var grow_mc_shortdescTxt_tween:Object = new Tween(items_arr[itemId].mc.shortdescTxt, "_y", Regular.easeOut, 102, 35, 0.6, true);
var grow_mc_scale_shortdescTxt_tween:Object = new Tween(items_arr[itemId].mc.bg_mc, "_yscale", Regular.easeOut, 100, 150, 0.6, true);
growTime = 0;
selectedItem = itemId;
totalWidth = maxWidth+(items_arr.length)*(minWidth+space)-space;
}
//////////////////////////////////////////////////////////////////////////////////////////////
// ROLLOUT event - Receives button as argument
function deselectItem(itemId) {
trace("rollout");
trace(itemId);
trace(items_arr[itemId]);
var reducing_mc_alpha_tween:Object = new Tween(items_arr[itemId].mc.bg_mc, "_alpha", Regular.easeOut, 31, 99, 0.6, true);
var reducing_mc_tween:Object = new Tween(items_arr[itemId].mc.labelTxt, "_y", Regular.easeOut, 16, 39, 0.6, true);
var reducing_mc_shortdescTxt_tween:Object = new Tween(items_arr[itemId].mc.shortdescTxt, "_y", Regular.easeOut, 36, 102, 0.6, true);
var reducing_mc_scale_shortdescTxt_tween:Object = new Tween(items_arr[itemId].mc.bg_mc, "_yscale", Regular.easeOut, 150, 100, 0.6, true);
growTime = 0;
selectedItem = clickedItem;
}
//////////////////////////////////////////////////////////////////////////////////////////////
// CLICKED event - Receives button as argument
function clickItem(itemId){
clickedItem = itemId;
}
//////////////////////////////////////////////////////////////////////////////////////////////
// PERFORMED every frame
function update() {
// RETRIEVE reducing and growing button ids
if (growTime++ == growDelay && growingItem != selectedItem ) {
textanimTime = 0;
startTextAnimation(growingItem, selectedItem);
reducingItem = growingItem;
growingItem = selectedItem;
}
///////////////////////////////////////////////////////////////////////////////////////////
// retrieve reducing and growing button movie clips and update their widths
var grow_mc = items_arr[growingItem].mc;
var reducing_mc = items_arr[reducingItem].mc;
grow_mc.bg_mc._width += (maxWidth-grow_mc.bg_mc._width)/easingSpeed;
var restWidth = totalWidth-grow_mc.bg_mc._width-(items_arr.length-1)*(space+minWidth);
reducing_mc.bg_mc._width = restWidth;
var sumWidth = 0;
///////////////////////////////////////////////////////////////////////////////////////////
for (var i = 0; i<items_arr.length; i++) {
var item = items_arr*.mc;
item._x = sumWidth;
sumWidth += item.bg_mc._width+space;
}
}
// start
init();
