flex 4.0 滤镜效果.

最新推荐文章于 2012-02-16 13:20:36 发布

原创最新推荐文章于 2012-02-16 13:20:36 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #transition #button #function #library #distance

FLEX ActionScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Flex 4.0中的动态和静态滤镜效果，包括AnimateFilter、Fade、BlurFilter等，展示了如何定义滤镜、应用动画效果以及创建过渡效果。文中还通过示例详细解释了滤镜的使用方法，如滤镜列表、SimpleMotionPath和Easer类的应用。

动态滤镜效果:

flex 4.0 动态滤镜包含在 spark.effects 包中.

滤镜列表:http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/spark/effects/package-detail.html

动画滤镜定义与调用:

<fx:Declarations> <s:BlurFilter blurX="30" blurY="30" quality="100" />  <s:AnimateFilter id="myFilter" target="{控件}" duration="500" bitmapFilter="{new BlurFilter()}">  <s:SimpleMotionPath property="blurX" valueFrom="30" valueTo="0"/> <s:SimpleMotionPath property="blurY" valueFrom="30" valueTo="0"/> <s:SimpleMotionPath property="quality" valueFrom="0" valueTo="100"/> </s:AnimateFilter> </fx:Declarations> <s:Button x="57" y="261" label="按钮" click="myFilter.play();" id="控件"/>

AnimateFilter 效果可将 mx.filters.IBitmapFilter 实例应用至目标，并使您能够设置各个值之间的滤镜的属性的动画。与对目标的属性进行动画设置的效果不同，AnimateFilter 效果是对应用于目标的滤镜的属性进行动画设置。

能用于此效果的滤镜在 spark.filters 中定义。包。公用滤镜包括 DropShadowFilter、GlowFilter、BlurFilter 和 ShaderFilter。

要定义要设置动画的滤镜的属性，可将 SimpleMotionPath 对象的 Array 传递至 AnimateFilter 效果的 motionPath 属性。每个 SimpleMotionPath 对象都定义滤镜的一个属性、该属性的起始值和该属性的结束值。

其他滤镜直接定义调用.如Fade透明滤镜:

<s:Fade alphaFrom="0.0" alphaTo="1.0" id="fade" target="{控件}" duration="500" /> <s:Button x="57" y="261" label="按钮" click="fade.play()" id="控件"/>

多重效果叠加:

protected function clickHandler(event:MouseEvent,title:TitleWindow):void { PopUpManager.addPopUp(title,this,false); var an:Animate=new Animate(title); an.duration=200; var mo:SimpleMotionPath=new SimpleMotionPath("height",(event.currentTarget as IVisualElement).height,674); var mo1:SimpleMotionPath=new SimpleMotionPath("width",(event.currentTarget as IVisualElement).width,674); var mo2:SimpleMotionPath=new SimpleMotionPath("alpha",0,1); var v:Vector.<MotionPath>=new Vector.<MotionPath>(); v[0]=mo; v[1]=mo1; v[2]=mo2; an.motionPaths=v; an.play(); }

状态过渡效果:

<s:transitions> <s:Transition> <s:Fade alphaFrom="0.0" alphaTo="0.8" duration="2000" target="{绑定控件}" />  </s:Transition> </s:transitions>

缓动类:

Bounce 类实现缓动功能，该功能模拟目标对象上的重力牵引和回弹目标对象

Elastic Elastic 类实现缓动功能，此时目标对象移动是由一个指数衰减正弦波定义的。

Power Power 类通过使用多项式表达式定义缓动功能。

<?xml version="1.0"?>  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Script>  </fx:Script> <fx:Declarations> <s:Bounce id="boun" /> <s:Move xBy="100" easer="{boun}" id="move1" target="{panel1}" /> <s:Power exponent="4" id="power" /> <s:Move xBy="200" easer="{power}" id="move2" target="{panel2}" /> </fx:Declarations> <s:Panel id="panel1" x="29" y="33" width="194" height="123" click="panel1_clickHandler(event)"> </s:Panel> <s:Panel id="panel2" x="29" y="208" width="194" height="123" click="panel2_clickHandler(event)"> </s:Panel> </s:Application>

静态滤镜效果:

flex sdk 4.0 静态滤镜效果包含在spark.filters 包中.

具体滤镜列表: http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/spark/filters/package-detail.html

<s:Button x="190" y="281" label="按钮" > <s:filters> <s:BevelFilter angle="45" distance="4" highlightAlpha="1" highlightColor="0xFFFFFF" shadowAlpha="1" shadowColor="0x000000" type="inner" /> </s:filters> </s:Button> <fx:Script>  </fx:Script>  <s:Button x="269" y="130" label="按钮" id="b1" click="createFilters()">