3D標籤雲

搞了一整天，終於把這個說實在有點中看不中用的3D標籤雲Widget給掛了上去了，目前為止在Firefox3.5.1 和 IE8 之下是沒有瀏覽使用上的問題，至於IE7和IE6的話，別問我，因為我電腦裡頭並沒有那兩種瀏覽器... +o(

分享一下新增過程時的一些心得：

首先先到下面的網址中照著作者的步驟一步一步來。
資料來源：黃河水：超炫的3D標籤雲(WP Cumulus)一步一步教你中文化移植到Blogger上
先修課程先跳過，因為下頭的準備動作比較重要。

第一步要注意的是，請不要直接按Download下載請選擇下方的"Other Versions »"進入後點選最後一個"Development Version"版本，下載有附帶開發專案的版本。

第二個步驟作者說明的有點不太清楚，做法很簡單，就是進入Adobe Flash CS3之後選擇剛剛下載來的檔案內的"tagcloud.fla"檔案後

點選畫面中的"Tag"屬性框後在下方的屬性欄中把文字類型和字體分別選擇"動態文字"、你自己喜歡的字體，再來點選旁邊的"內嵌字體"


進入後把你Blog中所有標籤的名稱輸入進下方的"包括下列字元"內，填入方式像這樣：

Blogger版面FunTemplateWidgetsWordPress天馬行空小感觸小測試新玩意無名老文章照片分享看圖說故事記錄心情就文章導讀讀書心得軍旅生活這你也相信喔遊戲感想遊記防毒相關雜七雜八電影心得電腦大小事電腦軟體資訊

簡單說就是把你所有的標籤輸入進去就是了，請不要用程式提供的字元集，因為若用程式提供的字元集到時候完成的檔案會非常的肥大，不適合拿來上傳至網路上，而用此方法我所製作完成後的檔案只有24K的大小，輕巧多了。

最後按下"Ctrl + Enter"編譯出一個初步的tagcloud.swf，若跳出的展示視窗有出現文字的話就算成功了(只要有出現字就是成功了)

進入步驟三，把作者製作的AS檔案下載來後，要先把這檔案和此專案做整合，所以選擇『檔案>>開啟舊檔>>選擇tagcloud_as3.flp』

在跳出的視窗中點選下方的"將檔案增加至專案"

在點選剛剛下載來的轉碼檔案(UrlUTF8Encoder.as)，將其匯入專案中。

第四步，照著說明把該加的語法加到正確的地方就好，不過這裡有一點要注意：
import net.mr-fu.string.UrlUTF8Encoder這段CODE中的"net.mr-fu.string"為作者的UrlUTF8Encoder.as檔案儲存位子，必須修正成你自己的位置，像我是和Tag.as放在一起，路徑為com\roytanck\wpcumulus\所以要把上面的CODE修正成import com.roytanck.wpcumulus.UrlUTF8Encoder;另外在UrlUTF8Encoder.as檔案中的第一行也要做修正。

做這個修正是為了要讓程式能夠正確判斷標籤網址內的中文字，不會自動把中文轉換成unicode 編碼造成無法判讀的情況。

再來，按下"Ctrl + Enter"重新編譯tagcloud.swf，跳出的展示視窗中若有出現效果的話，那就是成功了，把編譯出來的tagcloud.swf檔案上傳到有支援.swf檔案類型外連的網路空間就好了。

最後照著這網站說明的步驟把該加入Blogger的程式碼加入就好了。
資料來源：Blogger Buster：Blogumus: a flash animated label cloud for Blogger!

最後再把程式碼中"var so = new SWFObject"的參數中的URL改成剛剛上傳的位置，不然是不會正確顯示的！

完成！收工！看結果！ :D

[2009.09.18新增]

因為換了佈景主題加上 Arno Ruan 大大的建議，於是乎我把原本的白色背景看黑色字體給換成了配合目前佈景主題背景的顏色，分享一下修改的方法。

先從簡單的下手，就是背景色和字體預設顏色，照著上面的資料來源中的後續說明，我將原本預設的程式：
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");紅色的部份就是背景顏色的色碼，把它修改為"#191919"(這色碼是我目前使用的佈景主題側邊欄位的背景顏色)。
so.addVariable("tcolor", "0x333333");紅色部分為字體的顏色，我把它換成"0xffffff"(這色碼是白色，就是目前看到3D標籤雲的顏色)。

再來是我自認為有點難度的修改滑鼠指標移到標籤上時會變色的特效，以下為我修改的過程：

首先執行Adobe Flash CS3後，開啟"TagCloud.as"檔案，找到第82行，會看到以下三行顯示為：
tcolor = ( this.loaderInfo.parameters.tcolor == null ) ? 0x333333 : Number(this.loaderInfo.parameters.tcolor);
tcolor2 = ( this.loaderInfo.parameters.tcolor2 == null ) ? 0x995500 : Number(this.loaderInfo.parameters.tcolor2);
hicolor = ( this.loaderInfo.parameters.hicolor == null ) ? 0x000000 : Number(this.loaderInfo.parameters.hicolor);接下來我把紅色標起來的地方改為"0xffffff"，然後從新編譯一次發現，滑鼠移過去之後字體顏色竟然就乖乖的換成了白色，就這樣誤打誤撞被我給修改過來了。 = ="

如果有其他更合理的修改方法就麻煩大家賜教了，謝謝各位！

<2009/10/20>
因為原作者的UrlUTF8Encoder.as檔案好像掛了
在這邊分享一下載點：

點我下載(空間為微軟的SkyDrive請放心下載)

延伸閱讀：