[SWFObject] SWFObject 2.0 讓你輕鬆的插入及控制 Flash
張貼者:蕃茄 (Tomato)
插入 Flash 到網頁,自從有了 DreamWeaver 後,一直都不是難事,就算都不會任何編輯器,在 Flash
的匯出選項裡也能直接產生插入好 SWF 檔的 HTML ,所以插入 Flash 這件事,一直沒有受到大多數人的重視。
一直到 Win XP 發佈 Service Pack 2 後,一切通通變得不一樣了,因為如果沒有很好的插入語法及觀念,你的 SWF 動畫檔在網頁上沒辦法被使用者直接使用,因為會出現虛線,還需要使用者在動畫上點左鍵一下才能使用,也因為這樣,在網路上又開始出現一大堆的修正檔,這一切都是 IE 搞的鬼啊~
重點是,DreamWeaver 8.1 版後,也幫使用者修正了這個問題,當然 DreamWeaver CS3 也重新改寫了 AC_RunActiveContent.js 這個修正檔,這支修正檔會在你加入 SWF 檔後,第一次儲存時,就會出現提示準備儲存檔案(如下圖)。

當你按了確定後,就會依照上述的路徑,將檔案儲存在你的網站資料夾下(如下圖)

原則上,這樣就完成插入 SWF 檔及修正 IE 的安全性問題,BUT,問題其實從這裡才開始,有什麼問題呢?繼續看吧!
如果你希望做出來的網頁能符合搜索引擎最佳化的原則、還能做出真正通過 text/html 的頁面, 而不是 application/xhtml+xml
以及網頁標準化的話,你就不能只知道上面的方式囉。
因為使用 DreamWeaver 插入 SWF 檔時,它會使用 <object> <embed> 等非標準化的語法,而且語法非常的複雜難以管理(如下圖反白處)。

你看到了嗎?只為了一個簡單的 SWF 檔,就搞出一大堆的原始碼,而且還沒有達到標準化的要求,真是糟,有多糟呢?我想大多數的人都不知道,這支程式糟到連 Adobe 自己開發的,自己卻不想要用,所以,他們這次的網站改版放 SWF 檔也是用我們這次要介紹的 SWFObject (Adobe 網站大改版),連開發者自己都不想用,我們還在用,這有點好笑吧!
好啦!我們進入正題,什麼才要進入正題,那上面那一大堆的字在做什麼,嗯~沒辦法,我話太多了,我在想,以後是不是用錄的比較快。
如果你受不了了,想要馬上使用,只要三個步驟就搞定囉!
Setup1 - 請先下載 SWFObject.js 或是將整個 SWFObject 壓縮檔下載回去
Setup2 - 請將 SWFObject.js 放入你的網站資料夾
Setup3 - 將以下的 Code 放入你想出現 Flash 的地方即可
很簡單吧!從需要一大堆的原始碼,變成那一點點的 xhtml & css & javascript 是不是比較容易觀看呢?待會咱們再來解釋它是怎麼運做的吧!
SWFObject 的語法非常的簡單易懂,以下我們就來看看它的使用方式吧~
一直到 Win XP 發佈 Service Pack 2 後,一切通通變得不一樣了,因為如果沒有很好的插入語法及觀念,你的 SWF 動畫檔在網頁上沒辦法被使用者直接使用,因為會出現虛線,還需要使用者在動畫上點左鍵一下才能使用,也因為這樣,在網路上又開始出現一大堆的修正檔,這一切都是 IE 搞的鬼啊~
重點是,DreamWeaver 8.1 版後,也幫使用者修正了這個問題,當然 DreamWeaver CS3 也重新改寫了 AC_RunActiveContent.js 這個修正檔,這支修正檔會在你加入 SWF 檔後,第一次儲存時,就會出現提示準備儲存檔案(如下圖)。

當你按了確定後,就會依照上述的路徑,將檔案儲存在你的網站資料夾下(如下圖)

原則上,這樣就完成插入 SWF 檔及修正 IE 的安全性問題,BUT,問題其實從這裡才開始,有什麼問題呢?繼續看吧!
如果你希望做出來的網頁能符合搜索引擎最佳化的原則、還能做出真正通過 text/html 的頁面, 而不是
因為使用 DreamWeaver 插入 SWF 檔時,它會使用 <object> <embed> 等非標準化的語法,而且語法非常的複雜難以管理(如下圖反白處)。

你看到了嗎?只為了一個簡單的 SWF 檔,就搞出一大堆的原始碼,而且還沒有達到標準化的要求,真是糟,有多糟呢?我想大多數的人都不知道,這支程式糟到連 Adobe 自己開發的,自己卻不想要用,所以,他們這次的網站改版放 SWF 檔也是用我們這次要介紹的 SWFObject (Adobe 網站大改版),連開發者自己都不想用,我們還在用,這有點好笑吧!
好啦!我們進入正題,什麼才要進入正題,那上面那一大堆的字在做什麼,嗯~沒辦法,我話太多了,我在想,以後是不是用錄的比較快。
如果你受不了了,想要馬上使用,只要三個步驟就搞定囉!
Setup1 - 請先下載 SWFObject.js 或是將整個 SWFObject 壓縮檔下載回去
Setup2 - 請將 SWFObject.js 放入你的網站資料夾
Setup3 - 將以下的 Code 放入你想出現 Flash 的地方即可
<script type="text/javascript"
src="swfobject.js"></script>
<div
id="mySWF">
這裡是當瀏覽器不能播 Flash
時,放入你想出現的訊息。
</div>
<script
type="text/javascript">
swfobject.embedSWF("test.swf", "MySWF", "550",
"400", "9.0.0");
</script>
很簡單吧!從需要一大堆的原始碼,變成那一點點的 xhtml & css & javascript 是不是比較容易觀看呢?待會咱們再來解釋它是怎麼運做的吧!
SWFObject 的語法非常的簡單易懂,以下我們就來看看它的使用方式吧~
swfobject.embedSWF(swfUrl,
replaceElementId, swfWidth, swfHeight, flashVersion,expressInstallUrl,
flashvars, params,
attributes);
=========================================================
swfUrl
======> 這個要寫你的FLASH檔名;
replaceElementId ======> 這個是你要替換成 flash 的 DIV 的
ID 名稱;
swfWidth ======> 這個就是你的 swf 的寬度;
swfHeight ======> 這個就是你的 swf
的高度;
flashVersion ======> 這個是播放 swf 的 player
版本,可設定至小數點,但是一般來說整數版本就可以囉;
expressInstallUrl ======> 這個很好用哦~這是當 Flash
Player 的版本比你指定的還舊時,他就會自動地到上述的位置,更新安裝 Flash Player 。
flashvars ======>
這是傳值進 Flash 用的;
params ======> 這是控制 Flash 參數用,如需不需要選單;menu="false"
;
attributes ======> 這是為 flash player 控件的屬性值設置;如 id:
"myDynamicContent"
