why does my flash-animation reset when i move the mouse?

Question

I have 2 overlapping movieclips on the stage. Both are instances of the same movieclip, but with different names. One bigger then the other, due to a magnifying effect. (I have tried to out-rule that code by the way, so its not that).

The intention is to make both movieclips play when the mouse is over the stage and then stop as the mouse leaves the area. Seems simple and I have done that alot of times with other animations.

Here is my code:

import flash.events.MouseEvent;
import flash.ui.Mouse;

stop();

stage.addEventListener(MouseEvent.MOUSE_OVER, hideStuff);
var stageRunning:Boolean = new Boolean(false);

function hideStuff(event:MouseEvent):void
{
    if (bigAnimation_mc.currentFrame == 1)
{
    bigAnimation_mc.gotoAndPlay(2);
    smallAnimation_mc.gotoAndPlay(2);
    stageRunning = true;
    stage.removeEventListener(MouseEvent.MOUSE_OVER, hideStuff);
    stage.addEventListener(MouseEvent.MOUSE_OUT, showStuff);
}
}

function showStuff(event:MouseEvent):void
{
    if (stageRunning)
   {
    bigAnimation_mc.gotoAndStop(1);
    smallAnimation_mc.gotoAndStop(1);
    stageRunning = false;
    stage.addEventListener(MouseEvent.MOUSE_OVER, hideStuff);
    stage.removeEventListener(MouseEvent.MOUSE_OUT, showStuff);
}
}

If someone could help me figure where the loose end is, you would make me very happy!

Answer 1

MOUSE_OVER and MOUSE_OUT happen whenever the mouse moves over or out of anything contained in the stage. Instead use ROLL_OVER and ROLL_OUT.