Tween issue

1

I have picture on my stage and what I want to do is when I mouse over have another rectangle ease up from zero to the size of pic and then when I mouse out have the rectangle ease down to zero. What seems to be happening is that when I mouse over the picture the rectangle eases up but as soon as the rectangle makes contact with the cursor it eases back down. I can’t figure out why this is happening.


import fl.transitions.Tween;
import fl.transitions.easing.*;

//start pic size 80 x 51

//start rect size
rectangle.width = 0;
rectangle.height = 0;

//add event listeners to picture
pic.addEventListener(MouseEvent.MOUSE_OVER, onRollover, false, 0, true);
pic.addEventListener(MouseEvent.MOUSE_OUT, onRollout, false, 0, true);


//onRollover function
function onRollover(event:MouseEvent):void {
    var myTweenAlpha:Tween = new Tween(rectangle, "alpha", Strong.easeOut, 0, 1, 3, true);
    var myTweenScaleX:Tween = new Tween(rectangle, "scaleX", Strong.easeOut, 0, 1, 3, true);
    var myTweenScaleY:Tween = new Tween(rectangle, "scaleY", Strong.easeOut, 0, 1, 3, true);
}
function onRollout(event:MouseEvent):void {

    var myTweenAlpha:Tween = new Tween(rectangle, "alpha", Strong.easeOut, 1, 0, 3, true);
    var myTweenScaleX:Tween = new Tween(rectangle, "scaleX", Strong.easeOut, 1, 0, 3, true);
    var myTweenScaleY:Tween = new Tween(rectangle, "scaleY", Strong.easeOut, 1, 0, 3, true);
}