2. 入門講座 - 3. 「MoveBall」

 跳ね返るボールを作りながら、ムービークリップ、ActionScriptプロパティなどについて勉強しましょう。

2- 3- 0. ボールの用意

今回題材となるボールを用意します。ツールパレットの楕円ツールを選択します。クリック、ドラッグすると楕円が出来るはずです。色や形を整えておきましょう。

2- 3- 1. シンボルに変換

早速ムービークリップに変換します。先ほど用意した楕円を右クリックして、「シンボルに変換」というものを選択しましょう。すると、「シンボルに変換」ウィンドウが開くはずです。「ムービークリップ」を選択し、「OK」を押します。(ここでの名前は「ライブラリ」の名前に用いられます。)

2- 3- 2. インスタンス名

ムービークリップにインスタンス名を付けます。プロパティウィンドウの「<インスタンス名>」という欄に「ball_mc」と書いて下さい。

2- 3- 3. レイヤーの追加、ActionScriptの記述

新しいレイヤーを作り、そのレイヤーの1フレーム目を選択します。そのフレームのアクションウィンドウに


ballv = 30;
ballx = ballx + ballv;
ball_mc._x = ballx;


と書き込んで下さい。「ballx」「ballv」は変数、「ball_mc._x」はムービークリップ「ball_mc」の「x座標」です。
※「ballv」に代入する数値は自由に設定して構いません。色々試してみましょう。

2- 3- 4. フレームの追加

時計同様、このままではボールは動きません。そこで、「DigitalWatch」と同じようにフレームを追加します。

2- 3- 5. ムービープレビュー

本当に動くか、試してみましょう。

2- 3- 6. 条件分岐

このままでは、ボールは画面の外へ出てしまい戻ってきません。そこでボールが画面枠まできたら跳ね返るようにします。
まずフレームを3つ用意します。


 Actionレイヤー - 1フレーム目のアクション
//初期位置の設定
ballx = 100;
bally = 120;

//初期移動量(方向)の設定
ballv = 30;

//ball_mcへ代入
ball_mc._x = ballx;
ball_mc._y = bally;


 Actionレイヤー - 2フレーム目のアクション
//位置の更新
ballx = ballx + ballv;

//条件分岐(枠へ着いたら方向を反転)ボールの大きさ20px*20px
if ( ballx < 10 || ballx > 230 ) {
    ballv = ballv*(-1);
}

//ball_mcへ代入
ball_mc._x = ballx;


 Actionレイヤー - 3フレーム目のアクション
//位置の更新
ballx = ballx + ballv;

//条件分岐(枠へ着いたら方向を反転)ボールの大きさ20px*20px
if ( ballx < 10 || ballx > 230 ) {
    ballv = ballv*(-1);
}

//ball_mcへ代入
ball_mc._x = ballx;

//2フレーム目へ戻り再生
gotoAndPlay(2);


と書きます。式の意味などは、「//」のあとに書いてあります。「//」はコメントの先頭を表すアクションで、プログラムが複雑になってくると非常に役に立ちます。
「ballx + ballv」に違和感を感じるかと思います。各変数の意味から、「長さ + 長さ/時間」となっているからです。「ballx + ballv * dt」として、フレームレート(fps)が10の場合、1フレーム目に「dt = 0.1」を加えておくとスッキリしますね。

2- 3- 7. ムービープレビュー

ボールが跳ね返っているように見えるはずです。発展として、y方向(縦)に動かしてみたり、跳ね返り後の速度を減らしたりしてみましょう。