超炫的 Flash imageBox 套用程式─智邦公益電子報─台灣最大公益電子報發行中心

第三階段【網頁製作系列報導】電子報【各種程式選用】

重要信息通知 PChome Online 網路家庭個人網站將於 2006/09/29 起停止免費會員服務為長期服務訂閱本報讀者，原電子報網頁製作系列報導，全部搬移到網頁研習室網站

實用程式彙報

第四篇
超炫的 Flash imageBox 套用程式

壹、程式來源經過說明：
⊙本程式原始版本 IMAGEBOX v1.0 ，作者 Sascha.Wenning ，但作者網站已找不到此檔。
⊙後經獅湖國小林郁為老師修改過成為 imageBox_v1 (5,227 kb) 及 imageBox_v22 (4,074 kb)，請按此下載

。
⊙然後再經本站重新完整整理，請按本報導的範例圖檔，會以全螢幕顯示。
⊙經實際測試本程式適合當做相片或產品照片展示使用，是個很不錯的免費程式。
⊙經重新整理過的程式，已適合沒有 Flash 軟體或不懂 Flash 製作的初學者直接套用。
⊙本次電子報也特別針對不懂 Flash 製作的網友，提供詳細的修改與套用步驟。
⊙如果您已具有基本或進階功力，當然可以做進一步的編修。
⊙本程式操作簡單，又有文字提示說明，值得您嘗試看看。
⊕基本上您的瀏覽器必須已經裝過 Flash plug-in 才能觀看使用，未安裝者請按此下載

Flash plug-in 軟體。

貳、本程式作者原始修改建議原文：

// IMAGEBOX v1.0
-------------------------
.txt-based gallary surfer
-------------------------
marketing Aktiengesellschaft 2003
E-Mail to: Sascha.Wenning@Qmarketing.de
//
IMPORTANT NOTE:
Do not change variable names defined in txt-files
//
--------------------------
TO CUSTOMIZE YOUR GALLERY:
--------------------------
Size of image should be 4:3
1. Architecture
Place imageBox_v1.swf and the folder "bilder" in the same dir.

2.Edit config.txt stored in Folder bilder like this:
&anz_shootings=2&ordner=shooting1|shooting2
anz_shootings: Number of shootings displayed in the DropDown-Box
ordner: names of folders (seperated by |) containing your jpeg-images
This name will be shown in the DropDown-Box

3.Place a txt-file named "bilder.txt" in each folder representing your images
&anz_bilder=5&fotos=bild1.jpg|bild2.jpg|bild3.jpg|bild4.jpg|bild5.jpg
anz_bilder: number of pictures in this folder
fotos: file names of your jpeg's (seperated by |)

That's it!

參、本程式基本檔案及架構如下：
無邊框網頁檔：fullscreen.htm (非必要檔)
Flash 網頁檔：imageBox.htm
Flash 原始檔：imageBox.fla
Flash 撥放檔：imageBox.swf (注意：此檔勿直接開啟或按清空相簿功能)
所有圖檔及設定檔存放目錄：bilder
本程式主要設定檔：bilder/config.txt
圖檔存放目錄：bilder/印度之旅、埃及之旅、紐西蘭之旅、荷德比法之旅。
各目錄內圖檔設定檔：./bilder.txt

伍、不懂 Flash 者製作方式：(請直接修改您的照片檔名即可)
⊕適合完全不懂 Flash 者，可不必安裝 Flash 軟體，但必需使用我完成的範例檔。
步驟一、首先將您想放的照片整理出來。
步驟二、將所有圖片尺寸縮放為寬 640 * 高 480 (適合 1024 * 768 螢幕)。
步驟三、依據照片內容將各目錄改為想要中文名稱。
如範例：印度之旅、埃及之旅、紐西蘭之旅、荷德比法之旅。
步驟四、在每個目錄內各放五張照片。
第一個目錄內各照片檔名依序改為 bild1.jpg 到 bild5.jpg。
第二個目錄內各照片檔名依序改為 bild6.jpg 到 bild10.jpg。
第三個目錄內各照片檔名依序改為 bild11.jpg 到 bild15.jpg。
第四個目錄內各照片檔名依序改為 bild16.jpg 到 bild20.jpg。
步驟五、將我範例內 bilder 目錄裡面的 config.txt 文字檔叫出來。
修改印度之旅|埃及之旅|紐西蘭之旅|荷德比法之旅，這四個目錄名稱與您的目錄一樣即可。
步驟六、修改好後直接雙擊 imageBox.htm 檔即可使用。
⊙注意事項：請將 Flash 網頁檔(imageBox.htm)及 Flash 撥放檔(imageBox.swf)放在同一目錄內。
⊙本方式缺點：必須套用我的範例檔、只能使用四個目錄及 20 張照片、 Flash 範例檔上的資料無法修改。
⊕注意事項：我使用的是無邊框網頁指令程式碼，請勿直接打開 imageBox.swf 檔案測試清空相簿功能。

陸、已具備基本功力者製作方式
⊕適合略懂 Flash 者，必需安裝 Flash Mx 軟體，請使用原始範例檔修改。
步驟一、首先將您想放的照片整理出來。
步驟二、將所有圖片尺寸縮放為寬 640 * 高 480 (適合 1024 * 768 螢幕)。
步驟三、依據照片內容將各目錄建立為想要中文名稱
如範例：：印度之旅、埃及之旅、紐西蘭之旅、荷德比法之旅。
⊙備註：目錄名稱也可使用英數代替。
步驟四、在每個目錄內各放五張照片。
第一個目錄內各照片檔名依序改為 bild1.jpg 到 bild5.jpg。
第二個目錄內各照片檔名依序改為 bild6.jpg 到 bild10.jpg。
第三個目錄內各照片檔名依序改為 bild11.jpg 到 bild15.jpg。
第四個目錄內各照片檔名依序改為 bild16.jpg 到 bild20.jpg。
⊙備註：每個目錄也可增加數量(如： bild1.jpg 到 bild10.jpg)，但第二個目錄編號要銜接為 bild11.jpg 喔。
步驟五、自建一個 bilder 目錄，裡面放一個 config.txt 文字檔。
config.txt 檔內文字安排如下：
&anz_shootings=4&ordner=印度之旅|埃及之旅|紐西蘭之旅|荷德比法之旅。
⊙備註：如果目錄數有增加，請記得要一併修改喔。
步驟六、將以上整理過的照片全部放到自建的 bilder 目錄內。
步驟七、每個目錄內個放一個 bilder.txt 文字檔。
第一個目錄內文字安排如下：
&anz_bilder=5&fotos=bild1.jpg|bild2.jpg|bild3.jpg|bild4.jpg|bild5.jpg。
第二個目錄內文字安排如下：
&anz_bilder=5&fotos=bild6.jpg|bild7.jpg|bild8.jpg|bild9.jpg|bild10.jpg。
第三個目錄內文字安排如下：
&anz_bilder=5&fotos=bild11.jpg|bild12.jpg|bild13.jpg|bild14.jpg|bild15.jpg。
第四個目錄內文字安排如下：
&anz_bilder=5&fotos=bild16.jpg|bild17.jpg|bild18.jpg|bild19.jpg|bild20.jpg。
⊙備註：如果目錄內數量有增加，請記得要一併修改喔。
步驟八、建立好後存檔再按發布(Shite + F12)即可。
⊕注意事項：我使用的是無邊框網頁指令程式碼，請勿直接打開 imageBox.swf 檔案清空相簿功能。

柒、進階製作方式：
⊕適合已具備 Flash 基礎者，必需安裝 Flash Mx 軟體，請參考原始範例檔修改。
除了照以上說明製作外，您還可以修改以下這些資料：
修改一、目錄及照片檔名可以不用照範例順序編號(排)，請在 config.txt 及 bilder.txt 文字檔內直接修改便可。
⊙作品範例：

修改二、修改 label 圖層(我的範例檔才有)：
這裡可修改或自建上半部文字、連結文字資料、清空相簿及關閉相簿。
⊕注意事項：清空相簿及關閉相簿，我用的是適合無邊框網頁指令程式碼，請自行修改。
清空相簿：getURL("javascript:location.reload();");修改為

on (release) {
getURL("imageBox.htm");
}

關閉相簿：getURL("javascript:window.close()");修改為

on (release) {
	fscommand("quit", true);
}

修改三、修改 content 圖層：這裡可修改我的旅遊 Box 文字資料。
修改四、修改 as 圖層：這裡可修改各項動作指令(略)。
修改五、左邊中央那排按鈕圖示(略)。
建議：以上如果您對 Action 指令不熟悉，最好不要修改喔。
⊕注意事項：我使用的是無邊框網頁指令程式碼，請勿直接打開 imageBox.swf 檔案清空相簿功能。

捌、其他製作注意事項：
⊙在不影響照片品質下，盡可能將每張照片做好最佳化處理，控制在 50 Kb 左右。
⊙使用中文目錄時，必需考慮您上傳之主機是否支援此功能。
⊙上傳時記得比照原架構目錄，將 config.txt 及各次目錄內的 bilder.txt 文字檔一起上傳。
⊙網路上值得參考作品範例：

玖、教材資料存放位置說明：
由於免費 PcHome 空間及速度有限，以下及我修改過的範例檔無法提供網友直接下載，請見諒。
⊕為利網友快速取得本報導相關檔案等資料，歡迎採索取教材資料方式，完整獲得 2 片網頁製作相關光碟片。
本報導所有檔案均存放於 CD:/study/maillist3/pro/04/內，簡單說明如下：
林郁為老師 imageBox ，存放位置與檔名： imageBox/imageBox_v1.zip (5,227 kb) 及 imageBox_v22.zip (4,074 kb)。
林郁為老師的幻燈片展示相片，存放位置與檔名：slideBox/slideBox.fla (1,118 kb)。
王建忍老師的照片相簿，存放位置與檔名：briefing/briefing.fla (4,191 kb)。
以下是我修改過的範例檔存放位置與檔名：CD:/study/maillist3/pro/04/
無邊框網頁檔：fullscreen.htm (非必要檔)
Flash 網頁檔：imageBox.htm
Flash 原始檔：imageBox.fla (801 kb)
Flash 撥放檔：imageBox.swf (1,903 kb) 注意：此檔勿直接開啟測試清空相簿功能。
圖檔及設定檔存放目錄：bilder (1.07 mb)
其他不錯的 Flash 秀圖程式，存放位置與檔名：/slideshow/slideshow.zip (5 KB)。
其他不錯的 Flash 秀圖程式，存放位置與檔名：/gallery/gallery.zip (859 KB)。
其他不錯的 Flash 秀圖程式，存放位置與檔名：/slide/slide.rar (3,826 KB)。
其他很棒的 Flash 翻頁效果程式，存放位置與檔名：/pageflip/pageflip_v22_source.zip (194 KB)。
其他很棒的 Flash 頁式相簿程式，存放位置與檔名：/photoalbum/ (552 KB)。
其他很棒的 Flash 相簿程式，存放位置與檔名：/SimpleViewer/simpleviewer.zip (36 KB)。
其他很棒的 Flash 相簿程式，存放位置與檔名：/photogallery/ (345 KB)。
以上其相關安裝與使用說明，亦存放在同一目錄內。
⊕特別聲明：以上檔案之版權均為原創作者所有，請注意版權宣告，並不含於索取教材資料費用內。

拾、結論與建議：
⊕本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
⊕本電子報第三階段報導資料，將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
⊕強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，將[所見即所得]軟體當做輔助工具吧。
⊕本站自即日起取銷贊助本站方式，自 95 年 07 月 1 日全面改為索取教材資料方式，繼續服務需要網友。
⊕本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的兩套光碟片，則是我們的誠意而已。
⊕本報導內容或資料，因限人力、時間，非索取教材資料包含線上指導網友，不接受任何疑惑解答，敬請見諒。

第三階段 95.08.31. 發行第 025 期前期：免費 PcHome 空間暫停電子報遷移中