Flash/ActionScript

Flashでキラキラ輝く雪を降らせる

北国ではもう雪が降っているようですね。「duplicateMovieClip」を利用してキラキラ輝くゴージャスな雪を降らせます。クリスマスも目前、今日はFlashで雪を降らせてみましょう。

執筆者:渡辺 大介

北国ではもう雪が降っているようですね。クリスマスも目前、今日はFlashで雪を降らせてみましょう。
「duplicateMovieClip」を使い雪を複製して降らせています。
Adobe Flash8.0を使用してサンプルを作成しています。
(.flaファイルはページの最後でダウンロードできます)

「duplicateMovieClip」を利用して雪を複製する

以前使用した配置されているムービークリップを複製する「duplicateMovieClip」を今回も使用します。
フォームアプリケーション

1. ここからサンプルのFlashをダウンロードしてください。ステージ中央に雪の結晶(インスタンス「snow」)が一つだけ配置されています。

2. この雪のインスタンスを複製します。レイヤー「action」の1フレーム目に以下のActionscriptを記述してください。
for (count = 0;count<30;count ++) {
snow.duplicateMovieClip("snow" + count , count );
}
繰り返し実行を行うことでおなじみのfor文を利用します。ここでは0~29までの30回繰り返し{ }内の処理を実行します。

2行目で既に配置されているインスタンス「snow」を複製する「duplicateMovieClip」が登場します。今回インスタンス名と深度は特に重要ではないので、重複しないよう回数を管理している変数「count」を利用しています。

3. 「duplicateMovieClip」で複製したムービークリップはそこに記述されているActionscriptも複製します。これを利用して、ムービークリップに以下のActionscriptを記述することで複製後まとめて実行してもらおうと思います。
onClipEvent(load){
	yposition = Math.random()*50-200;
	xposition = Math.random()*400;
	scale = Math.random()*100+1;
	speed = 12-scale/10;
	
	this._x = xposition;
	this._y = yposition;
	this._xscale = scale;
	this._yscale = scale;
}


onClipEvent (enterFrame){
	this._rotation += 5;
	if(this._y >350){
		this._y -=400;
	}else{
		this._y +=speed;
	}
}
二種類のイベント「load」と「enterFrame」についてのActionscriptが記述されています。少し長いので分解してみていきます。

onClipEvent(load){
	yposition = Math.random()*50-200;
	xposition = Math.random()*400;
	scale = Math.random()*100+1;
	speed = 12-scale/10;
この部分は乱数を発生させ、複製後の個々の雪を別々の配置、別々の大きさ、別々の降下速度にするための部分です。

上から2行目、縦方向の位置を「-200~-150」の間で乱数を発生させています。次の行に、横方向の位置を「0~400」の間で乱数を発生させています。この2行で複製後、ランダムに雪の結晶を移動させています。

最後の2つの行は大きさと降下速度を決定しています。まず最初に大きさを1~100までで算出しています。これは「_xscale、_yscale」のプロパティを使用するためです。

次は降下速度になります、二つの数値は遠近感を出す数値として関連しているので、大きさを算出した際に使用した変数「scale」を降下速度を算出する際にも利用しています。実際は手前が早く奥が遅いのですが、こうした画面上の演出では手前の大きなものがキラキラと輝きながらゆったり動いた方が良いでしょう。

	this._x = xposition;
	this._y = yposition;
	this._xscale = scale;
	this._yscale = scale;
}
続きを見ていきましょう。この部分ではここまで算出した大きさと縦横の位置をインスタンスに反映しています。

onClipEvent (enterFrame){
	this._rotation += 5;


	if(this._y >350){
		this._y -=400;
	}else{
		this._y +=speed;
	}
}
最後に「enterFrame」でイベントが指定されている部分です。まず最初に「_rotation」プロパティを変更し続けています。「_rotation」はインスタンスの角度を示すプロパティですから、「+5」し続けることで、くるくると回る記述になります。

その下のif文は算出した降下速度の反映と、ステージを通り過ぎた場合に再びステージ上部に移動するように指示をしています。

以上で記述は終了です。

完成したファイルをダウンロード


今回は、クリスマスも近いことですし、ゴージャスに満開の雪の華を表現しました。美しさを演出するためには必ずしもリアリティを追及する必要はなく、少し嘘をついても良いものでしたね。

ところで、この「for文+duplicateMovieClip」の組み合わせですが、記述をミスすると非常に動作が重くパソコンをフリーズさせる危険性があります。また、記述ミスがなくとも、今回作成した条件で「1000個」の雪を降らせると同様の危険性を伴いますので、くれぐれも加減にご注意ください。

とは言え現在のパソコンの処理能力では表現に限界はあります。そこで、細かい雪を大量に降り積もらせるよりも、今回のようにある程度の大きさがあるものを数十個の方が処理が軽くなり、見掛け上も豪華に見せることが可能です。処理が重くなってしまった場合、試してみてはいかがでしょうか。
【編集部おすすめの購入サイト】
楽天市場で Flash 関連の書籍を見るAmazon で Flash 関連の書籍を見る
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます