ウェブ、ショウジン

SWFObjectを使ってFlash(swfファイル)を表示する

2010-9-11
Category
Web技術

FlashによるswfファイルをWebページに埋め込んで表示するにあたって、これまで知っていたobjectタグとembedタグを使用してのやり方では色々と面倒だということがわかってきたので、これをやめてJavaScriptのSWFObjectというライブラリを使ったやり方に変えることにした。

SWFObjectを使うことのメリットとしては、ソースがかなり整理されてキレイスッキリになることと、IEでの「クリックしないといけません」という、Flashムービーを表示する前の余計なひとてま(ユーザ側の)が解消されることや、IEの一部(versionは7だったか、詳細は忘れたけど)でCSSのz-indexによる重なり順の指定が効かないなどの問題を解消できる点などがあげられると思う。

他にも、Flashムービーを表示しない場合(Flash Playerがインストールされていないとか)の代替イメージ(テキスト等でも、任意のものを代替表示可能)が表示できるとか、なかなか便利で優れものなライブラリであったりする。

ただ、SWFObjectにはバージョンがいくつかって、それによって各種パラメータ等の記述の仕方、内容が異なるので、そこは注意が必要。(使用するバージョンによって記述の仕方が異なる)

以下は自分が使用した、バージョン1.5の例。

まず、MIT Licenseで公開されているSWFObjectのサイトへ。

このページ内のDownloadをクリックして、めざす1.5をダウンロードするために「Download SWFObject 1.5」というリンク文字列をクリックする。すると、swfobject.zipというzipファイルをダウンロードできるので、これをダブルクリックで展開。

展開して出現したディレクトリ「swfobject1-5」の中にある「swfobject.js」が、目指すライブラリで、swfobjectを使用してのswfファイルのWebページへの埋め込みは、まずこれを外部リンクで読み込むことから始まる。

(x)htmlのheadタグ内に

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

のようにして、swfobject.jsを読み込む。

そして、ページ上でswfファイルを表示したい箇所に以下のように記述する。

<div id="image">

	   <div id="flashcontent">
	       <ul>
	       <li>このテキストが表示されている場合は、以下のURLよりFlash Playeryのダウンロードが必要です。(Flash Playerがインストールされていると、より当ホテルで楽しめる景観やお料理の数々を映像でご覧いただくことが可能です)</li>
	       <li><a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player を取得" /></a></li>
	       </ul>
	   </div>
		<script type="text/javascript">
			var so = new SWFObject("globalTop.swf", "globalTopMainVisual", "1300", "338", "10", "#ffffff");
			so.addParam("wmode", "transparent");
			so.write("flashcontent");
		</script>
	<!-- / div#image --></div>

以下はjsの記述部分について。

  • globalTop.swf: 表示したいswfのファイル名(パス指定)
  • globalTopMainVisual: objectやembedタグのID(任意のもので構わない)
  • 1300: Flashムービーのwidth
  • 338: Flashムービーのheight
  • 10: 必要とするFlashPlayerのバージョン番号
  • #ffffff: 背景色
so.write("flashcontent");

という記述で、div#flashcontent内の内容が、swfファイルを表示出来ない場合(FlashPlayerがインストールされていない)出力される。(代替画像でもいいし、この例のように代替テキストでもいい)

so.addParam("wmode", "transparent");

上記の記述は、swfファイルの上にCSSのz-indexを使って他のコンテンツレイヤー(divによるblock要素など)をのせる(重ねて表示する)場合に必要なもの。詳しいことは忘れたけど、とりあえずこの記述をしておけば問題は解消された。(この記述がないと、z-index指定による重なり順の指定が効かないブラウザがあった)

その他にも指定できるパラメータは色々あるようだったけれど、とりあえずは不要だったのでそのへんはまた必要になったときに調べることにして、これで一応の覚え書きは完了。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿