`
nianshi
  • 浏览: 422772 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Flex各种效果集合(Blur,Move,Fade,Glow,Zoom,Reseze,WipeLeft等)

    博客分类:
  • Flex
阅读更多

以下是今天做的Flex的一些效果,其中最后四个。WipeLeft,Right,Up,Down,比较实用,做的过程中收获很大。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" minWidth="955" minHeight="600"  click="application1_clickHandler(event)">

    <mx:Script>
        <![CDATA[
            import mx.events.EffectEvent;
            import mx.events.FlexEvent;
            
            public var fangxiang:int=0;
            protected function myBtn_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                myBlur.play();
            }

            protected function button1_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                myMove.play();
            }


            protected function button2_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                if(myPnl.visible)
                {
                    myPnl.setStyle("hideEffect",myFadeOut);
                    myPnl.visible=false;
                }
                else
                {
                    myPnl.setStyle("showEffect",myFadeIn);
                    myPnl.visible=true;                
                }
            }



            protected function button3_mouseDownHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                myGlowDown.play();
            }


            protected function button3_mouseUpHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                myGlowUp.play();
            }


            protected function button4_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                myResize1.addEventListener(EffectEvent.EFFECT_END,onend);
                myResize1.play();
            }
            


            protected function onend(event:EffectEvent):void
            {
                myResize2.play();
            }


            protected function button5_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                myRotate.play();
            }


            protected function button6_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                myZoom.play();
            }


            protected function button7_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                
                if(myPnl.visible)
                {
                    myPnl.setStyle("hideEffect",myWipeLeft);
                    myPnl.visible=false;
                }
                else
                {
                    myPnl.setStyle("showEffect",myWipeRight);
                    myPnl.visible=true;                
                }


                this.fangxiang=1;
                //myWipeLeft.play();
                



            }




            protected function button8_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                if(myPnl.visible)
                {
                    myPnl.setStyle("hideEffect",myWipeRight);
                    myPnl.visible=false;
                }
                else
                {
                    myPnl.setStyle("showEffect",myWipeLeft);
                    myPnl.visible=true;                
                }
                this.fangxiang=2;
            }


            protected function button9_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                if(myPnl.visible)
                {
                    myPnl.setStyle("hideEffect",myWipeUp);
                    myPnl.visible=false;
                }
                else
                {
                    myPnl.setStyle("showEffect",myWipeDown);
                    myPnl.visible=true;                
                }
                this.fangxiang=3;
            }


            protected function button10_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                if(myPnl.visible)
                {
                    myPnl.setStyle("hideEffect",myWipeDown);
                    myPnl.visible=false;
                }
                else
                {
                    myPnl.setStyle("showEffect",myWipeUp);
                    myPnl.visible=true;                
                }
                this.fangxiang=4;
            }




            protected function button11_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                if(myPnl.visible)
                {
                    myPnl.setStyle("hideEffect",myWipeUp);
                    myPnl.visible=false;
                }
                else
                {
                    myPnl.setStyle("showEffect",myWipeDown);
                    myPnl.visible=true;                
                }
            }



            protected function application1_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                if(event.target is Button)
                {
                    return;
                }
                switch(fangxiang)
                {
                    case 1 :
                        myPnl.setStyle("hideEffect",myWipeLeft);
                        myPnl.visible=false;

                        break;
                    case 2 :
                            myPnl.setStyle("hideEffect",myWipeRight);
                            myPnl.visible=false;

                        break;
                    case 3 :
                            myPnl.setStyle("hideEffect",myWipeUp);
                            myPnl.visible=false;
    
                        break;
                    case 4 :
                            myPnl.setStyle("hideEffect",myWipeDown);
                            myPnl.visible=false;

                        break;
                    
                }
        

            }

        ]]>
    </mx:Script>

    
    <mx:Blur id="myBlur" target="{myPnl}" blurXFrom="20.0" blurXTo="0.0" duration="1000" >
        
    </mx:Blur>
    
    <mx:Move id="myMove" target="{myPnl}" xFrom="-250" xTo="0" duration="1000">
        
    </mx:Move>
    
    <mx:Fade id="myFadeOut" target="{myPnl}"  alphaFrom="1.0" alphaTo="0.0" duration="1000">
        
    </mx:Fade>
    <mx:Fade id="myFadeIn" target="{myPnl}"  alphaFrom="0.0" alphaTo="1.0" duration="1000">
        
    </mx:Fade>    
    
    <mx:Glow id="myGlowDown" target="{myPnl}"  alphaFrom="1.0" alphaTo="0.1" duration="500" color="#FF3b00" >
        
    </mx:Glow>
    <mx:Glow id="myGlowUp" target="{myPnl}"  alphaFrom="0.1" alphaTo="1.0" duration="1000" color="#FF3b00" >
        
    </mx:Glow>    
    
    <mx:Resize id="myResize1" target="{myPnl}" widthFrom="250" widthTo="500" duration="2000" >
        
    </mx:Resize>
    <mx:Resize id="myResize2" target="{myPnl}" widthFrom="500" widthTo="250" duration="2000" >
        
    </mx:Resize>
    
    <mx:Rotate id="myRotate" target="{myPnl}" angleFrom="0"  angleTo="180" duration="1000">
        
    </mx:Rotate>
    
    <mx:Zoom id="myZoom" target="{myPnl}" zoomWidthFrom="1"  zoomWidthTo="0.5" zoomHeightFrom="1" zoomHeightTo="0.5" duration="1000">
        
    </mx:Zoom>
    
    <mx:WipeLeft id="myWipeLeft"  duration="1000" >
        
    </mx:WipeLeft>
    
    <mx:WipeRight id="myWipeRight"  duration="1000" >
        
    </mx:WipeRight>
    
    <mx:WipeUp id="myWipeUp" duration="1000">
        
    </mx:WipeUp>
    <mx:WipeDown id="myWipeDown" duration="1000">
        
    </mx:WipeDown>
    
    <mx:Button x="31" y="46" label="Blur" id="myBtn" click="myBtn_clickHandler(event)"/>
    
    
    <mx:Panel  x="0" y="210" width="250" height="200" layout="absolute" id="myPnl" visible="false" >
        <mx:Label x="33" y="31" text="标签" width="119" height="74"/>
        <mx:Button x="182" y="0" label="关闭" click="button11_clickHandler(event)"/>
    </mx:Panel>
    <mx:Button x="99" y="46" label="Move" click="button1_clickHandler(event)"/>
    <mx:Button x="176" y="46" label="Fade" click="button2_clickHandler(event)"/>
    <mx:Button x="247" y="46" label="Glow" mouseDown="button3_mouseDownHandler(event)" mouseUp="button3_mouseUpHandler(event)"/>
    <mx:Button x="322" y="46" label="Resize" click="button4_clickHandler(event)"/>
    <mx:Button x="404" y="46" label="Rotate" click="button5_clickHandler(event)"/>
    <mx:Button x="494" y="46" label="Zoom" click="button6_clickHandler(event)"/>
    <mx:Button x="32" y="116" label="WipeLeft" click="button7_clickHandler(event)"/>
    <mx:Button x="127" y="116" label="WipeRight" click="button8_clickHandler(event)"/>
    <mx:Button x="232" y="116" label="WipeUp" click="button9_clickHandler(event)"/>
    <mx:Button x="322" y="116" label="WipeDown" click="button10_clickHandler(event)"/>
    <mx:Panel x="463" y="330" width="250" height="200" layout="absolute">
    </mx:Panel>
    
</mx:Application>

分享到:
评论

相关推荐

    flex中动画效果

    例如,可以使用 `Sequence` 效果串联 `Zoom`、`Fade` 和 `Move`,以实现组件的放大、淡入和位置移动的连续动画。此外,使用 `Parallel` 效果可以让多个组件同时执行不同的动画,提升用户体验。 总之,Flex 3.0 的...

    flex动画效果与变幻.pdf

    Flex提供的内置效果包括但不限于模糊(Blur)、移动(Move)、淡入淡出(Fade)、发光(Glow)、调整大小(Resize)、旋转(Rotate)和缩放(Zoom)等。此外,还有Wipe系列效果用于实现画面的遮罩效果,如WipeLeft、...

    flex + java 初学者 笔记 学习资料

    本文档是针对Flex和Java初学者的学习笔记,涵盖了Flex中的基础组件、文本处理、样式设计、行为对象以及动画效果。 一、Flex基础组件 1. Button:按钮组件,可以设置文字和图标,图标通过`icon="@Embed('图片路径')...

    Flex常见效果

    `&lt;mx:Transition&gt;`用于实现不同状态间的过渡动画,例如页面间的过渡效果等。 #### 二、图表绘制 除了基础的动画效果外,Flex还提供了丰富的图表绘制功能,帮助开发者快速构建数据可视化应用。 ##### 1. AreaChart...

    Flex常用特效

    Flex特效是富互联网应用程序(RIA)开发中的一个重要组成部分,它为用户界面增添了许多生动和吸引人的视觉效果。本文将深入探讨Flex特效的使用方法、播放流程、常见效果类以及触发这些效果的方式,并通过实例演示...

    Flex4特效源码

    在Flex4中,可以使用`Blur`和`Glow`效果类来实现。`Blur`效果为组件添加模糊,而`Glow`则使组件看起来像发光。例如,创建一个发光效果如下: ```xml &lt;fx:Effect id="glow" type="Glow"&gt; &lt;mx:color&gt;#FFFFFF ...

    FLEX 学习进阶-使用动态效果(Parallel and Sequence)

    在给定的示例中,`BlurMoveShow`效果容器包含了Blur和Move两个效果。当使用`&lt;mx:Parallel&gt;`时,这两个效果会并行执行,即模糊效果和移动效果同时开始,标签同时进行模糊和位置变化。 另一方面,`&lt;mx:Sequence&gt;` ...

    flex特效学习---Flex组件-行为与特效类组件

    `&lt;mx:Blur&gt;` 特效利用了`BlurFilter`滤镜,可以为Flex应用中的元素添加模糊效果。这种特效广泛应用于需要视觉软化处理的场景,比如背景模糊或者焦点效果,增加视觉层次感。 #### Dissolve:溶解效果 `&lt;mx:Dissolve&gt;...

    CSS3毛玻璃效果(blur)有白边问题的解决方法

    做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: &lt;body&gt;    &lt;div class=login-mask&gt;&lt;/div&gt;  &lt;div class=login-box&gt;&lt;/div&gt;    [removed]  var w = window.innerWidth || document....

    wpf 实时毛玻璃 live blur 效果

    在Windows Presentation Foundation (WPF) 中,实时毛玻璃(Live Blur)效果是一种视觉设计技术,它使得背景元素呈现出模糊的效果,常用于创建现代、透明且交互性强的用户界面。这种效果在Windows 8及更高版本的UI...

    glow11 UNITY3D 自发光光晕插件

    Glow11插件是Unity Asset Store中非常强大的自发光插件 内含3个版本 可以做自发光, 光晕等。 支持mobile High Precision:高精度 使用更高精度的RenderTexture,如果你的Inner/Outer/Boost Strength值高的话,使用...

    使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法

    不过今天又仔细研究了一下css3中的blur方法,可以实现同样的效果。且配合JS可以实现模糊缩放的效果 基础先来看一下blur属性的表达式: CSS Code复制内容到剪贴板 filter:blur(add=add,direction,strength=...

    flex超炫倒影效果

    在本文中,我们将深入探讨如何使用Flex实现超炫的倒影效果,并且将重点放在如何调整模糊程度和影子长度。Flex是一种强大的CSS3布局模式,允许开发者在各种屏幕尺寸和方向上创建灵活、响应式的网页设计。倒影效果则是...

    Blur_Image_c/C++_blur_

    在图像处理领域,模糊(Blur)是一种常见的技术,用于减少图像中的噪声,或者创造特定的视觉效果。在C++中,OpenCV库是进行图像处理的首选工具,它提供了丰富的函数和方法来实现各种模糊操作。这篇教程将深入探讨...

    OpenGL使用OpenGL实现模糊效果(Blur Effect)

    在计算机图形学中,这一效果可以通过多种不同的算法实现,其中比较常用的有高斯模糊(Gaussian Blur)、均值模糊(Mean Blur)和盒模糊(Box Blur)等。 高斯模糊是应用最为广泛的模糊算法之一,它基于高斯函数来...

    Unity内实现单个物体GLOW方案

    Unity的Post-processing Stack可以方便地实现各种视觉效果,包括Glow。虽然这里提到的是单个物体的GLOW,但在某些情况下,你可以考虑使用Post-processing Volume组件,通过设置Glow层来只影响特定物体。 5. **代码...

    Flex 动画效果

    - **动画效果**:Flex提供了一系列内置的动画效果,如`AnimateProperty`用于改变组件的数值属性,`Blur`用于添加模糊效果等。 ##### 3.2 触发器与事件对应关系 | 触发器名称 | 事件名称 | 描述 | |---------------...

    glow shader

    标签“render monkey”是一个由Autodesk开发的图形着色器设计工具,它允许开发者通过图形用户界面创建、编辑和测试各种复杂的着色器效果,包括我们这里讨论的glow shader。Render Monkey提供了对高级着色语言(如...

    Flex2的几个行为动画源码

    Flex2提供了Blur滤镜,可以对任何显示对象进行模糊处理,增加视觉效果。滤镜应用可能包括BlurFilter、DropShadowFilter、GlowFilter等。 4. **Example_3**: 由于没有具体描述,这个例子可能包含任何Flex2动画或行为...

    Flex UI组件使用全集

    - **WipeDown、WipeLeft、WipeRight、WipeUp**: 各种擦拭效果。 - **Zoom**: 缩放效果。 - **ViewStates**: 视图状态管理,例如用户登录和注册界面的状态切换。 - **Transitions**: 在不同视图之间添加过渡效果。 ...

Global site tag (gtag.js) - Google Analytics