くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[Flash]くまモンのムービークリップ(if文を使った反転)

前々回のイベントハンドラメソッドの応用で、くまモンが画面内で上下左右に動くムービークリップをつくります。
ピンポンゲームのように、壁にぶつかったら向きが変わります。

f:id:pleasure10501:20150415144644p:plain

1~5までは前々回の復習です

  1. イラストレーターで作成したくまモンを、Flashにコピー&ペーストする
  2. シンボルに変換する(ショートカットキーF8 または 修正>シンボルに変換)
  3. インスタンス名に「kuma_mc」つける
  4. 新規レイヤーを作成し、Action用にする(レイヤー名Action)
  5. Actionレイヤーのプロパティにスクリプトを記述

 

移動についての宣言
  var speedx:Number =○;  //x軸の移動速度
  var speedy:Number =○;  //y軸の移動速度

 

ムービークリップが読み込まれる度に作動する内容」の定義

  this.kuma_mc.onEnterFrame = function( ) { } ) ;

 

① {}内の記述ですが、まずx軸方向(左右)の動きについて。

右方向に移動する時は
  kuma_mc.onEnterFrame = function ( ) {
   kuma_mc._x += speed;
  }

 右端まで動き、左方向に移動する場合の動きは

  kuma_mc.onEnterFrame = function ( ) {
   speedx *= -1; (speed = speed * -1 と同じ)
   kuma_mc._x += speed;
  }

 となります。
x座標軸のマイナス(左)方向に向かって進む という考え方です。

 

② y軸(上下)の動き

下方向に進む時

  kuma_mc.onEnterFrame = function ( ) {
   kuma_mc._y += speed;
  }

上方向に進む時

  kuma_mc.onEnterFrame = function ( ) {
   speedy *= -1;
   kuma_mc._y += speed;
  }

③ 移動範囲の設定 その1

くまモンが常に画面内に収まるようにするには、
移動範囲の設定が必要です。(この画面の大きさはW550*H400px)
このままでは画面から消えて戻ってきません

移動範囲は、<>記号を使って指定します。

ActionScript2.0は左上を基点(x=0, y=0)としてx座標は右、y座標は下に大きくなりますので、左はx=0 右は x= 550までが範囲となります。

上はy=0  下は y= 400までとなります。

 

 

これを、if文を使って記述します。

  • x軸の位置が0より大きく、550より小さい場合
      if ( kuma_mc._x < 550 ) {
          kuma_mc._x +=speed;
      }
  • x軸の位置が550より大きい場合(スピードの値がマイナスとなり、反対方向に進む)
      if ( kuma_mc._x > 0 ) {
       speed *= -1;
          kuma_mc._x +=speed;
      }

 

これをまとめると以下のようになります。

   kuma_mc.onEnterFrame = function ( ) { 
     if ( kuma_mc._x > 550 || kuma_mc._x < 0 ) {
       speed *= -1;
     }
   kuma_mc._x += speed;
   }

※ || は" or "と同義。 「xが550より大きい 又は 0より小さい場合」という意味

 

y軸も上に従ってまとめるとこうなります。

  kuma_mc.onEnterFrame = function( ) {
    if ( kuma_mc._y > 400 || kuma_mc._y < 0 ) {
      speed *= -1;
    }
  kuma_mc._y += speed; 
  }

ここまでの説明では、分かりやすくする為に座標軸を数字で示しました。
しかし上下左右の両端をあらかじめ変数宣言しておき、演算の部分は変数で記述するようにします。そうすることで、サイズが変わった場合に、変数宣言の数値を変えるのみで済ませられます。演算部分に手を加えずにすみます。

左端の変数宣言 var leftEdge : Number = 0;
右端の変数宣言 var rightEdge : Number = 550;
上端の変数宣言 var topEdge : Number = 0;
下端の変数宣言 var bottomEdge : Number = 400;

 ※「550」や「400」のサイズを変更すればOK

④ 移動範囲の設定 その2

③までではくまモンは画面からはみ出してしまいます。
その理由は、kuma_mc._xやkuma_mc._yの座標軸は、くまモンの画像の中央にある基点
を定めたものだからです。
つまり、画面内に収めるには、画像の大きさおよび中心点を考慮して、画面のサイズより移動範囲を小さくする必要があります。

ではくまモンの画像サイズを測る必要はあるのでしょうか?
ありません。
サイズがわからなくても幅・高さのプロパティのみで設定できます。

高さ:kuma_mc._height / 幅:kuma_mc._width

中心点はその中間にあるので、
kuma_mc._height / 2
kuma_mc._width / 2  とすれば、中心点の座標軸が割り出せます。

 

画像のプロパティを見ればサイズは一目瞭然で、分かりやすいのですが、サイズが変わった場合や、画像が他のものになった場合等の応用性は、こちらの方が断然優れています。

 

③④をまとめると、スクリプトが次のように変わります。

 kuma_mc._x > 550  ⇒ kuma_mc._x > rightEdge ー kuma_mc._width/2
            (右のx座標軸の値から画像の幅の半分を引く)
 kuma_mc._x < 0 ⇒ kuma_mc._x > leftEdge + kuma_mc._width/2                   (左のx座標軸の値から画像の幅の半分を足す)
 kuma_mc._y > 400 ⇒ kuma_mc._y > bottomEdge ー kuma_mc._height/2                 (下のy座標軸の値から画像の幅の半分を引く)
 kuma_mc._y < 0   ⇒ kuma_mc._y > topEdge + kuma_mc._height/2                                     (上のy座標軸の値から画像の幅の半分を足す)
 

f:id:pleasure10501:20150415212712p:plain


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

[最終スクリプト

var speedx:Number =7; //x軸の移動速度
var speedy:Number =7; //y軸の移動速度
var rightEdge:Number =550;
var leftEdge:Number =0;
var topEdge:Number= 0;
var  bottomEdge:Number= 400;
// speed *= -1で方向反転

this.kuma_mc.onEnterFrame = function() {

  if ( kuma_mc._x < leftEdge+kuma_mc._width/2 ||  kuma_mc._x > rightEdge - kuma_mc._width/2)  {
  speedx *= -1;  
  kuma_mc._xscale *= -1;  //顔の向きが反転
}
  kuma_mc._x += speedx;

if (kuma_mc._y  > bottomEdge-kuma_mc._height/2 || kuma_mc._y < topEdge+kuma_mc._height/2) {
speedy *=-1;
}
kuma_mc._y += speedy;

}

広告を非表示にする