« Death Blue | ホーム | Schedule in BGW! »

26 April

JavaScriptFlash

最近、気になることがあって、Internet Explorerで
Flash画像の上にマウスを持っていくと、その画像を取り囲むように
なんかの説明と枠が表示されるようになった。

「このコントロールをアクティブ化して使用するには
 クリックしてください」

クリックしないと、Flashの動作が始まらない。
ってか、なんて遠回りな言い方の説明なんだ。


デフォルトのブラウザがFirefoxだったんで発見が遅れた。
というか、最近IT関係のニュースを見ていなかったもんで(-_-)ゞ゛
飲み会の席で、そんな事実を知る。


原因としては、MSが公開したInternet Explorerの更新プログラムによって、FlashやShockwaveなどのActiveXコントロールで表示される一部のアクティブコンテンツの処理方法が変更されたのが根本的な原因らしい。

なんでも、その背景はドロドロの訴訟裁判みたいなものがあったよーだが
昔あったアニメーションGIFみたいなものだろう。


要は、ActiveX コントロールをアクティブ化しなければいけない。


んでだ。
自分のホムペには、意味なくたくさんのFlash画像をつぎはぎで使っている。
これをいちいち、クリックしてアクティブ化していたらキリがないってもん。


対策として、Adobeで配布していた方法で、実際にやってみた。
やり方は2通りあって、1つ1つのFlashに対して、JavaScriptで関数化するものと
ページ内のFlashを、NAMEとパラメータを引数にしてJavaScriptに渡す方法がある。

下記に記すものは、前者の1つ1つに対して行う方法であって
ページ内全部のFlashの修正(?)には適さないので注意。


---
概略として、今までHTMLに記述していた<object>、<embed>
または<applet>のタグをJavaScriptの"Document.write"を使って呼び出すというものだ。


(1)サンプルコードのダウンロード

AdobeからサンプルJavaScriptをダウンロードする。
 >>> Adobe JavaScript


(2)アップロード

解凍したJavaScriptファイルを、自分のサイトにアップロード。
ここでは[js]というフォルダに格納する。


(3)JavaScriptのインクルード

Flashを配置しているHTMLに、(2)で格納したJavaScriptをインクルードする。

TIPS >>> HTMLのHEAD内に下記のソースを記述

<script src="js/AC_ActiveX.js.js" type="text/javascript"></script>
<script src="js/AC_RunActiveContent.js" type="text/javascript"></script>


(4)Flashソース加工

HTML内に記述されているFlashソースを、メモ帳なんかにコピーしておく。

TIPS >>> FREE STYLEのトップ画像の場合(一部省略)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-...>
  <param name="movie" value="js/FSLogo.swf">
  <param name="quality" value="high">
  <embed src="js/FSLogo.swf" quality="high" pluginspage=...></embed>
</object>


(5)またまた、JavaScriptのインクルード

コピーしたメモ帳のファイルを、"FlashSrc.js"として、JavaScriptファイル格納フォルダに保存し
Flashを配置しているHTMLに、インクルードする。

TIPS >>> HTMLのHEAD内に下記のソースを記述

<script src="js/FlashSrc.js" type="text/javascript"></script>


(6)FlashをDocument.writeする

"FlashSrc.js"を開き、(4)でコピーしたソースを
以下のように"Document.write"で呼び出すように書き直す。

TIPS >>> JavaScript ソース

function RunIndexLogo() // FREE STYLE TOPロゴ
{
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-...>\n');
document.write('<param name="movie" value="js/FSLogo.swf">\n');
document.write('<param name="quality" value="high">');
document.write('<embed src="js/FSLogo.swf" quality="high" pluginspage=...></embed>\n');
document.write('</object>');
}


(7)HTMLからJavaScriptを使ってFlashを表示

HTMLに記述されているまでを消去し、以下にのように修正

TIPS >>> HTML内のFlashソースをJavaScriptにする

<script type="text/javascript">RunIndexLogo();</script>

ブラウザの設定で、JavaScriptが有効になっていれば 表示されていたあの枠などはなくなったはず。 左が、HTML埋め込みで、右が今回の適応した場合。




ただ、ローディングインジゲータなどが行われないのが気になる。
引き続き調査してフィードバックが必要。


« Death Blue | ホーム | Schedule in BGW! »