[Flash]くまモンのムービークリップ(if文を使った反転)
前々回のイベントハンドラメソッドの応用で、くまモンが画面内で上下左右に動くムービークリップをつくります。
ピンポンゲームのように、壁にぶつかったら向きが変わります。
1~5までは前々回の復習です
- イラストレーターで作成したくまモンを、Flashにコピー&ペーストする
- シンボルに変換する(ショートカットキーF8 または 修正>シンボルに変換)
- インスタンス名に「kuma_mc」つける
- 新規レイヤーを作成し、Action用にする(レイヤー名Action)
- 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座標軸の値から画像の幅の半分を足す)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
[最終スクリプト]
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;
}