3.0の初心者の方を対象に、ActionScriptを使って表現を広げるためのテクニックを紹介していきます。3.0初心者向けに考え方や原理を解説するという目的のため、基本的には次のようなスタイルをとります。・フレームアクションを使う。・ActionScriptライブラリは使わない。ウィンドウのリサイズに合わせてオブジェクトのレイアウトを変更する今回は、これまでにやってきた「sin値によるアニメーション」と「複数のオブジェクトの制御」を組み合わせたサンプルを作成します。作成するサンプルは、以下のアニメーションです。ステージ上に9個の円があり、数字の「1」の形に配置してあります。[1→2]ボタンをクリックすると9個の円が移動して数字の「2」の形に変化します。[2→1]ボタンをクリックした場合も同じように9個の円が移動して数字の「1」の形に変化します。※サンプルを見る:sample05.swfそれでは、このアニメーションを作成する手法を解説していきましょう。手法についていくつかのバリエーションも紹介していきます。処理の概要を確認する今回は、ボタンクリックで、9個のムービークリップインスタンスを同時に開始位置から終了位置に移動させます。必要になるのは、それぞれの開始位置(「1」を形作る座標位置)と終了位置(「2」を形作る座標位置)です。開始位置はもともと「1」の形に配置したインスタンスの初期位置を使用します。終了位置となる「2」の形の座標は実際にFlash上でインスタンスを配置して決定しました。これを踏まえて処理を考えると、概要は次のようになります。開始位置と終了位置を各インスタンスのカスタムプロパティとして設定する。[1→2]/[2-1]ボタンをクリックすると次の処理を行うように設定する。アニメーションの初期処理として、開始位置から終了位置までの距離を算出する。entarFrameイベントハンドラでsin値の変化に応じてアニメーションを進行させる。終了位置に到着したら、enterFrameイベントハンドラを削除し、開始位置と終了位置を入れ替える。ムービークリップインスタンスのアニメーションについて少し仕組みを考えてみましょう。第4回で扱ったように、ムービークリップシンボル内にアニメーション開始用のメソッドを定義し、同じくシンボル内で定義したenterFrameイベントハンドラを追加する方法です。この方法はシンプルで分かりやすいのですが、やや気になる点があります。1つはアニメーションに使用するsin値の問題です。今回は9個のムービークリップインスタンスが同期してアニメーションします。全てのインスタンスは同一のsin値を元に移動すべきですが、シンボル内で「アニメーションの処理を行うentarFrameイベントハンドラ」を定義すると、インスタンスごとにentarFrameイベントハンドラが実行され、sin値も個々に算出されることになります。これは1箇所で計算した値を各ムービークリップインスタンスで参照する形が望ましいでしょう。2つ目は処理負荷の問題です。シンボル内でentarFrameイベントハンドラを定義すると、インスタンスの数の分だけ個別のenterFrameイベントが発生します(それぞれに異なるイベントオブジェクトが生成されます)。イベントオブジェクトの生成は比較的負荷のかかる処理です(今回のサンプルでは、扱うインスタンス数が少ないので、実際には気にするほどではありませんが)。そのため、メインタイムラインにentarFrameイベントハンドラを定義し、その中から各ムービークリップインスタンスにアニメーションを更新するためのカスタムイベントMOVEを発行する形にします。この考え方で作成したのが次のサンプルです。}スクリプトのポイントを解説しましょう。9個のムービークリップインスタンスのインスタンス名は「a_mc」~「i_mc」としています。カスタムイベントは、アニメーション開始時に発行するSTARTイベント、enterFrameイベントハンドラからアニメーションを進行させるために発行するMOVEイベント、移動終了時に発行するMOVE_ENDイベントを使用します。メインタイムラインのxInitMC()メソッドでは、各ムービークリップインスタンスの終了位置(「2」の形)のX座標とY座標を引数としてxInit()メソッドを実行し、初回のアニメーションの開始位置と終了位置を設定する初期化処理を行っています。開始位置は、SWFロード時に9個のムービークリップインスタンスは「1」の形に配置してあるため、その座標となります。ボタンクリックによる2回目以降のアニメーションでは、この初期化処理は実行されず、前回のアニメーション終了時にmoveEndHandler()メソッドで再設定さる開始位置と終了位置をもとに移動するようになっています。シンボルのxInit()メソッド内では、メインタイムラインのxAddTarget()メソッドを実行して、カスタムイベントのターゲットを登録しています。このようにシンボル内から親であるメインタイムラインのカスタムメソッドを実行するには、parentプロパティで参照するメインタイムラインをMovieClipとして認識させる必要があります。そのためas演算子を使ってMovieClipに型変換したメインタイムラインへの参照を変数myParentに保持しています。enterFrameイベントハンドラのenterFrameHandler()メソッドではメインタイムラインのグローバル変数nSinにsin値を格納しています。このsin値をムービークリップインスタンスから参照するためにxGetSin()メソッドを用意してあります。xGetSin()メソッドはシンボル内のmoveEndHandler()メソッド内で参照しています。例2:ムービークリップシンボルをコンポーネント化する例1では、各インスタンスの終了位置を固定値で指定しましたが、このような場合コンポーネント定義を使うこともできます。コンポーネント定義を行うことで、[プロパティ]インスペクター(CS4では[コンポーネントインスペクタ])でパラメーターの指定を行えるようになります。パラメーターで指定した値は、ムービークリップに定義された対応する変数に自動的に代入されます。コンポーネント定義を行うには[ライブラリ]で対象となるムービークリップシンボルを選択し、オプションメニューから[コンポーネント定義...]実行します。[コンポーネント定義]ダイアログで[+]ボタンでパラメータを追加します。プログラム内で使用する変数名は[変数]欄で指定します。各ムービークリップインスタンスの終了位置をプログラム内で指定する必要が無くなるので、スクリプトは次のように変更できます。}コンポーネントパラメータとして定義した終了位置を表す変数goalX、goalYはシンボル内でグローバル変数として宣言しておく必要があります。メインタイムラインではムービークリップインスタンスに終了位置を設定する必要が無くなったのでその部分の処理は削ってあります。ここでは紹介のためにコンポーネント定義を使ってムービークリップシンボルをコンポーネント化しましたが、コンポーネントは本来コンポーネントの制作者と使用者が異なる場合に有効です。使用者はプログラムコードを変更することなくコンポーネントの振る舞いを変えることができるので、安全に使うことができるからです。それ以外の場合には、ともすれば処理の全貌が見えにくくなることがあるので効果を検討した上で使うのがよいでしょう。例3:カスタムイベントをクラスとして定義する本連載ではカスタムクラスは使用しない方針ですが、今回は少しだけ使ってみようと思います。その目的は、MOVEイベントハンドラ(シンボル内のmoveHandler()メソッド)で、sin値を取得する際にメインタイムラインのxGetSin()メソッドを通して取得しているのを、イベントオブジェクトのカスタムプロパティとして受け取れるようにすることです。ここまではカスタムイベントを発行する際に、Eventインスタンスを引数としてEventDispatcher.dispatchEvent()メソッドを実行してきましたが、Eventインスタンスにはカスタムプロパティを追加できません。そこで、カスタムイベント用のクラスを作成して、そこでsin値を保持するためのカスタムプロパティを定義しようと思います。ここではクラス名はAnimationEventクラス、sin値を保持するプロパティはsinプロパティとします。sinプロパティを使用するのはMOVEイベントだけですが、今回使っている3つのカスタムイベントは全てAnimationEventクラスとして定義しようと思います。以下、スクリプトコードです。}カスタムイベント用の定数は全てクラス定義ファイル内でパブリック定数として定義したので「AnimationEvent.START」のように記述します。組み込みのイベントっぽくなりました。ポイントは、メインタイムラインのenterFrameイベントハンドラ内で、AnimationEvent.MOVEイベントを発行する際にAnimationEventインスタンスのsinプロパティにsin値を設定している点です。この値はシンボル内のmoveHandler()メソッド内でイベントオブジェクトのプロパティとして参照できています。今回のカスタムイベントクラスは最小限の記述にしていますが、本来はEvent.clone()メソッドやEvent.toString()メソッドをオーバーライドすべきとされています。詳しくはオンラインヘルプ「Eventクラス」などをご確認ください。次回は、ブラウザウィンドウのサイズ変更に合わせてオブジェクトのレイアウトを変更するサンプルを作成する予定です。地域を選択してください地域を選択すると、アドビサイトで使用する言語と内容が変わります。