`
JavaCrazyer
  • 浏览: 3025550 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

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

阅读更多

先上效果图



 具体代码

<?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>

 

  • 大小: 17.4 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics