FLASHのお勉強_アクションスクリプトaction script

FLASHのお勉強　ーアクションスクリプトの実践的事始めー

（11）ランダムモーション

　FLASHでよく使われるスクリプトに乱数を発生させる Math.randaom() がある。　これを使うと０から１までの擬似乱数が発生する。　要するに、無作為に、あるいは、でたらめに数値が発生することになる。　このままだと、1以下の数値が発生することになるので、整数値を得るために、Math.floor(Math.random()*9)+1 などとすると、1から10までの乱数が発生する。　ここで、MAth.floorは小数点以下を切り捨てるので、前項は０から９までの整数値を返す。
　この乱数の発生は、さまざまなモーションに使われる。　たとえば、インスタンスの位置、大きさ、色や移動の方向、スピードなどなどを無作為に変化させる場合などに使われる。　ここでは、段階を追いながら、位置、色、方向などに乱数を発生させた例を勉強することにしたい。
　

１．位置無作為にインスタンスを発生させる。
　３００×２００のキャンバス内にインスタンス（星、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 が１でかつｉが100以下だったら、
識別子"star"というムービークリップをステージ上に配置しstar1･･star100と命名する。それぞれの深度（重なり順）を i とする
配置したstarのｘ座標を、乱数×300とする（０から３００の間の乱数値)
配置したstarのｙ座標を、乱数×200とする（０から2００の間の乱数値)
ｉに１を加えてifに戻る

初期アルファ値を１０％とする

３０度/１FRAMEで回転させる
アルファ値を５％/FRAMEで増加させる

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

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

２．発生させたインスタンスに無作為に着色を施す
　１．で発生したインスタンス（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に・・・・１．に同じ
//ボタンstartに　　　・・・・１．に同じ

star_color=new Color(star[i]);：カラーオブジェクトの定義
setRGB(Math.floor(Math.random()*256*256*256));
　Math.floor：切捨て
　Math.randaom()*256：１から255の無作為の整数値
　setRGB(n)：ｎはカラー値で　0ｘFF00FFのような16進数、もしくは、
　ここで用いている10進数で指定。
　（256*256*256は16の6乗で16進数6桁に相当）

３．インスタンスを無作為の方向へ落下させる
　　　インスタンス(star）をステージ最下部の無作為のｘ座標に向けて移動させる。移動開始は、インスタンス発生から４秒後。
　

スクリプト
//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に・・・・１．に同じ
//ボタンに　　　　　　・・・・１．に同じ

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

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

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

４．インスタンス(星）がうごめく？？
　インスタンス（star）がランダムな方向へ連続的に移動するムービークリップを、まず星がひとつの場合を示し、ついで、20個発生させた場合について示す。　考え方としては、starを発生させると同時に移動先（target）の座標をランダムに発生させる。　移動先へは遅延効果つきで移動させる。　移動先の座標の１ｐｘ以内に近づいたら、次の移動先の座標を発生させ、そこに移動させる。　これを次々に繰り返させる。

スクリプト
　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記述のスクリプト・・・１．に同じ
　

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

スクリプトの解説は次例を参照
　

スクリプト
　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記述のスクリプト・・・１．に同じ

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

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

targetxに向かって移動

もし、インスタンスとtargetの座標の差の絶対値が１ｐｘ以下になったら
次の移動先のｘ座標をランダムに発生させる

　HOME　　　お勉強総リスト

FLASHのお勉強 ーアクションスクリプトの実践的事始めー

（11）ランダムモーション

FLASHのお勉強　ーアクションスクリプトの実践的事始めー