流星が流れるような感じにしたいんです。

Question

空の写真を昼間の明るい感じから夜になって流星がたまに流れる…
というようなFlashを作りたいんですが
肝心の流星がたまに流れるというのがつくれません。
作り方をご存知の方いらっしゃいませんか？
よろしくお願いします。

DPE · Accepted Answer

主に「流れ星がたまに流れる」部分の作り方になりますが、次のように考えてはいかがでしょう。


流れ星をムービークリップとして作ります。星の動きや消えるアニメなどは、ムービークリップのタイムラインを使って予め作成しておきます。
できたムービークリップのインスタンスをステージに配置し、普段は非表示にしておきます。

流れ星を出すまでの時間を、乱数を使ってランダムに決めます。
その時間だけ待機したら、流れ星のムービークリップを表示し、フレーム１から再生します。

連続して流れ星が出てくると流星群のようにせわしなくなってしまいますので、１回に１つだけ流れるようにします。
これはつまり、流れ星が出現したら、今流れている星のアニメが終了するまで待機するということです。
流れ星のアニメの終了は、ムービークリップの再生しているフレームを監視して検出します。

ここまでが１回の処理になります。
流れ星のアニメが終了したら、待機時間を決める処理に戻ります。
以降は一連の処理の繰り返しです。


メインの処理は、全体の流れを指揮する関数を１つ作り、enterFrame イベントを利用してフレームレート分の１秒ごとにこの関数を連続的に呼び出します。
待機時間の設定・一定時間待って流れ星を出す・流れ星が消えるまで待つといった処理の分岐は、各処理に番号を割り当て、この番号を変数で管理して switch 文で処理を分けることで実現できます。

------------------------------------------------------------

作り方の一例です。


まず、流れ星のムービークリップを作ります。
星が流れる動きや徐々に消える演出は、モーショントゥイーンやフレームアニメなどで作ってください。
ガイドレイヤーを使うと、角度を付けたり曲線的な動きを作ることができます。

連続して再生されると困るので、ムービークリップの最後のフレームに stop(); アクションを入れ、アニメの再生を１回だけにします。

できたムービークリップを、流れ星を出すフレームに配置し、インスタンス名を付けます。
ここでは仮に” star ”と付けたとします。


以上で準備は完了です。
次はランダムな間隔で流れ星を出すスクリプトを書きます。

*******************

ステージに、流れ星のムービークリップ” star ”があるとします。
ランダムでこの星を表示するスクリプトは、大体、次のようになります。
背景の空が昼から夜に変わるとのことで、このアニメはトゥイーンで作っていらっしゃるかと思います。
以下のスクリプトは、昼から夜に変わるアニメの最後のフレームに設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）


　///////////////////////////////////////////////
　//初期設定
　///////////////////////////////////////////////

　//流れ星のムービークリップの参照を保持
　clip = this.star;

　//流れ星を出す間隔の最小/最大値（単位は秒）
　wait_min = 5;
　wait_max = 10;

　//待機時間を保持する変数と、ウェイトカウンタ
　wait_time = 0;
　wait_cnt = 0;

　//フレームレート
　//間隔×この値で、流れ星を出すまでの間隔を決める
　fps = 12;

　//行動を決めるステップカウンタ
　//0：間隔の決定と初期化　1：星を出すまで待機
　//2：流れ星のアニメの終了を待つ
　act_step = 0;

　//流れ星のムービークリップを非表示にしておく
　clip._visible = false;


　///////////////////////////////////////////////
　//全体を指揮する処理
　///////////////////////////////////////////////

　this.onEnterFrame = function()
　{
　　var rnd;


　　//ステップカウンタの値に従って行動
　　switch( act_step )
　　{
　　　//流れ星を出す間隔の決定と初期化
　　　case 0:
　　　　//指定の範囲内で乱数を作る
　　　　rnd = Math.floor( Math.random() * ( wait_max - wait_min + 1 ) ) + wait_min;

　　　　//できた乱数とフレームレートから待機する時間を設定し、
　　　　//ウェイトカウンタを初期化
　　　　wait_time = rnd * fps;
　　　　wait_cnt = 0;

　　　　//次に進む
　　　　act_step++;
　　　　break;


　　　//流れ星を出すまで待機
　　　case 1:
　　　　//指定の時間が経過するまで待機
　　　　wait_cnt++;
　　　　if( wait_cnt >= wait_time )
　　　　{
　　　　　//流れ星を出す位置を決める
　　　　　//さしあたって、(100 , 100)-(300 , 200)の範囲内に表示
　　　　　clip._x = Math.floor( Math.random() * ( 300 - 100 + 1 ) ) + 100;
　　　　　clip._y = Math.floor( Math.random() * ( 200 - 100 + 1 ) ) + 100;

　　　　　//流れ星を表示し、アニメを開始
　　　　　clip._visible = true;
　　　　　clip.gotoAndPlay( 1 );

　　　　　//次に進む
　　　　　act_step++;
　　　　}
　　　　break;


　　　//流れ星のアニメ終了を待つ
　　　case 2:
　　　　if( clip._currentframe >= clip._totalframes )
　　　　{
　　　　　//流れ星を非表示にし、間隔の決定・初期化のステップに戻る
　　　　　clip._visible = false;

　　　　　act_step = 0;
　　　　}
　　　　break;


　　　default:
　　　　break;
　　}
　};


　//タイムラインを止めておく
　stop();



各変数の意味やスクリプトの詳細は、スクリプト中のコメントをご参考になさってください。

*******************

今回の難関、”ランダムで流れ星を出すまでの待機時間を決める”部分ですが。

Flash Player 6 からは、指定した時間ごとに関数を呼び出してくれる setInterval という関数が使えるようになりました。
ミリ秒単位で時間を計測できる点はいいのですが、今回の件では間隔が不定であるため、タイマーの作成と削除を繰り返すのはかえってムダです。
また、単にある程度ランダムな間隔で流れ星が出てきてくれればいいだけなので、ミリ秒単位で正確に時間を計測する必要もありません。


そこで、原始的な方法ですが、簡単なところで onEnterFrame によりメインの関数が呼び出されるたびにカウントを取ることで時間を計測し、指定の間隔だけ待機することにします。
全体を指揮するメインの関数はフレームレート分の１秒ごとに呼び出されるので、この時にカウントを取ると、フレームレートと同じカウントで約１秒、フレームレート×２で約２秒経過とみなすことができます。

上記のスクリプトでは、ランダムで選ぶ待機時間の最小・最大値とフレームレートを変数で管理しており、これらをもとに待機時間をランダムで決定します。
流れ星を出す間隔を変えたい時は wait_min と wait_max の値を、フレームレートが 12 fps ではない場合は変数 fps にフレームレートを設定してください。

wait_min から wait_max までの間で乱数を作り、これに変数 fps に格納されているフレームレートを乗算して、待機時間を秒で作成します。
この待機時間とメインの関数が呼び出されるたびに増えるカウントを比較して指定の時間だけ待機し、流れ星を出現させます。
特定の範囲内で乱数を作る方法につきましては、こちらをご参考になさってください。

　・Math.random() でランダムな整数を取得する方法
　　http://support.adobe.co.jp/faq/faq/qadoc.sv?228622+002


なお、getTimer という関数で Flash Player が持っているシステムタイマーを取得し、タイマーの差分で時間を計測する方法もあります。

*******************

流れ星のムービークリップ内で星を動かしている時は、流れ星のムービークリップ全体の大きさが、星が動く範囲の分だけ大きくなっています。
流れ星の出現位置を決める際にはこの大きさを考慮しないと、星が画面からはみ出してしまったり、画面の端スレスレに出現して欠けて見えることがあります。

上記のスクリプトではさしあたって、流れ星の位置を (100 , 100) - (300 , 200) 内に収まる範囲でランダムに決めて出現させています。
ある範囲内で乱数を出す方法は、先述の Flash テクニカルノートにある式を利用しています。


今回は一定範囲内で全くのランダムで位置を決めましたが。
例えば、予め配列変数に位置を定義しておいてこの中からランダムで選ぶようにすると、特定の位置のどこかから流れ星が出現するようになります。

*******************

他にも、動き方の異なる流れ星のムービークリップをいくつか用意しておいて、出現させる流れ星をいずれかから１つ選ぶ・・・といったこともできます。

流れ星のアニメをスクリプトで付ける場合も、基本的な考え方は同じです。
今回はアニメをスタートさせるには gotoAndPlay で、アニメの終了はムービークリップの総フレーム数と現在再生されているフレームを監視することで判定しました。
スクリプトによるアニメの場合は、フラグを用意して開始の命令を出したり終了を知らせるようにするといいでしょう。

作品に合わせて、いろいろと改良してみてください。

流星が流れるような感じにしたいんです。

主に「流れ星がたまに流れる」部分の作り方になりますが、次のように考えてはいかがでしょう。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング