Flash AS3 fluid navigation bar.

Question

hi all. I'm horrible with AS3. I've tried this effect a number of different ways. I'm trying to get a navigation bar in AS3 that does something like this.

A|B|C|D

click on C bar slides and you get

C|A|B|D

click on D bar slides and you get

D|A|B|C and so on. Help or a link to help is much appreciated.

right now i have this much.

david_btn.addEventListener(MouseEvent.CLICK, menuNav); kate_btn.addEventListener(MouseEvent.CLICK, menuNav); robin_btn.addEventListener(MouseEvent.CLICK, menuNav); aaron_btn.addEventListener(MouseEvent.CLICK, menuNav); ken_btn.addEventListener(MouseEvent.CLICK, menuNav); ann_btn.addEventListener(MouseEvent.CLICK, menuNav);

function menuNav(event:MouseEvent):void{ gotoAndStop(event.target.name); }

each goes to the movieclip, plays half way and stops. now i need to play the other half before going to the next specified label.

Thanks in advance

Answer 1

Just make sure the first buttons initial x position is 14. Or that you adjust the code accordingly.

example here http://www.hupcapstudios.com/slideNav.swf

import caurina.transitions.Tweener;

var btnArray:Array = new Array(btn1,btn2,btn3,btn4);
var btnNames:Array = new Array("Tom","Dick","Harry","Marco");

for(var i:int=0;i<btnArray.length;i++)
{
    btnArray[i].btn_txt.text = btnNames[i];
    btnArray[i].addEventListener(MouseEvent.CLICK, slideBtn);
}

function slideBtn(e:Event):void
{
    var aPos:Number = e.currentTarget.x;
    var bPos:Number;
    var zeroBtn:*; 

    trace(aPos);

    if(aPos !== 14)
    {
     for(var p:int = 0;p<btnArray.length;p++)
     {
      if(btnArray[p].x == aPos)
      {
       bPos = aPos;
       break;
      }
     }
     for(var q:int = 0;q<btnArray.length;q++)
     {
      if(btnArray[q].x == 14)
      {
       zeroBtn = btnArray[q];
       break;
      }
     }

     Tweener.addTween(e.currentTarget, {x:14, time:.4,transition:"easeOutQuint"});
     Tweener.addTween(zeroBtn, {x:bPos, time:.4,transition:"easeOutQuint"});
    }
}

Answer 2

Hi I've given Jascha's answer the plus one because it serves the purpose, however I'm just going to walk you through the code below so you can understand how this sort of thing is achieved. It also has a number of extra checks/configurations etc.

//these are your button instances
var originalOrder:Array = [tom, dick, harry, jane];

//this is a reference to the currently selected item
var selectedItem:MovieClip = tom;

//these are the co-ordinates of where the first item should be placed
var offsetX:Number = 100;
var offsetY:Number = 100;

//this is how much padding you want between items
var padding:Number = 8;

addEventListener(MouseEvent.CLICK, mouseClickHandler);

private function mouseClickHandler(e:Event):void
{
 var index:int = originalOrder.indexOf(e.target);
 //if the thing have clicked is in our array of buttons it is valid, we
 //could have clicked something else interactive
 if(index > -1)
 {
  //update the reference to the newly selected item
  selectedItem = originalOrder[index];
  //move the items about
  calculatePlacement();
 }
}


private function calculatePlacement():void
{
 //we want to start with our x-position being the current offset
 //plus the selectedItem's width plus the padding
 var cumlativeWidth:Number = offsetX + selectedItem.width + padding;
 var item:MovieClip;

 //loop over all the items in our list in the order they are specified
 for( var i:int = 0; i<originalOrder.length; i++)
 {
  //assign item to the currently looped item
  item = originalOrder[i];
  //if the item we are looking at is the selected item, place it at the
  //offset position
  if(item == selectedItem)
  {
   item.x = offsetX;
   item.y = offsetY;
   //We could tween using Tweener/TweenLite 
   //TweenLite.to(item, 1, {x:offsetX, y:offsetY});
  }
  //otherwise put it at our x-position, then add on its width + padding
  //to the cumulative x-position.
  else
  {
   item.x = cumlativeWidth;
   item.y = offsetY;
   //We could tween using Tweener/TweenLite 
   //TweenLite.to(item, 1, {x:offsetX, y:offsetY});
   cumlativeWidth += item.width + padding;
  }
 }
}