【部落格】語法筆記。3D標籤雲製作(Blogger) @ 吉野貓

標籤雲的標籤分類可以讓讀者很輕易的了解網站主要內容的彙集，經過語法的表現讓主要的彙集標籤『視覺化』的呈現給讀者。
3D標籤雲就是充分發揮視覺化的標籤工具。Blogger內建的標籤(LABEL)已經有『雲端』這個選項，而且可以選擇性的讓標籤隱藏或顯現，功能已經達到我的要求了，但是架構稍嫌陽春。因此為了找到更多元的標籤雲形式，讓我在網海漂了許久。

網路上有很多標籤雲的形式，3D標籤雲特別合我的胃口。3D標籤雲製作方法的介紹文章主要有解渴雜記的3D標籤雲以及黃河水的超炫的3D標籤雲(WP Cumulus)一步一步教你中文化移植到Blogger上，只是作者似乎都寫得有點難懂(可能我比較笨)，步驟幾乎都是跳躍式的講解。為了完成3D標籤雲，我想我大概花了一天的研究，才把他們的內容搞懂。

3D標籤雲原名 WP Cumulus，原本是WP(WordPress)空間的Plug-in(外掛)，必須經過一些更改才能使用在Blogger上。其中包含了:

1. 前置作業

2. WP Cumulus flash 內嵌字體

3. WP Cumulus flash 中文化

4. 上傳 .swf檔案

5. Blogger 加入程式碼

循著以下內容就可以在Blogger上建立標籤雲。　

(1.) 前置作業

1) Blogger帳號: Blogger: Create your free blog

2) 必備軟體：Adobe Flash CS3 (或其他版本)。 Adobe Flash CS3 下載 (Search by Google)，請到 Adobe 官方網站下載試用版或購買軟體。

3) 下載WP Cumulus flash 原始檔，下載WP-Cumulus，連結過去請點選『Other versions』下的『Development Version』。

(2.) WP Cumulus flash 內嵌字體

1) 將下載下來的檔案解壓縮後，將 \wp-cumulus\wp-cumulus\flash sources\tagcloud.fla 以 Adobe Flash Cs3 開啟檔案。

2) 點選"Tag"之後，下方會出現"內嵌字體"按鈕。點選"內嵌字體"。

3) 先選擇"不要嵌入"取消字體選擇(為了減少最後swf檔案大小)，再將自己所有的分類標籤文字輸入。然後"確定"。

4) 然後選擇"動態文字"，選擇自己喜愛的字體。(推薦微軟正黑體)

5) 最後在 tagcloud.fla 下點選 Ctrl + Enter 測試是否完成嵌入。(若正常寫入swf並執行就Ok)

(3.) WP Cumulus flash 中文化

1) 下載寫好的檔案，UrlUTF8Encoder.as (空間為微軟的SkyDrive)

2) 將 UrlUTF8Encoder.as 放在 ..\wp-cumulus\wp-cumulus\flash sources\com\roytanck\wpcumulus 的資料夾下

3) 選擇『檔案 > 開啟舊檔 > 選擇 tagcloud_as3.flp』或者以拖曳的方式打開 tagcloud_as3.flp。

4) 點選『將檔案增加至專案』圖示，新增 UrlUTF8Encoder.as 。

5) 修改 Tag.as 的三個地方: 開啟 ..\wp-cumulus\wp-cumulus\flash sources\com\roytanck\wpcumulus\Tag.as

i) 第一個地方: 在AS檔最前面的增加一個 import

import com.roytanck.wpcumulus.UrlUTF8Encoder;

ii) 第二個地方: 搜尋 format.font = "Arial";

將 Arial 改成你想要的字形。原作者是使用微軟正黑體，效果還不錯。我也使用一樣的字體。

iii) 第三個地方: 搜尋 private function mouseUpHandler( e:MouseEvent ):void

將 .. :void{} 括號內的函式取代為:

var request:URLRequest = new URLRequest(UrlUTF8Encoder.urlencodeUTF8(_node["@href"]) ); navigateToURL(request,"_self");

6) 將檔案存檔後，把 tagcloud.fla 匯出(Ctrl + Enter)成 tagcloud.swf，flash的部份就完成了。

(4.) 上傳 tagcloud.swf 檔案

1) 如何上傳swf檔案空間? 以下有個國外不錯的空間，到 SwfCabin (http://www.swfcabin.com/)

2) 將 tagcloud.swf上傳之後，點擊『View Swf』

3) 在此網頁我們並看不到什麼東西，只有一片空白，但是不用怕，檔案還是存在的。點選『檢視(V)』> 『原始檔(C)』

4) 接著搜尋 var so = new SWFObject ，後面括號裡面的東西就是我們要的。

("../swf-files/1271747088.swf", "swf", "500", "500", "8", "");

5) 將 swf-files/1271747088.swf 接在 http://www.swfcabin.com/ 後面成 http://www.swfcabin.com/swf-files/1271747088.swf ，這個 swf 位址就是我們要的連結。

(5.) Blogger加入程式碼

1) 在版面配置 -> 修改HTML -> 展開小裝置範本下找到 <b:section class='sidebar' id='sidebar' preferred='yes'> (側邊欄位)，或者其他自己想要放置的位置。

2) 然後在後面置入以下語法:

<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://yfj750106.vndv.com/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>