フラッシュの課題No.72(スクリプトの勉強 Study5)

2020.07.27.07:00



 スクリプトの勉強の第五弾です。

 前回はMath.random()関数について勉強しま

 した。今回は三角関数のsin(サイン)とcos

 (コサイン)を使った関数について勉強します。

 これを利用すると円の中心点から等距離に

 あるスプライトの座標軸を円周上に求める

 ことが出来ます。これにより回転運動する

 キャラ等のフラッシュ画像を作り出せます。

 また、これを応用して角度や距離等を変更

 して渦巻や放射運動などの色々なアニメ

 処理を実現することが出来ます。



 先ず、中心点、角度、距離の3つを指定して座標の位置を

 求めることです。

 それには中心点から角度の方向に距離だけ離れた点を求める

 為に以下のような計算式を使用します。

 X座標 = 中心点X座標 + Math.sin(角度 * Math.PI / 180) * 距離;

 Y座標 = 中心点Y座標 + Math.cos(角度 * Math.PI / 180) * 距離;

 の公式を用います。例えばスプライトの座標が中心点、(100,50)

 から60度の方向に40離れた場所にする場合は以下のように

 記述します。

 _x = 100 + Math.sin(60 * Math.PI / 180) * 40;

 _y = 50 + Math.cos(60 * Math.PI / 180) * 40;

 とすると円周上のスプライトの位置が決まります。

 この公式はそのまま覚えて、後は数字だけ入れ替えて状態変数の

 X座標とY座標に計算結果を代入すれば回転運動するキャラの動き

 を表現することが出来ます。



①中心点(200,150)、角度0度から5度ずつ正回転、距離100

キャラの傾き0度から変わらず




  onClipEvent(load){
        point_x = 200;
        point_y = 150;
        dist = 100;
        kakudo = 0;
            _x = 0;
            _y = 0;
  }
  -
  onClipEvent(enterFrame){
        kakudo += 5;
        _x = point_x + Math.cos(kakudo * Math.PI / 180) * dist;
        _y = point_y + Math.sin(kakudo * Math.PI / 180) * dist;
  }






②中心点(350,150)、角度0度から5度ずつ逆回転、距離100

キャラの傾き0度から5度ずつ逆回転




  onClipEvent(load){
        point_x = 350;
        point_y = 150;
        dist = 100;
        kakudo = 0;
            _x = 0;
            _y = 0;
      _rotation = 0;
  }
  -
  onClipEvent(enterFrame){
        kakudo -= 5;
        _rotation -= 5;
        _x = point_x + Math.cos(kakudo * Math.PI / 180) * dist;
        _y = point_y + Math.sin(kakudo * Math.PI / 180) * dist;
  }






③中心点(120~320,100~200)、角度0~360度から角度5度ずつ逆回転、距離100

キャラの傾き0度から5度ずつ逆回転

キャラの大きさ100から1ずつ拡大




  onClipEvent(load){
        _xscale =100;
        _yscale =100;
        point_x = Math.random()*200 + 120;
        point_y = Math.random()*100 + 100;
        dist = 100;
        kakudo = int(Math.random()*360); 
             _x = 0;
             _y = 0;
        _rotation = 0; 
  }
  -
  onClipEvent(enterFrame){
        _xscale += 1;
        _yscale += 1;
        kakudo -= 5;
        _rotation = kakudo;
        _x = point_x + Math.cos(kakudo * Math.PI / 180) * dist;
        _y = point_y + Math.sin(kakudo * Math.PI / 180) * dist;
        if(_xscale > 300 || _yscale > 300){
        _xscale = 100;
        _yscale = 100;
        }
  }






④中心点(200~400,100~200)、角度0~360度から角度5度ずつ逆回転、距離10

キャラの傾き0度から5度ずつ逆回転

キャラの大きさ300から1ずつ縮小




  onClipEvent(load){
        _xscale = 300;
        _yscale = 300;
        point_x = Math.random()*200 + 200;
        point_y = Math.random()*100 + 100;
        dist = 10;
        kakudo = int(Math.random()*360); 
             _x = 0;
             _y = 0;
        _rotation = 0; 
  }
  -
  onClipEvent(enterFrame){
        _xscale -= 1;
        _yscale -= 1;
        kakudo -= 5;
        _rotation = kakudo;
        _x = point_x + Math.cos(kakudo * Math.PI / 180) * dist;
        _y = point_y + Math.sin(kakudo * Math.PI / 180) * dist;
        if(_xscale < 0 || _yscale < 0){
        _xscale = 300;
        _yscale = 300;
        }
  }






⑤中心点(150~400,120~240)、角度0~360度から角度5度ずつ正回転、距離20で0.1ずつ縮小

キャラの傾き0度から5度ずつ正回転

キャラの大きさ300から1ずつ縮小




  onClipEvent(load){
        _xscale = 300;
        _yscale = 300;
        point_x = Math.random()*250 + 150;
        point_y = Math.random()*120 + 120;
        dist = 20;
        kakudo = int(Math.random()*360); 
             _x = 0;
             _y = 0;
        _rotation = 0; 
  }
  -
  onClipEvent(enterFrame){
        _xscale -= 1;
        _yscale -= 1;
        dist -= 0.1;
	kakudo += 5;
        _rotation = kakudo;
        _x = point_x + Math.cos(kakudo * Math.PI / 180) * dist;
        _y = point_y + Math.sin(kakudo * Math.PI / 180) * dist;
        if(_xscale < 0 || _yscale < 0){
        _xscale = 300;
        _yscale = 300;
        point_x = Math.random()*250 + 150;
        point_y = Math.random()*120 + 120;
        dist = 20;
        kakudo = int(Math.random()*360); 
        }
  }






⑥中心点(150~400,120~240)、角度0~360度から角度5度ずつ逆回転、距離0で0.5ずつ拡大

キャラの傾き0度から5度ずつ逆回転

キャラの大きさ0から1ずつ拡大




  onClipEvent(load){
        _xscale = 0;
        _yscale = 0;
        point_x = Math.random()*250 + 150;
        point_y = Math.random()*120 + 120;
        dist = 0;
        kakudo = int(Math.random()*360); 
             _x = 0;
             _y = 0;
        _rotation = 0; 
  }
  -
  onClipEvent(enterFrame){
        _xscale += 1;
        _yscale += 1;
        dist += 0.5;
        kakudo -= 5;
        _rotation = kakudo;
        _x = point_x + Math.cos(kakudo * Math.PI / 180) * dist;
        _y = point_y + Math.sin(kakudo * Math.PI / 180) * dist;
        if(_xscale > 300 || _yscale > 300){
        _xscale = 0;
        _yscale = 0;
        point_x = Math.random()*250 + 150;
        point_y = Math.random()*120 + 120;
        dist = 0;
        kakudo = int(Math.random()*360); 
        }
  }






 上記の6つのスクリプト文に基づいて

 作成された回転運動によるフラッシュ画

 像です。キャラのそれぞれの移動の動きや

 大きさの変化や回転する様子をご覧下さい。



回転するキャラのそれぞれのアニメ画像



フラッシュの課題No.71(スクリプトの勉強 Study4)

2020.07.20.07:00



 スクリプトの勉強の第四弾です。

 前回はParaFlaのスプライトに記述するスク

 リプトについて比較的簡単な事例を紹介しま

 した。今回からはそれの応用として少しずつ

 難しい内容のスクリプト文について述べます。

 然しながらスプライト画像の位置や大きさ等

 の初期値の値に対して加減乗除の演算を施し

 てキャラを移動させたり、大きくしたりする

 等の動きを操作するための基本的なものです。

 従って、それ程難解なスクリプト文法では

 ないと思います。



 ここではMath.random()関数について勉強

 します。この関数は0.0以上1.0未満までの

 ランダムな浮動小数点を得るための関数です。

 これにMath.random()*400のように画像枠の

 縦横枠のサイズを掛け合わせることにより

 キャラを画像枠のX軸、Y軸の任意の位置から

 出現させるようにすることが出来ます。

 これを応用する事によりスプライトのムー

 ビークリップを乱数により様々に変化して

 移動する行動パターンを演出する事が出来

 ます。



①右の縦枠の任意の位置から出現



②左の縦枠の任意の位置から出現



  onClipEvent(load){
        _x = 600;
        _y = Math.random()*400;
  }
  -
  onClipEvent(enterFrame){
        _x -= 5;
        _rotation += 5;
        if(_x < 0){
        _x = 600;
        _y = Math.random()*400;
        }
  }




  onClipEvent(load){
        _x = 0;
        _y = Math.random()*400;
  }
  -
onClipEvent(enterFrame){
        _x += 3;
        _rotation -= 3;
        if(_x > 600){
        _x = 0;
        _y = Math.random()*400;
        }
  }






③右の縦枠から漸次拡大して出現



④上の横枠の任意の位置から出現



  onClipEvent(load){
        _x = 600;
        _y = Math.random()*300;
  }
  -
  onClipEvent(enterFrame){
        _x -= 3;
        _rotation += 3;
        _xscale += 3;
        _yscale += 3;
        if(_x < -180){
        _x = 600;
        _y = Math.random()*300;
        _xscale = 100;
        _yscale = 100;
  }




  onClipEvent(load){
	_x = Math.random()*600;
	_y = 0;
}
-
onClipEvent(enterFrame){
        _y += 3;
        _rotation -= 4;
        if(_y > 480){
        _x = Math.random()*600;
        _y = 0;
        }
  }






⑤下の横枠から漸次拡大して出現



  onClipEvent(load){
        _x = Math.random()*500 + 50;
        _y = 400;
  }
  -
  onClipEvent(enterFrame){
        _y -= 3;
        _rotation += 3;
        _xscale += 3;
        _yscale += 3;
        if(_y < -100){
        _x = Math.random()*500 + 50;
        _y = 400;
        _xscale = 100;
        _yscale = 100;
        }
  }




 上記の5つの行動パターンによるスクリ

 プト文に基づいて作成されたフラッシュ画

 像です。キャラのそれぞれの移動の動きや

 大きさの変化や回転する様子をご覧下さい。



キャラのそれぞれのアニメ画像



フラッシュの課題No.70(スクリプトの勉強 Study3)

2020.07.13.07:00



 スクリプトの勉強の第三弾です。

 今回からキャラなどのムービークリップを

 移動させるスクリプトについて勉強します。

 それに先立ち先ずキャラの歩行パターンを

 描くためにParaDrawによるモーフィング用

 のpdr画像を作成します。そこで出来るだけ

 自然な動きを表現するために両手両足の動き

 と共に顔や体の動きとも連動するようにしま

 した。然しながら、余り複雑な動きを表現

 するよりも、取り敢えず4枚のpdr画像で

 その内の2、4枚目は同一の画像で構成しま

 した。



キャラの歩行パターン画像





 上記のモーフィング処理用のキャラの歩行

 パターン画像をParaFlaのスプライトに取り込み、

 草原の道を歩かせました。これには草原の端から

 端までゆっくり歩行させるために4種類の歩行

 パターンを繰り返して60枚のモーフィング処理

 画像が必要でした。



草原を歩くキャラクター





 次に上記のスプライトだけのフラッシュ画像

 にスクリプトを加えてみました。それには

 onClipEvent(load)の段でキャラの位置と大きさ

 と方向(角度)の初期値を決めます。次に

 onClipEvent(enterFrame)の段でそれぞれの状態

 変数に一定数を加わえたり減じたりしてキャラ

 を動かせます。このフレームに留まっている限り

 連続的なアニメ運動をします。そして、外枠から

 消えたらまた元の初期値に戻すのです。

 こうすることで僅か数行のスクリプト文で同様の

 アニメ運動が実現します。



    onClipEvent(load){
          _x = 600;
          _y = 170;
          _xscale = 300;
          _yscale = 300;
          _rotation =5;
          }
    -
    onClipEvent(enterFrame){
          _x -= 1;
          _y -= 0.1;
          if(_x < -180){
          _x = 600;
          _y = 170;
          }
    }






草原を歩くキャラクター





フラッシュの課題No.69(スクリプトの勉強 Study2)

2020.07.06.07:00



 スクリプトの勉強の第二弾です。

 まここまさんからご質問があったフラッシュの

 スクリプトの問題は以下のようなものです。

 即ち、入れ子にしたスプライトで描かれた多く

 のあやめの花弁の揺らぎをマスク処理したフラ

 ッシュをJavaScript変換出来ないかと云うもの

 です。マスク処理そのものはsetMaskと云う関数

 を使うだけのとても簡単なスクリプトなので、

 十分にJavaScript変換出来るのですが、参考と

 して送られたフラッシュのParaFlaサンプルでは

 確かにJavaScript変換出来ていませんでした。

 そこで色々と調べました処、以下のような事が

 判明しました。



 下欄の枠内に表示されたフラッシュ画像では

 左側の図にはマスク処理する側のフレームの

 スクリプト記述欄においてsetMaskの指定により

 マスクされる側のフレームのスプライトのイン

 スタンス名を""付きの名称で記述しております。

 成程、これでも確かにParaFlaのプレビュー画面

 やこれにより生成されたswfファイルでも正常に

 マスク処理されております。

 然しながら、これではJavaScript変換したとして

 もマスクされる側のフレームを呼び出せないので

 す。従って白紙のまま表示されることになります。



 一方右側の図ではマスクするフレームのスク

 リプト記述欄ではsetMaskの指定によりマスクさ

 れる側のスプライトのインスタンス先を_rootか

 らの位置の絶対位置で直接指定しています。

 このようにすることにより初めて該当のマスク

 を上手くJavaScript変換出来るのです。



  on(load){
  cacheAsBitmap=true;
  setMask("mask1");
  }




  onClipEvent(load){
  cacheAsBitmap=true;
  setMask(_root.ayame);
  }














 然しながら、ご覧の通りこれではマスクされ

 る花弁が花弁の形状のままではなく、四角いマス

 クで覆われています。これは花弁がpng形式のラス

 タ形式の画像ファイルであるからです。

 そこでこの画像を下絵にしてparadrawによりpdr

 形式のベクタ形式の画像に新しく作り替えまし

 た。



png形式による花弁を

持つあやめ



pdr形式による花弁を

持つあやめ











 以上のように改変することにより、スプライト

 画像(movieclip)を正常に花弁の形状のままマスク

 処理が行われ、JavaScript変換出来ました。

 下欄の左右のフラッシュ画像を比較してご覧下

 さい。



png形式によるマスク処理



pdr形式によるマスク処理











 最後にまここまさんから提供されたフラッシュ

 ファイルをJavaScript変換出来るように修正した

 マスク処理の画像をご覧下さい。



花揺らぎのあやめ





プロフィール

chappychan2

Author:chappychan2
FC2ブログへようこそ!

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR