Question

I have code to grow my movieClips on mouse over, then shrink back down on mouse out. As far as I can see, my code is correct. I think the issue is that when my cursor is near the edge of the movieclip, both mouse over and mouse out events rapidly fire one after the other, causing the grow/shrink effects to produce a stuttering effect.

I’ve tried delaying the mouse out to give the mouseover a chance to cause the movieclip to grow past the mouse’s mouse out detection… but if the user swipes the cursor across the screen, the various movieclips are often left large, as the mouse leaves the movieclip before the mouse out event is reestablished.

Am I going about this wrong? Here is my code:

import mx.transitions.Tween; 
import mx.transitions.easing.*; 

stop();

fillClipArray();

function fillClipArray() 
{
    for (var prop in this) 
    {
        if (this[prop] instanceof MovieClip) 
        {
            var mc:MovieClip = this[prop];
            mc.onRollOver = function(){clipOver(this)};
            mc.onRollOut = function(){clipOut(this)};
        }
    }
}




function clipOver(clip:MovieClip)
{   
    var xScaleX:Tween = new Tween(clip, "_xscale", Strong.easeOut, clip._xscale, 125, 0.5, true); 
    var xScaleY:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, 125, 0.5, true);
}

function clipOut(clip:MovieClip)
{   
    var xScaleX:Tween = new Tween(clip, "_xscale", Strong.easeOut, clip._xscale, 85, 0.5, true); 
    var xScaleY:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, 85, 0.5, true);
}

Answer 1

Separate your button so the graphic assets are not used for the mouse events.

1. Add a MovieClip with some shape that roughly matches your button’s initial size
2. Set its alpha to 0
3. Give it an instance name like “hotspot”
4. Attach your mouse events to that instead of the entire button

The hotspot will not change size, obviating your problem.