Flash/Flex学习笔记(22):滤镜学习

简介: Silverlight中称之为“效果(Effect)”的东东,在Flash里叫“滤镜(Filter)",而且Flash里内置的滤镜要比Silverlight丰富很多,几乎所有对象都有一个filters的属性,它是一个数组,可以将一个或多个滤镜同时应用于某一对象,类似的,如果要去除已经应用的滤镜效果,...

Silverlight中称之为“效果(Effect)”的东东,在Flash里叫“滤镜(Filter)",而且Flash里内置的滤镜要比Silverlight丰富很多,几乎所有对象都有一个filters的属性,它是一个数组,可以将一个或多个滤镜同时应用于某一对象,类似的,如果要去除已经应用的滤镜效果,只要将filters数组清空即可

var _data:DataProvider  = new DataProvider();

_data.addItem({label:"不应用任何滤镜",data:""});
_data.addItem({label:"Blur(模糊滤镜)",data:"Blur"});
_data.addItem({label:"Drop shadow(投影滤镜)",data:"DropShadow"});
_data.addItem({label:"Glow(发光滤镜)",data:"Glow"});
_data.addItem({label:"Gradient bevel(渐变斜角滤镜)",data:"GradientBevel"});
_data.addItem({label:"Convolution(卷积滤镜)",data:"Convolution"});
_data.addItem({label:"Blur(模糊滤镜)+DropShadow(投影滤镜)",data:"Blur&DropShadow"});

cbo1.dataProvider=_data;

cbo1.addEventListener(Event.CHANGE,ChangeHandler);

function ChangeHandler(e:Event):void {
	var _item:Object = (e.currentTarget as ComboBox).selectedItem;
	//trace(_item.data);
	switch (_item.data) {
		case "Blur" :
			img.filters=[new BlurFilter(5,5,3)];
			break;
		case "DropShadow" :
			var _shadow:DropShadowFilter = new DropShadowFilter();
			_shadow.distance=10;
			_shadow.alpha=0.3;
			img.filters=[_shadow];
			break;
		case "Glow" :
			img.filters=[new GlowFilter(0xffff99,0.5,40,40,3,1,false)];
			break;
		case "GradientBevel" :
			var bgColor:uint=0xCCCCCC;
			var size:uint=80;
			var offset:uint=50;
			var distance:Number=5;
			var angleInDegrees:Number=225;// opposite 45 degrees
			var colors:Array=[0xFFFFFF,0xCCCCCC,0x000000];
			var alphas:Array=[1,0.1,1];
			var ratios:Array=[0,128,255];
			var blurX:Number=8;
			var blurY:Number=8;
			var strength:Number=2;
			var quality:Number=BitmapFilterQuality.HIGH;
			var type:String=BitmapFilterType.FULL;
			var knockout:Boolean=false;

			img.filters = [new GradientBevelFilter(distance,
			                                           angleInDegrees,
			                                           colors,
			                                           alphas,
			                                           ratios,
			                                           blurX,
			                                           blurY,
			                                           strength,
			                                           quality,
			                                           type,
			                                           knockout)];
			break;
		case "Convolution" :
			var clamp:Boolean=false;
			var clampColor:Number=0xFF0000;
			var clampAlpha:Number=1;			
			var bias:Number=0;
			var preserveAlpha:Boolean=false;			
			var matrixCols:Number=3;
			var matrixRows:Number=3;
			var matrix:Array = [ 1,1,1,
			                     1,1,1,
			                     1,1,1 ];

			var filter:ConvolutionFilter=new ConvolutionFilter(matrixCols,matrixRows,matrix,matrix.length,bias,preserveAlpha,clamp,clampColor,clampAlpha);

			img.filters=[filter];
			break;
		case "Blur&DropShadow" :
			var _shadow2:DropShadowFilter = new DropShadowFilter();
			_shadow2.distance=10;
			_shadow2.alpha=0.3;			
			img.filters=[new BlurFilter(5,5,3),_shadow2];
			break;
		case "" :
		default :
			img.filters=[];
			break;
	}

}

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.DropShadowFilter;
	import flash.filters.BlurFilter;
	public class DynamicFilter extends Sprite {
		
		private var dropShadowFilter:DropShadowFilter;
		private var blurFilter:BlurFilter;
		
		
		public function DynamicFilter() {
			init();
		}
		
		private function init():void {
			//注:mm是舞台上的一个图片实例
			mm.x = stage.stageWidth/2;
			mm.y = stage.stageHeight/2;
			
			dropShadowFilter = new DropShadowFilter();
			dropShadowFilter.alpha = 0.3;
			blurFilter = new BlurFilter();
			
			addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
		}
		
		private function EnterFrameHandler(event:Event):void {
			var dx:Number = mouseX - mm.x;
			var dy:Number = mouseY - mm.y;
			dropShadowFilter.distance =  - Math.sqrt(dx*dx+dy*dy)/10;
			dropShadowFilter.angle = Math.atan2(dy,dx)*180/Math.PI;
			blurFilter.blurX = Math.abs(dx)/30;
			blurFilter.blurY = Math.abs(dy)/30;
			mm.filters = [blurFilter,dropShadowFilter];
		}
	}
}

目录
相关文章
|
Web App开发 前端开发 算法
CSS - Flex 之最直观的方式学习 Flexbox 属性(一)
CSS - Flex 之最直观的方式学习 Flexbox 属性(一)
153 1
CSS - Flex 之最直观的方式学习 Flexbox 属性(一)
|
前端开发 容器
CSS - Flex 之最直观的方式学习 Flexbox 属性(四)
CSS - Flex 之最直观的方式学习 Flexbox 属性(四)
150 0
CSS - Flex 之最直观的方式学习 Flexbox 属性(四)
CSS - Flex 之最直观的方式学习 Flexbox 属性(三)
CSS - Flex 之最直观的方式学习 Flexbox 属性(三)
121 0
CSS - Flex 之最直观的方式学习 Flexbox 属性(三)
|
前端开发 容器
CSS - Flex 之最直观的方式学习 Flexbox 属性(二)
CSS - Flex 之最直观的方式学习 Flexbox 属性(二)
137 0
CSS - Flex 之最直观的方式学习 Flexbox 属性(二)
|
前端开发 容器
flex学习
css flex
1175 0
|
Web App开发 JavaScript Java
flex学习
早就想弄个flex的东西了...总是没有心情弄..有的时候项目让人心力憔悴...   最近,,想着是破罐子破摔..弄点别的东西...换个心情..然后在去弄下项目...(已经快接近尾声了)   总是在开发的第一线..技术上面什么都弄..公司里面还要应付其他同事的问题...   能帮助别人就帮助吧..本人也没有别的什么有点..就代码上面略有研究.(投入的时间多了自然就有所领悟了)   1,先弄个s
1316 0