Blogger 3D標籤雲

2010年4月25日 星期日 張貼者： 夢無痕
     前幾天Java看累了，就到處看看網誌看有什麼新奇的小工具可以安裝在自己的網誌上讓自己的網誌更炫。逛著逛著在黃河水的網誌中看得好一個超炫的工具，那就是3D 標籤雲(如右側)原名是WP Cumulus，由Flash + Actionscript寫成，原理就是把標籤雲套用在球狀的Flash裡面，可藉由球體的轉動選則你所想要看的網誌類別。

      剛開始接觸時一直反覆的看著 Mr. Fu大哥那篇網誌 ，我照著說明做可是就是一直沒有實現3D標籤雲的效果。看完感覺內容寫得很跳Tone，我想 Mr. Fu大哥大概把會去觀看他網站的參觀者都當成網頁程電腦高手或著Hack吧!省略了蠻多步驟的。因此我為了造福讓來我網誌參觀人們，現在我就來一步一步的慢慢介紹給有此福氣你。
     首先先準備ADOBE CS3 (據我所知CS4好像不行，或者我不會用) 因為此套件原本是英文版如要顯示中文，需要編碼成中文，因此透過CS3的專案管理來新增編碼腳本...(此處可以下載)
  1. 接下來製作專屬的flash
    製作前請先到官網下載原始碼，打開tagcloud.fla檔，左上角會有"Tag"點選之後，下方會出現"內嵌字體"按鈕。點選"內嵌字體"。把所有的選項全部消除，不然製做出來的swf檔會夭壽大(說不定別人看完你的網誌都還沒顯示出來喔)。

  2. 因此我們只要把我們的標簽內容全不輸入即可，像我會用到這些文字因此我只要在框內輸入
    [ Windows Linux1234567890證照哩哩扣扣程式JavaMicorsoft旅遊生活點滴電腦軟體xpBloggerCCNA國際心情寫照資訊敗家產品故事分享書籍語言嘴砲空間 ]。
    案下Ctrl+Enter如有出現字即可代表現階段成功。
  3. 接下來是讓我們的3d標籤雲具有中文編碼的功能，請在Flash編輯器裡開啟tagcloud_as3.flp檔，然後把剛剛下載的UrlUTF8Encoder.as加的專案裡，把中文編碼的檔案存放在com\roytanck\wpcumulus裡，也就是跟Tag.as放一起。
  4. 接著編輯Tag.as檔內的程式碼有三個地方需要做修改
    第一新增以下這一行


    import com.roytanck.wpcumulus.UrlUTF8Encoder;
    第二 搜尋 format.font = "Arial";用來更改在Client端呈現的字體(Clien需要也有此字體檔)


    var format:TextFormat = new TextFormat();
format.font = "微軟正黑體";
format.bold = true;
    第三 搜尋 private function mouseUpHandler( e:MouseEvent ):void將 .. :void{} 括號內的函式取代為:


    code: var request:URLRequest = new URLRequest(UrlUTF8Encoder.urlencodeUTF8(_node["@href"]) ); navigateToURL(request,"_self");
  5. 將Tag.a存檔然後把Flah在匯出一次(Ctrl + Enter)成 tagcloud.swf，當你打開swf檔時，會完全沒字，這是正常情況不用擔心。
  6. 接著上傳 tagcloud.swf 檔案製網頁空間，到google收尋一下就很多，個人推薦google協作平台。
  7. 最後一步驟將下列程式碼貼在你的網誌範本裡
    紅色部分修改你swf檔的網路途徑
    綠色部分分別為寬和高(可自行調整)
    紫色部分為背景顏色


    <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(&amp;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>
  8. 最後的最後恭喜囉!!!!

歡迎分享


標籤：
  1. christine
    2010年10月2日 清晨7:39

    CS5 可以嗎? 我下載不到CS3了

張貼留言

訂閱： 張貼留言 (Atom)