当前位置: > > > Flex4 - 发光呼吸图片组件(同时增加禁用灰化)

Flex4 - 发光呼吸图片组件(同时增加禁用灰化)

这是一个继承Image组件的发光图片组件,鼠标移上去时图片边缘会有强弱变化的呼吸光晕,同时设置禁用时图片会灰化。

效果图如下:
  
package
{
	import flash.events.MouseEvent;
	import flash.filters.ColorMatrixFilter;
	import flash.filters.GlowFilter;
	import flash.utils.clearInterval;
	import flash.utils.setInterval;
	import spark.components.Image;
	
	/**
	 * 发光图片组件
	 */
	public class GlowImage extends Image
	{
		
		/**
		 * 发光半径
		 */
		private var _glowRange:int = 12;
		
		/**
		 * 发光滤镜
		 */
		private var _glowFilter:GlowFilter;
		
		/**
		 * 标记目前是减弱还是加强
		 */
		private var _fade:Boolean = false;
		
		/**
		 * 定时器引用
		 */
		private var _interval:int;
		
		/**
		 * 是否选中状态(选中状态有发光效果,但没有动态的变化)
		 */
		private var _selected:Boolean = false;
		
		/**
		 * 默认构造函数
		 */
		public function GlowImage()
		{
			super();
			
			//创建滤镜
			this._glowFilter = new GlowFilter();
			this._glowFilter.blurX = this._glowRange/2;
			this._glowFilter.blurY = this._glowRange/2;
			this._glowFilter.color = 0xffffff;
			this._glowFilter.strength =2;
			this._glowFilter.quality = 3;
			
			//添加监听
			this.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
			this.addEventListener(MouseEvent.ROLL_OUT, onRollOut);
		}
		
		/**
		 * 获取是否处于选中状态
		 */
		public function get seleted():Boolean{
			return this._selected;
		}
		
		/**
		 * 设置是否处于选中状态
		 */
		public function set seleted(value:Boolean):void{
			this._selected = value;
			
			clearInterval(this._interval);
			if(this._selected == true){
				this._glowFilter.blurX = this._glowRange;
				this._glowFilter.blurY = this._glowRange;
				this.filters = [this._glowFilter];
			}else{
				this.filters = [];
			}
		}
		
		/**
		 * 鼠标移入响应
		 */
		private function onRollOver(event:MouseEvent):void{
			if(this._selected || !this.enabled){
				return;
			}
			this._fade = false;
			this._glowFilter.blurX = this._glowRange/2;
			this._glowFilter.blurY = this._glowRange/2;
			this.filters = [this._glowFilter];
			this._interval = setInterval(this.glow, 450/this._glowRange);
		}
		
		/**
		 * 鼠标移出响应
		 */
		private function onRollOut(event:MouseEvent):void{
			if(this._selected  || !this.enabled){
				return;
			}
			clearInterval(this._interval);
			this.filters = [];
		}
		
		/**
		 * 设置发光颜色
		 */
		public function set glowColor(value:int):void{
			this._glowFilter.color = value;
		}
		
		/**
		 * 设置发光半径
		 */
		public function set glowRange(value:int):void{
			this._glowRange = value;
			this._glowFilter.blurX = value/2;
			this._glowFilter.blurY = value/2;
		}
		
		/**
		 * 发光函数
		 */
		private function glow():void{
			if(this._fade){
				this._glowFilter.blurX--;
				this._glowFilter.blurY--;
				this.filters = [this._glowFilter];
				if(this._glowFilter.blurX <=this._glowRange/2){
					this._fade = false;
				}
			}else{
				this._glowFilter.blurX++;
				this._glowFilter.blurY++;
				this.filters = [this._glowFilter];
				if(this._glowFilter.blurX >= this._glowRange*1.5){
					this._fade = true;
				}
			}
		}
		
		/**
		 * 设置是否可用
		 */
		override public function set enabled(value:Boolean):void
		{
			super.enabled = value;
			
			if(!this.enabled){
				//去除发光效果
				clearInterval(this._interval);
				this.filters = [];
				
				//灰化图标
				toGrayScale();
				
				this.buttonMode = false;
			}else{
				//还原图标默认颜色
				toOriginalColors();
				
				this.buttonMode = true;
			}
		}
		
		/**
		 * 灰化图标
		 */
		private function toGrayScale():void{
			var matrix:Array = [0.3, 0.59, 0.11, 0, 0, 0.3, 0.59, 
				0.11, 0, 0, 0.3, 0.59, 0.11, 0, 0, 0, 0, 0, 1, 0];
			var grayscaleFilter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
			this.filters = [grayscaleFilter];
		}
		
		/**
		 * 还原图标默认颜色
		 */
		private function toOriginalColors():void{
			var matrix:Array = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
			var originalFilter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
			this.filters = [originalFilter];
		} 
		
	}
}
评论0