連載: 2008年4月アーカイブ

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

ってことでした。


それでは、他にどのようなプロパティが定義されているのか調べてみましょう。

キーボードのF1キーを押すとヘルプパネルが立ち上がるかと思います。（少なくとも初期設定の状態であれば）



ヘルプパネルが開いたら上図のプルダウンメニューから「リファレンスガイド（ActionScript & コンポーネント）」を開きます。

選択したらスクロールバーがしばらく、ずりーっとなったあと下図のようになります。



表示されたリストから「ActionScript 2.0 リファレンスガイド」→「ActionScript クラス」を選択します。



FLASH CS3 を利用している場合は以下のような感じです。



ActionScriptに定義されているクラスの一覧がつらつらと表示されるので、
その中から「MovieClip」の項を探して選択します。



開いたページ内には「プロパティ一覧」「イベントの一覧」「メソッド一覧」とテーブルが並んでいます。
このプロパティ一覧に _x や _y のようなプロパティから、透明度やサイズのプロパティの解説が書かれています。
このテーブルから、MovieClipがどのようなプロパティが定義されているのかを調べることができます。
実際にはどんなプロパティがあるのかを調べるより、こういうことをしたいときにはどのようなプロパティやメソッドを用いればいいのか。といった調べ方の方が多いと思いますが、そういうときにも僕はこの一覧の中から探しています。

ちなみに前回用いた onEnterFrame は「イベントの一覧」の中にあります。

さらに特定のプロパティの詳細が知りたいときは、左の一覧から選択するか、CS3の場合はリスト内のプロパティ名の箇所がリンクになっているので、そこから詳細ページに移ることができます。
詳細ページでは簡単なサンプルソースが掲載されていたりもするので、かなり参考になります。


これまで僕も様々なFLASHの参考書を買いあさってきましたが、結局最後まで使うのはヘルプです。
ヘルプを見ればほとんどのスクリプトの説明が載ってます。
これを読んでる方が調べて、解説されていないスクリプトってのはないんじゃないかと思います。

今ではActionScriptについて書かれているブログもかなり増えましたし、
技術者向けのニュースサイトで解説もされているので、インターネットを利用しても簡単に見つけることができると思います。

分からないときは FLASH-JP のようなフォーラムで質問するのも助けになるかと思いますが、
まずは、自分で調べる力を身につけましょう。


おまけ
以下のようなサイトで ActionScript について解説されています。

fumioNonaka.com
URL : http://www.fumiononaka.com/

Flashゲーム講座 & アクションスクリプトサンプル集
URL : http://hakuhin.hp.infoseek.co.jp/main/as.html

IT Pro 「Flash CS3入門　基本からActionScriptまで」
URL : http://itpro.nikkeibp.co.jp/article/COLUMN/20071025/285488/

Flashの枝（FLASH・アニメーション・ActionScript1.0,2.0,3.0の学習サイト）
URL : http://1art.jp/

ActionScript 逆引きクイックリファレンス
URL : http://www.openspc2.org/reibun/QuickReferenceActionScript/index.html

gihyo.jp「ActionScript 3.0で始めるオブジェクト指向スクリプティング」
URL : http://gihyo.jp/dev/serial/01/as3


ここで挙げた以外にも様々なサイトがありますので、いろいろ見てみるのもいいと思います。

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

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