この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです

FLASH講座 ーアクションスクリプトの実践的事始めー
応用編
(4) ランダムモーション (
雪が降る

 ランダムモーションの第3弾は、これまたFLASHの定番、雪の降る動きです。 
 雪の降る動きを表現する方法としてはいろいろあるようですが、ここで使った表現方法は、下記の通りです。

(1)雪をステージに描くときに、深度をランダムに設定し、深度が小さいほど(下層にいくほど)、アルファー値を小さくして遠近感を出す工夫をしました。
(2)雪の大きさをランダムに、発生する場所を画面上部全域にランダムに発生させました。
(3)落下速度をランダムに設定しました。
(4)横方向の動き(揺らぎ)をcos関数で表現し、周期(振幅の長さ)をランダムに変化させました。
雪の作成
 350×250のキャンバス(色:#999999)内に雪の粒(白色、5×5pix)を描き、シンボルに変換、インスタンス名をsnowとする。 リンケージプロパティーで識別子をsnowに、「actionscriptに書き出し」にチェックを入れる。 ここでは、雪を描くのに、20角星形、放射状のグラデーションを施したが、画面上では余り見えないようだ。

歌詞ファイル読み込みスクリーン
 画面と同サイズの矩形を描き、シンボルに変換、インスタンス名を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");




再生開始時に
ステージの横幅、高さの設定
雪の落下速度を1−4の間でランダムに設定
雪の深度(重なり)をランダムに発生
深度の設定
ステージの幅一杯に雪をランダムに発生
ステージの上部10pixに発生
雪の大きさをランダムに設定
雪のアルファ値を深度に比例させる(手前の雪ほど白くする)
落下cos曲線の周期に変化を付けるためのランダム値



雪が落下するときの揺らぎ(cos曲線)を表現するx軸方向値
落下速度
ステージの下に到達したら、上に戻る

ステージ左右に外れたら、
ステージ上部でステージ幅内でランダムに発生





発生させる雪の数の定義
雪の数だけ
上のスクリプトで定義される雪を複製しステージ上に描く


矩形(インスタンス名screen)にムービーkasi.swfを読み込む
(ファイルが同じフォルダに無い場合は、パスを通すこと)
 
歌詞ファイルの作成
 有名な雪が降るの歌詞をカラオケ調に画面に描いてみた。 このファイルは、アクションスクリプトは使っていない。
 上記ムービーと同じサイズのステージを設定し、タイムラインをずらして歌詞を一行ずつ登場させる。 歌詞テキストをマスクにして、下層レイヤー(マスク対象)の矩形を上部から徐々に下方向に大きくして文字をなぞるような表現を出している。
 一行分だけの手順を以下に示す。 ステージの色は#999999に設定。
(1)レイヤー1に歌詞の文字を覆う大きさの矩形(#cccccc)を描きシンボルに変換
   10FRAMEのモーショントウィーンで1FRAME目のアルファー値を0に設定(文字をフェードインさせる)
(2)レイヤー2に歌詞の文字を覆う大きさの矩形(#ffeeff)を描きシンボルに変換、変形点を矩形上部に移動
   約25FRAMEのモーショントウィーンで1FRAME目の矩形を変形ツールで文字の最上部に高さ0で配置
   (25FRAME目は文字を覆う大きさになる)
(3)レイヤー3に文字(雪が降る)を色#ccccccで描く
(4)レイヤー3をマスクレイヤーに、レイヤー1,2をマスク対象に設定する
(5)各レイヤーのタイムラインを以下に示す

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)

 HOME   Flash講座総リスト    flash アクションスクリプト 応用編 (5)