サイトトップ
Director Flash 書籍 業務内容 プロフィール

Adobe Flash非公式テクニカルノート

ActionScript 3.0に対応したMovieClipのボタンをつくる

ID: FN0706001 Product: Flash Platform: All Version: CS3/ActionScript 3.0

Flash MX以降(ActionScript 2.0/1.0)では簡単な設定で、Buttonシンボルと同様のボタンアニメーションを、MovieClipシンボルに対して適用することができました。その機能は、Flash CS3にも基本的に受継がれています。ただし、ActionScript 3.0では、2.0/1.0とは異なる設定や注意点があります。

1. MovieClipシンボルでボタンのアニメーションを設定する
マウスポインタとのインタラクションにより、アップ/オーバー/ダウンの状態が切替わるアニメーションをMovieClipシンボルに適用するには、第1に従来のFlashと同じくフレームラベルの設定が必要です。Buttonシンボルの場合と同じように、アップ/オーバー/ダウンのイメージをそれぞれ異なるフレームに作成したら、各フレームには半角英数字でつぎの表001のとおりにフレームラベルを設定します。

表001■フレームに配置するイメージと設定するフレームラベル
フレームのイメージ フレームラベル
アップ _up
オーバー _over
ダウン _down

第2に、MovieClipシンボルの第1フレームに、つぎのスクリプト001を設定します。ステートメントは2行です(図001)。MovieClipインスタンスをタイムラインに配置して[ムービープレビュー]で確認すると、マウスポインタとのインタラクションにより、MovieClipのアップ/オーバー/ダウンのイメージが変化します(サンプルSWF)。

スクリプト001■ボタンのMovieClipに設定するフレームアクション

// タイムライン: ボタンのMovieClip
// 第1フレームアクション
buttonMode = true;
stop();

図001■MovieClipにフレームラベルとフレームアクションを設定
Button MovieClip

上記スクリプト001について、簡単に説明しましょう。まず、第2ステートメントは、ActionScript 2.0/1.0の場合と同じく、マウスポインタとのインタラクションに関係なくMovieClipのフレームが再生されてしまわないように、再生ヘッドを第1フレームで止める処理です。

つぎに、第1ステートメントは、MovieClipインスタンスをボタンとして動作させるため、buttonModeプロパティにtrueを設定しています。表001で設定したフレームラベルを動作させるとともに、インスタンスに重ねたポインタを指差しカーソルに変化させます。

2. ボタンのMovieClipシンボル内に配置したMovieClipインスタンス
ボタンのMovieClipシンボルにヒット領域を設定したい場合には、ActionScript 2.0/1.0と同じくその領域をMovieClipシンボルとして作成します(図002)。そして、インスタンスを_up/_over/_downのフレームにわたって配置したうえで、ボタンのMovieClipに対するhitAreaプロパティとして設定します。

図002■MovieClipにフレームラベルとフレームアクションを設定
Button MovieClip

ヒット領域を指定するMovieClipインスタンス名をhitArea_mcとすれば、前記MovieClipシンボルのフレームアクション(スクリプト001)につぎのステートメントを追加します。

hitArea = hitArea_mc;

ところが、この修正の結果、ボタンのアニメーションが動作しなくなります。ActionScript 3.0ではマウスイベントは、MovieClipシンボル内に配置された子のMovieClipインスタンスがまず受取ります。すると、親のMovieClipシンボルに設定したボタンのアニメーションは、実行されなくなってしまうのです。

この結果を避けるためには、ボタンのMovieClipシンボル内にはMovieClipインスタンスは置かず、替わりにシェイプやグラフィックインスタンスを用いることが考えられます。しかし、たとえば上述のヒット領域を指定するためには、その領域をMovieClipインスタンスとして作成し、配置しなければなりません。また、シンボル内のイメージにドロップシャドウなどのフィルタを適用しようとすると、やはりその対象はMovieClipにする必要があります(図002)。

図003■フィルタの適用対象はMovieClip
Button MovieClip

ボタンのMovieClipシンボル内にMovieClipインスタンスを配置する必要があるときは、マウスイベントを受取らないように、そのインスタンスのmouseEnabledプロパティをfalseに設定します[*1]。たとえば、ヒット領域のMovieClipインスタンスhitArea_mcに対してこの設定を行うときは、前記MovieClipシンボルのフレームアクション(スクリプト001)につぎのステートメントを追加します。

hitArea_mc.mouseEnabled = false;

_overや_downフレームに単独で使われているMovieClipの場合には、_upの第1フレームでインスタンスにプロパティを設定することはできません。各フレームにそれぞれ設定のフレームアクションを置くか、そのインスタンスのMovieClipシンボル内に自身のmouseEnabledプロパティを設定するステートメントを記述する必要があります。とくに、ボタンのシンボル内で使い回すMovieClipについては、後者の方が便利でしょう。

mouseEnabled = false;

前述フレームアクション(スクリプト001)に修正を加えて、MovieClipインスタンスhitArea_mcをヒット領域として指定したのが以下のスクリプト002です。ボタンのMovieClipシンボル内に配置するMovieClipインスタンスには、それ自身のフレームアクションとして上記のmouseEnabled設定のステートメントを追加することにします(スクリプト003)。

また、Buttonインスタンスの[ヒット]フレームと異なり、hitAreaプロパティでヒット領域に指定したMovieClipインスタンスは、そのままでは画面に表示されます。もし表示を隠したい場合には、インスタンスのvisibleプロパティをfalseに設定する必要があります[*2]。

スクリプト002■ボタンのMovieClipにヒット領域の設定を加えたフレームアクション

// タイムライン: ボタンのMovieClip
// 第1フレームアクション
buttonMode = true;
hitArea = hitArea_mc;   // ヒット領域設定
hitArea_mc.visible = false;   // インスタンスを非表示に
stop();

スクリプト003■ボタンのMovieClipシンボル内に配置されたMovieClipに加えるフレームアクション

// ボタンのMovieClipシンボル内に配置されたMovieClip
// 第1フレームアクション
mouseEnabled = false;

フレームラベル"_up"を第1フレームに設定すると、ボタンのイメージがアップに戻るたびに、第1フレームアクションが処理されます。直接の問題は発生しないものの、何度も処理を繰返す必要はありません。_up/_over/_downのフレームラベルは、第2フレーム以降に設定すると、無駄な繰返しが避けられます(図004)。

図004■第1フレームアクションの後にフレームラベルを設定
Button MovieClip

[*1] オンラインヘルプ[ActionScript 3.0コンポーネントリファレンスガイド] > [Sprite] > [hitAreaプロパティ]の「メモ」参照。この「メモ」の邦訳が日本語として意味を取りにくいため、以下に筆者の訳を掲げます。

メモ: ヒット領域として指定したSpriteのmouseEnabledプロパティは、falseに設定する必要があります。その設定をしないと、ボタンのSpriteは動作しない可能性があります。なぜなら、ヒット領域に指定したSpriteが、ボタンのSpriteに替わって、マウスイベントを受取ってしまうからです。

[*2] ヒット領域として指定したMovieClipインスタンスは「可視状態である必要はありません。不可視状態であっても、そのグラフィカルシェイプをヒット領域として検出できます」(前出注[*1]オンラインヘルプ[hitAreaプロパティ])。なお、hitAreaは、MovieClipクラスが継承するSpriteクラスのプロパティです。

作成者: 野中文雄
作成日: 2007年6月30日
Copyright © 2001-2006 Fumio Nonaka.  All rights reserved.