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

FLASH講座 ーアクションスクリプトの実践的事始めー
基本編
(7)ランダムモーション
[1]

 FLASHでよく使われるスクリプトに乱数を発生させる Math.randaom() があります。

 これを使うと0から1までの擬似乱数が発生します。 要するに、無作為に、あるいは、でたらめに数値が発生することになるのです。 このままだと、1以下の数値が発生することになるので、整数値を得るために、Math.floor(Math.random()*9)+1 などとすると、1から10までの乱数になります。 ここで、MAth.floorは小数点以下を切り捨てるので、前項は0から9までの整数値を返します。
 
 この乱数の発生は、さまざまなモーションに使われます。 たとえば、インスタンスの位置、大きさ、色や移動の方向、スピードなどなどを無作為に変化させる場合などに使われます。 ここでは、段階を追いながら、位置、色、方向などに乱数を発生させた例を受講することにします。
 
1.位置無作為にインスタンスを発生させる。
 300×200のキャンバス内にインスタンス(星、star)を100個ランダムに発生させるムービークリップを作ってみよう。
<ステージの準備>
 キャンバス内に星型の図形を描き、シンボルに変換、インスタンス名をstarとする。 リンケージプロパティーで識別子をstarに、「actionscriptに書き出し」にチェックを入れる。 ついで、ステージからインスタンスを削除する。 画面下方に矩形ツールでスタートボタン、及び、リセットボタン用の矩形を描き配置する。 それぞれをシンボルに変換する。
   
スクリプト
//FRAME1(root)に
 var star:Array=new Array();
 var i=0;

 _root.onEnterFrame=function(){
  if ( flag==1 && i<=50) {
   _root.attachMovie("star","star"+i, i );
   star[i]=eval("star"+i);
   star[i]._x=Math.random()*300;
   star[i]._y=Math.random()*200;
   i++;
  }
 }

//インスタンスstarに
 onClipEvent(load) {
  this._alpha=10;
 }
 onClipEvent(enterFrame) {
  this._rotation+=30;
  this._alpha+=5;
 }

//startボタンに
 on(release) {
  _root.flag=1;
  _root.i=0;
 }

//resetボタンに
 on(release) {
  _root.flag=0;
  for ( j=0; j<=50; j++) {
   _root["star"+j].removeMovieClip();
  }
 }


配列starの定義
i を0とする


もし、flag が1でかつ i が100以下だったら、
識別子"star"というムービークリップをステージ上に配置しstar1・・star100と命名する。それぞれの深度(重なり順)を i とする
配置したstarのx座標を、乱数×300とする(0から300の間の乱数値)
配置したstarのy座標を、乱数×200とする(0から200の間の乱数値)
i に1を加えてifに戻る




初期アルファ値を10%とする


30度/1FRAMEで回転させる
アルファ値を5%/FRAMEで増加させる


ボタンが押され放たれたら
メインタイムラインのflagを1とする(ムービーをスタートさせる)
メインタイムラインの i を0とする



flagを0とし、ムービーをその場でストップさせる
発生した全てのムービークリップ(star1・・・ )を削除する

2.発生させたインスタンスに無作為に着色を施す

 1.で発生したインスタンス(star)に、無作為に発生させた色で着色する。
 
スクリプト
//FRAME1(root)に
 var star:Array=new Array();
 i=0;

 _root.onEnterFrame=function(){
  if ( flag==1 && i<=50) {
   _root.attachMovie("star","star"+i,i );
   star[i]=eval("star"+i);
   star[i]._x=Math.random()*300;
   star[i]._y=Math.random()*200;
   star_color=new Color(star[i]);
   star_color.setRGB(Math.floor
          (Math.random()*256*256*256));
   i++;
  }
 }

//インスタンスstarに・・・・1.に同じ
//ボタンstartに    ・・・・1.に同じ
   
star_color=new Color(star[i]);:カラーオブジェクトの定義
setRGB(Math.floor(Math.random()*256*256*256));
 Math.floor:切捨て
 Math.randaom()*256:1から255の無作為の整数値
 setRGB(n):nはカラー値で 0xFF00FFのような16進数、もしくは、
 ここで用いている10進数で指定。
 (256*256*256は16の6乗で16進数6桁に相当)

3.インスタンスを無作為の方向へ落下させる
   インスタンス(star)をステージ最下部の無作為のx座標に向けて移動させる。移動開始は、インスタンス発生から4秒後。
 
スクリプト
//FRAME1(root)に
 var star:Array=new Array();
 var i=0;

 _root.onEnterFrame = function() {
  if ( flag==1 && i<=50) {
   _root.attachMovie("star","star"+i,i );
   star[i]=eval("star"+i);
   star[i].delay=getTimer();
   star[i]._x=Math.random()*300;
   star[i]._y=Math.random()*200;
   star[i].finalx=Math.random()*300;
   star[i].finaly=230;
   star[i].onEnterFrame=rakka;
   star_color=new Color(star[i]);
   star_color.setRGB(Math.floor
          (Math.random()*255*255*255));
   i++;
  }
 }
 function rakka() {
   if (getTimer()>this.delay+4000) {
    this._x+=(this.finalx-this._x)/10;
    this._y+=(this.finaly-this._y)/10;
   }
 }

//インスタンスstarに・・・・1.に同じ
//ボタンに       ・・・・1.に同じ
   

star[i].delay=getTimer();
 star[i]が発生したときの時間(ムービー再生開始からの)を調べる

finalx:インスタンス(star)が移動していく最下部のx座標(ランダム値)
finaly:最下部(200よりちょっと下の230)に設定



もし、インスタンスの発生から4秒経ったら
 x座標 finalx に移動する(遅延効果)

4.インスタンス(星)がうごめく??
 インスタンス(star)がランダムな方向へ連続的に移動するムービークリップを、まず星がひとつの場合を示し、ついで、20個発生させた場合について示す。 考え方としては、starを発生させると同時に移動先(target)の座標をランダムに発生させる。 移動先へは遅延効果つきで移動させる。 移動先の座標の1px以内に近づいたら、次の移動先の座標を発生させ、そこに移動させる。 これを次々に繰り返させる。
スクリプト
 width=300; height=200;

 _root.attachMovie("star","star1",1);
  this._x=Math.random()*width;
  this._y=Math.random()*height;
  targetx=Math.random()*width;
  targety=Math.random()*height;
 
 _root.onEnterFrame=function() {
  this._x+=(targetx-this._x)/4;
  this._y+=(targety-this._y)/4;
  if (Math.abs(targetx-this._x)<1) {
   targetx=Math.random()*width;
   targety=Math.random()*height;
  }
 }

インスタンスstar記述のスクリプト・・・1.に同じ
 
   

 もし、星が見えない
 ときは、ブラウザの
 更新ボタンを押して
 ください。












スクリプトの解説は次例を参照
 
スクリプト
 var star:Array=new Array();
 width=300; height=200;
 i=0;

 _root.onEnterFrame = function() {
  if ( i<20) {
   _root.attachMovie("star","star"+i, i );
   star[i]=eval("star"+i );
   star[i]._x=Math.random()*width;
   star[i]._y=Math.random()*height;
   star[i].targetx=Math.random()*width;
   star[i].targety=Math.random()*height;
   star[i].onEnterFrame=movement;
   star_color=new Color(star[i]);
   star_color.setRGB(Math.floor
          (Math.random()*255*255*255));
   i++;
  }
 }

 function movement() {
  this._x+=( this.targetx-this._x)/4;
  this._y+=( this.targety-this._y)/4;
  if (Math.abs(this.targetx-this._x)<1) {
   this.targetx=Math.random()*width;
   this.targety=Math.random()*height;
  }
 }

インスタンスstar記述のスクリプト・・・1.に同じ
   

 もし、星が見えない
 ときは、ブラウザの
 更新ボタンを押して
 ください。










star[i].targetx: star[i] が次に移動する位置のx座標
star[i].onEnterFrame=movement;:
  star[i]に function movement() を再生させる




targetxに向かって移動

もし、インスタンスとtargetの座標の差の絶対値が1px以下になったら
次の移動先のx座標をランダムに発生させる
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しました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 action script 基本編(8)