Lesson5 ActionScript
第7回 ActionScriptの応用:カード型ナビゲーション2
前回に引き続き、カード型のナビゲーションを作成しよう。前回は、ばらばらに並んだカードにマウスをロールオーバーすると、重ね順が入れ替わるところまでを紹介した。今回はカードをクリックすると、拡大、回転してカードが開く動きを作成していく。「ユーザー定義関数」を使って、より効率的に作成する方法についても解説する。また、最後は、計算式を使って拡大や回転といった動きが滑らかに行われるようにしていく。アニメーションではできないインタラクティブでシームレスな動きを実現できる
解説:北川貴清
※「FlashのABC」の本文中の解説で使用しているサンプルデータは、別ページでダウンロードができます。
クリックしたときカードを開く
位置、スケール、回転のプロパティを変更して、カードをクリックしたときに拡大表示されるようにする。
【サンプル1】カードをクリックすると、画面の中央に拡大表示される
1.ムービークリップシンボル「card0」の編集画面を開く。「action」レイヤーの[フレーム1]を選択し、[アクション]パネルにXY座標、スケール、回転角度の初期値を、変数「xx」、「yy」、「sca」、「rot」に格納する処理を追加する。スケールは縦横比率が同じなのでひとつの変数にした【図1】。
【図1】カードの初期設定のActionScriptを記述
(1)
xx = _x;
変数「xx」にX座標の初期値を格納する
xx = _x;
変数「xx」にX座標の初期値を格納する
(2)
yy = _y;
変数「yy」にY座標の初期値を格納する
yy = _y;
変数「yy」にY座標の初期値を格納する
(3)
sca = _xscale;
変数「sca」にスケールの初期値を格納する
sca = _xscale;
変数「sca」にスケールの初期値を格納する
(4)
rot = _rotation;
変数「rot」に回転角度の初期値を格納する
rot = _rotation;
変数「rot」に回転角度の初期値を格納する
2.カードを開く処理を設定しよう。ボタン「open_btn」をクリックしたときに、各プロパティとボタンの表示の設定を行う。「enabled」はボタンの機能を有効(true)/無効(false)にするボタンのプロパティだ【図2】。
【図2】カードを開いたときの処理を記述
// カードを開く
open_btn.onRelease = function() {
_x = 230;
_y = 160;
_xscale = _yscale = 100;
_rotation = 0;
close_btn._visible = true;
this.enabled = false;
};
open_btn.onRelease = function() {
_x = 230;
_y = 160;
_xscale = _yscale = 100;
_rotation = 0;
close_btn._visible = true;
this.enabled = false;
};
ボタン「open_btn」をクリックしたとき
(1)X座標を「230」に移動する
(2)Y座標を「160」に移動する
(3)スケールを「100(%)」に拡大する
(4)回転角度を「0(°)」に回転する
(5)ボタン「close_btn」を表示する
(6)ボタン「open_btn」を無効にする
(1)X座標を「230」に移動する
(2)Y座標を「160」に移動する
(3)スケールを「100(%)」に拡大する
(4)回転角度を「0(°)」に回転する
(5)ボタン「close_btn」を表示する
(6)ボタン「open_btn」を無効にする
3.次に、開いたカードを閉じる処理を設定する。ボタン「close_btn」をクリックしたときに、それぞれのプロパティを初期値に戻す設定を行う【図3】。ほかのカードも「card0」のActionScriptと同じ設定なので、ここの記述をすべてコピーして、ムービークリップシンボル「card1」~「card4」の「action」レイヤーの[フレーム1]の既存の記述を削除し、ペーストする。ここまでの設定を[制御]→[ムービープレビュー]で確認しよう。
【図3】カードを閉じたときの処理を記述
// カードを閉じる
close_btn.onRelease = function() {
_x = xx;
_y = yy;
_xscale = _yscale = sca;
_rotation = rot;
this._visible = false;
open_btn.enabled = true;
};
close_btn.onRelease = function() {
_x = xx;
_y = yy;
_xscale = _yscale = sca;
_rotation = rot;
this._visible = false;
open_btn.enabled = true;
};
ボタン「close_btn」をクリックしたとき
(1)X座標を「xx」に移動する
(2)Y座標を「yy」に移動する
(3)スケールを「sca(%)」に縮小する
(4)回転角度を「rot(°)」に回転する
(5)ボタン「close_btn」を非表示にする
(6)ボタン「open_btn」を有効にする
(1)X座標を「xx」に移動する
(2)Y座標を「yy」に移動する
(3)スケールを「sca(%)」に縮小する
(4)回転角度を「rot(°)」に回転する
(5)ボタン「close_btn」を非表示にする
(6)ボタン「open_btn」を有効にする
ユーザー定義関数を使ってカード操作を有効/無効にする
いずれかのカードを開いているとき、そのカードを閉じるまでは、ほかのカードの操作ができないようにする処理を設定する。
【サンプル2】カードを開いたとき、ほかのカードにロールオーバーしても反応しない
カード操作を無効にするには、5枚のカードのボタン「open_btn」を非表示にすればよい。そこで、これらの処理を一括してユーザー定義関数として定義しよう。ユーザー定義関数とは、既存のプロパティや、メソッドなどを組み合わせて作るオリジナルのメソッドのことだ。構文は次の通りだ。
・構文
function メソッド名(引数){
メソッドが呼び出されたときに実行するスクリプト
}
function メソッド名(引数){
メソッドが呼び出されたときに実行するスクリプト
}
メソッド名は自由に定義することができる。引数は設定しなくてもかまわない。これを使って次のように設定しよう。
1.「シーン1」に戻り、「action」レイヤーの[フレーム1]を選択し、[アクション]パネルに、ユーザー定義関数「invisibleOpenBtn」と「visibleOpenBtn」を設定する【図4】。
【図4】ボタン「open_btn」の表示/非表示を設定するユーザー定義関数を記述
(1)
// 全カードのopen_btnを非表示にする
function invisibleOpenBtn(){
for( i = 0; i < 5; i++ ){
this["card" + i + "_mc"].open_btn._visible = false;
}
}
ムービークリップ「card0_mc」~「card4_mc」のボタン「open_btn」を非表示にするユーザー定義関数「invisibleOpenBtn」を定義する
// 全カードのopen_btnを非表示にする
function invisibleOpenBtn(){
for( i = 0; i < 5; i++ ){
this["card" + i + "_mc"].open_btn._visible = false;
}
}
ムービークリップ「card0_mc」~「card4_mc」のボタン「open_btn」を非表示にするユーザー定義関数「invisibleOpenBtn」を定義する
(2)
// 全カードのopen_btnを表示する
function visibleOpenBtn(){
for( i = 0; i < 5; i++ ){
this["card" + i + "_mc"].open_btn._visible = true;
}
}
ムービークリップ「card0_mc」~「card4_mc」のボタン「open_btn」を表示するユーザー定義関数「visibleOpenBtn」を定義する
// 全カードのopen_btnを表示する
function visibleOpenBtn(){
for( i = 0; i < 5; i++ ){
this["card" + i + "_mc"].open_btn._visible = true;
}
}
ムービークリップ「card0_mc」~「card4_mc」のボタン「open_btn」を表示するユーザー定義関数「visibleOpenBtn」を定義する
2.ムービークリップシンボル「card0」の編集画面を開く。「action」レイヤーの[フレーム1]を選択し、[アクション]パネルに、ボタン「open_btn」、「close_btn」をクリックしたときにユーザー定義関数が実行されるように設定する【図5】。同様にムービークリップシンボル「card1」~「card4」にも記述し、[制御]→[ムービープレビュー]で確認しよう。
【図5】カードを開閉するときにユーザー定義関数を実行する
(1)
// カードを開く
open_btn.onRelease = function() {
_x = 230;
_y = 160;
_xscale = _yscale = 100;
_rotation = 0;
close_btn._visible = true;
this.enabled = false;
_parent.invisibleOpenBtn();
};
ボタン「open_btn」をクリックしたとき、ユーザー定義関数「invisibleOpenBtn」を実行する
// カードを開く
open_btn.onRelease = function() {
_x = 230;
_y = 160;
_xscale = _yscale = 100;
_rotation = 0;
close_btn._visible = true;
this.enabled = false;
_parent.invisibleOpenBtn();
};
ボタン「open_btn」をクリックしたとき、ユーザー定義関数「invisibleOpenBtn」を実行する
(2)
// カードを閉じる
close_btn.onRelease = function() {
_x = xx;
_y = yy;
_xscale = _yscale = sca;
_rotation = rot;
this._visible = false;
open_btn.enabled = true;
_parent.visibleOpenBtn();
};
ボタン「close_btn」をクリックしたとき、ユーザー定義関数「visibleOpenBtn」を実行する
// カードを閉じる
close_btn.onRelease = function() {
_x = xx;
_y = yy;
_xscale = _yscale = sca;
_rotation = rot;
this._visible = false;
open_btn.enabled = true;
_parent.visibleOpenBtn();
};
ボタン「close_btn」をクリックしたとき、ユーザー定義関数「visibleOpenBtn」を実行する
滑らかな動きの設定
ここまででカードナビゲーションとしての設定は完成した。これに加えて、Flashコンテンツならではの心地よい動きをつけていこう。
【サンプル3】カードをクリックすると、滑らかな動きで拡大表示される
「プロパティ += (到達値-プロパティ)*係数」という式を使うと、ムービークリップのサイズや位置などのプロパティを、イージングのような効果で滑らかに変化させることができる。
1.ムービークリップシンボル「card0」の編集画面を開く。「action」レイヤーの[フレーム1]を選択し、[アクション]パネルに、ボタン「open_btn」、「close_btn」をクリックしたときのイベントハンドラ内に設定している各プロパティを変数「Xn」、「Yn」、「Sc」、「Rt」に置き換える。これらの変数はそれぞれのプロパティの到達値だ【図6】。
【図6】変数に各プロパティの到達値を格納
// カードを開く
open_btn.onRelease = function() {
Xn = 230;
Yn = 160;
Sc = 100;
Rt = 0;
close_btn._visible = true;
this.enabled = false;
_parent.invisibleOpenBtn();
};
open_btn.onRelease = function() {
Xn = 230;
Yn = 160;
Sc = 100;
Rt = 0;
close_btn._visible = true;
this.enabled = false;
_parent.invisibleOpenBtn();
};
ボタン「open_btn」をクリックしたとき
(1)X座標の到達値「Xn」に「230」を格納する
(2)Y座標の到達値「Yn」に「160」を格納する
(3)スケールの到達値「Sc」に「100」を格納する
(4)回転角度の到達値「Rt」に「0」を格納する
(1)X座標の到達値「Xn」に「230」を格納する
(2)Y座標の到達値「Yn」に「160」を格納する
(3)スケールの到達値「Sc」に「100」を格納する
(4)回転角度の到達値「Rt」に「0」を格納する
// カードを閉じる
close_btn.onRelease = function() {
Xn = xx;
Yn = yy;
Sc = sca;
Rt = rot;
this._visible = false;
open_btn.enabled = true;
_parent.visibleOpenBtn();
};
close_btn.onRelease = function() {
Xn = xx;
Yn = yy;
Sc = sca;
Rt = rot;
this._visible = false;
open_btn.enabled = true;
_parent.visibleOpenBtn();
};
ボタン「close_btn」をクリックしたとき
(5)X座標の到達値「Xn」に「xx」を格納する
(6)Y座標の到達値「Yn」に「yy」を格納する
(7)スケールの到達値「Sc」に「sca」を格納する
(8)回転角度の到達値「Rt」に「rot」を格納する
(5)X座標の到達値「Xn」に「xx」を格納する
(6)Y座標の到達値「Yn」に「yy」を格納する
(7)スケールの到達値「Sc」に「sca」を格納する
(8)回転角度の到達値「Rt」に「rot」を格納する
2.それぞれのプロパティに対して、到達値に滑らかに近づく処理を追加する【図7】。同じ処理をムービークリップシンボル「card1」~「card4」に記述して完成だ。[制御]→[ムービープレビュー]で確認しよう。
【図7】滑らかな動きでプロパティを変化させるActionScriptを記述
// 滑らかな動きをつける
this.onEnterFrame = function() {
_x += ( Xn - _x ) * 0.2;
_y += ( Yn - _y ) * 0.2;
_xscale += ( Sc - _xscale ) * 0.2;
_yscale = _xscale;
_rotation += ( Rt - _rotation ) * 0.2;
};
this.onEnterFrame = function() {
_x += ( Xn - _x ) * 0.2;
_y += ( Yn - _y ) * 0.2;
_xscale += ( Sc - _xscale ) * 0.2;
_yscale = _xscale;
_rotation += ( Rt - _rotation ) * 0.2;
};
(1)
フレームが再生されるたびに、このムービークリップのX座標が変数「Xn」の値に近づく。
フレームが再生されるたびに、このムービークリップのX座標が変数「Xn」の値に近づく。
「_x += ( Xn - _x ) * 0.2;」とは、「_x = _x + ( Xn - _x ) * 0.2;」と同じ意味なので、例えば最初に「_x=130」、「Xn=230」なら、
「_x = 130+(230-130)*0.2 = 150」
「_x = 150+(230-150)*0.2 = 166」
「_x = 166+(230-166)*0.2 = 178.8」
「_x = 178.8+(230-178.8)*0.2 = 189.04」
「_x = 189.04+(230-189.04)*0.2 = 197.232」
・・・
のようにフレームの再生が繰り返されるたびに「_x」が「Xn」の値にだんだん近づくという式になる。ほかのプロパティについても同様だ。
「_x = 130+(230-130)*0.2 = 150」
「_x = 150+(230-150)*0.2 = 166」
「_x = 166+(230-166)*0.2 = 178.8」
「_x = 178.8+(230-178.8)*0.2 = 189.04」
「_x = 189.04+(230-189.04)*0.2 = 197.232」
・・・
のようにフレームの再生が繰り返されるたびに「_x」が「Xn」の値にだんだん近づくという式になる。ほかのプロパティについても同様だ。
サンプルをダウンロードする
次回につづく
[プロフィール] きたがわ・たかきよ●1972年8月生まれ。三重県出身。三重大学工学部卒業。大阪を拠点としてwebデザインを中心に活動中。著書に『Flash8デザインスクール for Win & Mac 』、『ネタ帳ビギナーズ FLASHテンプレート集 』。 http://www.f-l-a-v-o-r.com |