ボタン化されたMCの移動

質問

ホームページの中の小バナーをクリックすると表示される新規ページの全画面Flashを作っています。
http://www.facial-index.com/
上記のページをクリックすると別窓で表示される新規ページの全画面Flashでは、「consept」等のナビゲーションをクリックすると画面構成が変わりますが、ナビゲーションは右の方に移動します。
このナビゲーションはMCをボタン化したものですよね。
このボタン化されたMCを押すと画面が変わる方法はフレームにラベルをつけて、そのラベルに飛ぶ設定を考えています。
わからないのは画面が変わる際に、すべてのボタン化されたMCが右の方に移動するASをどのように設定すればいいかということです。
どなたかご教授いただけませんでしょうか。
よろしくお願いいたします。

回答No.2

noname#35109 · ベストアンサー

返事が遅くなってしまいました。
＃１です。

> contentを縦列から並列にするとか、
> タイトルを上部へ動かすというような、
> 「ひとつのcontentをクリックしたときに
> それぞれのMCを任意の場所に動かす」
> にはどのようにしたらいいでしょうか。

５つの content ムービークリップは塊として動くけど，
その中で任意の位置に動かしたいということでしょうね，おそらく。
これも，座標データや動かすスクリプトが多くなるだけで，
同じようにできますよ。

また，
Flash のインスタンスの座標は ローカル(相対)座標 なので，
その点においても５つの content を１つの menu の中に入れる＃１の方法で簡単にできます。
ローカル(相対)座標 というのは，
「親ムービークリップ内の子ムービークリップの座標は，_root に対する座標ではなく，親ムービークリップ内での座標になる」
ということです。

ActionScript に限らず，
手動でムービークリップ内にムービークリップを配置したり，
モーショントゥイーンでムービークリップ内のムービークリップを動かしたりする場合も ローカル座標 で動きます。
ですから，
蝶が羽ばたくだけの動作をムービークリップ内に作っておいて，
その蝶が羽ばたくだけのムービークリップをステージ上で動かすと，
蝶が羽ばたきながら飛び回るというムービーが簡単にできるのですね。
稀に ローカル座標 であることが厄介な場合もありますが，
たいていの場合は ローカル座標 であることが便利にはたらきます。

＃１の回答のスクリプトの概容は次の３つの部分からできています。

　------------------------
　menu の座標指定データ部分
　------------------------
　munu を移動させる部分
　------------------------
　クリック時の動作（フラグの値を変える）部分
　------------------------

menuは１つですから，
座標指定も５パターンをまとめた１つですし，
移動させるスクリプトも１つですが，
５つのcontentムービークリップにそれぞれ座標を指定する場合は
ここの部分が各５倍分増えることになります。
つまり６倍の量になります↓。
その量の多さで作成や管理はややこしくなりますが，
考え方は同じで行けます。

あと，
＃１のスクリプトでは座標を全て定数で指定しています。
ActionScript 記述的には定数指定の方が簡単なのですが，
バランスのとれたレイアウトなどはActionScriptではなく主観の手動で配置した方が簡単です。
ですからこの回答では，
手動で配置したレイアウトというものを尊重する場合のスクリプトをとり混ぜて書きます。
これには初期位置を変数化しておく必用が出てくるので，
最初に「初期座標などの記録部分」を追加します。
ですから，この回答のスクリプトの概容は次ような部分からできているものになります。

　------------------------
　初期座標などの記録部部分
　------------------------
　menu の座標指定データ部分
　content0 の座標指定データ部分
　content1 の座標指定データ部分
　content2 の座標指定データ部分
　content3 の座標指定データ部分
　content4 の座標指定データ部分
　------------------------
　munu を移動させる部分
　content0 ～ content4 を移動させる部分
　------------------------
　クリック時の動作（フラグの値を変える）部分
　------------------------

具体的なスクリプトサンプルですが，
ムービー自体の構造は＃１のままで，
つまりは，こんな↓レイアウトと階層のままで，

　　---menu ムービークリップ内------------

　　　　■■■■■■■■■ ←content0

　　　　■■■■■■■■■ ←content1

　　　　■■■■■■■■■ ←content2

　　　　■■■■■■■■■ ←content3

　　　　■■■■■■■■■ ←content4

　　---------------------------------

＃１の フレーム1 のスクリプトのみを次のように書きかえてください。

/////////////////////////////////////////////////////////////////////////////
// 各 content ムービークリップの初期座標の記録
// （変数 c0x ～ c4x に各 ｘ座標 を記録）
// （変数 c0y ～ c4y に各 y座標 を記録）
for (var i = 0; i<=4; i++) {
_root["c"+i+"x"] = _root.menu["content"+i]._x;
_root["c"+i+"y"] = _root.menu["content"+i]._y;
}
// 各 content ムービークリップの横幅の記録
// （変数 c0w ～ c4w に各 _width を記録）
for (i=0; i<=4; i++) {
_root["c"+i+"w"] = _root.menu["content"+i]._width;
}
//
// menuの各座標を設定（配列） ※可変
var coordinate0 = [Stage.width/2-100, Stage.height/2];
var coordinate1 = [Stage.width/2+100, Stage.height/2];
var coordinate2 = [Stage.width/2+100, Stage.height/2+100];
var coordinate3 = [Stage.width/2, Stage.height-50];
var coordinate4 = [Stage.width/2-100, Stage.height/2+100];
// content0の各座標を設定（配列） ※可変
var c0_0 = [c0x, -700];
var c0_1 = [c0x, c0y];
var c0_2 = [c0x+100, c0y];
var c0_3 = [c1w+c0w+10, c2y];
var c0_4 = [c4x+100, c4y];
// content1の各座標を設定（配列） ※可変
var c1_0 = [c1x, c1y];
var c1_1 = [c1x, c1y];
var c1_2 = [c1x+50, c1y];
var c1_3 = [c1w+5, c2y];
var c1_4 = [c3x+50, c3y];
// content2の各座標を設定（配列） ※可変
var c2_0 = [c2x, c2y];
var c2_1 = [c2x, c2y];
var c2_2 = [c2x, c2y];
var c2_3 = [c2x, c2y];
var c2_4 = [c2x, c2y];
// content3の各座標を設定（配列） ※可変
var c3_0 = [c3x, c3y];
var c3_1 = [c3x, c3y];
var c3_2 = [c3x-50, c3y];
var c3_3 = [-(c3w+5), c2y];
var c3_4 = [c1x-50, c1y];
// content4の各座標を設定（配列） ※可変
var c4_0 = [c4x, c4y];
var c4_1 = [c4x, c4y];
var c4_2 = [c2x-100, c4y];
var c4_3 = [-(c3w+c4w+10), c2y];
var c4_4 = [c0x-100, c0y];
//
// スピードの設定 ※可変
var spd = 1/8;
//
// content0を初期位置に設置
_root.menu.content0._x = c0_0[0];
_root.menu.content0._y = c0_0[1];
//
// フラグの初期値を設定
var flg = 0;
//
// menu ムービークリップ の座標移動
_root.menu.onEnterFrame = function() {
// 指定座標に徐々に近づける
this._x += (_root["coordinate"+_root.flg][0]-this._x)*_root.spd;
this._y += (_root["coordinate"+_root.flg][1]-this._y)*_root.spd;
for (i=0; i<=4; i++) {
this["content"+i]._x += (_root["c"+i+"_"+_root.flg][0]-this["content"+i]._x)*_root.spd;
this["content"+i]._y += (_root["c"+i+"_"+_root.flg][1]-this["content"+i]._y)*_root.spd;
}
};
//
// 各 content ムービークリップの動作定義
for (i=0; i<=4; i++) {
// 各 content に各変数 n の値を指定
_root.menu["content"+i].n = i;
// 各 content ムービークリップをクリックしたとき
_root.menu["content"+i].onRelease = function() {
// _root のフラグに 自分自身の n の値を代入
_root.flg = this.n;
};
}
/////////////////////////////////////////////////////////////////////////////

スクリプトは長くなりましたが，
長くなったのは座標に対するデータ部分が増えたのが主な原因で，
プログラム部分はほとんど変わっていません。
また，プログラム部分の計算は四則演算のみです。

ムービープレビューなどして見てもらうとわかると思いますが，
「content0」は特別扱いです。
ご質問で書かれている URL の 「HOME」 ボタンに見立てていて，
上からピューっと降りてくるというものを採り入れてみました。

あと，＃１で書き忘れていたことですが，
最後の「クリック時の動作（フラグの値を変える）部分」，
つまりこの部分（インデント付）↓

　// 各 content ムービークリップの動作定義
　for (var i = 0; i<=4; i++) {
　　　// 各 content に各変数 n の値を指定
　　　_root.menu["content"+i].n = i;
　　　// 各 content ムービークリップをクリックしたとき
　　　_root.menu["content"+i].onRelease = function() {
　　　　　// _root のフラグに 自分自身の n の値を代入
　　　　　_root.flg = this.n;
　　　};
　}

これは，
説明でスクリプトを簡略化するために，
for文 で一気に onRelease の動作定義をしているだけです。
実際にはフラグの値を変えるだけでなく様々な動作を入れると思いますから，
for文で一気に動作定義をするのではなく，
１つ１つ個々に動作定義をする方向で考えた方が無難だと思います。

例えばこんな感じです↓

-------------------------------------
_root.menu.content0.onRelease = function() {
// _root のフラグに 0 を代入
_root.flg = 0;
// ～ここに _root.gotoAndPlay("フレームラベル"); などを書く ～
};
_root.menu.content1.onRelease = function() {
// _root のフラグに 1 を代入
_root.flg = 1;
// ～ここに _root.gotoAndPlay("フレームラベル"); などを書く ～
};
　～～～ 省略 ～～～
_root.menu.content4.onRelease = function() {
// _root のフラグに 4 を代入
_root.flg = 4;
// ～ここに _root.gotoAndPlay("フレームラベル"); などを書く ～
};
-------------------------------------

または，
フレームに書くのではなく，各 content ムービークリップに，

-------------------------------------
// 例えば content0 の場合
on (release) {
// _root のフラグに 0 を代入
_root.flg = 0;
// ～ここに _root.gotoAndPlay("フレームラベル"); などを書く ～
}
-------------------------------------

-------------------------------------
// 例えば content1 の場合
on (release) {
// _root のフラグに 1 を代入
_root.flg = 1;
// ～ここに _root.gotoAndPlay("フレームラベル"); などを書く ～
}
-------------------------------------

と content4 まで書いて行っても良いです。
その辺は，扱いやすいようにしてもらうと良いと思います。

> sussakunさんの回答を「神懸り的な回答」と言われた方が…

私はおだてられても木には登りませんし，
また，全く神懸りでも何でもありませんよ。
今回の場合は，
次のような↓初歩的な内容を理解して頭の中で整理し，組み立てているだけです。

「FLASHアクションスクリプト入門編 for文」
http://isvalid.jp/actionscriptLab/ASlesson/actionsctipt_for.html

「配列とは？Array」
http://www.1art.jp/flash/le/lesson34/lesson34.htm

「ドット演算子と配列アクセス演算子」
http://www.fumiononaka.com/TechNotes/Flash/FN0507001.html
　～引用～
> 2. 配列アクセス演算子
> 配列アクセス演算子([])も、オブジェクトのプロパティを取得します。
> ドット(.)の替わりにブラケット([])を用いるほか、
> 大きく異なるのはプロパティを文字列で指定することです。たとえば、
> メインタイムラインに設定した変数nFrameの値を[出力]パネルに表示するには、
> 配列アクセス演算子([])を使ってつぎのように記述します。
>
> スクリプト005■メインタイムラインの変数値を配列アクセス演算子[]で参照
> // メインタイムラインに設定した変数nFrameの値を出力
> trace(_root["nFrame"]);

長くなりましたが以上です。

お礼

大変丁寧な回答をありがとうございました！
いえいえやはり「神懸り的な回答」だと思わざるを得ません。
それでいて思い上がったり見下すところなどまるでなく、sussakunさんの素晴らしいところは、ボランティアで見ず知らずの他人の為にご自分の多くの時間を費やしてここまでご教授くださるその優しさ、思いやりです。

今、自社製品のWebデザイン更新を担当しており、メニューが縦並びのままステージの真ん中付近にあると困る場面に遭遇しまして、この縦並びが横にすーっと行ってくれたらいいな、タイトルもある場面では上の方によけてくれたらいいなと思い、ASの本や検索などで当たってみましたが組み立てがわからず質問させていただきました。

昨日お答えいただいた方法では、menuがすごくいい動きをしてくれたので感激したのですが、ひとかたまりでmenuのMCになっているため、それぞれのcontentへのASが書けず、悩んでいました。
今日の回答でそれも解決しました。
たくさん勉強になりました。本当にありがとうございます！

回答No.1

noname#35109

全体的な複合動作やデザインを考えるのは難しいですが，
メニューボタン（MC）の塊がクリックによって動くという部分は，そんなに難しいことではありません。

各ボタンをクリックしたときに，
各ボタンを入れたムービークリップを動かす座標を決めておいて，
ボタンがクリックされたときにその指定座標までムービークリップを徐々に動かせば良いだけです。

簡単なサンプルの作り方を書きますから，
新規ドキュメント作成から作ってみてください。
そして数値を変えたりいじったりしながらスクリプトを理解すれば，
応用ができると思います。

Flash を起動させて新規ドキュメントを作成してください。

そして，ステージ上に，
横幅100px × 高さ 15px くらいの塗り入り長方形を，矩形ツールで描いてください。
大きさは単なる目安です適当で良いです。
また塗りの色も白以外（背景色以外）であれば何色でもかまいません。

長方形が描けましたら，
その長方形全体を選択してムービークリップに変換してください。

変換しましたら，
そのムービークリップをコピペで 5つに増やして，
縦にならべて置いてください。
ステージ上を図示すると次のような状態です↓。

---------------------------------

　　　　　■■■■■■■■■

　　　　　■■■■■■■■■

　　　　　■■■■■■■■■

　　　　　■■■■■■■■■

　　　　　■■■■■■■■■

---------------------------------

これはメニューボタンのつもりのムービークリップです。

縦に５つ配置できましたら，
それぞれのムービークリップを選択して，
下のプロパティインスペクタ（プロパティパネル）から，
各ムービークリップにインスタンス名を付けます。
この説明では，上のムービークリップから順に，
「content0」「content1」「content2」「content3」「content4」
というインスタンス名を付けたとしておきます。

５つのムービークリップに「content0」～「content4」というインスタンス名を付けましたら，
その５つのムービークリップ全てを選択して，
５つまとめて，ムービークリップに変換してください。
ムービークリップの入れ子状態を作るのです。

５つまとめたムービークリップができましたら，
そのムービークリップにもインスタンス名を付けます。
この説明では，「menu」というインスタンス名を付けたとしておきます。

階層を図示すると次のようになっているということです。

　_root（メインムービー）
　　　└ nenu （ムービークリップ）
　　　　　　├content0 （ムービークリップ）
　　　　　　├content1 （ムービークリップ）
　　　　　　├content2 （ムービークリップ）
　　　　　　├content3 （ムービークリップ）
　　　　　　└content4 （ムービークリップ）

今現在，おそらく _root のタイムラインは，
１フレーム １レイヤー のはずですから，
レイヤーを新規で追加して ２レイヤー にしてください。

そして新しく追加されたレイヤーの フレーム1 の空白キーフレームを選択して，
下のアクションパネルに次のスクリプトを書いて（コピペして）ください。

//////////////////////////////////////////////////////////
// 各座標を設定（配列） ※可変
var coordinate0 = [200, 200];
var coordinate1 = [400, 200];
var coordinate2 = [400, 100];
var coordinate3 = [100, 300];
var coordinate4 = [150, 250];
// スピードの設定 ※可変
var spd = 1/10;
//
// フラグの初期値を設定
var flg = 0;
// menu ムービークリップ の座標移動
_root.menu.onEnterFrame = function() {
// 指定座標に徐々に近づける
this._x += (_root["coordinate"+_root.flg][0]-this._x)*_root.spd;
this._y += (_root["coordinate"+_root.flg][1]-this._y)*_root.spd;
};
//
// 各 content ムービークリップの動作定義
for (var i = 0; i<=4; i++) {
// 各 content に各変数 n の値を指定
_root.menu["content"+i].n = i;
// 各 content ムービークリップをクリックしたとき
_root.menu["content"+i].onRelease = function() {
// _root のフラグに 自分自身の n の値を代入
_root.flg = this.n;
};
}
//////////////////////////////////////////////////////////

書けましたら，
「制御」→「ムービープレビュー」で実際に動きを見てみます。
「content○」 のボタン（ムービークリップ）をクリックすると，
５つのボタンが一緒に指定座標に動くはずです。

各座標は私が適当に入れただけの数値ですから思いつきのでたらめです。
ここの座標を変えたり，
コンテンツの数に合わせて「content○」ムービークリップを増やせば良いということになります。

作成の説明が手間なので長くなってしまいましたが，
やっていることは簡単なことです。
メニューのボタンを１つのムービークリップに入れてしまって
指定座標を目標にして，ムービークリップを徐々に動かせば良いのです。
その指定座標をボタンのクリックによって動的に変えているというだけの仕組みです。

スクリプトの書き方も実はたくさんあります。
上記は，たまたま今私が考えついたスクリプトであって私自身も明日考えるならまた違う物になっていると思います。

書き替えたりして，色々実験してみてください。

補足

sussakunさん、こんばんは！以前もお世話になったことがあります。
sussakunさんの回答を「神懸り的な回答」と言われた方がいらっしゃいましたが、同感です。今回も本当にありがとうございました！
ASはわたしにとっては大変難しく、いつも助けてくださり感謝しています。

ところで、もうひとつ質問してよろしいでしょうか・・・。
contentをひとまとめにMCにするという方法を教えてくださいましたが、contentを縦列から並列にするとか、タイトルを上部へ動かすというような、「ひとつのcontentをクリックしたときにそれぞれのMCを任意の場所に動かす」にはどのようにしたらいいでしょうか。
どうぞよろしくお願いいたします。