更改自levitated.net的FLASH TAGS CLOUD(2)

By19.Published on四月 22, 2010 16:56. 20 Views .
很差差一般好非常好 (暂时没有评分)
Loading ... Loading ...

继续上一篇,这个效果我觉得才是真正的有云的感觉(以下为上篇文章的原文引用):

续我上次以Levitated.net的源码为基础,修改并发表了一篇WP的TAGS墙~之后,这次又以其提供的开源小应用修改了两个FLASH的标签云。本来连改了好几个效果,不过最后就两个合适的。分两篇文章发布,分开发布原因是两个标签云放在一个页面性能上有问题……

Levitated.net上的源码离现在已经很多年了,时间虽然长,不过他提供的算法还是值得我们借鉴。此次提供的两个标签云都可以进行例如字体颜色及背景颜色的配置(通过参数),标签云FLASH的宽和高可以随意设置,生成的标签完全自适应显示。

这是另一个,有点黑客帝国代码滚动的感觉http://www.ll19.com/levitated-flash-tags-cloud1.html

FLASH通过读取XML进行标签显示,下面为XML的格式:

1
2
3
4
5
<?xml version="1.0" encoding="UTF-8"?>
<root>
	<tags><name>java</name><link>java</link></tags>
	<tags><name>as3</name><link>as3</link></tags>
</root>

XML地址通过传入xmlUrl参数的值设置,例如此FLASH传入的地址为(http://www.ll19.com/wp-content/plugins/19_tags_cloud/19tags.php),下面为具体的引用:

1
2
3
4
5
<object id="rssReader" type="application/x-shockwave-flash" data="http://www.ll19.com/wp-content/plugins/19_tags_cloud/textInSpace.swf" width="100%" height="100%">
	<param name="movie" value="http://www.ll19.com/wp-content/plugins/19_tags_cloud/textInSpace.swf" />
	<param name="wmode" value="transparent" />
	<param name="FlashVars" value="xmlUrl=http://www.ll19.com/wp-content/plugins/19_tags_cloud/19tags.php">
</object>

如果是WordPress顺便提供一个简单的WP TAGS XML生成程序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
include_once ('../../../wp-config.php');
global $wpdb;
$sql = "SELECT wtt.term_id as id,count,name,slug FROM $wpdb->term_taxonomy AS wtt , $wpdb->terms AS wt where wtt.term_id = wt.term_id and taxonomy = 'post_tag' ORDER BY count DESC LIMIT 0 , 100 ";
$content = $wpdb->get_results($sql);
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
echo "<root>";
global $tags_19;
foreach ($content as $tags_19)
	: echo "<tags>";
echo "<name>";
echo $tags_19->name;
echo "</name>";
echo "<link>";
echo $tags_19->slug;
echo "</link>";
echo "</tags>";
endforeach;
echo "</root>";

点击了标签后会跳转到相关链接,这里跳转链接的操作不是从FLASH中直接打开,而是通过调用页面的JS函数(tagsCall)来打开相关页面,即点击了tags节点中的name标签会传回link的值供JS(tagsCall)调用。下面是JS例子:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function tagsCall(tagLink) {
	var url = "http://www.ll19.com/tag/" + tagLink;
	win = window.open(url, "_blank");
	if (!win) {
		window.open(url, "_self");
	}
}
</script>

这样做就是为了不要搞的只是打开链接那么死板,也许有别的事情可做,所以你在使用过程中只要按照XML的格式生成TAGS的节点后将这个地址以xmlUrl传入FLASH,再写一个tagsCall的JS函数进行相关操作就OK了。

此标签云一些其他的相关配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//XML
public static var xmlUrl : String = "../../xml/tag.xml";
 
//影片质量
public static var quality : String = "low";
 
//是否显示FPS
public static var fps : Boolean = false; 
 
//主背景颜色
public static var backgroundColor : uint = 0x000000;
 
//FPS的颜色和字体
public static var fpsTextColor : uint = 0xFFFFFF;
public static var fpsTextFace : String = "Georgia";
 
//字体
public static var textFace : String = "Georgia";
public static var textSize : Number = 16;
public static var textColor : uint = 0xFFFFFF;
 
//模糊效果抗锯齿的配置 不过性能有很大影响
public static var filter : Boolean = false;
public static var blurFilterX : Number = 2;
public static var blurFilterY : Number = 2;
public static var blurFilterQ : Number = 1;
 
//是否显示鼠标移动上去的发光效果
public static var move : Boolean = false;
 
//移动用的参数(建议默认不要更改)
public static var fl : Number = 1000;
public static var xx : Number = 0;
public static var yy : Number = 0;
public static var zz : Number = 500;
public static var dx : Number = 0;
public static var dy : Number = 0;
public static var dz : Number = -500;

可以通过传入与静态变量名相同的参数值来配置标签云的显示或运行效果,例如-这是一个配置了不同背景及字体颜色的效果(如下传入了backgroundColor和textColor的值),具体的不同颜色的演示效果http://www.ll19.com/up/19_tags_cloud/textInSpace.html

1
<param name="FlashVars" value="xmlUrl=http://www.ll19.com/wp-content/plugins/19_tags_cloud/19tags.php&backgroundColor=0xffffff&textColor=0x000000">

源码下载地址:

http://code.google.com/p/glll/downloads/detail?name=19_tags_cloud.7z

{ 5 comments } { Tags: , , }

更改自levitated.net的FLASH TAGS CLOUD(1)

By19.Published on四月 22, 2010 16:30. 14 Views .
很差差一般好非常好 (1 次评分, 平均: 4.00 out of 5)
Loading ... Loading ...

续我上次以Levitated.net的源码为基础,修改并发表了一篇WP的TAGS墙~之后,这次又以其提供的开源小应用修改了两个FLASH的标签云。本来连改了好几个效果,不过最后就两个合适的。分两篇文章发布,分开发布原因是两个标签云放在一个页面性能上有问题……

Levitated.net上的源码离现在已经很多年了,时间虽然长,不过他提供的算法还是值得我们借鉴。此次提供的两个标签云都可以进行例如字体颜色及背景颜色的配置(通过参数),标签云FLASH的宽和高可以随意设置,生成的标签完全自适应显示。

另一个效果,这个效果我觉得才是真正的有云的感觉http://www.ll19.com/levitated-flash-tags-cloud.html

FLASH通过读取XML进行标签显示,下面为XML的格式:

1
2
3
4
5
< ?xml version="1.0" encoding="UTF-8"?>
<root>
	<tags><name>java</name><link>java</link></tags>
	<tags><name>as3</name><link>as3</link></tags>
</root>

XML地址通过传入xmlUrl参数的值设置,例如此FLASH传入的地址为(http://www.ll19.com/wp-content/plugins/19_tags_cloud/19tags.php),下面为具体的引用:

1
2
3
4
5
<object id="rssReader" type="application/x-shockwave-flash" data="http://www.ll19.com/wp-content/plugins/19_tags_cloud/dropinletters.swf" width="100%" height="100%">
	<param name="movie" value="http://www.ll19.com/wp-content/plugins/19_tags_cloud/dropinletters.swf" />
	<param name="wmode" value="transparent" />
	<param name="FlashVars" value="xmlUrl=http://www.ll19.com/wp-content/plugins/19_tags_cloud/19tags.php">
</param></object>

如果是WordPress顺便提供一个简单的WP TAGS XML生成程序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
include_once ('../../../wp-config.php');
global $wpdb;
$sql = "SELECT wtt.term_id as id,count,name,slug FROM $wpdb->term_taxonomy AS wtt , $wpdb->terms AS wt where wtt.term_id = wt.term_id and taxonomy = 'post_tag' ORDER BY count DESC LIMIT 0 , 100 ";
$content = $wpdb->get_results($sql);
echo "< ?xml version=\"1.0\" encoding=\"UTF-8\"?>";
echo "<root>";
global $tags_19;
foreach ($content as $tags_19)
	: echo "<tags>";
echo "<name>";
echo $tags_19->name;
echo "</name>";
echo "<link>";
echo $tags_19->slug;
echo "</link>";
echo "</tags>";
endforeach;
echo "</root>";

点击了标签后会跳转到相关链接,这里跳转链接的操作不是从FLASH中直接打开,而是通过调用页面的JS函数(tagsCall)来打开相关页面,即点击了tags节点中的name标签会传回link的值供JS(tagsCall)调用。下面是JS例子:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function tagsCall(tagLink) {
	var url = "http://www.ll19.com/tag/" + tagLink;
	win = window.open(url, "_blank");
	if (!win) {
		window.open(url, "_self");
	}
}
</script>

这样做就是为了不要搞的只是打开链接那么死板,也许有别的事情可做,所以你在使用过程中只要按照XML的格式生成TAGS的节点后将这个地址以xmlUrl传入FLASH,再写一个tagsCall的JS函数进行相关操作就OK了。

此标签云一些其他的相关配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//XML
public static var xmlUrl : String = "../../xml/tag.xml";
 
//影片质量
public static var quality : String = "low";
 
//是否显示FPS
public static var fps : Boolean = false; 
 
//主背景颜色
public static var backgroundColor : uint = 0x000000;
 
//FPS的颜色和字体
public static var fpsTextColor : uint = 0xFFFFFF;
public static var fpsTextFace : String = "Georgia";
 
//字体
public static var textFace : String = "黑体";
public static var textSize : Number = 20;
public static var textColor : uint = 0xFFFFFF;
public static var textShadowColor : uint = 0xEEEEEE;
 
//字符间距
public static var letterSpacing : Number = 20;
 
//定时器时间
public static var intervalDuration : Number = 800;

可以通过传入与静态变量名相同的参数值来配置标签云的显示或运行效果,例如-这是一个配置了不同背景及字体颜色的效果(如下传入了backgroundColor和textColor的值),具体的不同颜色的演示效果http://www.ll19.com/up/19_tags_cloud/dropinletters.html

1
2
<param name="FlashVars" value="xmlUrl=http://www.ll19.com/wp-content/plugins/19_tags_cloud/19tags.php&backgroundColor=0xffffff&textColor=0x000000">
</param>

源码下载地址:

http://code.google.com/p/glll/downloads/detail?name=19_tags_cloud.7z

具体效果如下:

继续阅读…Continue reading…

{ 0 comments } { Tags: , , }