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

 

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

 

 

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