Flex4 - 发光呼吸图片组件(同时增加禁用灰化)
作者:hangge | 2015-02-27 14:46
这是一个继承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)