Kinarie&May

SWFObjectを使ってみました

[Flash]

当サイトで配布しているFlash素材ですが、設置方法に書いてある通りに設置するとIEでの表示の際に
「クリックするとこのコントロールをアクティブにして使用します」(IE7の場合)と表示され、一度クリックしないと使用できないようになっています。

それを回避するためにJavaScriptでFlash表示していたのですが、最近別件でいろいろ調べていたら、「SWFObject」が現状でのswfファイルの表示に最適ではないかということが書かれていたので早速試してみました。

詳しい説明や設置方法はtrick7.com blogさんのを参照もらうとして、今回はとりあえず当サイトで配布しているフォトリーダーを例に紹介したいと思います。
まず、本家のサイト（英語）から、swfobject.zipをダウンロードします。
zipファイルを解凍するといろいろ入っているのですが、必要なのは「swfobject.js」だけですのでそれを、わかりやすい場所にアップします。今回はルートの階層にjsフォルダを作成し、その中にアップします。

後は、swfを表示させたい場所に以下のように記述します。

<script type="text/javascript" src="http://www.kinarie.com/js/swfobject.js"></script>

<div id="photoreader">
ここに代替テキストまたは画像を挿入
実際にswfが表示されるとこのテキストは表示されません
</div>

<script type="text/javascript">
 var so = new SWFObject("http://www.kinarie.com/flash/photo_reader/photo_reader210.swf", "photoreader", "130", "150", "8", "#ffffff")
 so.addParam("quality", "high");
 so.addParam("allowScriptAccess", "always");
 so.addParam("wmode", "transparent");
 so.addParam("scale", "noscale");
 so.addParam("align", "middle");
 so.addVariable("xmlURL", "http://www.kinarie.com/photoreader.xml");
 so.addVariable("setup1", "111012");
 so.addVariable("setup2", "2015");
 so.addVariable("setup3", "900090009");
 so.write("photoreader");
</script>

以上で設置完了です。
書かれているｊｓファイルやswf、xmlのパスについては相対パスでも可能ですが、ブログなどでは絶対パスの方がどこにでも同じ記述で設置できるので、こちらをお勧めします。
赤文字の部分は同じである必要があります。
また1ページに複数のFlashファイルを設置する場合、最初の一行目の部分はひとつだけでOKなのですが、そのときはすべてのFlashの表示位置より手前に記述しなければいけません。
その他、詳しいパラメータの受け渡しや使用例はtrick7.comさんの本家の翻訳をご覧ください。

2007,04,17 | CM (0) | TB (0) | wrote by Masa