［Flash］くまモンのムービークリップ（ｉｆ文を使った反転）

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

１～５までは前々回の復習です

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

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

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

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

①　｛｝内の記述ですが、まずｘ軸方向（左右）の動きについて。

右方向に移動する時は
　　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;
　　}

③　移動範囲の設定　その１

くまモンが常に画面内に収まるようにするには、
移動範囲の設定が必要です。（この画面の大きさはW５５０＊H４００px）
このままでは画面から消えて戻ってきません

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

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

④　移動範囲の設定　その２

③までではくまモンは画面からはみ出してしまいます。
その理由は、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座標軸の値から画像の幅の半分を足す）
 

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

［最終スクリプト］

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;

}