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)

好，大概就是这样了。

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