flash特效原理：标签云

其实标签云是一个比较常见的特效类，在wondefl里面已经被做烂了，经典之余，涉及到知识点，是基于球体和旋转方面的数学应用，在这方面而言，标签云的制作并不是十分难，多少会有很多的意思,不妨尝试制作一下。这个程序已经是上一年写的，多少被丢到哪里去没有理了。今天写在这里，表示记录一下。

换了几种颜色，绿色，橙色，蓝色 ，效果会好看一点。只是通过位图的方式多少有点锯齿在里面。



简单测试：

import org.summerTree.effect.TagCloud;
import org.summerTree.effect.TagText;
import flash.text.TextFormat;
import org.summerTree.effect.IEffect;

var tagArray:Array = ["Flash","Flex","AIR","JAVA","DePHI","JAVAScript","OPENGL","网易","百度","搜狐","雅虎","谷歌","苹果","微软","甲骨文","Sun","adobe","盛大","腾讯","JAVAScript","OPENGL"];

var tagColor:Array = [0xff0000,0xFF8000,0xFFFF00,0x99CC99,0x00FFFF,0xFF00FF,0xff0000,0xFF8000,0xFFFF00,0x99CC99,0x00FFFF,0xFF00FF,0xff0000,0xFF8000,0xFFFF00,0x99CC99,0x00FFFF,0xFF00FF,0x99CC99,0x00FFFF,0xFF00FF];

var tagUrls:Array = ["http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com","http://www.baidu.com"];

var tags:TagCloud=new TagCloud();//创建标签云
tags.x = 250;
tags.y = 200;
addChild(tags);
var effect:IEffect = new TagText(tagArray,tagUrls,tagColor,new TextFormat("Arial",20,0));

tags.appendTag(effect);

如果颜色不好看，可以看看这个。换取不同的颜色，效果会有不错的显色。常见使用的红橙黄绿蓝锭紫 这几种颜色搭配效果很好看。

var tagColor:Array = [0xffffff,0xffffff,0xFF8000,0xffffff,0xffffff,0x80FF00,0xffffff,0xffffff,0xffffff,0xFF00FF,0xffffff,0xffffff,0xFF8000,0xffffff,0xFFFF00,0xffffff,0xffffff,0xffffff,0xffffff,0xffffff,0x00E3E3];

粒子模型。一个很实用的模型构建，用于对文本的坐标记录。可以把文本当成一个点。

//该类为粒子模型
//常用的粒子模型工具

package org.summerTree.effect
{

public class Particle
{
public var x:Number;//x 位置
public var y:Number;//y 位置
public var z:Number;//z 位置
public function Particle()
{

}

}
}

对应的接口：

获取返回一组标签数字。

package org.summerTree.effect
{
public interface IEffect
{
function makeEffect():void;
function getArray():Array;
}

}

在制作标签云的时候，多少需要动用一些有用球体公式，这些公式非常有用，我们需要这种球体分布把我们相应的文本设置到相应的位置上去，同时为了让这些点能够旋转起来，多少还需要用到球体旋转公式。在kp作者书里面已经有相应的提交。不妨可以找回make thing move这本书看看。

使用这两种旋转 让文本旋转起来。

private function roteY(p:Particle,angle:Number):void

private function roteX(p:Particle,angle:Number):void

注意：

当中比较核心一点就是懂球体的坐标公式，这个坐标公式可以帮到你进行运算

x = radius * Math.cos(theta) * Math.sin(phi);
y = radius * Math.sin(theta) * Math.sin(phi);

z = radius * Math.cos(phi);

推导的过程可以参考大学的解析几何相关书。

很多球体相关应用在wonderfl 里面已经大为使用过，我相信借用wonderfl 强大的平台 可以让我们掌握更多flash 的信息和制作技巧。前提下，你需要拿起高中的数学书 多读几回合，尽管你的潜意识已经有反感，说不定你 会发现那些宝物就藏在哪里。

核心的技术在于，对球体坐标公式相关应用：

//TagCloud.as 标签云
//author 夏天的树人

package org.summerTree.effect
{
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.display.BitmapData;
import flash.events.Event;
import flash.text.TextField;
import flash.filters.GlowFilter;
import flash.filters.BlurFilter;
import flash.filters.BitmapFilterQuality;
import flash.text.TextFormat;
import flash.geom.Point;

public class TagCloud extends Sprite
{
private var tagContainer:Sprite=new Sprite();//标签容器
public var _speed:Number = 0.008;//速度
private var tags:Array;            //标签数组
private var tag_len:int;          //标签数组长度
private var fl:Number = 250;     //焦距
private var p_list:Array = [];  // 粒子列表
private var radius:Number=0;   //半径
public function TagCloud()
{
addChild(tagContainer);
}

//添加标签
public function appendTag(effectObject:IEffect,radius:Number=140):void
{
addChild(DisplayObject(effectObject));
effectObject.makeEffect();
tags = effectObject.getArray();
tag_len = tags.length;
this.radius=radius;

for (var i:int=0; i<tag_len; i++)
{
tagContainer.addChild(tags[i]);
var p:Particle=new Particle();

//球体uv分布，经纬度
var phi:Number = Math.acos((2 * (i + 1) - 1) / tag_len - 1);
var theta:Number = Math.sqrt(tag_len * Math.PI) * phi;

p.x = radius * Math.cos(theta) * Math.sin(phi);
p.y = radius * Math.sin(theta) * Math.sin(phi);
p.z = radius * Math.cos(phi);
p_list.push(p);
}
init_motion();
}

private function init_motion():void
{
addEventListener(Event.ENTER_FRAME,Run);
}

//开始旋转运动
public function startMotion():void
{
addEventListener(Event.ENTER_FRAME,Run);
}

//结束旋转
public function stopMotion():void
{
removeEventListener(Event.ENTER_FRAME,Run);
}

public function set speed(value:Number):void
{
_speed = value;
}

public function get speed():Number
{
return _speed;
}

//对容器进行鼠标交互
private function Run(event:Event):void
{
var angleY:Number=(stage.mouseX - stage.width * 0.5) * this.speed;
var angleX:Number=(stage.mouseY - stage.height * 0.5) * this.speed;
for (var i:int=0;i<tag_len;i++)
{
roteY(p_list[i],angleY);
roteX(p_list[i],angleX);
var scale:Number = fl / ( fl + p_list[i].z );
tags[i].scaleX = tags[i].scaleY = scale;
tags[i].x = p_list[i].x * scale;
tags[i].y = p_list[i].y * scale;
tags[i].alpha=scale;
}

// sortZ();
}

//利用坐标旋转x
private function roteX(p:Particle,angle:Number):void
{
angle=angle*Math.PI/180;
var py:Number = Math.cos(angle) * p.y - Math.sin(angle) * p.z;
var pz:Number = Math.cos(angle) * p.z + Math.sin(angle) * p.y;
p.y = py;
p.z = pz;
}
//利用坐标旋转y
private function roteY(p:Particle,angle:Number):void
{
angle=angle*Math.PI/180;
var px:Number = Math.cos(angle) * p.x - Math.sin(angle) * p.z;
var pz:Number = Math.cos(angle) * p.z + Math.sin(angle) * p.x;
p.x = px;
p.z = pz;
}

//Z的深度排序
private function sortZ():void
{
p_list.sortOn("z",Array.DESCENDING|Array.NUMERIC);//排序
for (var i:int=0; i<tag_len; i++)
{
var p:* = tags[i];
tagContainer.setChildIndex(p,i);
}
}

}
}

//文本，用于标签文本
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.BlurFilter;
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 glow:GlowFilter;      //发光效果
private var contain_list:Array=[]; //标签内容
private var urls:Array=[];//连接地址
private var colors:Array;
public function TagText(tag_List:Array,urls:Array,colors:Array,textFormat:TextFormat=null,glowColor:uint=0x00ff00)
{
glow = new GlowFilter (glowColor, 1, 8, 8, 2, BitmapFilterQuality.LOW, true, false);

this.tag_List = tag_List;
this.textFormat = textFormat;
this.tag_len = tag_List.length;
this.colors=colors;
this.urls=urls;
}

//创建标签指定他们的文本和滤镜方式
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];

txt.filters = [new BlurFilter(1.1,1.1)];
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:containEx=new containEx();
contain.url=urls[i];
addChild(contain);

var bmp:Bitmap = new  Bitmap(bitmapdata);
var rect:Shape=new Shape();
contain.addChild(rect);
contain.addChild(bmp);

contain_list.push(contain);
contain.addEventListener(MouseEvent.ROLL_OVER,onOverHandler);
contain.addEventListener(MouseEvent.ROLL_OUT,onOutHandler);
contain.addEventListener(MouseEvent.CLICK,onClickHandler);
}
}
private function onOverHandler(event:MouseEvent):void
{
event.currentTarget.buttonMode=true;
event.currentTarget.filters = [glow];
event.currentTarget.getChildAt(0).graphics.clear();
event.currentTarget.getChildAt(0).graphics.lineStyle(0,0xff0000);
event.currentTarget.getChildAt(0).graphics.drawRect(0,0, event.currentTarget.getChildAt(1).width, event.currentTarget.getChildAt(1).height);
}

private function onOutHandler(event:MouseEvent):void
{
event.currentTarget.buttonMode=false;
event.currentTarget.filters = [];
event.currentTarget.getChildAt(0).graphics.clear();
}

private function onClickHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest(event.currentTarget.url));
}

public function makeEffect():void
{
buildTags();
}
public  function getArray():Array
{
return contain_list;
}
}
}

import flash.display.Sprite;
internal class containEx extends Sprite
{
public var url:String;
public function containEx()
{

}
}

如果不喜欢 TagText类，那么可以重写一个，可以实现接口IEffect，把对应标签文字添加到数组里面可以借用TagCloud 来尝试制作。

TagCloud 只是一个特效容器，而至于其他文本 可以根据自己喜欢，调整自己喜欢的颜色和链接，或者使用一个xml数据来绑定你想要的标签云效果。

制作方式很多 多种多样，它看起来并不是很炫耀，经典还是很值得去阅读。相信你可以做出更加优秀的标签云。或者留下你的名字，把你的想法告诉我。

好，睡觉了。功课记录完毕。