SWFObject 2.2の組み込み
も・く・じ
Flashの制作はまだまだ素人でswfの埋め込みにも前々からかなり苦労しています。
そんなときに見つけたのが「SWFObject」。
その頃はver.1.5だったんですが2.2になった現在、簡単なFlashを再度作成することになったので組込方法を調べ直してみました。
組込のやり方
まずはSWFObject2.2をGoogle Codeからダウンロードします。
現時点ではswfobject_2_2.zip を、そしてHTML埋め込みコードを自動生成させたい場合はswfobject_generator_1_2_html.zipも同時にダウンロードしておきます。
（今回はジェネレーターは必要ないのでダウンロードしません）
実際に使用するのは解凍したフォルダの中の「swfobject.js」のみ。
ただし状況によっては同梱の「expressInstall.swf」を使用する場合もあります。
HTMLの書き方としては、オールマイティっぽい「スタティックパブリッシング」とjava scriptが無効時は機能しない「ダイナミックパブリッシング」の2つがあります。
前者はブラウザを選ばず広くFlashの再生が可能らしいんですがHTMLコードがやや煩雑なので、今回は比較的シンプルなコードの後者（ダイナミックパブリッシング）を使用します。
使用するswfファイル名を仮に「test.swf」とし、swfファイルを表示させるブロックidを「test」とします。
<head>～</head>に以下を加筆します。
|
0 1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="（swfobject.jsのパスを記述）"></script> <script type="text/javascript"> var flashvars = {}; var params = { menu:'false' }; var attributes = {}; swfobject.embedSWF("test.swf"（swfファイルのパス）, "test"（swfを表示させるID名）, "780"（横サイズ）, "200"（縦サイズ）, "9.0.0"（3桁の要求する flash player のバージョン）,"expressInstall.swf"（省略可）, flashvars, params, attributes); </script> |
var のあとの各パラメータは詳しくはわからないのですべて {}; でもいいんですが、menu:'false' は右クリックしたときにメニューを表示させない設定のようなのでお好みで。
allowfullscreen:'true' を付けると全画面表示を許可します。
scale：'noScale' なども可能で、各パラメータを重ねるときはパラメータの最後に「,」を付けます。
expressInstall.swf は、これを サーバーにアップしておくとFlashのバージョンが低いときに自動でアップデートを実行してくれるアプリのようですが省略も可能です。
<body>には以下を加筆します。
|
0 1 2 3 4 5 6 7 8 |
<div id="test"> <h2>（適当な文章）</h2>（←ここは省略可） <p>この画面をご覧になるにはFlash Player9以降が必要です。インストールされていない場合、下記バナーより「Flash Player」をダウンロードしてご覧ください。 <a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="www.adobe.com/images/shared/download_buttons/get_flash_player.gif" /></a> </p> </div> |
極端なことを言えば<div>ブロック内には何も書かなくてもOKです。
Flash playerがインストールされてない環境やSEOを考慮して、上記コメントやFlashのダウンロードサイトをリンクさせるなら書いておいた方がいいぐらいのものでしょう。
Flash表示用 <div> id に幅や高さなどのCSSを設定するとおかしな表示になってしまうので、CSSは設定しないのが無難なようですね。
以上です。
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓