flash特效原理：标签云（2）

在初步完成之后，其实依然可以对其进行一些修改，当初使用发光滤镜发现效果并不是很理想，于是改用了color滤镜。下面继续使用这个滤镜。

在这里需要提供一个滤镜数组，如下，作用改变图形的颜色。

package org.summerTree.effect
{

	public class ColorMatrixType
	{

		public function ColorMatrixType()
		{

		}
        
		//应用绿色
		public static function applyGreen():Array
		{

			var matrix:Array = new Array();
			matrix = matrix.concat([0,0,0,0,0]);// red
			matrix = matrix.concat([0,1,0,0,0]);// green
			matrix = matrix.concat([0,0,0,0,0]);// blue
			matrix = matrix.concat([0,0,0,1,0]);// alpha
			return matrix;
		}

	}

}

再添加一个标签容器：里面设置位图，设置滤镜。

package org.summerTree.effect
{

	import flash.display.Sprite;
	import flash.display.BitmapData;
	import flash.geom.Point;
	import flash.display.Shape;
	import flash.filters.ColorMatrixFilter;
	import flash.display.Bitmap;

	public class TagContainer extends Sprite
	{
		public var url:String;
		public var source:Bitmap;
		private var rect:Shape=new Shape();
		public function TagContainer()
		{
			addChild(rect);
		}

		//滤镜
		public function applyFilter(matrix:Array,isFilter:Boolean=true):void
		{
			if (isFilter)
			{
				source.filters = matrix;
			}
			else
			{
				source.filters = [];
			}
		}

		//绘制边框
		public function drawRect(color:uint=0xff0000):void
		{
			rect.graphics.clear();
			rect.graphics.lineStyle(0,color);
			rect.graphics.drawRect(0,0, source.width, source.height);
		}

		//清除边框
		public function clearRect():void
		{
			rect.graphics.clear();
		}


	}



}

在一个网友留言当中，他们希望鼠标经过标签的时候停止运动，并且放大，离开的时候继续运动。

我们可以把TagText当中as 文件进行修改，提供一个额外的参数用于控制旋转时候的停顿和开始。

public function TagText(tag_List:Array,urls:Array,colors:Array,textFormat:TextFormat=null,glowColor:uint=0x00ff00,tagCloud:TagCloud=null)

同样地方，再把他们改成冒泡形式监听：

this.parent.addEventListener(MouseEvent.MOUSE_OVER,onOverHandler,true);
				this.parent.addEventListener(MouseEvent.MOUSE_OUT,onOutHandler,true);
				this.parent.addEventListener(MouseEvent.CLICK,onClickHandler,true);

在监听鼠标的事件当中，处理了变色和放大，以及停止旋转。

tagCloud.startMotion();//开始运动

tagCloud.stopMotion();//停止运动

//文本，用于标签文本
package org.summerTree.effect
{
	import flash.display.Sprite;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.filters.GlowFilter;
	import flash.filters.*;
	import flash.filters.BitmapFilterQuality;
	import flash.text.TextFormat;
	import flash.events.MouseEvent;
	import flash.net.navigateToURL;
	import flash.net.URLRequest;
	import flash.display.Shape;
	
	
	public class TagText extends Sprite  implements IEffect
	{		
		private var tag_List:Array;//标签列表
		private var tag_len:int;//标签数组的长度
		
		private var textFormat:TextFormat;//文本格式
		private var contain_list:Array=[]; //标签内容
		private var urls:Array=[];//连接地址
		private var colors:Array; 
		private var tagCloud:TagCloud; 
		
		public function TagText(tag_List:Array,urls:Array,colors:Array,textFormat:TextFormat=null,glowColor:uint=0x00ff00,tagCloud:TagCloud=null)
		{
			this.tag_List = tag_List;
			this.textFormat = textFormat;
			this.tag_len = tag_List.length;
			this.colors=colors;
			this.urls=urls;
			this.tagCloud=tagCloud;
		}
		
		//创建标签指定他们的文本和滤镜方式
		private function buildTags():void
		{
			for (var i:int=0; i < tag_len; i++)
			{
				var txt:TextField=new TextField();
				
				if (textFormat != null)
				{
					txt.defaultTextFormat = textFormat;
				}
				txt.selectable = false;
				txt.textColor=colors[i];
				txt.text = tag_List[i];
				
				var txtW:Number = txt.textWidth + 4;
				var txtH:Number = txt.textHeight + 4;
				var bitmapdata:BitmapData = new BitmapData(txtW,txtH,true,0x01FFFFFF);
				bitmapdata.draw(txt);

                var contain:TagContainer=new TagContainer();
				contain.url=urls[i];
				addChild(contain);
				
				var bmp:Bitmap = new  Bitmap(bitmapdata);
				contain.source=bmp;//增加
				contain.addChild(bmp);
				contain_list.push(contain);

			}
				this.parent.addEventListener(MouseEvent.MOUSE_OVER,onOverHandler,true);
				this.parent.addEventListener(MouseEvent.MOUSE_OUT,onOutHandler,true);
				this.parent.addEventListener(MouseEvent.CLICK,onClickHandler,true);
			
		}
		private function onOverHandler(event:MouseEvent):void
		{
			 if(tagCloud)
			 tagCloud.stopMotion();
			 
			 var tagContainer:TagContainer= event.target as  TagContainer;
			 tagContainer.buttonMode=true;
			 tagContainer.scaleX=tagContainer.scaleY+=0.2;
			 tagContainer.applyFilter ([new ColorMatrixFilter(ColorMatrixType.applyGreen())]);
			 tagContainer.drawRect();
		}
		
		private function onOutHandler(event:MouseEvent):void
		{
			 if(tagCloud)
			 tagCloud.startMotion();
			 var tagContainer:TagContainer= event.target as TagContainer;
			 tagContainer.buttonMode=false;
			 tagContainer.scaleX=tagContainer.scaleY-=0.2;
			 tagContainer.applyFilter(null,false);
			 tagContainer.clearRect();
		}		
		
		private function onClickHandler(event:MouseEvent):void
		{
			var tagContainer:TagContainer= event.target as TagContainer;
			navigateToURL(new URLRequest(tagContainer.url));		
		}
				
		public function makeEffect():void
		{			
			buildTags();
		}		
		public  function getArray():Array
		{
			return contain_list;			
		}		
	}	
}

基本测试：

var effect:IEffect = new TagText(tagArray,tagUrls,tagColor,new TextFormat("Arial",20,0,true),0x00ff00,tags);

只是增加一个参数。

在另外一个方案当中，同样可以进行修改TagText当中鼠标行为，可以将其只是提供一个事件分派

private function onOverHandler(event:MouseEvent):void
{

this.dispatchEvent（new Event("mouseOverEvent")）；

}

private function onOutHandler(event:MouseEvent):void
{

this.dispatchEvent（new Event("mouseOutEvent")）；

}

监听的时候，对其行为添加你想执行的行为。而不用为TagText类 额外增加一个参数

public function TagText(tag_List:Array,urls:Array,colors:Array,textFormat:TextFormat=null,glowColor:uint=0x00ff00,tagCloud:TagCloud=null)

依旧可以原来面貌

public function TagText(tag_List:Array,urls:Array,colors:Array,textFormat:TextFormat=null,glowColor:uint=0x00ff00)

好，大概就是这样了。

好玩的地方还可以继续完善。