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)

好，大概就是这样了。

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