Tweenlite anyone?

1

I have a strange and extremely annoying problem.

But that’s beside the point.

I have a simple would-be navigation bar that works perfectly with this code:

import gs.TweenLite;

var buttons:Array = new Array();
var btnProps:Array = new Array();
var prop:Rectangle;

for(var i:Number = 0; i < menu.numChildren; i++)
{
    var _btn:MovieClip = MovieClip(menu.getChildAt(i));
    _btn.buttonMode = true;
    _btn.mouseChildren = false;
    _btn.id = i;
    _btn.addEventListener(MouseEvent.MOUSE_OVER, onOver, false, 0, true);
    _btn.addEventListener(MouseEvent.MOUSE_OUT, onOut, false, 0, true);
    buttons.push(_btn);

    var _rect:Rectangle = new Rectangle(_btn.x, _btn.y, _btn.width, _btn.height);
    btnProps.push(_rect);
}

function onOver(e:MouseEvent):void
{
    // prop contains the initial x,y,width,height properties of the targeted movieclip
    prop = btnProps[e.target.id];
    TweenLite.to(e.target, .2, {x:prop.x-10});
}

function onOut(e:MouseEvent):void
{
    TweenLite.to(e.target, .2, {x:prop.x});
}

It takes the 5 items in the menu and when they are individually moused-over, they simple move 10 points to the left, then when the mouse is off they move back to their original position.

Now I want to change it so that they scale up a tiny bit in both width and height. I’ve been trying to do this for some time and I have no idea why this code does not work:

    var _rect:Rectangle = new Rectangle(_btn.x, _btn.y, _btn.width, _btn.height);
    btnProps.push(_rect);
}

function onOver(e:MouseEvent):void
{
    // prop contains the initial x,y,width,height properties of the targeted movieclip
    prop = btnProps[e.target.id];
    TweenLite.to(e.target, .2, {scaleX:prop.width-10});
}

function onOut(e:MouseEvent):void
{
    TweenLite.to(e.target, .2, {scaleX:prop.width});
}

Everything in these two versions is EXACTLY the same except for this part I’ve posted. Does anyone have any idea what could be going on here? It’s not even close to any form of desirable outcome.