FLASHのお勉強 ーアクションスクリプトの実践的事始めー |
|
（1３）ランダムモーション（３） 雪が降る |
|
ランダムモーションの第3弾は、これまたFLASHの定番、雪の降る動きである。 雪の降る動きを表現する方法としてはいろいろあるようだが、ここで使った表現方法は、 （１）雪をステージに描くときに、深度をランダムに設定し、深度が小さいほど（下層にいくほど）、アルファー値を小さくして遠近感を出す工夫をした。 （２）雪の大きさをランダムに、発生する場所を画面上部全域にランダムに発生させた。 （３）落下速度をランダムに設定した。 （４）横方向の動き（揺らぎ）をcos関数で表現し、周期（振幅の長さ）をランダムに変化させた。 |
|
| 雪の作成 ３５０×２５０のキャンバス（色：#999999）内に雪の粒（白色、5×5pix）を描き、シンボルに変換、インスタンス名をsnowとする。 リンケージプロパティーで識別子をsnowに、「actionscriptに書き出し」にチェックを入れる。 ここでは、雪を描くのに、２０角星形、放射状のグラデーションを施したが、画面上では余り見えないようだ。 歌詞ファイル読み込みスクリーン 画面と同サイズの矩形を描き、シンボルに変換、インスタンス名をscreenとし、変形ツールで変形基準点（矩形中心にある丸いしるし）を矩形の左上角にドラッグして移動させる。 |
|
| スクリプト <雪インスタンスに書き込み> onClipEvent (load) { mc_width = 350; mc_height = 250; fy = 1+Math.random()*3; n=Math.round(Math.random()*1000); this.swapDepths(n); this._x=Math.random()*mc_width; this._y=-10+Math.random()*mc_height; this._xscale=this._yscale=Math.random()*30+20; this._alpha=100*n/1000+30; dx = Math.random()*200; } onClipEvent(enterFrame) { this._x += Math.cos((this._y+dx)/60); this._y += fy; if (this._y>=mc_height) { this._y =-5; } if ((this._x>=mc_width) || (this._x<=0)) { this._x =-10+Math.random()*mc_width; this._y = -5; } } <FRAME1に書き込み> s_num=200; for (i=0;i<s_num;i++) { duplicateMovieClip(snow,"snow"+i,i); } screen.loadMovie("kasi.swf"); |
再生開始時に ステージの横幅、高さの設定 雪の落下速度を１−４の間でランダムに設定 雪の深度（重なり）をランダムに発生 深度の設定 ステージの幅一杯に雪をランダムに発生 ステージの上部１０pixに発生 雪の大きさをランダムに設定 雪のアルファ値を深度に比例させる（手前の雪ほど白くする） 落下cos曲線の周期に変化を付けるためのランダム値 雪が落下するときの揺らぎ（cos曲線）を表現するｘ軸方向値 落下速度 ステージの下に到達したら、上に戻る ステージ左右に外れたら、 ステージ上部でステージ幅内でランダムに発生 発生させる雪の数の定義 雪の数だけ 上のスクリプトで定義される雪を複製しステージ上に描く 矩形（インスタンス名screen）にムービーkasi.swfを読み込む （ファイルが同じフォルダに無い場合は、パスを通すこと） |
| 歌詞ファイルの作成 有名な雪が降るの歌詞をカラオケ調に画面に描いてみた。 このファイルは、アクションスクリプトは使っていない。 上記ムービーと同じサイズのステージを設定し、タイムラインをずらして歌詞を一行ずつ登場させる。 歌詞テキストをマスクにして、下層レイヤー（マスク対象）の矩形を上部から徐々に下方向に大きくして文字をなぞるような表現を出している。 一行分だけの手順を以下に示す。 ステージの色は#999999に設定。 （１）レイヤー１に歌詞の文字を覆う大きさの矩形（#cccccc）を描きシンボルに変換 10FRAMEのモーショントウィーンで1FRAME目のアルファー値を０に設定（文字をフェードインさせる） （２）レイヤー2に歌詞の文字を覆う大きさの矩形（#ffeeff）を描きシンボルに変換、変形点を矩形上部に移動 約25FRAMEのモーショントウィーンで１FRAME目の矩形を変形ツールで文字の最上部に高さ0で配置 （25FRAME目は文字を覆う大きさになる） （３）レイヤー3に文字（雪が降る）を色#ccccccで描く （４）レイヤー3をマスクレイヤーに、レイヤー１，2をマスク対象に設定する （５）各レイヤーのタイムラインを以下に示す |
|
 |
|
|
|
|
HOME お勉強総リスト |
|