AS3 : SWFForceSize

2009.12.26
: HTML
: AS3 / swfobject
:

swfObjectでflashコンテンツを100%, 100%表示の時にswfforcesizeとCSSで最小サイズを設定できるswfobjectのプラグイン。

http://blog.pixelbreaker.com/flash/swfforcesize

swfobject2.1の場合

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="" />
　　<meta name="keywords" content="" />
<title>SITE　NAME</title>
<link rel="stylesheet" media="all" type="text/css" href="style/top.css" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfforcesize.js"></script>
<script type="text/javascript">
// <![CDATA[
var flashvars = {};
var params = {};
var attributes = {
id: "flashcontent",
name: "flashcontent"
};
swfobject.embedSWF("main.swf", "flashcontent", "100%", "100%", "9" ,"expressInstall.swf", flashvars, params, attributes);
// ]]>
</script>
</head>
<body>
<div id="flashcontent">
<p>当サイトをご覧いただくには、JavaScript が有効になっていることと、<br />
最新のFlash Playerプラグインが必要です。<br />
Flashムービーが正常に表示されない場合は下のバナーをクリックし、<br />
最新のFlash Playerをインストールして下さい。</p>
<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>
<script type="text/javascript">
var so = document.getElementById("flashcontent");
if (so) var forcesize = new SWFForceSize(so, 800, 600);
</script>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
/* ------------------------------------*/
/* RESET              　　　　　　       */
/* ------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
html {
height: 100%;
overflow: auto;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
a 		{color: #666666;text-decoration: none;}
a:hover {color: #FFFFFF;}
#flashcontent{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#flashcontent h1 {
font-size: 16px;
padding-top: 40px;
padding-left: 40px;
margin-bottom: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
padding-bottom: 20px;
border-top-width: 6px;
border-top-style: solid;
border-top-color: #999999;
}
#flashcontent h2 {
padding-left: 40px;
font-size: 12px;
font-weight: normal;
color: #999999;
padding-bottom: 5px;
}
#flashcontent h3 {
padding-left: 40px;
font-size: 12px;
font-weight: normal;
color: #999999;
padding-bottom: 5px;
}
#flashcontent h4 {
padding-left: 40px;
font-size: 12px;
font-weight: normal;
color: #999999;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
padding-bottom: 20px;
}
#flashcontent ul {
padding-left: 40px;
margin-bottom: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
padding-bottom: 20px;
list-style-type: circle;
list-style-position: inside;
font-size: 12px;
}
#flashcontent li {
padding-top: 3px;
padding-bottom: 3px;
}
#flashcontent p {
margin-bottom: 10px;
margin-top: 10px;
padding-left: 40px;
font-size: 11px;
color: #666666;
padding-bottom: 10px;
line-height: 130%;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}