flash特效原理标签云

最新推荐文章于 2019-04-25 19:52:06 发布

传说中的贫民窟

最新推荐文章于 2019-04-25 19:52:06 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/truhfcg/article/details/83787796

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

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

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

简单测试：

[c-sharp] view plain copy print ?

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);

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);

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

[c-sharp] view plain copy print ?

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

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

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

[c-sharp] view plain copy print ?

//该类为粒子模型
//常用的粒子模型工具
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 class Particle { public var x:Number;//x 位置 public var y:Number;//y 位置 public var z:Number;//z 位置 public function Particle() { } }}

对应的接口：

获取返回一组标签数字。

[c-sharp] view plain copy print ?

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

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 的信息和制作技巧。前提下，你需要拿起高中的数学书多读几回合，尽管你的潜意识已经有反感，说不定你会发现那些宝物就藏在哪里。

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

[c-sharp] view plain copy print ?

//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);
}
}
}
}

//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); } } }}

[c-sharp] view plain copy print ?

//文本，用于标签文本
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()
{
}
}

//文本，用于标签文本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数据来绑定你想要的标签云效果。

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

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