画像にマウスを乗せるとFlashで効果音を流す。

Mac版IEやNetscapeでは問題があるためJavaScriptでブラウザ判別を行っています。そのためWindows版のIEでしか動作しないようになっています、Netscapeでエラーが出ることもありません。。なおFLASH4での方法のためそれ以上のバージョンでは多少異なると思います。

 

当然ですがMacromediaFlashが必用です

設置方法1.swfファイルを作る時の注意点

先ずは効果音が流れるSWFファイルを作成してください。
作成するFlashファイルは必ず1フレーム目でstop()して下さい
またサウンドを配置するのは2フレーム目からです。1フレームから付けると自動再生オプションに関わらず流れてしまうんで
その分フレームレートを上げておかないとマウスを乗せてから再生されるまでの遅れが目立つと思います。最低30fbpsぐらい
それからサウンドの同期モードはストリーミングにしてください(他のだと動かない)

サンプルのflaファイルのダウンロード(Ver4以上)ZIP圧縮
サンプルのflaファイルのダウンロード(Ver4以上)Flaファイルそのまま


設置方法2.swfファイルの記述。

ObjectタグはIE専用ということになっているんですが、Netscapeでも今後動くかもしれない可能性を考えて
IEの場合だけ動く様にしています。またMachintoshでは動作しないので、

解説しますととりあえずこのテキストをBODY内の好きな位置にコピー、ペーストしてください。
***.swfの部分はswfファイルのURLです。それぞれの環境にあわせて修正してください。
6行目、IDの部分が非常に大事になってきますのでスクリプトを改造する場合はここに気をつけてください。
WIDTH、HEIGHTも個人の環境にあわせて。ただしそれぞれ2以上無いと問題がある場合があります。
Autostart(param name=play)はfalseにしないとロードされた時点で再生されてしまいます。

設置方法3.JavaScriptを記述

これをHEAD内に。解説しますと同じようにブラウザ、OS判別後、

オンマウスならばサウンドオン、オフマウスでFlashのフレームを1に戻して停止させています。
詳しい説明をすると(とりあえず使いたい人は飛ばしてください。
window.onMouseSE.Play()
というところのonMouseSEというのが先ほどFlashに記述したIDです。
それさえあっていればPlay()で再生が可能というわけです。
同じようにgotoFrame(1)でフレーム1にということです、この数字を変えれば好きなフレームに行けますが
存在しないフレームでは何が起こるかわからないそうです(byMacromedia)こわいー


設置方法4.オンマウスイベントを記述

<a href="#" onMouseOver="flashSE('on')" onMouseOut="flashSE('off')">ここにマウスを重ねる </a>
BODY内に以上の記述を追加。
勿論画像にリンクさせている場合でもOKです。用はonMouseが使用できれば何でも。

以上でOKです。動かない場合はFLASHのID、swfファイルが正しいか、
ブラウザ及びOSがWindowsのIEであるかを確認してください。

こうすると以下のようになります(WinIEのみ)


ここにマウスを重ねる



マウスを乗せたときに音が出て、再生中にマウスを放すと音が止まれば成功です。
swfファイル作成時点で問題があるのかチェックする場合はテストで使ったswfファイルをダウンロードして
やってみてください、それでもダメな場合はJavaScriptの記述もしくはブラウザ側の問題かもしれません。
test.swf
勿論Flashでメニュー等を作れば普通に出来ますが、
メニューにFlashなどは使いたくない場合などで活用できるかと思います。


マウスを重ねた画像を変更するスクリプトと併用するのもいいと思います。

人気コンテンツ