August 16, 2004

[教學]如何利用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檔案, 大小640x480. 這樣的圖片大小與30萬畫素的手機拍出來的大小一樣, 因此許多使用手機拍出來的照片就可以不需要修改, 直接使用. (像我是用Nokia的6600) . 這也是我做這個顯示器最大的目的.

<第四步: 把圖片資料夾上傳到blog部落格主機的兩個地方>
把圖片資料夾 (例如2004_08_16) 整個傳到你的blog部落格根目錄下.
注意, 不僅要放在根目錄下, 也請上傳一份到你的"單篇文章彙整 "的目錄下 (像我用的是MT, 裡面就會有一個archives資料夾) . 也就是你必須存放在兩個地方.
在這裡解釋一下為何圖片要存在兩個地方, 因為blog部落格本身設計的限制, 首頁顯示的文章內容, 與單篇顯示的文章內容的目錄位置不同, 為了能夠避免掉因不同的人而需要更改FLA裡面的原始碼, 因此在Coding時就採用相對路徑. 這樣一來, 如果圖片沒有在 "單篇文章彙整 "的目錄下多存一份的話, 使用者以單篇文章瀏覽時, 該路徑就會找不到圖片.
幸好, 640x480的圖片檔案不大, 這是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中, 沒有縮圖模式等等...
不過以我目前的閒暇時間, 有這些基本的功能, 也就足夠使用了.

若有什麼建議的話, 歡迎留下迴響囉!










0 TrackBacks

Listed below are links to blogs that reference this entry: [教學]如何利用Flash在blog部落格裡展示多張圖片..

TrackBack URL for this entry: http://www.dab.idv.tw/blog/dab-mt-tb-dab.cgi/18



更多同類文章看這裡: [ 教學˙Teach & Learn ]   
由 dAb 發表於 August 16, 2004 7:18 PM


5 Comments

[1] Posted by: dAb on August 17, 2004 4:43 PM

我檔案忘了放上去, 啊也沒有人提醒我一下, 是表示沒有人要教學就對了>__ 本來還想繼續PO影片Flash顯示器的教學說.....
不過那個啊...比圖片的還麻煩

[2] Posted by: Fish on August 25, 2004 7:00 PM

你超級厲害的 我也要回去試試看^^
影片的也教一下吧^^

[3] Posted by: Party Poker on October 31, 2004 3:26 PM

They spell it da Vinci and pronounce it da Vinchy. Foreigners
always spell better than they pronounce.
-- Mark Twain

[4] Posted by: dAb on October 31, 2004 4:37 PM

to Party Poker

Thanks to teaching us.^^
Now I know it's announce Da Vinchy.

How come only your friends step on your new white sneakers?

Leave a comment






備用迴響區(若上方迴響功能失效再使用)