CODEWITHSUNDEEP
flashactionscript-3buttonmovieclipflicker
sol
sol

Reputation:

as3 - controlling flicker when scaling up a button or movieclip

This is a situation I run into a lot but never seem to find a good solution. I have movieclips that I scale up slightly on rollover, but if you hover over the edge of the movieclip it just sits there and flickers, continuously receiving mouseOver and mouseOut events. How do you deal with this? Again, it's usually a problem when tweening the scale of a movieclip or button.

my_mc.addEventListener(MouseEvent.MOUSE_OVER, mOver);
my_mc.addEventListener(MouseEvent.MOUSE_OUT, mOut);

private function mOver(m:MouseEvent) {              
   TweenLite.to(m.target, .2, { scaleX:1.1, scaleY:1.1} );
}

private function mOut(m:MouseEvent) {
   TweenLite.to(m.target, .2, { scaleX:1, scaleY:1} );
}

Upvotes: 0

Views: 1839

Answers (1)

Oliver Turner
Oliver Turner

Reputation: 1392

I know what you mean: the animation itself generates unwanted input events as the clip expands/contracts bringing the cursor over or out of the clip's resized hitTest area.

Couple of ideas:

  1. Overlay a clear sprite to act as a button area and scale another child object containing the content.
    i.e. the object whose mouse input events are being fired remains a constant size: only the visual artifacts change dimensions
  2. (Simpler) Remove the event handlers during the transition, re-adding them in a callback function fired by the onComplete property of the TweenLite animation object: 
my_mc.addEventListener(MouseEvent.MOUSE_OVER, _animate);
my_mc.addEventListener(MouseEvent.MOUSE_OUT, _animate);

private function _animate(event:MouseEvent):void
{
    var mc:Sprite = event.target as Sprite;        
    var animScale:Number = (event.type == MouseEvent.MOUSE_OVER) ? 2 : 1;

    TweenLite.to(mc, 0.5, {
        onStart: function():void {
            mc.removeEventListener(MouseEvent.MOUSE_OVER, _animate);
            mc.removeEventListener(MouseEvent.MOUSE_OUT, _animate);
        },
        scaleX: animScale, 
        scaleY: animScale,
        onComplete: function():void {
            mc.addEventListener(MouseEvent.MOUSE_OVER, _animate);
            mc.addEventListener(MouseEvent.MOUSE_OUT, _animate);
        } 
    });
}

Upvotes: 1

Related Questions