Chase Down My Dream

Life, Dream

  • Home
  • About
  • Sample Page
Twitter Facebook Sina RSS
Tag Archives: Flash

Micolog Tag Cloud Flash版

Posted on August 31, 2009 by stingrey
12 Comments

lux_time

白天偶然翻网页的时候看见Tag Cloud的浮云版本,Flash做成的3D效果,感觉比较好玩(莫非我口味太重了)。上网找了找,发现这个最早是Roy Tanck为WordPress开发的插件,既然是flash的,那么感觉google app engine能扛住,于是就开始yy如何移植到Micolog上。本人对flash一窍不通,只能面对Roy的文档和提示慢慢折腾。幸好网上也有很多关于将这个插件移植到其他博客系统的文章,于是边学边干,一个小时就直接上货了。目前已经改好了中文Tag的显示问题。目前对Tag的更新还有点问题(现在用的是比较邪恶的方法),页面格式也还有待调整。

在侧边栏的显示效果大致就是这样的:

Capture1

Micolog添加Tag Cumulus的大致的方法(这里只是提供比较偷懒的方法,但是效果是一样的):

先去WP-Cumulus上下载Roy做的插件,其实我们只是要其中的flash源代码,所以最好是下载Development Version。

接着开始偷懒的方法,写一个tagcloud.xml文件,格式大致是这样的:

# 添上相应的tag和链接,这里就是偷懒的地方,最终flash就是从这个xml读取tag并显示的。# 好处是不用改太多代码,这样比较方便,坏处是有新的tag的话就要重新修改xml# 但是如果新tag还有中文,那么就可能要重新生成一遍flash了,原因在后面步骤<a style="font-size: 13pt;" title="3 topics" href="../tag/Linux">Linux</a><a style="font-size: 13pt;" title="4 topics" href="../tag/Micolog">Micolog</a>

关键部分,因为Roy原本的cumulus不支持中文,那么我们就要将自己的tag中的中文嵌入到flash中:

参看:3D标签云移植,以及中文版标签云 大致做法就是将前面下载的flash源文件做修改,嵌入自己博客中文tag相关的字体就可以了,这样就有个弊端,就是每次有新的中文tag的话就又可能要重新生成一遍flash。生成flash文件大小最好控制在40K左右,否则页面加载还是很累的。

接着将生成好的tagcloud.swf,tagcloud.xml,swfobject.js三个文件放在tagcloud文件夹中,然后放在micolog文件夹中的static目录中(只要这三个文件就够了,但是也已经很大了。放在micolog下哪里也无所谓)

之后在相应主题文件中修改sidebar.html,注释掉原来的tag输出,在相应位置嵌入flash:

<h2>Tags</h2>

# 按照这样注释掉tag输出就可以	{% comment %}	{% if tags %}	{% for t in tags %}	<!--a title="{{ t.tagcount }} pages" href="/tag/{{t.tag|urlencode}}"              style="font-size:{{ t.tagcount|tagsize }}pt;">{{t.tag}}</a-->        {% endfor %}	{% endif %}	{% endcomment %}

# 在这里添加flash显示,宽度和高度根据主题调整,tspeed是用来调整tag切换速度的,参数参见WP-Cumulus <script type="text/javascript"    src="http://xxxxxx.appspot.com/static/tagcloud/swfobject.js"></script><embed tplayername="SWF" splayername="SWF" type="application/x-shockwave-flash"              src="http://xxxxxx.appspot.com/static/tagcloud/tagcloud.swf?r=8269298"              mediawrapchecked="true" pluginspage="http://www.macromedia.com/go/getflashplayer"              id="tagcloudflash" name="tagcloudflash" bgcolor="#ffffff" quality="high"              wmode="transparent" allowscriptaccess="always"              flashvars="tcolor=0xffffff&tcolor2=0x999999&hicolor=0xffffff&tspeed=100&distr=true"              width="180" height="210"></embed>

到这里就完成了,非常偷懒的方法。

有一种jQuery方法实现起来相当简单,当然也就要稍微朴素一点……

Categories: Micolog | Tags: Flash, Tag Cloud
  • Recent Posts

    • 一年了,我回来了
    • Un Senso Di Te
    • 好雨时节
    • 虎年来在追昔时
    • 无题
  • Recent Comments

    • hzqtc on 一年了,我回来了
    • aaahexing on Un Senso Di Te
    • RainFlying on 好雨时节
    • Stingrey on 秦时明月,侠骨柔情
    • hzqtc on 被拒了~
  • Archives

    • November 2011
    • June 2010
    • April 2010
    • February 2010
    • December 2009
    • November 2009
    • October 2009
    • September 2009
    • August 2009
    • July 2009
    • June 2009
    • May 2009
    • March 2009
    • February 2009
    • January 2009
    • December 2008
    • November 2008
    • October 2008
    • September 2008
    • July 2008
  • Categories

    • C#
    • Google App Engine
    • Hello Program
    • Linux
    • Linux and Windows
    • Micolog
    • Misc
    • Mojo
    • Music and Movie
    • Windows
    • 另一个自己
    • 玩意儿
    • 生活
  • Meta

    • Log in
    • Entries RSS
    • Comments RSS
    • WordPress.org
© Chase Down My Dream. Proudly Powered by WordPress | Nest Theme by YChong