Flex4之Filters的用法【模糊，炽热，阴影、齿条】

最新推荐文章于 2012-02-17 11:05:48 发布

iteye_9300

最新推荐文章于 2012-02-17 11:05:48 发布

阅读量128

点赞数

分类专栏： RIA-Flex4专栏文章标签： Flex Adobe XML HTML

RIA-Flex4专栏专栏收录该内容

43 篇文章 0 订阅

订阅专栏

先上效果图

具体代码

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   skinClass="TDFPanelSkin" 
			   viewSourceURL="srcview/index.html"
			   creationComplete="init()">
	
	<fx:Script>
		<![CDATA[
			
			private var time:Timer;
			private var count:int = 0;
			
			private function init():void{
				time = new Timer(1000,0);
				time.addEventListener(TimerEvent.TIMER,timeHandler);
				time.start();
				
			}
			
			private function timeHandler(ev:TimerEvent):void{
				count ++;
				dynamicText.text = String(count);
			}
			
			private function filterHandler(ev:MouseEvent):void{
				var filterArr:Array = [];
				
				blurBox.selected ? filterArr.push(blur): null;
				glowBox.selected ? filterArr.push(glow): null;
				shadowBox.selected? filterArr.push(dropShadow): null;
				bevelBox.selected ? filterArr.push(bevel): null;
				
				textSample.filters = filterArr;
				dynamicText.filters = filterArr;
			}
		]]>
	</fx:Script>
	
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
	</s:layout>
	
	<fx:Declarations>
		<!--filters-->
		<s:GlowFilter id="glow" blurX="12" blurY="12" color="#88AEF7" quality="2" strength="1"/>
		<s:BlurFilter id="blur" blurX="4" blurY="4" quality="2" />
		<s:DropShadowFilter id="dropShadow" alpha="0.35" blurX="6" blurY="6" distance="6" color="#000000" angle="90" />
		<s:BevelFilter id="bevel" angle="45" blurX="0.5" blurY="0.5" distance="4" strength="0.7" highlightAlpha="0.7" shadowAlpha="0.7"  />
	</fx:Declarations>
	
	<s:Panel title="Filters Samples"
			 width="600" height="100%"
			 color="0x000000" 
			 borderAlpha="0.15">
		
		<s:layout>
			<s:VerticalLayout horizontalAlign="center" 
							  paddingLeft="10" paddingRight="10" 
							  paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<s:Label id="textSample" text="SAMPLE TEXT" color="0x000000" 
				 fontWeight="bold" fontSize="40" filters="{[bevel]}" />
		
		<s:HGroup width="100%" color="#323232" horizontalAlign="center">
			<s:CheckBox id="blurBox" label="Blur" click="filterHandler(event)" />
			<s:CheckBox id="glowBox" label="Glow" click="filterHandler(event)" />
			<s:CheckBox id="shadowBox" label="Drop Shadow" click="filterHandler(event)" />
			<s:CheckBox id="bevelBox" label="Bevel" selected="true" click="filterHandler(event)" />
		</s:HGroup>
		
		<s:Label id="dynamicText" text="0" color="#323232" fontSize="18" filters="{[bevel]}" />
		
	</s:Panel>
	
</s:Application>