给Flex的PopUpManager显示控件添加特效

最新推荐文章于 2017-03-17 21:12:44 发布

转载最新推荐文章于 2017-03-17 21:12:44 发布 · 1.6k 阅读

文章标签：

#flex #encoding #layout #function #login

Flex 专栏收录该内容

188 篇文章

订阅专栏

本文介绍了一种使用Flash和Flex实现的弹窗模糊效果，通过自定义类PopUpEffect来控制显示和隐藏过程中的模糊过渡，适用于创建平滑的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PopUpEffect.as

package
{
    import flash.display.DisplayObject;

    import mx.core.IFlexDisplayObject;
    import mx.effects.Blur;
    import mx.events.TweenEvent;
    import mx.managers.PopUpManager;

    public class PopUpEffect
    {

        public function PopUpEffect()
        {
        }

        public static function Show(control:IFlexDisplayObject,parent:DisplayObject,modal:Boolean=true):void
        {
            var mShowEffect:Blur=new Blur();
            mShowEffect.blurXFrom=255;
            mShowEffect.blurYFrom=255;
            mShowEffect.blurXTo=0;
            mShowEffect.blurYTo=0;
            mShowEffect.target= control;
            mShowEffect.duration=300;
            PopUpManager.addPopUp(control,parent,modal);
            PopUpManager.centerPopUp(control);
            mShowEffect.play();

        }
        public static function Hide(control:IFlexDisplayObject):void
        {

            var mHideEffect:Blur=new Blur();
            mHideEffect.blurXFrom=0;
            mHideEffect.blurYFrom=0;
            mHideEffect.blurXTo=255;
            mHideEffect.blurYTo=255;
            mHideEffect.addEventListener(TweenEvent.TWEEN_END,function(){
                PopUpManager.removePopUp(control);
            });
            mHideEffect.duration=300;
            mHideEffect.target=control;
            mHideEffect.play();
        }
    }
}

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import PopUpEffect;
        ]]>
    </mx:Script>
    <mx:Button label="登陆" horizontalCenter="0" verticalCenter="0">
        <mx:click>
            <![CDATA[
                var frmlogin:Login =new Login();
                PopUpEffect.Show(frmlogin,this);
            ]]>
        </mx:click>
    </mx:Button>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow  xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="342" height="172" title="登陆" showCloseButton="true">
    <mx:Script>
        <![CDATA[
            import PopUpEffect;
        ]]>
    </mx:Script>
    <mx:Form width="100%">
        <mx:FormItem label="用户名：">
            <mx:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="密码：">
            <mx:TextInput displayAsPassword="true"/>
        </mx:FormItem>
    </mx:Form>
    <mx:ControlBar height="43" verticalAlign="middle" horizontalAlign="right">
        <mx:Button label="确定"/>
        <mx:Button label="取消">
            <mx:click>
                <![CDATA[
                    PopUpEffect.Hide(this);
                ]]>
            </mx:click>
        </mx:Button>
    </mx:ControlBar>
    <mx:close>
        <![CDATA[
            PopUpEffect.Hide(this);
        ]]>
    </mx:close>
</mx:TitleWindow>