星期六, 2月 27, 2010

SWFObject搭配Flash Scaler,另一個實現全螢幕Flash的小技巧!

先前提到SWFFit這個補強全螢幕Flash不足的小工具,但Flash Scaler其實也是一個滿不錯用的工具!用法不難,同樣要先載入Flash Scaler的javascript(flashscaler.js):
<script type="text/javascript" src="js/flashscaler.js"></script>

然後確定我們要用另一個DIV(ID名稱設為「flashcontent」)將SWFObject要指定的flash DIV給包起來,將底下這段程式碼放進body裡面:
<script type="text/javascript">
  scale = new FlashScaler("flashcontent",1000,650);
</script>

它的寫法規則是:FlashScaler("DIV名稱",最小寬度,最小高度);。
並且為DIV新增一個CSS樣式:
#flashcontent {
  overflow: hidden;
}

Flash Scaler有幾個特別要注意的地方:
1. 指定的DIV必須要包住SWFObject指定的Flash DIV;
2. 指定的DIV必須是要新增「overflow:hidden;」屬性。

參考的完整程式碼如下:
<!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" xml:lang="en" lang="en">
<head>
<title>Scalable Flash with scrollbars (SWFObject dynamic publishing example)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="StyleSheet" href="css/main.css" type="text/css" media="screen,print" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/flashscaler.js"></script>
<script type="text/javascript">
var flashvars = {};

var params = { };
params.scale = "noScale";
params.wmode = "transparent";

var attributes = {};

swfobject.embedSWF("fullscreen.swf", "myFlash", "100%", "100%", "8", false, flashvars, params, attributes);
</script>
<style type="text/css">
<!--
html, body { margin: 0;padding:0;background: #351100;overflow:visible;height:100%; }
#flashcontent {
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="flashcontent">
<script type="text/javascript">
scale = new FlashScaler("flashcontent",1000,650);
</script>
<div id="myFlash">
<h2>SORRY!</h2>
<p>We have detected that you do not have the Flash Player plugin required to view this website.</p>
<p>Download the latest <a href="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">Flash Player</a>
for free! It takes just a few minutes to download and install.</p>
</div>
</div>
</body>
</html>

1 則留言:

Snchun 提到...

這篇文章幫我很大的忙 , 肛溫!!