Dynamic Navigation Problem

programming flash
1

Yo!

Im trying to make a dynamic nav that works like such: http://www.safarisuit.co.uk/kriscook/2004/kirupa/dynamic_nav.swf

as you can see its working fine until the first click, after you have clicked and the nav has moved around it all messes up.

i know the reason for this though, the way i move the clips to the right of the one you hover over is i take the total menu items, subtract the current id, and then subtract 1. this messes up as soon as youve clicked as the id’s are in different places.

here is the code, sorry about the mess its deisgner code! :slight_smile: alternativley the file is here: http://www.safarisuit.co.uk/kriscook/2004/kirupa/dynamic_nav.fla (saved in mx2004, ive used lmc_tween.as which can be downloaded here: [URL=“http://www.safarisuit.co.uk/kriscook/2004/kirupa/MovieclipTween120.mxp”]http://www.safarisuit.co.uk/kriscook/2004/kirupa/MovieclipTween120.mxp)

all code inside is in the root on the 1st 2 layers

  

var navItems:Number = 7;
//width of selected movie clip (including gap)
var menuItemSelected:Number = 150;
//width of unselected movie clip (including gap)
var menuItemUnSelected:Number = 70;
var menuGap:Number = 2;
//id for rollovers
var theId:Number = 0;
//++++++++++++++++++++++++++
//
// create nav
//
//++++++++++++++++++++++++++
for (i=0; i<navItems; i++) {
    nav_mc.nav0_mc.duplicateMovieClip('navD'+i+'_mc', i);
    nav_mc.nav0_mc._visible = false;
    var navMc = nav_mc['navD'+i+'_mc'];
    navMc.bg_mc._width = menuItemUnSelected-menuGap;
    navMc._x = menuItemUnSelected*i+(menuItemSelected-menuItemUnSelected);
    navMc.wrd_txt.autoSize = true;
    navMc.wrd_txt.text = '00'+i;
    //
    // onRollOver
    //
    navMc.h_btn.id = i;
    navMc.h_btn.onRollOver = function() {
        navRollOver(this.id);
    };
    navMc.h_btn.onRollOut = function() {
        navRollOut(this.id);
    };
    navMc.h_btn.onRelease = function() {
        //change selection
        selectBtn.bg_mc.tween('_width', menuItemUnSelected-menuGap, .5, 'easeOutExpo');
        selectBtn = this._parent;
        this.enabled = false;
        this.useHandCursor = false;
        //call move function
        moveClips(this.id);
    };
}
//++++++++++++
//
// selekta
//
//++++++++++++
var selectBtn:MovieClip = nav_mc.navD0_mc;
nav_mc.navD0_mc._x = 0;
nav_mc.navD0_mc.h_btn.enabled = 0;
nav_mc.navD0_mc.bg_mc._width = menuItemSelected-menuGap;
//++++++++++++
//
// navRollOut
//
//++++++++++++

function navRollOver(buttonId) {    
    nav_mc['navD'+buttonId+'_mc'].bg_mc.tween('_width', menuItemSelected-menuGap, .5, 'easeOutExpo');
    // work out RHS of selected:
    var rhsClips:Array = new Array();
    var rhsAmount:Number = navItems-buttonId-1;
    for (i=0; i<rhsAmount; i++) {
        var j = i+buttonId+1;
        rhsClips.push(nav_mc['navD'+j+'_mc']);
        trace("rhsClips: "+rhsClips);
        var lhsAmount = navItems-rhsAmount-2;
        //trace('lhsAmount: '+lhsAmount);        
        rhsClips*.tween('_x', menuItemSelected*2+menuItemUnSelected*lhsAmount+menuItemUnSelected*i, .5, 'easeOutExpo');
    }
}
function navRollOut(buttonId) {
    nav_mc['navD'+buttonId+'_mc'].bg_mc.tween('_width', menuItemUnSelected-menuGap, .5, 'easeOutExpo');
    //RHS of selected:
    var rhsClips:Array = new Array();
    var rhsAmount:Number = navItems-buttonId-1;
    for (i=0; i<rhsAmount; i++) {
        var j = i+buttonId+1;
        rhsClips.push(nav_mc['navD'+j+'_mc']);
        rhsClips*.stopTween();
        var lhsAmount = navItems-rhsAmount-1;
        rhsClips*.tween('_x', menuItemSelected+menuItemUnSelected*lhsAmount+menuItemUnSelected*i, .5, 'easeOutExpo');
    }
}
//++++++++++++++++++++++++++
//
// move menu
//
//++++++++++++++++++++++++++
function moveClips(selectedId) {
    //disable navigation
    for (i=0; i<navItems; i++) {
        nav_mc['navD'+i+'_mc'].h_btn.enabled = false;
    }
    //set vars
    var selekta = nav_mc['navD'+selectedId+'_mc'];
    var rhsClips:Array = new Array();
    var rhsAmount:Number = navItems-selectedId-1;    
    for (i=0; i<rhsAmount; i++) {
        var j = i+selectedId+1;
        rhsClips.push(nav_mc['navD'+j+'_mc']);
        rhsClips*.stopTween();
        var lhsAmount = navItems-rhsAmount-1;
        rhsClips*.tween('_x', menuItemSelected+menuItemUnSelected*i, .5, 'easeOutExpo');
    }
    //LHS of selected:
    var lhsClips:Array = new Array();
    var lhsAmount:Number = selectedId;
    for (i=0; i<lhsAmount; i++) {
        lhsClips.push(nav_mc['navD'+i+'_mc']);
        lhsClips*.stopTween();
        lhsClips*._x = Stage.width;
        lhsClips*.tween('_x', menuItemSelected+menuItemUnSelected*rhsAmount+menuItemUnSelected*i, 1, 'easeOutExpo', .1*i+.5, enableNav);
    }
    //clicked menu item    
    selekta.stopTween();
    selekta.tween('_x', 0, .3, 'easeOutExpo');
}
function enableNav() {
    for (i=0; i<navItems; i++) {
        nav_mc['navD'+i+'_mc'].h_btn.enabled = true;
        nav_mc['navD'+i+'_mc'].h_btn.useHandCursor = true;
    }
    selectBtn.h_btn.useHandCursor = false;
    selectBtn.h_btn.enabled = false;
}

if this makes any sense and you have any input thanks!!