flashをhtmlに貼り付ける方法 swfObject2.2

2011/02/10  javascript, チュートリアル

flashをhtmlに貼り付ける際には、swfObjectを使うのが通例です。

 

flashでパブリッシュをすると、htmlファイルも一緒に出来ますが、そのファイルに関しては、

ソースが汚いのと、代替の設定がしづらい。

ので普通は使いません。

 

swfObjectは下記サイトからダウンロードできます。

swfObject

現在、バージョンが2.2が最新です。バージョンが1.5等を使用している方は

新しいバージョンを利用しましょう。(動作が改善されています。)

 

使用方法

var vars = {};
var params = { menu:'false', bgcolor:'#ffffff'};
var attributes = { id:'flashContent', name:'flashContent' };
swfobject.embedSWF("index.swf", "flashContent", "800", "600", "9.0.0", "", vars, params, attributes );

と書きます。

書き込む場所はどこでも問題ないので(もちろんscriptタグでは囲う必要はありますが)、

HEADタグ内に書き込むとよいと思います。

 

簡単説明

varsはflashに値を渡したい場合に記述します。(flashvarsと言う方法です。)

paramsでは、menu表示オフと、背景を白としております。

以前、

最初に微調整を行う。為の準備

の設定もここで設定できますが、基本的にはここは何も記載しないようにしましょう。二重指定は推奨できません。

attributesでは、名前とidがありますが、原則として同じ名前をつけます。(違う名前にすると、ブラウザによっては、不具合があります。)

また、ここで指定したidの要素がflashに置き換わります。

embedSWFでは横800px 縦600pxに指定して、flashのバージョンは9以上で表示、9未満で代替画像の表示しております。

 

僕が設定をしている時は基本的に下記の設定で利用しております。

 

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="Keywords" content="キーワード" />
<meta name="Description" content="詳細説明" />
<title>タイトル</title>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var vars = {};
var params = { menu:'false', bgcolor:'#ffffff'};
var attributes = { id:'flashContent', name:'flashContent' };
swfobject.embedSWF("index.swf", "flashContent", "800px", "600px", "9.0.0", "", vars, params, attributes );
</script>
</head>

<body>
<div id="flashContent">
no-flash
</div>
</body>
</html>