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数据来绑定你想要的标签云效果。

 

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

 

 

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