当前位置: > > > Flex3 - 阴影滤镜DropShadowFilter示例大全

Flex3 - 阴影滤镜DropShadowFilter示例大全

使用DropShadowFilter阴影滤镜可以很方便的给元件,图片添加阴影。下面通过不同的参数设置下阴影的效果,演示阴影滤镜的使用,效果图如下:
  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xffffff" layout="absolute"
				minWidth="955" minHeight="600" fontSize="12">
	<mx:Script>
		<![CDATA[
			[Binabel]
			private var filter1:DropShadowFilter = new DropShadowFilter(5,0,0,0.6,32,32);
			[Binabel]
			private var filter2:DropShadowFilter = new DropShadowFilter(3,45,0,0.6);
			[Binabel]
			private var filter3:DropShadowFilter = new DropShadowFilter(1, 45, 0x000000, 0.5, 0, 0);
			[Binabel]
			private var filter4:DropShadowFilter = new DropShadowFilter(2,45,0,.3,2,2,1,1);
			[Binabel]
			private var filter5:DropShadowFilter = new DropShadowFilter(0,0,0,0.3,14,14);
		]]>
	</mx:Script>
	<mx:VBox x="50" y ="50" verticalGap="24">
		<mx:Button label="blank" width="142" height="68" />
		<mx:Button label="filter1" width="142" height="72" filters="{[filter1]}"/>
		<mx:Button label="filter2" width="142" height="72" filters="{[filter2]}"/>
		<mx:Button label="filter3" width="142" height="72" filters="{[filter3]}"/>
		<mx:Button label="filter4" width="142" height="72" filters="{[filter4]}"/>
		<mx:Button label="filter5" width="142" height="72" filters="{[filter5]}"/>
	</mx:VBox>
	<mx:VBox x="250" y ="50" verticalGap="24">
		<mx:Canvas width="142" height="72" backgroundColor="0xffffff" borderStyle="solid" />
		<mx:Canvas width="142" height="72" backgroundColor="0xffffff" borderStyle="solid" 
				   filters="{[filter1]}"/>
		<mx:Canvas width="142" height="72" backgroundColor="0xffffff" borderStyle="solid" 
				   filters="{[filter2]}"/>
		<mx:Canvas width="142" height="72" backgroundColor="0xffffff" borderStyle="solid" 
				   filters="{[filter3]}"/>
		<mx:Canvas width="142" height="72" backgroundColor="0xffffff" borderStyle="solid" 
				   filters="{[filter4]}"/>
		<mx:Canvas width="142" height="72" backgroundColor="0xffffff" borderStyle="solid" 
				   filters="{[filter5]}"/>
	</mx:VBox>
	<mx:VBox x="450" y ="50" verticalGap="20">
		<mx:Image source="./page_bg.png"/>
		<mx:Image source="./page_bg.png" filters="{[filter1]}"/>
		<mx:Image source="./page_bg.png" filters="{[filter2]}"/>
		<mx:Image source="./page_bg.png" filters="{[filter3]}"/>
		<mx:Image source="./page_bg.png" filters="{[filter4]}"/>
		<mx:Image source="./page_bg.png" filters="{[filter5]}"/>
	</mx:VBox>
</mx:Application> 
评论0