flex 4.0 滤镜效果.

动态滤镜效果:

 

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()}"> <!-- 将定义的滤镜赋给 bitmapFilter --> <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"?> <!-- Simple example to demonstrate the s:Linear class. --> <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> <!--[CDATA[ protected function panel1_clickHandler(event:MouseEvent):void { move1.play(); } protected function panel2_clickHandler(event:MouseEvent):void { move2.play(); } ]]--> </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> <!--[CDATA[ import flash.filters.BitmapFilterQuality; import flash.filters.BitmapFilterType; import spark.filters.*; private var myBlurFilter:BlurFilter; public function createFilters():void { myBlurFilter = new BlurFilter(3, 3, BitmapFilterQuality.HIGH); b1.filters = [myBlurFilter]; } ]]--> </fx:Script> <!-- 另一种方式定义滤镜 --> <s:Button x="269" y="130" label="按钮" id="b1" click="createFilters()">