swfobject - 網頁輕鬆嵌入Flash
Flash在網頁上的應用已經越來越普遍了，未來一樣占有一席之位，但是從以前到現在，對於發佈Flash到網頁上常常碰到一些不必要的問題，例如XP SP2更新後，IE瀏覽器上方會出現檔掉的訊息，或是Flash外框出現虛線，需要滑鼠點一下才能開始動作等...，而且使用者並未安裝Flash Player的情況下或版本太低都會無法順利的瀏覽。
最近剛好看到一個不錯的東西，就是這次要介紹的swfobject，一般我們要嵌入swf到HTML時，通常會寫的語法如下:
上面的程式碼使用到<object>標籤，早一點的甚至還要再寫<embed>才能動作，因為IE跟其他瀏覽器的種種原因，使得這種寫法不但又臭又長，也不符合標準。
那使用swfobject有什麼好處呢?我們繼續看下去吧。
首先我們得先去swfobject的網頁http://code.google.com/p/swfobject/，然後下載目前的最新版本swfobject_2_2.zip。
下載解壓縮後可以看到以下檔案:
swfobject
├ src (原始碼資料夾)
│ ├ expressInstall.as (flash player版本升級原始碼)
│ ├ expressInstall.fla (flash player版本升級原始碼)
│ └ swfobject.js (swfobject javascript)
│
├ expressInstall.swf (flash player版本升級程式)
├ index.html (HTML範例檔)
├ index_dynamic.html (HTML範例檔)
├ swfobject.js (swfobject javascript)
└ test.swf (測試用swf檔)
上面灰色的檔案是比較不重要的範例檔，我們只需要swfobject.js跟expressInstall.swf就可以了。
在這裡先解釋一下，expressInstall.swf是用來幫助使用者升級flash player用的swf檔，如果你發佈了一個版本為10的swf到網頁，而使用者的瀏覽器版本只到9或更低，網頁就會自動載入expressInstall.swf協助使用者升級player的版本。
下面我們開始使用swfobject，先建立一個資料夾，暫時命名為MySwfobject，然後在資料夾裡在建立一個js資料夾，我們把swfobject.js複製到js資料夾內，然後將expressInstall.swf複製到MySwfobject資料夾內，再來我們需要一個測試用的flash，就把剛剛下載的test.swf一樣複製到MySwfobject資料夾內，最後建立一個空白的HTML檔index.html，程式碼如下:
這時我們的目錄應該如下的結構:
MySwfobject
├ js
│ └swfobject.js
│
├ expressInstall.swf
├ index.html
└ test.swf
我們開始把test.swf嵌入到index.html，先在<head>標籤內導入swfobject.js:
然後在底下加上這幾行javascript:
最後在<body>內加入id="mySwfobjectDiv"的<div>標籤:
這時候用你的瀏覽器開啟index.html就會發現test.swf成功被嵌入了。
大家可以發現程式碼非常的簡短，而且不需要一堆<object><embed>標籤，只需要一個<div>就可以輕鬆嵌入Flash，其中的核心就是swfobject.embedSWF("test.swf", "mySwfobjectDiv", "300", "120", "9.0.0", "expressInstall.swf");這行，這裡我們介紹一下swfobject.embedSWF的幾個參數:
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)
swfUrl 要嵌入的swf檔的位置 (例如在這裡我們是test.swf)
id 要嵌入在哪的HTML標籤id (在這裡我們是嵌入在<div id="mySwfobjectDiv">)
width Flash的寬
height Flash的高
version Flash Player的版本 (可直接輸入整數 ex:9 or 10)
expressInstallSwfurl expressInstall.swf的位置
flashvars 要傳給Flash的變數
params Flash的參數 ex:menu,wmode,quality等...
attributes Flash本身的一些屬性 ex:id,name...
callbackFn 要callback給javascript的function
最後這裡附上加了flashvars,params跟attributes的index.html程式碼:
我們新增了關閉player menu的參數給swfobject，然後將id命名為MySwfobject，並且在mySwfobjectDiv的div標籤內加入一個Flash Plyer的安裝連結，如果使用者的瀏覽器沒有安裝Flash Player，swfobject就不會將test.swf嵌入到mySwfobjectDiv，而是直接顯示這行連結通知使用者安裝。
更多進階的使用文件可以參考swfobject的documentation。
範例程式:
參考資料:
最近剛好看到一個不錯的東西，就是這次要介紹的swfobject，一般我們要嵌入swf到HTML時，通常會寫的語法如下:
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
</object>
上面的程式碼使用到<object>標籤，早一點的甚至還要再寫<embed>才能動作，因為IE跟其他瀏覽器的種種原因，使得這種寫法不但又臭又長，也不符合標準。
那使用swfobject有什麼好處呢?我們繼續看下去吧。
首先我們得先去swfobject的網頁http://code.google.com/p/swfobject/，然後下載目前的最新版本swfobject_2_2.zip。
下載解壓縮後可以看到以下檔案:
swfobject
├ src (原始碼資料夾)
│ ├ expressInstall.as (flash player版本升級原始碼)
│ ├ expressInstall.fla (flash player版本升級原始碼)
│ └ swfobject.js (swfobject javascript)
│
├ expressInstall.swf (flash player版本升級程式)
├ index.html (HTML範例檔)
├ index_dynamic.html (HTML範例檔)
├ swfobject.js (swfobject javascript)
└ test.swf (測試用swf檔)
上面灰色的檔案是比較不重要的範例檔，我們只需要swfobject.js跟expressInstall.swf就可以了。
在這裡先解釋一下，expressInstall.swf是用來幫助使用者升級flash player用的swf檔，如果你發佈了一個版本為10的swf到網頁，而使用者的瀏覽器版本只到9或更低，網頁就會自動載入expressInstall.swf協助使用者升級player的版本。
下面我們開始使用swfobject，先建立一個資料夾，暫時命名為MySwfobject，然後在資料夾裡在建立一個js資料夾，我們把swfobject.js複製到js資料夾內，然後將expressInstall.swf複製到MySwfobject資料夾內，再來我們需要一個測試用的flash，就把剛剛下載的test.swf一樣複製到MySwfobject資料夾內，最後建立一個空白的HTML檔index.html，程式碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MySwfobject</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
這時我們的目錄應該如下的結構:
MySwfobject
├ js
│ └swfobject.js
│
├ expressInstall.swf
├ index.html
└ test.swf
我們開始把test.swf嵌入到index.html，先在<head>標籤內導入swfobject.js:
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
swfobject.embedSWF("test.swf", "mySwfobjectDiv", "300", "120", "9.0.0", "expressInstall.swf");
</script>
最後在<body>內加入id="mySwfobjectDiv"的<div>標籤:
<div id="mySwfobjectDiv"></div>
這時候用你的瀏覽器開啟index.html就會發現test.swf成功被嵌入了。
大家可以發現程式碼非常的簡短，而且不需要一堆<object><embed>標籤，只需要一個<div>就可以輕鬆嵌入Flash，其中的核心就是swfobject.embedSWF("test.swf", "mySwfobjectDiv", "300", "120", "9.0.0", "expressInstall.swf");這行，這裡我們介紹一下swfobject.embedSWF的幾個參數:
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)
swfUrl 要嵌入的swf檔的位置 (例如在這裡我們是test.swf)
id 要嵌入在哪的HTML標籤id (在這裡我們是嵌入在<div id="mySwfobjectDiv">)
width Flash的寬
height Flash的高
version Flash Player的版本 (可直接輸入整數 ex:9 or 10)
expressInstallSwfurl expressInstall.swf的位置
flashvars 要傳給Flash的變數
params Flash的參數 ex:menu,wmode,quality等...
attributes Flash本身的一些屬性 ex:id,name...
callbackFn 要callback給javascript的function
最後這裡附上加了flashvars,params跟attributes的index.html程式碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MySwfobject</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
};
var params = {
menu: "false"
};
var attributes = {
id:"MySwfobject"
};
swfobject.embedSWF("test.swf", "mySwfobjectDiv", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="mySwfobjectDiv">
<a href="http://www.adobe.com/go/getflashplayer">請安裝Flash Player</a>
</div>
</body>
</html>
我們新增了關閉player menu的參數給swfobject，然後將id命名為MySwfobject，並且在mySwfobjectDiv的div標籤內加入一個Flash Plyer的安裝連結，如果使用者的瀏覽器沒有安裝Flash Player，swfobject就不會將test.swf嵌入到mySwfobjectDiv，而是直接顯示這行連結通知使用者安裝。
範例程式:
參考資料:
版主您好～～
回覆刪除想請問您“MySwfobject/js/swfobject.swf ”這個檔案放在哪裡呢？swfobject_2_2.zip裡好像都沒有看到？
羊咩你好:)
回覆刪除是筆誤XD
正確應該是swfobject.js，已修正
感謝您的提醒!!