[教學]如何利用Flash在blog部落格裡展示多張圖片.

今天中華隊終於狠咬了澳洲三口, 一吐連日的怨氣.
我就Po個使用教學來慶祝吧!
首先, 請下載以下檔案:
SWF檔案- Click here!
FLA檔案 – Click here!
SWF檔是一定要的, 而FLA則見仁見智, 想修改的更好的, 就可以拿回去修改看看.
這次我做的圖片顯示器好處在於每次只要依規則上傳好圖片,
再修改文章原始碼中的幾個參數, 顯示器就能夠每次都照指示去讀取圖片. 你每次只需要上傳圖片就好, 就可以共用同一個SWF來呈現你的複數圖片. 而不需要每次都去製作一個Flash來展示圖片. 用Flash的原因在於它的高佔有率, 易於設計, 而且互動性佳.
詳細的使用方法請點以下看完整內容.


<第一步: 上傳圖片顯示器到blog部落格主機>
下載完了SWF檔之後, 請把他上傳到你的blog部落格 FTP裡面. 放在根目錄下.
<第二步: 新增以日期為名的資料夾以存放圖片>
你可以蒐集整理好你今天拍的相片, 都放到同一個資料夾裡面以後, 把資料夾命名為 yyyy_mm_dd 的格式, 例如今天就是2004_08_16.
<第三步: 更改每一張圖片的檔名>
把圖片更改檔名, 依照你想要給訪客觀看的順序, 把檔名改成yyyy_mm_dd_n , n就是第幾張圖片, 那麼圖片檔名就會是2004_08_16_1, 2004_08_16_2 … 以此類推.
注意, 圖片請使用.jpg檔案, 大小640×480. 這樣的圖片大小與30萬畫素的手機拍出來的大小一樣, 因此許多使用手機拍出來的照片就可以不需要修改, 直接使用. (像我是用Nokia的6600) . 這也是我做這個顯示器最大的目的.
<第四步: 把圖片資料夾上傳到blog部落格主機的兩個地方>
把圖片資料夾 (例如2004_08_16) 整個傳到你的blog部落格根目錄下.
注意, 不僅要放在根目錄下, 也請上傳一份到你的"單篇文章彙整 “的目錄下 (像我用的是MT, 裡面就會有一個archives資料夾) . 也就是你必須存放在兩個地方.
在這裡解釋一下為何圖片要存在兩個地方, 因為blog部落格本身設計的限制, 首頁顯示的文章內容, 與單篇顯示的文章內容的目錄位置不同, 為了能夠避免掉因不同的人而需要更改FLA裡面的原始碼, 因此在Coding時就採用相對路徑. 這樣一來, 如果圖片沒有在 “單篇文章彙整 “的目錄下多存一份的話, 使用者以單篇文章瀏覽時, 該路徑就會找不到圖片.
幸好, 640×480的圖片檔案不大, 這是blog部落格本身設計的問題, 目前沒有想到解決的辦法. (當然, 除非你自己進入FLA做絕對路徑的設定) .
<第五步: 把HTML碼Post到新增文章中>
經過以上四個步驟, 你已經做完全部的準備動作. 接下來你只需要依照以下格式Post你的新聞章到blog部落格即可.
複製以下原始碼:


把你複製的原始碼貼到你的新增文章欄位裡, 然後請把裡面多餘的/br/以及/p/的換行標記清除.
<第六步: 更改元件原始碼中的參數>
將原始碼貼到你的新增文章欄位以後, 請找到 value="http://blog.dab.idv.tw/dab/dab/load_images_v3.swf?picnum=6….
這一行, 接下來請依照需求更改其中的幾個變數:
http://blog.dab.idv.tw/dab/dab/load_images_v3.swf
改成→
http://你的根目錄位址/load_images_v3.swf
p.s.共有兩個地方要改位址喔!
picnum=6改成→picnum=你這次要放的圖片張數
year=2004改成→year=圖片資料夾名稱中的年份
month=08改成→month=圖片資料夾名稱中的月份
day=03改成→day=圖片資料夾名稱中的日期
info1=非常可愛.改成→info1=第一張圖片的描述
info2=xxxxxxxxx.改成→info2=第二張圖片的描述
以此類推 有幾張圖片就info+幾.
在[/object]標記結束的後面, 你就可以增加其他的文字內容.
<後記>
原則上, 以更改原始碼做為編輯方式會有些麻煩, 但是這只是很粗淺的嚐試性成果, 初步解決了在blog部落格裡, 單篇文章欲post多張圖片的問題, 用了圖片顯示器, 可以再同一個瀏覽空間裡面, 顯示多張圖片, 而不會影響到版面. Flash的些許互動效果也增添了幾分質感, 而不影響blog部落格原有的簡潔特性.
圖片上傳如果使用FTP軟體的話, 就更是方便了.
雖然使用教學看起來有點眼花撩亂, 不過只要你成功建立第一篇文章以後, 往後處理起來就非常快了.
像我目前Post一篇使用圖片顯示器的文章, 我只需要先依規則整理好一個資料夾的圖片→上傳到blog部落格主機→找一篇之前貼的文章, 複製原始碼, 貼到新增文章欄位→改動變數以符合新聞章, 一共大約5~10分鐘, 我就可以很快的把我手機上照的照片, post到blog部落格裡和大家分享.
但是依然有許多地方未盡完善, 例如圖片Loading時不會顯示Loading中, 沒有縮圖模式等等…
不過以我目前的閒暇時間, 有這些基本的功能, 也就足夠使用了.
若有什麼建議的話, 歡迎留下迴響囉!

5 comments

留言回覆: