Fork me on GitHub

Programming Design Notes

使用 SWFObject 插入 Flash

| Comments

SWFObject 在這裡下載: http://code.google.com/p/swfobject/
最新版本是 2.2


亦可使用 Google Ajax API 使用 SWFObject
將以下的程式碼放到 html 的 head 內


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("swfobject", "2.2");
google.setOnLoadCallback(function(){
//在這裡輸入你自己的 Javascript
});
</script>

使用方法非常簡單
短短一行程式碼便可以動態地將 Flash 插入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 dynamic publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("swfobject", "2.2");
google.setOnLoadCallback(function(){
swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
});
</script>
</head>
<body>
<div id="myContent">
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>

其中
swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
便是將 Flash 插入的代碼
參數如下:
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn)

  • swfURL (swfUrlStr): Flash 檔案的位置 (URL)
  • id (replaceElemIdStr): 這是 Flash 取代的標籤的 ID (以上例子便會取代 myContent 的 div 標籤)
  • width (widthStr): Flash 的闊度
  • height (heightStr): Flash 的高度
  • version (swfVersionStr): Flash Player 的最低版本 (即是你的 Flash 使用到 Flash 9 的功能, 最低版本便是 9.0.0.0)
  • expressInstallSwfURL (xiSwfUrlStr): 如果用戶的 Flash Player 不付合最低版本的要求, 便會提示用戶升級 (詳情: Adobe Express Install)
  • flashvars (flashvarsObj): 播放 Flash 前傳進的參數
  • params (parObj): Flash 的參數 (bgcolor, menu 之類)
  • attributes (attObj): Flash 標籤上的參數 (id, name), id 用作 Javascript 和 Actionscript 溝通用
  • callbackFn: Flash 成功或失敗時會執行的 Function
必要輸入藍字的參數




flashvars 例子:
var flashvars = {
name1: "hello",
name2: "world",
name3: "foobar"
};

params 例子:
var params = {
menu: "false"
};

attributes 例子:
var attributes = {
id: "flashContent",
name: "flashContent"
};

完整例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 dynamic publishing example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("swfobject", "2.2");
google.setOnLoadCallback(function(){
var flashvars = {
name1: "hello",
name2: "world",
name3: "foobar"
};
var params = {
menu: "false"
};
var attributes = {
id: "flashContent",
name: "flashContent"
};
swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "http://swfobject.googlecode.com/svn/trunk/swfobject/expressInstall.swf", flashvars, params, attributes, function(){alert("Load Success");});
});
</script>
</head>
<body>
<div id="myContent">
<h1>Alternative content</h1>
<p>
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</p>
</div>
</body>
</html>
相關書籍: Flash CS4 Professional Digital ClassroomJavaScript: The Definitive GuideProfessional JavaScript for Web Developers (Wrox Programmer to Programmer)