# Tween issue

**URL:** https://forum.kirupa.com/t/tween-issue/299823
**Category:** Uncategorized
**Created:** [November 11, 2009, 3:20pm UTC](https://forum.kirupa.com/t/tween-issue/299823 "2009-11-11T15:20:14Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Navarone](https://avatars.discourse-cdn.com/v4/letter/n/f9ae1b/32.png) [@Navarone](https://forum.kirupa.com/u/Navarone)
#### Post date: [November 11, 2009, 3:20pm UTC](https://forum.kirupa.com/t/tween-issue/299823/1 "2009-11-11T15:20:14Z")

</div>

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.

```auto

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);
}

```