PePcoMiX blog

下の Flash は、object と embed のタグを利用したよくある Flash の表示方法です。

 この Flash は、以下の様に、Flash CS3 からパブリッシュされた html の object 部分を切り出して張りつけています。swf へのパス部分は、アップロードした先の URL へ書き換えました。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="320" height="240" id="kaleidoscope" align="left">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://pepcomix.net/pepcomix_mt/2007/09/12/kaleidoscope.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="salign" value="lt" /><param name="bgcolor" value="#ffffff" /> <embed src="http://pepcomix.net/pepcomix_mt/2007/09/12/kaleidoscope.swf" menu="false" quality="high" salign="lt" bgcolor="#ffffff" width="320" height="240" name="kaleidoscope" align="left" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

 ただ、この方法では、Flash 上にマウスカーソルを持ってくると『このコントロールをアクティブ化して使用するにはクリックしてください。』というメッセージが表示されます。

これでは、キーボードやマウス入力を必要とする様なインタラクティブな Flash の場合、ユーザーに Flash を一度クリックしてもらわないと、操作ができません。

この現象の回避策として、JavaScript の document.write() を利用し、html のソースを書きだすという方法が有名です。

表示する Flash ごとに直接書く事もできますが、今後、面倒くさいので、汎用的に利用できるスクリプトを書いてみました。

show_swf.js

function show_swf( swf_id, swf_name, swf_path, swf_width, swf_height){
 document.write('<object classid="clsid: ');
 document.write('d27cdb6e-ae6d-11cf-96b8-444553540000" ');
 document.write('codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ');
 document.write('width="');
 document.write( swf_width);
 document.write('" height="');
 document.write( swf_height);
 document.write('" id="');
 document.write( swf_id);
 document.write('" align=""> ');
 document.write('<param name="allowScriptAccess" value="sameDomain"> ');
 document.write('<param name="movie" value="');
 document.write( swf_path);
 document.write( '>');
 document.write('<param name="menu" value="false"> ');
 document.write('<param name="quality" value="high"> ');
 document.write('<param name="bgcolor" value="#ffffff"> ');
 document.write('<embed src="');
 document.write( swf_path);
 document.write( swf_name);
 document.write('" menu="false" quality="high" ');
 document.write('bgcolor="#ffffff" width="600" height="240" name="');
 document.write( swf_name);
 document.write('" ');
 document.write('align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> ');
 document.write('</embeded></object>');
 
}

このスクリプトをサーバーの任意の場所へ置き、以下の様な html を書く事で、Flash の表示ができます。

私の場合は、スクリプトを MT4 の plugins ディレクトリに置きました。

<script language="javascript" src="http://pepcomix.net/mt/plugins/Show_swf.js"></script>
<script language="javascript">
  <!--
    show_swf( "kaleidoscope", "kaleidoscope.swf", "http://pepcomix.net/pepcomix_mt/2007/09/12/", "320", "240");
  //-->
</script>

また、似たような JavaScript は、Adobe からも提供されています。

http://www.adobe.com/jp/devnet/activecontent/articles/devletter.html

AC_FL_RunContent という関数を利用すると、同じようにアクティブ化の問題を回避する事ができます。

上記のサイトからダウンロードできる Zip ファイルの中の Scripts ディレクトリに.js ファイルがあるので、これをサーバーの任意の場所へアップロードします。

そして、 以下の様な html を書きます。

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="http://pepcomix.net/mt/plugins/AC_RunActiveContent.js" language="javascript"></<script language="javascript">
 if (AC_FL_RunContent == 0) {
  alert("このページでは \"AC_RunActiveContent.js\" が必要です。");
 } else {
  AC_FL_RunContent(
   'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
   'width', '320',
   'height', '240',
   'src', 'kaleidoscope',
   'quality', 'high',
   'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
   'align', 'left',
   'play', 'true',
   'loop', 'true',
   'scale', 'showall',
   'wmode', 'window',
   'devicefont', 'false',
   'id', 'kaleidoscope',
   'bgcolor', '#ffffff',
   'name', 'kaleidoscope',
   'menu', 'false',
   'allowFullScreen', 'false',
   'allowScriptAccess','sameDomain',
   'movie', 'http://pepcomix.net/pepcomix_mt/2007/09/12/kaleidoscope',
   'salign', 'lt'
   ); //end AC code
 }
</script>

実はこのスクリプトも Flash CS3 でパブリッシュされた html の一部を切り出し、スクリプトや swf の URL を修正したものです。

Flash 8 でも、アップデートパッチをある事で、同じような JavaScript が書きだせるのかもしれません。（未確認）

Flash CS3 でパブリッシュされる html には、JavaScript が利用できない環境であった場合でも、ちゃんと表示出来るように <noscript> のタグもかかれています。

ちなみに、このページの最初に貼ってある Flash も CS3 でパブリッシュされた html の URL などを少し修正し、張り付けただけのものです。

Movable Type などのブログで swf を表示する場合、 object と embed のタグを利用して記事を書けば、WYSIWIG 上でもちゃんと Flash が表示された状態で編集できるので便利ですが、インタラクティブな Flash を張る場合、ユーザーに Flash を一度クリックしてもらい、アクティブ化する事を促さなければなりません。

逆に、JavaScript を利用した表示方法では、WYSIWIG の編集画面には何も表示されませんが、最初からアクティブな状態で表示されるので、クリックする様に促したりする必要もなく、スマートです。

ブログの記事を書く時は、状況によって使い分けると便利かもしれません。