マウスで水面が波立つ不思議なフラッシュ”Water Ripple Effect”

GIFアニメの作り方と素材庫

今日は、マウスを画像上で動かすと波紋が広がっていくフラッシュです。

 海賊船もろとも海中に沈んだ財宝は数知れずあると思います。

 今日は、その海中に眠る海賊の財宝をフラッシュで作ってみました。スマホでは残念ながら表示できません。PCでご覧下さい。

画像版

 ”Water Ripple Effect”と呼ばれる効果を使っています。ずっとこれを作りたいと思っていたので、やっとできてうれしいです。下の画像上でカーソルを動かすと波紋が広がります。

マウスで動くフラッシュ版

 マウスで水中の宝箱を触っているような錯覚に陥ります。

 フラッシュが使えなくなったので削除しました。

作り方

 フラッシュは得意ではないので、作り方を説明できるほど理解していません。

 以下のサイトの作り方を参考にしました。

 実は、この”Water Ripples Effect”の作り方を公開しているサイトは三つあります。主要なサイトは、たしか、最初にこの効果を作ったDavid氏のサイトで、シェアウエアとなっています。そして、困ったことに、制限付きのお試し版を使ってできあがったswfファイルは開けないようになっています。つまり、役に立たない。シェアウエアなので購入しようかと思ったのですが、既にサービスは終了しているらしく、購入もできない。最悪です。フラッシュの勉強にはなりましたが、貴重な時間を無駄にしました。

 別のサイトで公開している方法はよく分からない。

 最後に見つけたのが以下のサイトです。このサイトでflaファイルとasファイルをダウンロードできます。スタンドアローンなので、swfファイルだけで表示できます。

 『Emanuele Feronato』というサイトの『Creation of realistic Flash water ripples with AS3』という記事です。

 あきらめかけていたのですが、やっとできてうれしいです。これを作るには、Abobe Flash CS3以降が必要です。
 別バージョンも作ってみました。泡も作りました。きれいに仕上がっていると思います。

 【画像版】
 沈没船と少女です。

 【フラッシュ版】

フラッシュが使えなくなったので削除しました。

 【画像版】(写っているのはうちの子供たちです。)

水中のネコ師

 【フラッシュ版】

フラッシュが使えなくなったので削除しました。