星期二, 1月 09, 2007

SWF Object 1.4.4

我們常常在使用IE瀏覽器在看一些使用Flash製作的區塊時,發現得用滑鼠點個一兩次才能和Flash有互動的功能(或者你可以發現在IE上的Flash都會有個虛線方框在上面),但在FireFox瀏覽器就不會有這種情形。為了解決IE的這個問題,有位 "Geoff Stearns" 的資深程式設計師做了 "SWFObject" 的小東西來克服這問題,目前看來,似乎是個不錯的選擇。

那麼,該怎麼做呢?

我可以跟大家說明一下,但是建議要試的人最好對html的程式語法多所了解,否則很難成功!

1. 先下載SWFObject 1.4.4.zip(其中包含了示範檔),因為我們會用到裡面的 "swfobject.js",並且將這個js檔和我們的網頁檔案放在同一個目錄夾裡。

2. 用Dreamweaver開啟你要修改的html原始檔,我們將會用「程式碼」的視窗修改程式;首先,我們找到head標籤,在head裡寫一段javascript程式碼:
<script type="text/javascript" src="swfobject.js"></script>

這段javascript會呼叫剛才的swfobjcet.js。

3. 接著另外寫一個新空白的javascript程式碼標籤,並粗體字的內容放在javascript程式碼標籤裡;切記,這是讓我們的網頁出現Flash影片的地方,所以這段javascript一定要放在flash會出現的位置,javascript程式碼內容為:
<script type="text/javascript">
 var so = new SWFObject("myFlashMovie.swf", "myMovie", "764", "110", "8", "#FF6600");
 so.addParam("quality", high");
 so.addParam("wmode", "transparent");
</script>

SWFObject括號裡面的參數內容,依序為「你的Flash影片檔名(本例為 "myFlashMovie.swf")」、「Flash的id代碼(隨意命名,本例為 "myMovie")」、「Flash影片的寬度(預設單位為pixel,本例為 "764")」、「Flash影片的高度(本例為 "110" pixels)」、「Flash Player的版本(本例為 "8")」、「指定的背景顏色(本例為 "#FF6600")」。

"addParam"的作用是加入其它參數,例如Flash影片的Quality為High,以及transparent(設定Flash影片的背景為透明)。想知道SWFObject更多參數運用的人,可以到Adobe (Flash OBJECT and EMBED tag attributes)去了解唷!

4. 把檔案儲存起來,試試效果如何!

因為Google的Blog沒辦法讓我使用某些「特定」的標籤,所以沒辦法很完整的把標籤寫出,讓大家可以直接Copy-And-Paste,想了解更多的,可以到Deconcept的SWFObject: Javascript Flash Player detection and embed scriptRyan C. Davidson的網站瞧瞧。祝大家成功!

沒有留言: