FLASHのお勉強_アクションスクリプトaction script

FLASHのお勉強　ーアクションスクリプトの実践的事始めー

(24)波　紋　（外部ファイル・クラスの使用）　　2006/2/15

　今回のお勉強は、定番の波紋。　通常、透明の波紋を描くときは、虫眼鏡の要領で倍率の違う写真を重ね合わせて、波紋をマスクにしてトゥイーンを掛ける方法を使うが、ここでは、ver.8で使えるようになったフィルター機能のベベルを使って、盛り上がった波紋状の楕円を描き、これをかなり透明にしてトゥイーンを掛ける方法を試みる。
　なお、今回は、波紋の動きのクラスを外部ファイル（.as）で作成し、これをタイムラインで呼び出すスクリプトとした。　クラスをわざわざ作るほどのプロジェクトではないのだが、こういう方式を勉強する手始めとしては丁度いい材料に思える。　このお勉強を機に、後で見ても分かりやすいスクリプトを心がけて書く癖がつくとよいのだが。

　サンプル（写真は、http://danny.oz.au/travel/new-zealand/photos.html からの転載です）

ステージの設定・及び準備
（１）w500､h375のステージを設定する。
（２）背景となる写真(画像)をステージいっぱいに配置する。
（３）楕円ツールでステージに、ｗ400、ｈ100のドーナツを描く（幅は適当)。
　　　　ドーナツの書き方：まず、縁無し塗りつぶし楕円を描く。中心を同じにして色を変えて小さめの楕円を重ねて描く。
　　　　　　　　　　　　　　　小さめの楕円のみを選択して削除する（オブジェクトの描画をｏｆｆにする）。
（４）ドーナツをシンボルに変換し、hamonと名づける。
（５）hamonを選択し、フィルターのメニュータブからベベルを選択し、以下の設定をする。
　　　タイプ：内側、ぼかし：水平、垂直ともに5、強度：100％、角度：45、幅：5、画質:低　（これらは好みで変えても可)
（６）ステージから波紋を削除する。

スクリプト（makeRipple.ａｓファイル）
ａｓファイルはｓｗｆファイルと同じディレクトリーに置くこと

class makeRipple extends MovieClip{

　private var default_ripplescale:Number;
　private var final_ripple_xscale:Number;
　private var final_ripple_yscale:Number;
　private var speed_scale:Number;
　private var speed_alpha:Number;

　function makeRipple(i) {

　　var $hamon:String = "hamon"+i;
　　_root.attachMovie("hamon", $hamon, i);
　　this = eval($hamon);
　　this._x = Stage.width/2;
　　this._y = Stage.height*4/5;
　　default_ripplescale=10;
　　final_ripple_xscale=100;
　　final_ripple_yscale=60;
　　speed_scale=10;
　　speed_alpha=50;
　　this._xscale = this._yscale=default_ripplescale;
　　this._alpha = 15;

　　this.onEnterFrame = function() {
　　this._xscale += (final_ripple_xscale-this._xscale)/speed_scale;
　　this._yscale += (final_ripple_yscale-this._yscale)/speed_scale;
　　this._alpha += (0-this._alpha)/speed_alpha;
　　}
　}
}

MovieClipクラスを継承するmakeRippleクラス
以下各変数のタイプの定義
hamonの大きさ初期値
水平方向のhamon大きさの最終値
垂直方向の　　　〃　　　　　　　〃
波紋が大きくなるときの速度係数
アルファ値の変化の速度係数

関数makeRipple（引数)
　ここでは、波紋の数とhamonナンバー
hamon1,2,3,,,,の定義
ステージにインスタンスhamon1,2,3,,を生成
文字列のthisへの関連付け(変数として)
hamon中心点のｘ座標を画面中央に
hamon中心点のy座標を上から4/5に
hamonの初期の大きさ
hamon水平方向の最終大きさ
hamon垂直方向の最終大きさ
hamonが大きくなる速度
hamonが消えていく速度
大きさ初期値設定
アルファ値設定

フレームアクション
波紋が広がる

波紋がだんだん透明になり消える

スクリプト（FRAMEに）
swfファイルの、FRAME　1,6,11,33にキーフレームを挿入し各FRAMEに以下のスクリプトを書き込む

FRAME 1：
var hamon:makeRipple=new makeRipple(1);
FRAME 6：
var hamon:makeRipple=new makeRipple(2);
FRAME 11：
var hamon:makeRipple=new makeRipple(3);
FRAME 33：
var hamon:makeRipple=new makeRipple(4);

新しいmakeRipple（引数）を生成
ｉ＝１(hamon1)

ｉ＝2(hamon2)

i＝3(hamon3)

ｉ＝4(hamon4)

　以上のように、外部ファイルに波紋が発生・拡大・消失するムービークリップをクラスmakeRippleとして作成・定義しておくと、タイムラインからそれを呼び出して、画面上に波紋のムビークリップを発生させることが出来る。
　なお、makeRippleというクラス名、定義ファイル名、function名は同じにしておくことと、functionの引数を共通にしておくことが注意点である。このスクリプト記載のfunctionはコンストラクタ関数とよばれ、ｓｗｆファイルから引数つきでまず呼び出される関数である。

HOME　　　お勉強総リスト

FLASHのお勉強 ーアクションスクリプトの実践的事始めー

FLASHのお勉強　ーアクションスクリプトの実践的事始めー