Dynamicly resizing and "fixed" positions

1

Hello reader, Im stuck on a piece of math.
What Im trying to achieve, is some kind of menu with rollovers, where each button resizes on hover.
The active button should grow, while the others shrink and change x position…

This is what I made so far: (just copy/paste to see it working)

var windowWidht:Number;
var windowMaxWidht:Number = 400;
var windowMinWidht:Number = 15;
var windowHeight:Number = 300;
var growSpeed:int = 3;
var activeWindow:String = "";
var amount:int = 4;
var actief:String;
var actiefGo:Boolean;




for (var i:Number = 0; i<amount; i++)
{
    windowWidht = stage.stageWidth/amount;
    var raam:MovieClip = new MovieClip();
    raam.graphics.lineStyle(1, 0);
    raam.graphics.beginFill(0xCCFF00);
    raam.graphics.drawRect(0, 0, windowWidht, windowHeight - (i * 20));
    raam.width = windowWidht;
    raam.x = i * windowWidht;
    raam.name = "raam"+i;
    addChild(raam);
}

addListeners();

function addListeners():void
{
    for (var i:int = 0; i < amount; i++)
    {
        getChildByName("raam" + i).addEventListener(Event.ENTER_FRAME, onEnter);
        getChildByName("raam" + i).addEventListener(MouseEvent.ROLL_OVER, putActive);
        getChildByName("raam" + i).addEventListener(MouseEvent.ROLL_OUT, putActive);
        getChildByName("raam" + i).addEventListener(MouseEvent.CLICK, putActive);
    }
}

function putActive(event:MouseEvent):void
{
    if (event.type == "rollOver")
    {
        activeWindow = event.target.name;
    }
    if (event.type == "rollOut")
    {
        activeWindow = "";
    }
}

function onEnter(e:Event):void
{
    for (var s:int = 0; s<amount; s++)
    {
        if (s != 0)
        {
            getChildByName("raam"+s).x = getChildByName("raam"+(s-1)).x + getChildByName("raam"+(s-1)).width;
        }
    }

    if (activeWindow != "")
    {
        var identifier:String = getChildByName(activeWindow).name.substr(4);

        for (var i:int = 0; i < amount; i++)
        {
            if (Number(identifier) != i && getChildByName("raam"+i).width >= windowMinWidht)
            {
                getChildByName("raam"+i).width -= growSpeed;
            }
            else
            {
                if (getChildByName(activeWindow).width < windowMaxWidht && Number(identifier) == i)
                {
                    getChildByName(activeWindow).width += growSpeed;
                }
            }
        }

    }
    else
    {
        for (var a:int = 0; a < amount; a++)
        {
            if (getChildByName("raam"+a).width < windowWidht)
            {
                getChildByName("raam"+a).width += growSpeed;
            }
            if (getChildByName("raam"+a).width > windowWidht)
            {
                getChildByName("raam"+a).width -= growSpeed;
            }
        }
    }
}

The thing is…I want the last “button” always stick on the right side of the stage, and everything in between should scale/reposition, depending on the width/position form the other buttons.

Inventually this code should serve as a mask for content “in” each button.

I hope any of you readers can help me out, or know a script that does simular.

Thx in advance
Sidenote, the script dont have to be actionscript3, as2 will do fine too :slight_smile: