Vector shape appears jagged after GlowFilter, and some other problems

Question

Hi,

I'm trying to create some MovieClips with a glow effect when you rollOver and the glow effect dissapearing on rollOut. But when the rollOut is finished my background movieclip to which I apply the filter (a simple 20 x 20 vector circle) all of a sudden appears jagged, when before rollOver/rollOut it appeared smooth as it should. What could be going on here?

I'm pretty new to AS3, thus the example isn't working properly yet. For instance:
* when you roll over the item the first time it immediately shows the end phase of the glow in stead of animating. I thought I'ld circumvent this with Tween.rewind() in the constructor, but that didn't do the trick. * also I'm not sure whether the addEventListener for TweenEvent.MOTION_CHANGE is placed in the correct spot. I tried putting it in the constructor, but that resulted in the event being recieved continuously by _onMotionChange.

Some help on these issues is much appreciated. But the most important part is the jagged circle after the glow filter has dissapeared.

This is what I have so far (abbreviated example):

package
{
    import flash.events.*;
    import flash.display.*;
    import flash.text.*;
    import flash.utils.*;
    import flash.filters.GlowFilter;
    import fl.transitions.Tween;
    import fl.transitions.TweenEvent;
    import fl.transitions.easing.*;

    public class ScoreListItem extends MovieClip
    {

     private var _glowFilter:GlowFilter;
     private var _tweenGlowFilterBlurX:Tween;
     private var _tweenGlowFilterBlurY:Tween;

     public function ScoreListItem():void
     {

      _glowFilter = new GlowFilter( 0xffffff, 1, 3, 3, 2, 1, false, false );
      _tweenGlowFilterBlurX = new Tween( _glowFilter, 'blurX', Strong.easeIn, 1, 5, .8, true );
      _tweenGlowFilterBlurY = new Tween( _glowFilter, 'blurY', Strong.easeIn, 1, 5, .8, true );

      _tweenGlowFilterBlurX.rewind();
      _tweenGlowFilterBlurY.rewind();

      addEventListener( MouseEvent.ROLL_OVER, _onRollOver );
      addEventListener( MouseEvent.ROLL_OUT, _onRollOut );
     }

     private function _onRollOver( event:Event )
     {
      trace( 'rollOver' );
      _tweenGlowFilterBlurY.addEventListener( TweenEvent.MOTION_CHANGE, _onMotionChange );
      _tweenGlowFilterBlurX.continueTo( 5, 1 );
      _tweenGlowFilterBlurY.continueTo( 5, 1 );
     }

     private function _onRollOut( event:Event )
     {
      trace( 'rollOut' );
      _tweenGlowFilterBlurY.addEventListener( TweenEvent.MOTION_CHANGE, _onMotionChange );
      _tweenGlowFilterBlurX.continueTo( 1, 1 );
      _tweenGlowFilterBlurY.continueTo( 1, 1 );
     }

     private function _onMotionChange( event:Event )
     {
      trace( 'motionChange' );
      this.backgroundCircle.filters = [ _glowFilter ];
     }

    }
}

Answer 1

I was able to solve my problem simply by removing the filter when it was finished in _onRollOut by adding an eventlistener for TweenEvent.MOTION_FINISH. This way the jagged edges of the vector circle shape disappeared and all showed normal again.

private function _onRollOut( event:MouseEvent )
{
    _tweenGlowFilterBlurY.addEventListener( TweenEvent.MOTION_FINISH, _onRollOutFinish );
   /* etc... */
}

private function _onRollOutFinish( event:TweenEvent )
{
    this.label.filters = [];
}