3D-1


    標籤雲的標籤分類可以讓讀者很輕易的了解網站主要內容的彙集,經過語法的表現讓主要的彙集標籤『視覺化』的呈現給讀者。
    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』。

3D-2

 

(2.) WP Cumulus flash 內嵌字體

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

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

3D-3-內嵌字體-1

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

3D-3-內嵌字體-2


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

3D-3-內嵌字體-3

    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

3D-4-中文化-1

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

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

3D-4-中文化-tagas-1

import com.roytanck.wpcumulus.UrlUTF8Encoder;

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

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

3D-4-中文化-tagas-2

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

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

3D-4-中文化-tagas-3

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/)

3D-5-swfupload-1

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

3D-5-swfupload-2

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

3D-5-swfupload-3

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

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

3D-5-swfupload-4

    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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

最後將語法內的 http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf 改成自己的swf位址 http://www.swfcabin.com/swf-files/1271747088.swf 就完成了!

以上,大功告成!

 

 

Yoshinocat 發表在 痞客邦 PIXNET 留言(6) 人氣()


留言列表 (6)

發表留言
  • Anonymous
  • 因我只能找到CS5, 且是英文版,所以圖示跟你貼出來的都不太一樣. 我其實到步驟(2) 的 5) 最後在 tagcloud.fla 下點選 Ctrl + Enter 測試是否完成嵌入。(若正常寫入swf並執行就Ok)...都OK, 從(3)開始中文化的
    3) 選擇『檔案 > 開啟舊檔 > 選擇 tagcloud_as3.flp』 或者以拖曳的方式打開 tagcloud_as3.flp。
    4) 點選『將檔案增加至專案』圖示,新增 UrlUTF8Encoder.as 。

    這裡不知怎麼存檔. 因我是CS5, 跟你圖不一樣,而我也無法開啟"tagcloud_as3.flp '檔案.

    之後的步驟我也都知道,就是不知3)4)

    ....你知道哪裡還找得到CS3 download?

    小婷
  • 朱雀
  • Dear Joey,

    一早醒來( 已日上三竿了,昨天週末太晚稅了 :), 開機後第一件事點你的bookmark...一看怎跟原來文長得不太一樣??? 太感動了...真是謝謝你.寫完這,我馬上來study...

    小婷
  • JoeyCat
  • to 小婷: 我把解說的圖上傳了(拖了好久..才上傳)
    希望看得懂..
  • Anonymous
  • 我用CS5,所以下面這2個步驟看不懂, 不知怎麼加一起,你可以教一下嗎?

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

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

    小婷
  • Lwlve
  • 有点复杂啊。。
  • woo
  • 這篇文章真是有用心,我之前找蠻久的,不曉得是不是英文關鍵字設定有問題,一直沒找到相關教學文章,效果還真不錯,只是沒想到步驟會這麼繁雜,有時間也來試試看,感謝您的好物唷~

    順便一提,我是用關鍵字"blogger 編輯網頁的rss"意外搜尋到這篇的...- -",而且排第三!!!!

    結果還是沒找到blooger新增的獨立網頁為什麼沒有在rss feed裡面....
【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消