[連載] デザイナーのためのActionScript講座 ― 第9回：MovieClipを操作する

連載とか言いながら、かなり放っておいたら催促されてしまいました。すいません。

今回はムービークリップをActionScriptを使って操作する方法と、簡単なアニメーションについて書こうと思います。

まず新規にflaファイルを作成して、ステージ上に簡単な矩形のムービークリップを作成します。
このインスタンス名は "mc" にしておきます。

さらに同レイヤー上に下記のActionScriptを記述します。

trace( [mc._x, mc._y] );

上図の場合 mc は x が 50 の位置に、y が 30 の位置に配置されています。
この状態で、一度プレビューしてみましょう。

出力パネルには「50,30」と出力されたと思います。

何度かステージ上のmcの位置を動かしてみて、その都度プレビューしてみてください。
ほぼ期待通りの数値が出力されるかと思います。
「ほぼ」と書いたのはたまに0.05の誤差が出る場合があるからです。
プロパティパネル上では0.1単位でしか指定できませんが、
実際 FLASH 上では0.05ピクセル単位で描画されてるため
マウスで配置するとこのようなズレの生じる場合があります。
まあ、今はあまり気にしないでください。

次にこれをタイムライン上でトゥイーンアニメーションを作成してみます。
下図のような感じです。



10フレーム目のキーフレームで mc の位置を（x=450,y=30）の位置に移しています。
また、位置を把握しやすいようにガイドを追加したのと、
出力値を表示する用のテキストフィールド（ダイナミックテキスト）を配置しています。

サンプルのflaファイルはこちらからダウンロードできます。
demo2.fla

ActionScriptは以下のように書き換えました。

this.onEnterFrame = function()
{
    output.text = mc._x;
}

this はこのタイムラインを指しています。

onEnterFrame は、FLASH上でタイムラインのフレームが
次のフレームに移ったときに呼び出されるMovieClipのイベントハンドラメソッドです。
（メソッドについては第6回を参照してください。）
ここでは onEnterFrame に新たに function を代入することで、onEnterFrameの実行内容を定義しています。

output は画面下に配置したテキストフィールドのインスタンス名です。
output.text でoutputの表示するテキストを取得、変更できます。
output.text に mc._x を代入することでmcのX座標の位置をプレビュー時に表示することができます。

最後に、図の中にはありませんが、プロパティパネル内のフレームレートを 2 まで下げています。
あんまり早いと表示された文字が読み取れないので。


それではプレビューしてみましょう。
当然 mc はカクカクとですが右にスライドしていきます。

この時、画面下のテキストフィールドに表示された値に注目してみてください。
mc が移動すると同時に mc._x の値が変わっているのが分かります。

書き出したデモはこちら
demo2.swf


ここまでくれば説明する必要もないかもしれませんが
mc._x は mc のXの位置を指すMovieClipのプロパティです。
同じく _y は mc のYの位置を指します。


では、このプロパティの値を見るだけではなく、今度はActionScriptを使って変更してみましょう。



トゥイーンアニメーションは使わないので、タイムラインを1フレーム目を残し、2フレーム目以降を削除してしまいます。
また、スクリプトを以下のように1行追加しました。

this.onEnterFrame = function()
{
    mc._x = mc._x + 10;
    output.text = mc._x;
}

追加した行では、現在の mc の _x プロパティの値に 10 を足した値を mc._x に代入しなおしています。
このflaファイルはこちら。
demo3.fla

これでプレビューした状態がこちらです。
demo3.swf

mc が10ピクセルずつ右にスライドしています。

さらにスクリプトを以下のように変更してみましょう。

this.onEnterFrame = function()
{
    mc._x += 10;
    mc._y += 5;
    output.text = mc._x;
}

今度は右下に向かって斜めに移動していきます。
mc._x += 10 は変更前と同様の意味を指します。
つまりmc._x の値に10加算するということです。
さらに _y プロパティにも数値を加算することで、下方向への移動も加わるため、
斜めに移動するようになります。

ただしこのままでは（x=450, y=230）を超えてもそのまま直進し続けてしまいます。
そのため、もう少し改良して以下のようにします。

this.onEnterFrame = function()
{
    if( mc._x < 450 && mc._y < 230 ){
        mc._x += 10;
        mc._y += 5;
    }
    output.text = mc._x;
}

if() はその後の{}内の命令に条件を与えるためのものです。
今回の変更では、もし（if）mc._x の値が 450 未満であり、mc._y の値が 230 未満であるとき、
この両方の条件を満たしているときだけ{}内の命令を実行する。というものです。

さらにここではフレームレートを 30 にしておきましょう。

これをプレビューした状態がこちらです。
demo4.swf

今回はMovieClipの _x と _y のプロパティを変更して移動させましたが、
MovieClipにはその他にも様々なプロパティが定義されています。
このプロパティを変更することで、ムービークリップを回転させたり
透明度を変更したり、拡大縮小することなど、いろんなことができるようになります。