GlowFilter 后矢量形状出现锯齿状等问题答案

【问题标题】：Vector shape appears jagged after GlowFilter, and some other problemsGlowFilter 后矢量形状出现锯齿状等问题
【发布时间】：2009-12-03 16:22:54
【问题描述】：

我正在尝试创建一些在您翻转时具有发光效果的影片剪辑，并且在 rollOut 时发光效果消失。但是，当 rollOut 完成时，我应用过滤器（一个简单的 20 x 20 矢量圆圈）的背景影片剪辑突然出现锯齿状，而在 rollOver/rollOut 之前，它看起来应该是平滑的。这里会发生什么？

我对 AS3 还很陌生，因此该示例还不能正常工作。例如：
* 当您第一次滚动项目时，它会立即显示发光的结束阶段而不是动画。我以为我会在构造函数中使用 Tween.rewind() 来规避这个问题，但这并没有奏效。 * 我也不确定 TweenEvent.MOTION_CHANGE 的 addEventListener 是否放置在正确的位置。我尝试将其放入构造函数中，但这导致 _onMotionChange 不断收到事件。

非常感谢您对这些问题的帮助。但最重要的部分是辉光滤镜消失后的锯齿状圆圈。

这是我目前所拥有的（缩写示例）：

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

    }
}

【问题讨论】：

标签： flash actionscript-3 filter

【解决方案1】：

我可以通过在 _onRollOut 中通过添加 TweenEvent.MOTION_FINISH 的事件监听器来删除过滤器来解决我的问题。这样矢量圆的锯齿状边缘就消失了，一切都恢复正常了。

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

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

【讨论】：