[Blogger Hacks # 09] Flash圖庫華麗登場!


嚴格來說跟BLOGGER HACK沒啥關係。
只是把最近發現的一個好東西給想辦法塞到BLOGGER框架裡而已,毫無技術性可言。(遮臉

好東西是這個網站「FLASH GALLERY.COM」所提供的「Gallery Builder」。只要電腦安裝Adobe Air(免費)就可以使用,非常美妙的一個Flash圖庫製作工具。目前我看到唯一的缺點就是不支援中文,介面不支援且文字輸出也不支援,算是美中不足吧。不過既然是圖庫就是以圖為主,所以文字方面不是那麼重要啦!

先把初步搞定的樸素小成品秀出來好了,
基本上可以像這樣--






在Gallery Builder這個程式裡面可以選擇圖庫的介面(範本可參考官網首頁),此外,所有大大小小的參數設定(非常多東西可以設定!)都是用這個程式親切的GUI也就是圖形介面直接完成!不需要牽涉任何語言programming或者coding的動作,這便是此工具最美妙之處了。並且雖說是flash,但是就算在iPhone介面上也一樣可以執行。

做法?
首先是開啟Gallery Builder,然後開始製作你的圖庫。完成之後儲存成一個project檔,然後把整個資料夾上傳到可以外連java的網頁空間(比方說Dropbox)。接著打開project中的index.html裡頭除了有完成的圖庫之demo之外,還有一段程式碼,將它複製後貼上至BLogger,即可!--才怪。

因為是Blogger而不是一般網頁,所以還要再做一些小動作才能幫助Blogger讀取圖庫。癥結點在於上述預設的程式碼並沒有指定圖片的精確位置,所以Blogger會找不到。首先要把程式碼裡面指定的三個js檔的完整路徑寫出來,拿我上面那個範本為例,原本是:

<script type="text/javascript" src="gallery/js/jquery.js"></script>
<script type="text/javascript" src="gallery/js/swfobject.js"></script>
<script type="text/javascript" src="gallery/js/flashgallery.js"></script>
<script type="text/javascript">
jQuery.flashgallery('gallery/gallery.swf', 'gallery/config.json', { width: '210px', height: '385px', background: 'transparent' });
</script>

現在三個js檔的路徑都要完整寫出來,例如第一個可能必須改成

<script src="http://dl.dropbox.com/u/210177/blogger/Project%20Mybooks/gallery/js/jquery.js" type="text/javascript">
</script>

以此類推。然後是後面兩個,swf與json(藍色部分),同樣要以完整路徑取代。這樣子就OK啦!--才怪。

由於圖片的路徑還是沒有精確指定,所以圖都會跑不出來。所以接下來的動作就是,以記事本開啟config.json檔,找出裡面關於所有圖片的預設路徑,全部以你上傳圖片的完整路徑取代之,然後存檔覆蓋。

好,總算大功告成。
基本上把這個工具放在內文的意義不大,所以目的是要把它整合到側邊欄位,那麼只要在後台新增一個html/javascript小工具,把上面的程式碼貼進去就可以了。

透過Gallery Builder的強大功能,可以輕易地替換圖庫面板--







當然因為現在圖還太少(對不起書出得很慢),不然就有更多華麗的介面可以擺出來了。
嗚,等到《悖理紅3》上市後在放到側邊好了。(小聲)

0 comment(s):

Post a Comment

回應文章前請注意下列三勿原則:

1)勿拍照;(→會有靈異的照片從你的相機裡跑出來...
2)勿餵食;(→會有飢渴的猛獸從我的網誌裡跑出來...
3)勿告白。(→會有奇怪的東西從站長體內裡跑出來...

謝謝大家的配合。
( > ー <)b