FC2ブログにFLASHファイルをアップロードして云々というページで以前メモしておいた、猫のフラッシュをJavaScriptを使って設置する方法をこちらに再整理。

JavaScriptを介してにゃんこを表示させる方法だけれど、IEでは表示されてもFirefoxだとJavaScriptではうまく表示されていなかったのも気になっていたので、<embed>タグでダイレクトに表示させる場合と 外付けJavaScriptを使って表示させる方法を見直してみた。

1. フラッシュ猫は、ここにマウスをあて右クリックして保存

２．デモ

にゃんこ

３．上のデモのソースは次のようにしています。コピペするだけで表示が可能ですが、http://blog1.fc2.com/3/3ven/file/cat.swfの箇所は、ダウンロードした cat.swf を管理されているサーバー等へアップロードした URL に置き換えてください。

<table align="center"><tr><td> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="130" HEIGHT="200"> <PARAM NAME=movie VALUE="http://blog1.fc2.com/3/3ven/file/cat.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#ffffff> <EMBED src="http://blog1.fc2.com/3/3ven/file/cat.swf" quality="high" bgcolor="#ffffff" WIDTH="130" HEIGHT="200" NAME="cat" ALIGN="middle" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT></td></tr><tr><td align="center"><a href=http://blog1.fc2.com/3/3ven/file/my-cat-flash-howto.html target=_blank>にゃんこ</a></td></tr></table>

４．<embed>だけの場合　：

にゃんこ

この場合のコードは、次のような感じにした

<table><tr><td align="center"> <embed style="width:150px; height:200px;" id="neko" align="middle" type="application/x-shockwave-flash" src="http://blog1.fc2.com/3/3ven/file/cat.swf" quality="best" bgcolor="#ffffff" scale="NoBorder" salign="TL" FlashVars="playerMode=embedded"></embed> </td></tr><tr><td align="center"><a href=http://blog1.fc2.com/3/3ven/file/my-cat-flash-howto.html target=_blank>にゃんこ</a></td></tr></table>

５．うえの４．を外づけJavaScriptにまとめたケース：

まず、４．のコードをメモ帳などを使って、neko-text.jsといったファイルに保存。

style="width:150px; height:200px .. の箇所以外に、<table>でstyle設定すると置き場所のスペースにあわせやすい

bgcolor="#ffffff"の箇所は、#ffffffの代わりに、ここのカラーチャートなどを参照しながら、背景色を変えられる

次のようなコードを表示させたいところにいれる。

<script type="text/javascript" src="http://blog1.fc2.com/3/3ven/file/neko-text.js" charset="euc-jp"></script><noscript><font size="small">JavaScriptがオフになっているので表示されません。</font></noscript>

上の場合は、charset="euc-jp"にしているけれど、ノートパッドなどでneko-text.jsファイルを作成した場合は、charset="shift_jis"にする。（上の外付けJavaScriptコードを挿入するページの文字エンコードではないので注意）

<noscript> ... </noscript>（Javascriptがオフになっているブラウザの場合に表示されるメッセージ）をいれておいた方がよい

ネコの置き場所をマウスで変えてしまう

マウスでレイアを移動するを参考にして、ネコをマウスで移動させるようにしてみたみようとしたけど、うまくできない。（宿題）