flash版本的3d标签云图as3代码,已经修改成过.

2 篇文章 0 订阅
1 篇文章 0 订阅

flash版本的3d标签云图as3代码,已经修改成过. - qidizi - qidizi 的博客

正圆

flash版本的3d标签云图as3代码,已经修改成过. - qidizi - qidizi 的博客

套圆

flash版本的3d标签云图as3代码,已经修改成过. - qidizi - qidizi 的博客

半圆


as3.as代码

代码是改自wp的flash,并不是自己完全写的.所以关键算法并不是我写的.

栯圆的实现是在某一边旋转时进行压缩而成的,并不是实际意义上的计算出来;

本来后期是能自适应边框,如长方形就是栯圆,正方形就是圆.因为没有时间,就不改了.临时改来用用.ie中的自适应有问题,所以也修正.

现在as不依赖flash的五台的东西,完全是as代码画出来,设置的.所以,直接加载这个as就可以使用了,不需要在上面画什么东西.


package
{
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.display.LoaderInfo;
    import flash.events.Event;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.events.MouseEvent;
    import flash.net.navigateToURL;    
    [SWF(backgroundColor="#ffffff", frameRate="0", width="500", height="500")] //设置舞台信息,注意下面有些地方使用到舞台大小,修改时,需要同时修改var的值
    
    public class as3 extends MovieClip    {
        // private vars
        private var radius:Number = 0;//半径
        private var mcList:Array;
        private var dtr:Number = Math.PI/180;//1夹角=π/180弧度;
        private var sina:Number;
        private var cosa:Number;
        private var sinb:Number;
        private var cosb:Number;
        private var sinc:Number;
        private var cosc:Number;
        private var originx:Number;
        private var originy:Number;
        private var colorBarA:Number;
        private var colorBarB:Number;
        private var swfBgColor:Number;
        private var hoverColor:Number;
        private var rollForce:Number;
        private var lasta:Number;
        private var lastb:Number;
        private var holder:MovieClip;
        private var active:Boolean;
        private var bgTf:TextField = null;
        private var debug:Boolean;
        private var stageDefWidth:Number;//舞台原始大小
        private var stageDefHeight:Number;//舞台原始大小
        
        public function as3(){
            stop();
            var swfStage:Stage = this.stage;
            stdOut.setStage(swfStage);//实例化浏览器提示
            swfStage.scaleMode = StageScaleMode.NO_SCALE;
            swfStage.align = StageAlign.TOP_LEFT;
            addEventListener(Event.ENTER_FRAME, stageTest);//ie某种情况下获取stage大小有问题            
        }
        
        private function stageTest(e:Event) {
            if (stage && stage.stageWidth) {//成功获取stage大小后才开始
                removeEventListener(Event.ENTER_FRAME,stageTest,false);                
                stageDefWidth = this.stage.stageWidth;
                stageDefHeight = this.stage.stageHeight;
                toDo();
            }
        }
        
        private function toDo() {//开始处理
            var tags = demoXmlHtml.cfg();

            if (!/^\s*<[\s\S]+>\s*$/.test(this.loaderInfo.parameters.xmlHtml)) {//未设置配置,使用演示并提醒
                demoXmlHtml.xmlTip();                
            } else tags = this.loaderInfo.parameters.xmlHtml;
                    
                            
            try {
                var xmlHtml:XML = new XML(tags);
            } catch (e) {
                stdOut.t ('加xmlHtml参数的值到XML容器时出错(一般是格式不符合xml规则):' + e  + '\n\n 获取到的xmlHtml内容(请把获取到的xmlHtml值保存成xxx.xml使用浏览器打开即可了解错误原因)\n\n\n' + tags, this);
                return;
            }            
            
            init( xmlHtml );
        }
        
        private function init( o:XML ):void {//解析配置成功
            swfBgColor = getNum(cssColor2As(o['@swfBgColor']), 0xffffff, 0x000000, 0xffffff);            
            colorBarA = getNum(cssColor2As(o['@colorBarA']), 0x000000, 0x000000, 0xffffff);            
            colorBarB = getNum(cssColor2As(o['@colorBarB']), 0xffffff, 0x000000, 0xffffff);            
            debug = Boolean(getNum(o['@debug'], 0, null, null));            
            rollForce = getNum(o['@rollForce'], 1, 1, null);
            var defaultFontSize = 12;
            mcList = [];
            active = false;
            lasta = 1;
            lastb = 1;
            holder = new MovieClip();//创建一个标签容器
            addChild(holder);
            
            if (!getNum(o['@swfBgColorTransparent'], 1, null, null)) {//需要设置背景时,使用textfield当背景色;swf设置透明时不使用
                bgTf = new TextField();
                bgTf.x = bgTf.y = 0;
                bgTf.width = stageDefWidth;
                bgTf.height = stageDefHeight;
                bgTf.background = true;
                bgTf.backgroundColor = swfBgColor;
                this.cacheAsBitmap = true;
                this.opaqueBackground = swfBgColor;
                addChildAt(bgTf, 0);//加入到底层
            }
            
            var links = o.children();
            var mcI = 0;
            var largeWH = 0;//最大tag值
            
            for each( var node:XML in links ){                
                if (node.name().toString().toLowerCase() != 'a') continue;//只允许a标签
                var fs:Number = getFontSize( node["@style"], defaultFontSize);
                var percC:Number = (++mcI) / links.length();//字色:字号处于大小间转化成色条滑点
                var percHC:Number = 1 - percC;//hover字色,字号处于大小间转化成色条滑点,但是跟字色相反
                var col:Number = getColor( node["@style"], 'color',  getColorFromGradient( percC ));
                var hoverCl:Number = getColor( node["@style"], 'border\\-color',  getColorFromGradient( percHC ));
                var mc:Tag = new Tag( node, col, hoverCl, fs, debug);
                holder.addChild(mc);
                mcList.push( mc );                
                radius = Math.max(Math.sqrt(mc.height*mc.height + mc.width *mc.width), radius);//选择最长半径,过长方形4点球半径 = 根号(长/2的平方+宽/2的平方)
                //stdOut.t(mc.height,mc.width,radius);//打印计算过程
            }
        
            positionAll();
            addEventListener(Event.ENTER_FRAME, updateTags);
            stage.addEventListener(Event.MOUSE_LEAVE, mouseExitHandler);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
            stage.addEventListener(Event.RESIZE, resizeHandler);
            resizeHolder();
            
        }
        
        private function positionAll():void {//计算每个tag球面坐标
            var phi:Number = 0;
            var theta:Number = 0;
            var max:Number = mcList.length;
            mcList.sort( function(){ return Math.random()<0.5 ? 1 : -1; } );//打乱
            //分布
            for( var i:Number=1; i<max+1; i++){//p点球坐标转直角坐标 http://baike.baidu.com/view/84791.htm
                phi = Math.acos(-1+(2*i - 1)/max);//点过原点与Z的夹角, -1+为了让tag分布在前后半球, -1防止=pi; 0<= phi <2 pi
                theta = Math.sqrt(max*Math.PI)*phi;//点过原点与x的夹角 0<= theta <=pi
                // Coordinate conversion
                mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
                mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
                mcList[i-1].cz = radius  * Math.cos(phi);
                //stdOut.t(phi,theta,mcList[i-1].cx,mcList[i-1].cy,mcList[i-1].cz);//显示tag相关参数,角度是慢慢变小
            }
        }
        
        private function updateTags( e:Event ):void {//定时刷新
            var a:Number;
            var b:Number;
            if( active ){//动力臂
                a = (-Math.min( Math.max( holder.mouseY, - stage.stageHeight/2 ), stage.stageHeight/2 ) / radius ) * rollForce;
                b = (Math.min( Math.max( holder.mouseX, - stage.stageWidth/2 ), stage.stageWidth/2 ) / radius ) * rollForce;
            } else {
                a = lasta * 0.98;
                b = lastb * 0.98;
            }
            lasta = a;
            lastb = b;
            var count = mcList.length;
            // if a and b under threshold, skip motion calculations to free up the processor
            if( Math.abs(a) > 0.01 || Math.abs(b) > 0.01 ){
                sineCosine( a, b, a*b );//a左右移动力,b上下力,c是旋转力
                // bewegen van de punten
                for( var j:Number=0; j<mcList.length; j++ ) {//变换球面位移坐标,上移->右移->前移
                    // multiply positions by a x-rotation matrix,左右动
                    var rx1:Number = mcList[j].cx;
                    var ry1:Number = mcList[j].cy * cosa + mcList[j].cz * -sina;
                    var rz1:Number = mcList[j].cy * sina + mcList[j].cz * cosa;
                    // multiply new positions by a y-rotation matrix 上下动
                    var rx2:Number = rx1 * cosb + rz1 * sinb;
                    var ry2:Number = ry1;
                    var rz2:Number = rx1 * - sinb + rz1 * cosb;
                    // multiply new positions by a z-rotation matrix 绕z转
                    var rx3:Number = rx2 * cosc + ry2 * -sinc;
                    var ry3:Number = rx2 * sinc + ry2 * cosc;
                    var rz3:Number = rz2;
                    // set arrays to new positions
                    mcList[j].cx = rx3;
                    mcList[j].cy = ry3;
                    mcList[j].cz = rz3;
                    // add perspective
                    var per:Number = rz3*(stage.stageWidth +radius)/radius/(count+j);//景深跟z有关系,缩小关系与景深比,起大,容量起大
                    // setmc position, scale, alpha
                    mcList[j].scaleX =  mcList[j].scaleY = per;//前层tag比后层大,缩放比xy移动不成正比,有效拉开之间空间
                    mcList[j].x = rx3 * per - mcList[j].width /2;//计算时是按0点计算,需要把textfield居中显示
                    mcList[j].y = ry3 * per - mcList[j].height/2;
                    mcList[j].alpha = per * (j)/count;
                }
                depthSort();
            }
        }
        
        private function depthSort():void {//设置景深,立体效果
            if (!mcList.length) return;
            mcList.sortOn( "cz", Array.DESCENDING | Array.NUMERIC );//按景深排            
            var current:Number = 0;
            for( var i:Number=0; i<mcList.length; i++ ){//重新调整tag到对应的层中
                holder.setChildIndex( mcList[i], i );
                if( mcList[i].active == true ){
                    current = i;
                }
            }
            holder.setChildIndex( mcList[current], mcList.length-1 );//hover中的调整到最前
        }
        
        private function resizeHolder():void {//swf容器发生大小变化
            var s:Stage = this.stage;
            holder.x = s.stageWidth/2;//球居中放置
            holder.y = s.stageHeight/2;
            //调整球到容器新大小,对比初始化时的大小(stageDefWidth)来倍比
            //holder.scaleX = holder.scaleY = Math.min(s.stageWidth / stageDefWidth, s.stageHeight / stageDefHeight);            
            
            if (bgTf) {//调整背景到swf容器大小
                bgTf.width = this.stage.stageWidth;
                bgTf.height = this.stage.stageHeight;
            }
        }
        
        private function sineCosine( a:Number, b:Number, c:Number ):void {
            sina = Math.sin(a * dtr);
            cosa = Math.cos(a * dtr);
            sinb = Math.sin(b * dtr);
            cosb = Math.cos(b * dtr);
            sinc = Math.sin(c * dtr);
            cosc = Math.cos(c * dtr);
        }
        
        private function cssColor2As(str:String) {
            return str.toString().replace('#', '0x');
        }
        private function getFontSize(str:String, defaultSize:Number):Number {            
            if (!str) return defaultSize;
            str = ' ' + str + ' ';
            var m = str.match(/[^\-\w]font\-size\s*\:\s*(\d+)[^\W]/i);

            if (m) {
                return Number(m[1]);
            } else return defaultSize;
        }
        private function getNum (obj, defaultNum, minNum, maxNum):Number {
            if (isNaN(defaultNum)) defaultNum = 0;
            if ( /^\s*$/.test(obj) || (undefined == obj) || (null == obj) || isNaN(obj) ) return defaultNum; 
            obj = Number(obj);
            if (isNaN(obj)) return defaultNum;
            if ((minNum is Number) && (obj < minNum)) return minNum;
            if ((maxNum is Number) && (obj > maxNum)) return maxNum;            
            return obj;
        }
        
        private function getColor(str:String, what:String /* 包含有特殊字符时需要传入前二个\\转义 如 border-color :border\\-color */, defCl:Number):Number {
            if (!str) return defCl;
            str = ' ' + str + ' ';
            var re = new RegExp("[^\\-\\w]" + what + "\\s*\\:\\s*#([a-z0-9]{6})[^\\-\\w]", "i");
            var m = str.match(re);

if (m) {
                m = Number('0x' + m[1]);
                return (m > 0xffffff) || (m < 0x000000) ? defCl : m;
            } else return defCl;
        }
        
        private function mouseExitHandler( e:Event ):void { active = false; }
        private function mouseMoveHandler( e:MouseEvent ):void {    active = true; }
        private function resizeHandler( e:Event ):void { resizeHolder(); }
        
        private function getColorFromGradient( perc:Number ):Number {//色阶,利用perc做滑块取colorBarA到colorBarB二色中间色点值,perc应该为0->1
            //3 << 4 == 3 * 2的4次方 = 48, 17 >> 3 == 17 /2的3次方 = 2 (小数直接去掉,即0x123456 >> 16 = 0x12(后面的4位去掉),其它移位相同,左移相当补0
            var r:Number = ( perc * ( colorBarA >> 16 ) ) + ( (1-perc) * ( colorBarB >> 16 ) );//新色为0.x A点的R色+B点1-0.X色,下g/b相同,最后混色,为什么混色会这样不懂
            var g:Number = ( perc * ( (colorBarA >> 8) % 256 ) ) + ( (1-perc) * ( (colorBarB >> 8) % 256 ) );
            var b:Number = ( perc * ( colorBarA % 256 ) ) + ( (1-perc) * ( colorBarB % 256 ) );
            var rgb = ( (r << 16) | (g << 8) | b );//== r*5536+g*256+b变成0xffffff进制
            return rgb == swfBgColor ? rgb + 0xf : rgb;//防止取到背景色,不预防超过
        }
    }

}

/*
 * 标签云类
 */
import flash.text.TextField;
import flash.events.Event;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
import flash.display.DisplayObject;

internal class Tag extends TextField {
    
    private var _node:XML;
    private var _cx:Number;
    private var _cy:Number;
    private var _cz:Number;
    private var _color:Number;
    private var _hoverColor:Number;
    private var _active:Boolean;
    private var javascript:String = null;
    private var _debug:Boolean = false;
    
    public function Tag( node:XML, color:Number, hoverColor:Number, fontSize:Number, debug:Boolean){
        super();
        _debug = debug;
        _node = node;
        _color = color;
        _hoverColor = hoverColor;
        _active = false;
        this.autoSize = TextFieldAutoSize.LEFT;
        this.selectable = false;
        this.textColor = color;
        var format:TextFormat = new TextFormat();
        format.bold = 0;
        format.size = fontSize;
        this.setTextFormat(format);
        splitHref(node['@href']);
        this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
        this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
        this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
    }
    
    private function splitHref (href:String) {
        var href = href.replace(/^\s+|\s+$/g, '');
        var a = '<a href="#1" target="_self">';
        
        if ( ('' == href) || (0 == href.indexOf('#')) ) {//无链接|.

        } else if (0 == href.indexOf('javascript:')) {//js
            javascript = href.substr(11);
        } else {//link
            a = '<a href="' + href + '" target="' + (_node['@target'].toString() == '' ? '_self' : _node['@target']) + '" >';
        }
        
        
        this.htmlText = a + _node + '</a>';
    }
    
    private function mouseOverHandler( e:MouseEvent ):void {
        this.textColor = _hoverColor;
        _active = true;
    }
    
    private function mouseOutHandler( e:MouseEvent ):void {
        this.textColor = _color;
        _active = false;
    }
    
    private function mouseUpHandler( e:MouseEvent ):void {
        if (javascript) {//回调js
            if (ExternalInterface.available) {
                try {
                    var re = ExternalInterface.call('(function(str){str = unescape(str); try{window.eval(str);} catch(e) {' + (_debug ? 'alert("swf运行js代码" + str + "出错" + e)' : '') + ';}; return 1024;})', escape(javascript));
                    
                    if (_debug && (re != 1024)) {
                        stdOut.t('运行js代码' + javascript + '失败: ');
                    }
                } catch (e) {
                    _debug && stdOut.t('运行js代码出错: ' + e);
                }
            } else {
                _debug && stdOut.t('无法运行js代码,swf的ExternalInterface.available关闭');
            }
        }
    }
    
    public function set cx( n:Number ){ _cx = n }
    public function get cx():Number { return _cx; }
    public function set cy( n:Number ){ _cy = n }
    public function get cy():Number { return _cy; }
    public function set cz( n:Number ){ _cz = n }
    public function get cz():Number { return _cz; }
    public function get active():Boolean { return _active; }
}

/*
 * 出错提示类,
 */
internal class stdOut {
    private static var _stage:Object;
    
    public static function setStage(thisStage:Object) {//使用前需要首次传入舞台对象
        _stage = thisStage;
    }
    
    
    static function t(...txt:Array){//实现trace功能调用方式 stdOut.t(参数,参数....,参数)
        if (!_stage || !txt.length) return;
        var str = [];        
        for (var i = 0; i < txt.length; i++) str[str.length] = txt[i].toString();
        var tf = new TextField();
        tf.doubleClickEnabled = true;
        tf.background = true;
        tf.height = 100;
        tf.width = 300;
        tf.multiline = true;
        tf.wordWrap = true;
        tf.mouseWheelEnabled = true;
        tf.backgroundColor = 0x000000;
        tf.textColor = 0xff0000;
        tf.text = '==双击关闭/中轮滚屏==\n\n' + str.join('\n');            
        tf.addEventListener(MouseEvent.DOUBLE_CLICK, function(e:Event){
            _stage.removeChild(tf);
        });
        _stage.addChild(tf);
    }
}

/*
 * 配置
 */
internal class demoXmlHtml{
    public static function cfg():String {//演示配置
        var xml = '<?xml version=\"1.0\" encoding=\"utf-8\"?>'
                + '<tags swfBgColor=\"#9e9e9e\" colorBarA=\"#00ff00\" colorBarB=\"#0000ff\" rollForce=\"0.5\" swfBgColorTransparent=\"0\" debug=\"0\" >';
        var dot = '';
        
        for (var i = 0; i < 10; i++) {
            dot += '*';
            xml += '<a>' + dot + '</a>';
        }
        
        for (i = 0; i < 100; i++) {
            xml += '<a>' + i + '</a>';
        }
                
        return xml + '</tags>';
    }
    
    public static function xmlTip():void {
        stdOut.t (
                    '必须参数未设置,现在使用演示参数值如下\n'
                    + cfg() + '\n\n'
                    + '设置方式\n'
                    + 'flashVars="&xmlHtml=" + encodeURIComponent(xml值):使用flashVars方式传递,属性名是xmlHtml,它的值在传入swf前必须经过 encodeURIComponent;\n'
                    + 'xml值注意事项:\n'
                    + '设置初始swf的高宽影响显现是正圆还是椭圆\n'
                    + '拼写区分大小写,下面未提及属性无作用,提及的严格按照格式\n'
                    + '<a ...></a>标签之间可以随意编写flash支持的html代码;\n'
                    + '所有颜色必须使用#ffffff(css合法写法,会自动转化成0xffffff)六位这样完整格式\n'
                    + '书写严格xml格式,如正确写法<img />,错误写法<img>\n'
                    + '是否值使用0|1即可;\n'
                    + '|后是默认值\n'
                    + 'xml值格式如下\n'
                    + '<?xml version="1.0" encoding="utf-8"?>\n'
                    + '<tags swfBgColor="swf背景色|#ffffff" \n'
                    + ' colorBarA="未指定字色时,字色自动有规律取色,色条起点A|#000000" colorBarB="未指定字色时,字色自动有规律取色,色条结束点B.注意背景色不应该处于A/B色间,防止自动取色取到背景色|#ffffff" \n'
                    + ' swfBgColorTransparent="swf透明使用页面背景色,透明时设置swf的embed之类透明属性,这时swf用背景色|1" \n'
                    + ' rollForce="滚动球角度力量|1" \n'
                    + ' debug="显示调试信息|0">\n'
                    + '<a href="#开头,属于锚占,不能点击|http://或相对网址,可点击|javascript:js代码,swf回调|不设置此属性" target="设置为网址href时打开位置|_blank" \n'
                    + ' style="color:字色|无指定时色阶使用色阶;border-color:hover时字色|无指定时使用色阶;font-size:字体大小,磅|12pt;">随意flash支持html</a>\n'
                    + '<a ...>更多a...</a>\n'
                    + '</tags>\n');
    }
}




html


<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript" src="swfobject.js"></script>
<div id="tag3DCloud" style="width:400px;height:400px;">ddd</div>
<script type="text/javascript">
var xmlHtml = '<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<tags yRadius=\"0.6\" swfBgColor=\"#ffaaff\" swfBgColorTransparent=\"0\" randomPosition=\"1\" colorBarA=\"#ff0000\" colorBarB=\"#00ff00\" >\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>..........<\/a>\n<a>...<\/a>\n<a>....<\/a>\n<a>.....<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<a>.<\/a>\n<\/tags>';
var soname = new SWFObject("tagcloud.swf?r=" + new Date().getTime(), "tagcloudflash", '100%', '100%', 9);
soname.addVariable("xmlHtml", encodeURIComponent(xmlHtml));
soname.write("tag3DCloud");
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
服务器端利用 PHP插件 生成标签数据,页面用 flash 3D效果展示标签,效果很爽的,放在自己博客格外吸引眼球。 查看效果: http://www.roytanck.com/about-my-themes/donations/ 下面是详细: ------------------------------------------------------------ === Plugin Name === Contributors: weefselkweekje Donate link: http://www.roytanck.com/about-my-themes/donations/ Tags: tag cloud, flash, sphere, categories, widget Requires at least: 2.3 Tested up to: 2.6.3 Stable tag: 1.17 WP-Cumulus displays your tags and/or categories in 3D by placing them on a rotating sphere. == Description == WP-Cumulus allows you to display your site's tags, categories or both using a Flash movie that rotates them in 3D. It works just like a regular tags cloud, but is more visually exciting. Clicking the tags can be a little hard (depending on your speed setting) but does take you to the appropriate page :). The sources code for the Flash movie are available from wordpress.org. == Installation == = Installation = 1. Make sure you're running WordPress version 2.3 or better. It won't work with older versions. Really. 1. Download the zip file and extract the contents. 1. Upload the 'wp-cumulus' folder to your plugins directory (wp-content/plugins/). 1. Activate the plugin through the 'plugins' page in WP. 1. See 'Options->WP Cumulus' to adjust things like display size, etc... = In order to actually display the tag cloud, you have three options. = 1. Create a page or post and type [WP-CUMULUS] anywhere in the content. This 'tag' will be replaced by the flash movie when viewing the page. 1. Add the following code anywhere in your theme to display the cloud. `<?php wp_cumulus_insert(); ?>` This can be used to add WP Cumulus to your sidebar, although it may not actually be wide enough in many cases to keep the tags readable. 1. The plugin adds a widget, so you can place it on your sidebar through 'Design'->'Widgets'. The widget uses a separate set of settings, so it's possible to have different background colors, sizes, etc. == Frequently Asked Questions == = My theme/site appears not to like this plugin. It's not displaying correctly. = There are a number of things that may prevent WP-Cumulus from displaying or cause it to display a short message about how it needs the Flash plugin. * In 99% of all cases where this happens the issue is caused by markup errors in the page where the plugin is used. Please validate your blog using [validator.w3.org](http://validator.w3.org) and fix any errors you may encounter. * Older versions had issues with PHP 5.2 (or better). This has been fixed, so please upgrade to the latest version. * The plugin requires Flash Player 9 or better and javascript. Please make sure you have both. * There have been some cases where WordPress' Automatic Plugin Upgrade feature breaks the plugin. After upgrading the plugin the Flash movie would be corrupt for some users. If this happens to you, please try disabling and reinstalling the plugin (through FTP). = Hey, but what about SEO? = I'm not sure how beneficial tag clouds are when it comes to SEO, but just in case WP Cumulus outputs the regular tag cloud (and/or categories listing) for non-flash users. This means that search engines will see the same links. = I'd like to change something in the Flash movie, will you release the .fla? = As of version 1.12 the source code is available from wordpress.org under the GP license. Click "other versions" and get the developer version. = Some of my tags occasionally hit the sides of the movie and are cropped = If this happens you should change the aspect for the movie to make it wider. This can be done by increasing the width, but also by decreasing the height. Both will make the movie 'more landscape' giving long tags more room. = Some characters are not showing up = Because of the way Flash handles text, only Latin characters are supported in the current version. This is due to a limitation where in order to be able to animate text fields smoothly the glyphs need to be embedded in the movie. The Flash movie's source code is available for download through Subversion. Doing so will allow you to create a version for your language. There's a text field in the root of the movie that you can use to embed more characters. If you change to another font, you'll need to edit the Tag class as well. More info [here](http://www.roytanck.com/2008/08/04/how-to-add-more-characters-to-wp-cumulus/). = When I click on tags, nothing happens. = This is usually caused by a Flash security feature that affects movies served from another domain as the surrounding page. If your blog is http://yourblog.com, but you have http://www.yourblog.com listed as the 'WordPress address' under Settings -> General this issue can occur. In this case you should adjust this setting to match your blog's actual URL. If you haven't already, I recommend you decide on a single URL for your blog and redirect visitors using other options. This will increase your search engine ranking and in the process help solve this issue :). = I'm not using WordPress... = * Steve Springett has ported this to Movable Type. More info over on [his site](http://www.6000rpms.com/blog/2008/04/04/flash-tag-cloud-for-mt-4.html). * Michael Robinson has ported WP-Cumulus to RapidWeaver, see his tutorial [here](http://pagesofinterest.net/mikes/blog_of_interest_files/tag_cloud.php). * Amanda Fazani managed to get Cumulus working on Blogger. More info on Blogumus [here](http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cloud-for.html). * Yannick Lejeune has done a [TypePad version](http://www.yannicklejeune.com/2008/09/tumulus-wp-cumu.html) based in part on Steve's work. * Christian Philipp's created a [TYPO3 version](http://typo3.org/extensions/repository/view/t3m_cumulus_tagcloud/current/). * Rob Antonishen did a [Serendipity version](http://spartacus.s9y.org/index.php?mode=bygroups_event_en) (search for serendipity\_event\_freetag). * Big Bear maintains the [Joomla version](http://joomlabear.com/Downloads/). * Pratul Kalia and Bj鰎n Jacob have ported it to [Drupal](http://drupal.org/project/cumulus). * Ryan Tomlinson has a [BlogEngine.NET version](http://www.99atoms.com/post/BlogCumulusNET-A-flash-based-tag-cloud.aspx). * I wrote [this post](http://www.roytanck.com/2008/05/19/how-to-repurpose-my-tag-cloud-flash-movie/) on how to use the flash movie in other contexts. == Screenshots == 1. The tag sphere. You can set colors that match your theme on the plugin's options page. 2. The options panel. 3. There's a separate one for the widget. == Options == The options page allows you to change the Flash movie's dimensions, change the text color as well as the background. = Width of the Flash tag cloud = The movie will scale itself to fit inside whatever dimensions you decide to give it. If you make it really small, chances are people will not be able to read less-used tags that are further away. Anything up from 300 will work fine in most cases. = Height of the Flash tag cloud = Ideally, the height should be something like 3/4 of the width. This will make the rotating cloud fit nicely, while the extra width allows for the tags to be displayed without cropping. Western text is horizontal by nature, which is why the ideal aspect is slightly landscape even though the cloud is circular. = Color of the tags = Type the hexadecimal color value you'd like to use for the tags, but not the '#' that usually precedes those in HTML. Black (000000) will obviously work well with light backgrounds, white (ffffff) is recommended for use on dark backgrounds. Optionally, you can use the second input box to specify a different color. When two colors are available, each tag's color will be from a gradient between the two. This allows you to create a multi-colored tag cloud. = Background color = The hex value for the background color you'd like to use. This options has no effect when 'Use transparent mode' is selected. = Use transparent mode = Turn on/off background transparency. Enabling this might cause issues with some (mostly older) browsers. Under Linux, transparency doesn't work in at all due to a known limitation in the Flash player. = Rotation speed = Allows you to change the speed of the sphere. Options between 25 and 500 work best. = Distribute tags evenly on sphere = When enabled, the movie will attempt to distribute the tags evenly over the surface of the sphere. = Display = Choose whether to show tags only, categories only, or both mixed together. Choosing 'both' can result in 'duplicate tags' if you have categories and tags with the same name. These words will appear twice, with one linking to the tag and the other to the category overview. = wp tag cloud parameters = This setting allows you to pass parameters to the wp\_tag\_cloud function, which is used to fetch the tag cloud. Use caution with this setting. Everything you enter will be passed to the function. Be sure to read the function's manual. Please also note that these parameters affect tags only. If you've chosen to show categories or both, the category 'tags' will not be affected. == Version history == = Version 1.16 = + Fixes an issue with categories being rendered black when all of them have the same number of posts. + Reduces the default font size (from the biggest possible to "medium") in that same situation. + Significantly reduces CPU load when the cloud isn't moving. = Version 1.15 = + Adds the possibility to create a multi-colored tag cloud by entering a second tag color. = Version 1.14 = + Fixes an issue where no tags are displayed when viewing the movie locally in MSIE. + Fixes an issue where one random tag would not be displayed. = Version 1.13 = + No longer breaks when the wp-content folder is moved to a non-standard location. = Version 1.12 = + First version hosted on WordPress.org, and released under GPL license. + Uses the Arial font to avoid font licensing issues. = Version 1.11 = + Restores an earlier fix for IE to force loading of the Flash movie. = Version 1.1 = + Complete rewrite of the Flash movie (Actionscript 3, requires Flash Player 9 or better). + Better mouse detection. + Adds option to distribute the tags evenly over the sphere. + Adds support for categories. + Adds the ability to pass parameters to the WordPress wp_tag_cloud function. + Several smaller enhancements. = Version 1.05 = * Fixes several issues with IE, including an issue where it was impossible to use the regular version and the widget on the same page. Thanks to Fadi for alerting me to these. = Version 1.04 = * Fixes the 'it kills my blog' error for people using PHP 5.2 or newer. Thanks to Mujahid for helping me debug this. * Speed improvements in the Flash code. = Version 1.03 = * Removes the wp_head hook in yet another attempt to fix issues with some other plugins and themes. * Reduces system overhead by storing less options. * Adds setting for speed. * Adds a widget with seperate options (size, colors, speeds, etc). * Attemps to detect when the mouse leaves the movie, reducing the 'spinning, but not out of control' effect. * Several minor fixes. = Version 1.02 = * Fixes issues with sites not loading after activation, reduces server load and fixes lost spaces in tags. Thanks to Dimitry for helping me debug these issues. = Version 1.01 = * Fixes an issue where the cloud would spin out of control when the browsers loses focus on OSX. = Version 1.00 = * Initial release version. ------------------------------------------------------------
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值