jump to navigation

[Flash] HTML内SWF埋め込みについて2 9月 1, 2009

Posted by hyhy in Adobe系.
Tags: ,
comments closed

将来を見据えた、新たなHTML内SWF埋め込み用コードの考察

Flash素材の設置方法

FlashVarsでHTMLからSWFに変数を渡す

広告

[Flash] HTML内SWF埋め込みについて 7月 10, 2009

Posted by hyhy in ActionScript3.0, Adobe系.
Tags: ,
comments closed

「SWFObject」を使った埋め込みが主流となっていますが、ブラウザとFlashPlayerのバージョンの組み合わせや、パラメータ値によって、不具合が発生するので、基本的な方法をまとめてみました。

■OBJECTタグ・・・IE用
■EMBEDタグ・・・IE以外用
このような2段構えの構造になっている理由は、IE以外のWebブラウザではobjectタグのclassid属性などのサポートが不十分なため、SWFを表示する際に必要な情報を取得できないからです。そこで、objectタグの内側に、IE以外のWebブラウザ用でもちゃんと解釈できるembedタグを入れ子にして置いているわけです。(X)HTMLの仕様では、解釈できないobjectタグがある場合、そのタグの内側へと代替コンテンツを求めるようになっています。レガシーコードの場合、IE以外のWebブラウザは外側のobjectタグを解釈できないため、その代わりに内側にあるembedタグを解釈しようとします。

(X)HTMLの仕様において、embedタグはdeprecated(廃止予定)とされているため、将来リリースされるWEBブラウザではembedタグをサポートしなくなる可能性があります。

参考サイト

【記述例】
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0&quot;
WIDTH="400" HEIGHT="50" id="fi1" ALIGN="">
<PARAM NAME=movie VALUE="fi1.swf">
<PARAM NAME=loop VALUE=true>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#aaaaff>
<EMBED src="fi1.swf" loop=true quality=high bgcolor=#aaaaff WIDTH="400" HEIGHT="50" NAME="fi1" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"&gt;
</EMBED>
</OBJECT>

■属性およびパラメータの説明
1)classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

ActiveXコントロールの識別に使われます。OBJECTタグにのみ使用します。

2)codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0&quot;

Flash ActiveXコントロールがインストールされていない場合にどこからダウンロードしてくるかの指定です。OBJECTタグにのみ使用します。
バージョンの確認が必要ない場合「swflash.cab#version=10,0,0,0」は省略できます。

3)WIDTH="400"

幅を指定します。ピクセル数での指定以外に「WIDTH="80%"」のようにするとブラウザウィンドウに対する比率指定も出来ます。

4)HEIGHT="50"

高さを指定します。ピクセル数での指定以外に「HEIGHT="20%"」のようにするとブラウザウィンドウに対する比率指定も出来ます。

5)id="fi1"

JavaScriptやVBScriptなどから参照する場合に使われます。EMBEDタグでは「NAME="fi1"」となります。
必要がない場合は省略できます。

6)ALIGN="L"

ブラウザウィンドウがムービーより小さい場合ムービーの一部が切り取られるのですが、その際どこを基準にして表示するかの指定です。
「L」[左]「R」[右]「T」[上]「B」[下]を指定できます。
省略すると中央が基準になります。

7)

ロードするswfファイルの名前を指定します。EMBEDタグでは「src="fi1.swf"」となります。

8)

ループするかしないかを指定します。EMBEDタグでは「loop=true」となります。
「true」でループします。「false」でループしません。
省略すると「true」を指定したことと同じになります。

9)

画質を指定します。次の6種類の中から1つ指定ができます。画質を高くするほど処理が重くなります。EMBEDタグではquality=highとなります。
「low」[低]アンチエイリアスされません。ビットマップはスムージングされません。
「medium」[中]若干アンチエイリアスされます。ビットマップはスムージングされません。
「high」[高]全てアンチエイリアスされます。ただしアニメーションを含むビットマップはスムージングされません。
「best」[品質優先](最高画質)全てアンチエイリアスされます。全てのビットマップはスムージングされます。
「autolow」[自動/低]低画質でスタートしプロセッサの処理速度に合わせて画質が自動調整されます。
「autohigh」[自動/高]高画質でスタートしプロセッサの処理速度に合わせて画質が自動調整されます。
省略すると「high」を指定したことと同じになります。

10)

背景色を指定します。EMBEDタグでは「bgcolor=#aaaaff」となります。
#RRGGBB方式でしていします。
省略するとFlashムービー内で指定されている色になります。

11)

ムービーがロードされたのと同時に再生するかしないかを指定します。EMBEDタグでは「play=true」となります。
「true」で再生します。「false」で再生しません。
省略すると「true」を指定したことと同じになります。

12)

表示スケールを次の4種類から指定できます。EMBEDタグでは「scale=showall」となります。
「showall」[すべて表示]縦横比を維持し指定サイズ内にムービー全体を表示します。
「noborder」[枠なし]縦横比を維持し指定サイズいっぱいにムービー全体を表示します。
「exactfit」[フィット]ムービーの縦横比が変化し指定サイズにぴったり収まるように表示されます。
「noscale」[拡大/縮小なし]Flashムービー内で指定されているサイズで表示されます。伸縮されません。
省略すると「showall」を指定したことと同じになります。

13)

ムービーの表示領域のどこに揃えて配置するか指定します。EMBEDタグでは「salign=L」となります。
「L」[左]「R」[右]「T」[上]「B」[下]「TL」[左上]「TR」[右上]「BL」[左下]「BR」[右下]を指定できます。
省略すると中央に揃えられます。

14)

ムービー内の相対パス指定の基準になるディレクトリやURLを指定します。EMBEDタグでは「base=”http://www.○○○○/flash”」となります。
省略するとFlashムービーが貼り付けられているhtmlの位置が基準になります。

15)

Windowsでは右クリック、MacintoshではCommandキーを押しながらクリックした際に表示されるメニューについて設定します。
EMBEDタグでは「menu=true」となります。
「true」で全てのメニューが表示されます。「false」で省略されたメニューを表示します。
省略すると「true」を指定したことと同じになります。

16)

Windows版のInternet Explorer 4.0以上で機能します。次の3種類の指定ができます。EMBEDタグでは「wmode=window」となります。
「window」[標準]ページ上で専用の四角形の窓でムービーが表示されます。
「opaque」[不透明表示]ムービーの背後にあるものはすべて表示されなくなります。
「transparent」[透明表示]ページの背景がムービーの透明な部分を通して透けて見えるようになります。
省略すると「window」を指定したことと同じになります。

15)PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer&quot;

Flash Playerプラグインがインストールされていなければダウンロード出来るようにします。EMBEDタグにのみ使用します。

16)swliveconnect=false

ムービーの初回ロード時にJavaを開始するかしないかを指定します。「true」で開始します。「false」で開始しません。EMBEDタグにのみ使用します。
省略すると「false」を指定したことと同じになります。