網頁設計師一定要會的Swfobject.js 崁入Flash .SWF

7 月 10, 2015 | | 0 comments

Swfobject.js 崁入Flash SWF

相信很多人使用Dreamweaver內建的崁入.SWF方式,當你崁入時會自動在你的網站上產生許多程式碼,弄得你眼花撩亂。而現在有了簡潔又簡單的swfobject.js 輕鬆在網頁上加入Flash SWF,並且若其他人的遊覽器上沒有安裝Flash play則會顯示你崁入flash區塊內的內容,如請連接到flashplay網站下載安裝flashplay外掛才可觀看到動畫之類的話,或是有使用不支援Flash的iphone、ipad的使用者在觀看你的網頁時,一樣的他會顯示崁入Flash區塊內的內容,這時可以在此區塊放張製作成flash的靜態的圖,就不會因為不支援flash而此區塊卻看不見任何的畫面。

Step1 下載swfobject

請至此位址下載最新版的swfobject
之後將swfobject.js放入你的網站資料夾

{googleads center}

Step2 在網頁上連結swfobject.js檔案

將以下連接連結swfobject.js的程式碼貼到你的網頁<head></head>之間 (記得連結位址為你放swfobject.js檔案的路徑)

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

Javascript崁入的程式碼如下

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

這裡面比較需要更動到的是,這段 swfobject.embedSWF("iflash.swf", "iflash", "461", "697", "10.0.2", "false", flashvars, params, attributes);

說明:swfobject.embedSWF程式碼內的第一個"iflash.swf"為你的檔案位址名稱,第二個"iflash"為你要將iflash.swf崁入的id位址。接下來461和697分別為崁入的iflash.swf寬:461px 高:697px。
之後的數據幾乎不用調整,主要為讀取flash的版本等設定。詳細的設定可參考google code swfobject.

您可以參考以下範例Demo展示,實際將swfobject.js應用在您設計的網頁上。

DEMO | 範例下載