SWFObject 2.2: SWFObject讓Flash變聰明了！

當我們用Dreamweaver或Flash發佈網頁時，我們聰明的Adobe軟體會自動在網頁中增加許多「讓人眼花」的程式碼，也許我們不確定這些程式碼能做什麼，反正它就是要用來插入Flash元件的程式碼就是了…，但是…如果要修改的話，有時候還真讓人覺得麻煩！而且一大堆黑麻麻的程式碼也讓人看了很不開心！

好在SWFObject(目前的版本是2.2)提供了「更智慧」的方法，可以用短短的程式碼就OK OK了！不但如此，它還提供了「替代圖片、替代文字」的功能以避免不支援Flash的情況發生(例如用iPhone上網時…)！

先說一下它的原理：載入swfobject.js後，用javascript指定DIV的ID名稱(SWFObject會將這個DIV給取代掉，因此可以在這個DIV中設定替代的方案，例如替代圖片或文字)、大小、以及其它「如果有需要再加上」的額外參數設定，例如具有透明背景的Flash等。

參考作法如下：

首先，我們準備相關素材：要置入的Flash檔案(swf/myFlash.swf/寬1000px、高650px)以及替代圖(images/myFlash.jpg/寬1000px、高650px)，並且下載swfobject.js(js/swfobject.js)；給等一下要置入Flash的DIV一個獨一無二的ID名稱(通常取和Flash一樣的檔名就好了，所以就是「myFlash」)。

然後就是加上網頁程式碼的部份了。找到要置放Flash的DIV：

<div id="myFlash">
  <a href="http://www.adobe.com/go/getflashplayer">
  <img src="images/myFlash.jpg" width="1000" height="650" alt="myFlash Content" title="myFlash Title"></a>
</div>

此時，這個「myFlash」DIV裡面的東西最大的功能只有一個：一旦Flash無法載入或載入失敗時，網頁依然會顯示出正確的畫面，也就是替代圖發揮功用的時候了！當然我們也可以進一步把這個DIV做成具有連結功能的圖片，即使沒有Flash，我們還是可以正常的瀏覽網站其它的內容。

在</head>上面加入底下的程式碼，先讓網頁載入swfobject.js，這樣swfobject才會有作用：

<script type="text/javascript" src="js/swfobject.js"></script>

設定適當的參數，讓SWFObject知道它該怎麼做：

<script type="text/javascript">
  var flashvars = {};
  var params = {};
    params.menu="false";
    params.wmode="transparent";
    params.bgcolor="#CCCCCC";
    params.allowfullscreen="true";
  var attributes = {};
    attributes.id="myFlash";
    attributes.name="myFlash";
  swfobject.embedSWF("swf/myFlash.swf", "myFlash", "1000", "650", "10.0.2", "false", flashvars, params, attributes);
</script>

SWFObject的編寫有一定的規則可依循：swfobject.embedSWF(*Flash路徑, *Flash要取代的id名稱, *Flash的寬, *Flash的高, *Flash發佈的版本, expressInstallSWFurl, flashvars, params, attributes, callbackFn);。其中，前面有打星號(*)的部份是必填的地方，其它可有可無。expressInstallSWFurl是要我們提供一個簡易安裝Flash Player的Flash檔案路徑，它會讓使用者連到Adobe官方網站下載最新的Flash Player，所以可以寫成「swf/expressInstall.swf」，或者直接寫成「false」，乾脆不提供…。

按上面的例子，swf/myFlash.swf就是Flash檔案的路徑，myFlash就是要放Flash的DIV的ID名稱，1000是Flash的寬度，650是Flash的高度(預設單位是像素px，想要全螢幕Flash的話，就把寬和高都設成100%)，10.0.2這個看起來怪怪的數字其實是Flash所發佈的版本；params.wmode="transparent"與params.bgcolor="#CCCCCC"等參數設定增加了透明背景Flash、背景色為「#CCCCCC」等等的功能(如果不要透明背景Flash的話，把"transparent"改成"opaque"即可)。

其他參考資料：
1. Embedding Adobe Flash Player content using SWFObject 2
2. New test pages for SWFObject 2.2