2010-01-05

「swfobject.js」を使うと、HTMLに簡単にFlashやFlexで作ったSWFファイルを埋め込むことができます。
以下、手順です。

swfobject.jsを本家deconceptからDL

SWFObject: Javascript Flash Player detection and embed script

swfobject.jsへのパスをhtmlファイルのhead要素内に記述

<script language="JavaScript" src="swfobject.js"></script>

body要素内にdiv id=""でSWFファイルのdivisionを指定

<div id="swfLayer"></div>

こんな感じ

JavaScriptの記述

<script language="JavaScript" type="text/javascript">
<!--
	var url = "testSWF.swf";
	var so = new SWFObject(url, "swfFile", "100%", "100%", 9, "#ffffff", "high");
	so.write("swfLayer");
-->
</script>

var url = "testSWF.swf";では、SWFファイルのパスを指定しています。
var so = ...では、SWFObjectを生成しています。
引数は、
1.SWFファイルのパス
2.objectタグやembedタグのID
3.Flashコンテンツの幅
4.Flashコンテンツの高さ
5.Flash Playerの必須バージョン
6.Flashコンテンツの背景色
7.Flashコンテンツのクオリティ
となっています。
※Flexの場合、MXMLアプリケーションの「Application」タグで「width」や「height」を設定した場合は3番目と4番目の値をその値にあわせる必要があります。%指定なら問題はありません。
個人的に2はあんまり気にしなくていい気がします。
ちなみに上の場合var urlでパスを既に変数に格納しちゃってますが、new SWFObject()の第一引数に直接"testSWF.swf"と書けばvar urlはいりません。

so.write("swfLayer");は、htmlのbody要素内に記述した

<div id="swfLayer"></div>

をさしています。
要するにhtml要素の中身を置換して実行しています。

FlashでSWFを作るときは自動的にjsファイルが作られて、
さらにはそれを埋め込んだhtmlも作ってくれちゃいますが、
Flexだとこういうのも自分でやらなきゃならないんですね。
（多分、Flex Builder使えば勝手に作られるんじゃないかと思いますが）

a bit of friction

冬休み終わりまであと1週間。何か作りたいな

「swfobject.js」を使ってHTMLにSWFファイルを簡単に埋め込む