メニューとボタンの演出について

質問

たびたび失礼致します。
http://oshiete1.goo.ne.jp/qa2544902.html
および
http://oshiete1.goo.ne.jp/qa2555710.html
でお世話になりました。おかげさまで、FLASHのほうも完成しました。

さて、この度、上記のスクロールメニューの続きで、新たにどうしても分からない事が出てきてしまい、困っております。
スクロールメニューのボタンなんですが、パネル部分の動きと連動させて、ボタンがキラっと光るような演出(yahoo10周年サイトのFLASHみたいなやつです)をしたいのです。

このような演出はどのようにすればよいのでしょうか？
どうか、ご教授下さいますよう、よろしくお願い申し上げます。

回答No.1

noname#35109 · ベストアンサー

そのご質問は，
「Yahoo! JAPAN - ありがとう10周年」
http://10thann.yahoo.co.jp/
のご質問だと考えて良いわけですよね。

Yahoo! 10周年 のボタンは，
ムービークリップで作られているのです。
最近多いですよ，ムービークリップで作る自作ボタンというものです。
ボタンをムービークリップで作る方が手間ですが，
ずっとカスタマイズしやすいので，面白いボタンが色々作れます。

スクリプトの説明は簡単なのですが，
構造の作成が出てきますからココでは難しいです。
ですから，
これまた簡単なサンプルの作り方を説明します。

４枚の動くスライドはすでにできてあるという状態で，
ボタンムービークリップの作成からです。

まずボタンの大きさ程度の，塗りの入った長方形を描きます。

　■■■■■■■
　■□□□□□■
　■■■■■■■

そして目印に，真ん中に「１」でも書いて下さい。

　■■■■■■■
　■□□ １□□■
　■■■■■■■

この文字入り長方形をムービークリップに変換します。
変換したらダブルクリックで，ムービークリップ内の編集に入ります。
ムービークリップ内のタイムラインは，
次のような状態になっていると思います。

　レイヤー　筆・・|●|

これを３フレームにします。

　レイヤー　筆・・|●//[]|

そして，各フレームをすべてキーフレームにします。

　レイヤー　筆・・|●|●|●|

ここまでで，全てのフレームには，すべて同じ長方形が入っていると思いますから，
フレーム2 の長方形の文字を ２，
フレーム3 の長方形の文字を ３ にそれぞれ変えます。
つまり，それぞれのフレームには，

　---フレーム1---
　■■■■■■■
　■□□ １□□■
　■■■■■■■

　---フレーム２---
　■■■■■■■
　■□□ ２□□■
　■■■■■■■

　---フレーム３---
　■■■■■■■
　■□□ ３□□■
　■■■■■■■

という文字入り長方形が書かれているわけです。
１，２，３ は
今ムービークリップ内はどのフレームを表示しているか
という単なる目印です。

この フレーム3 を他のボタンに移ったときのアニメーションフレームにしたいと思うので，

　■■■■■■■
　■□□ ３□□■
　■■■■■■■

これをさらにムービークリップに変換してください。
変換したら，
そのフレーム3のムービークリップをダブルクリックして，
ムービークリップ内の編集に入ります。
ムービークリップ内のタイムラインは，
次のような状態になっていると思います。

　レイヤー　筆・・|●|

これを，だいたい 10フレーム くらいにしてください。
だいたい 10フレーム です。
何フレームでもかまいません。
だいたい 10フレーム にしたら１つレイヤーを追加して，
２レイヤーにし，その新しく作った方の最終フレームをキーフレームにします。
雰囲気，次のような感じです。

　レイヤー　筆・・|○　　　　　　　　　[]|○|
　レイヤー　筆・・|●/////////////[]|

そして，
最終フレームの空白キーフレームに

----------------------------
this._parent.gotoAndStop(1);
----------------------------

というスクリプトを書いておきます。
要はこのムービークリップが最後のフレームまで再生されたら，
自分の親（_parent）であるムービークリップ，
つまり　「１」「２」「３」 という長方形が３フレームにあるボタンムービークリップのタイムラインを，
フレーム1 に進めるということです。

できたら，ムービークリップ内の編集は終わりで，
メインムービーの編集に戻ります。

ステージ上には，
上のボタンムービークリップができていると思いますから，
例えば，ボタンが４つあった場合，
そのムービークリップを縦にコピペして４つにします。
複数フレーム の ボタン用ムービークリップ を用意して，
そして上から順に，
「buttonMC0」「buttonMC1」「buttonMC2」「buttonMC3」
という感じにインスタンス名を付けます。

次にフレームのスクリプトです。
Yahoo! 10周年 の場合は，
自動で他のボタンにフォーカスが変わるときに，
徐々に暗くなるムービークリップを入れた フレーム ，
つまりボタンムービークリップの フレーム3 に移動するように作られています。
この徐々に暗くなるムービークリップと，
キラッと光るムービークリップを入れたフレームに移動するムービークリップの両方に，
フレーム移動の命令を与えなければならないので，
フラグ（flg）を１つ増やして２つにしなければなりません。

全体的には，前のスクリプトとほとんど変わりませんが，
その他，改良した点には，★印をいれています。

------------------------------------------
//スピードの設定（可変）
var spd = 3/10;
//
// フラグの初期値を設定 ★
var flg0 = 0;
var flg1 = 0;
//
// 各変数の初期値を代入（目標座標を記録）
var slideY0 = slideMC._y;
var slideY1 = slideMC._y-(slideMC._height/4);
var slideY2 = slideMC._y-(2*slideMC._height/4);
var slideY3 = slideMC._y-(3*slideMC._height/4);
//
// 最初だけ buttonMC0 を フレーム2 へ移動 ★
_root.buttonMC0.gotoAndStop(2);
// １フレーム進む時間ごとに毎回実行
_root.slideMC.onEnterFrame = function() {
// slideMC の y座標を slideY? に近づける
this._y += (_root["slideY"+_root.flg0]-this._y)*_root.spd;
};
//
// ユーザー定義関数 slideMove の定義
function slideMove() {
// flg1 に flg0 の値を保存 ★
_root.flg1 = _root.flg0;
// flg0 の 値が 3 より小さければ
if (_root.flg0<3) {
// flg の値に 1 を加算
_root.flg0++;
} else {
// それ以外の場合は flg を 0 にする。
_root.flg0 = 0;
}
// buttonMC のフレーム移動 ★
_root["buttonMC"+_root.flg0].gotoAndStop(2);
_root["buttonMC"+_root.flg1].gotoAndStop(3);
}
// ユーザー定義関数 slideMove2 の定義 ★
function slideMove2() {
// buttonMC のフレーム移動 ★
_root["buttonMC"+_root.flg0].gotoAndStop(2);
_root["buttonMC"+_root.flg1].gotoAndStop(3);
}
//
//--- ココから以降を変更 ---
// ユーザー定義関数 myfunc の定義
function myfunc() {
// 4000ミリ秒（４秒）ごとに slideMove を実行
myID = setInterval(slideMove, 4000);
}
// ユーザー定義関数 myfunc の実行（初回）
myfunc();
------------------------------------------

そして，
一番上の 「buttonMC0」 には次のように書きます。
------------------------------------------
// このムービークリップが表示されたとき
onClipEvent (load) {
// とりあえずストップ
this.stop();
}
//
// このムービークリップにロールオーバーで
on (rollOver) {
// このムービークリップを フレーム2 に進める
this.gotoAndStop(2);
// setInterval のクリア
clearInterval(_root.myID);
// flg1 に flg0 の値を保存
_root.flg1 = _root.flg0;
// flg0 に 0 （自分の番号） を代入する
_root.flg0 = 0;
// ユーザー定義関数 slideMove2 の実行
_root.slideMove2();
}
//
// このムービークリップからロールアウトで
on (rollOut) {
// ユーザー定義関数 myfunc の実行
_root.myfunc();
}
on (release) {
//←何か動作を書く
}
--------------------------------------------

二番目の 「buttonMC1」 には次のように書きます。
--------------------------------------------
// このムービークリップが表示されたとき
onClipEvent (load) {
// とりあえずストップ
this.stop();
}
//
// このムービークリップにロールオーバーで
on (rollOver) {
// このムービークリップを フレーム2 に進める
this.gotoAndStop(2);
// setInterval のクリア
clearInterval(_root.myID);
// flg1 に flg0 の値を保存
_root.flg1 = _root.flg0;
// flg0 に 1 （自分の番号） を代入する
_root.flg0 = 1;
// ユーザー定義関数 slideMove2 の実行
_root.slideMove2();
}
//
// このムービークリップからロールアウトで
on (rollOut) {
// ユーザー定義関数 myfunc の実行
_root.myfunc();
}
on (release) {
//←何か動作を書く
}
--------------------------------------------

以下同様で，つまり，

　// flg0 に 1 （自分の番号） を代入する
　_root.flg0 = 1;

ココの部分が，

「buttonMC2」 だと

　// flg0 に 2 （自分の番号） を代入する
　_root.flg0 = 2;

「buttonMC3」 だと

　// flg0 に 3 （自分の番号） を代入する
　_root.flg0 = 3;

となるだけで他は同じです。

これで，パブリッシュしてもらうと，
スライドが動き，ボタンの数字が変わるものができます。

４つある「buttonMC○」の
キラっと光るのはフレーム2です。

　　　　　　　　　　　　 ↓キラっ
　レイヤー　筆・・|●|●|●|

現在は 「２」が表示されるだけですが，
この「２」のようなものをフレーム3と同様にムービークリップに変換して，
その中にキラっと光らせるアニメーションを作れば良いだけです。
この辺は Flash のお絵かきやモーショントゥイーンの基礎に当たる部分ですから，
ここでは逐一説明しにくいです。

フレーム2 ムービークリップの中にさらにムービークリップを入れて，
そのムービークリップの「明度」を明るい状態から，中間くらいの明るさにモーショントゥイーンさせるなどです。
最終フレームは，
this.stop();
でしょう。

フレーム3 も同様。
フレーム3 ムービークリップの中にさらにムービークリップを入れて，
そのムービークリップの「明度」を中間くらいの明るさから，暗い明るさにモーショントゥイーンさせるなどです。

以上，わかりにくい点もあったとは思いますが，
まるごとそのまま，Yahoo! 10周年 のそっくりなボタンの作り方です。

もっともそっくり真似をする必要はありませんし，
できれば真似はしない方が良いと思います。
どうするかは，Yahoo! 10周年 にとらわれず，自分なりに研究してみてください。

ムービークリップをボタンとして扱っているサイトは数多いです。
ボタンシンボルのインスタンスでは物足りませんからね。
次のURLは，Yahoo! 10周年 とは全く別のボタンですが，
作り方が書いてありサンプルも置いてくれています。

ムービークリップのボタン化
http://homepage3.nifty.com/ginga-b/MX/btnmc.html

しかし，このURLを鵜呑みにする必要は全くありませんよ。
例えば，

> フレームラベル用のレイヤーを用意し、
> 「アップ」用のフレームには「_up」、
> 「オーバー」用には「_over」、
> 「ダウン」用には「_down」というフレームラベルを付けます。

とか書いてあります。
こうすると便利にボタンのように扱えますが，
この辺は全く無視していてかまいません。
この回答で書いたように，
普通のムービークリップのように扱えば良いのです。
重要なのは，最後の，

> ボタンムービークリップに記述される
> on ( event ) ハンドラ内では、thisキーワードは、
> 親ではなく自分自身を指します。
> 非常に混乱する仕様ですので、記述するときは
> 十分注意してください。

です。これは重要です。

---P.S.--------------------------

以前の質問で，
ボタンのスクリプトを，

on (release) {
_root.flg = 2;
}

などとして，
他もわざわざ _root など，絶対パスで書いたのはそのためです。
ボタンは階層をもちませんから，

on (release) {
flg = 2;
}

でも大丈夫です。

しかし，ひょっとしたら，
「質問者の方は，ボタンをムービークリップで自作しているか，将来的に自作する可能性があるぞ。」
と考えたので，わざと _root.flg = 2; にして，
もしその場合でも変な所で躓かないようにはしていたのです。

ムービークリップでボタンを自作する場合，
階層が１つずれますから，絶対パスで指定するか，
相対パスで指定する場合は，階層に気を付けてください。

アクションパネルの 丸(○） に十字（＋）のアイコンの，
「ターゲットパスを挿入」ボタンをクリックして，
目的のダーゲットのパスを探しても良いです。

ここでは説明しにくい構造にあたる部分が多いです。
色々と実践研究してみてください。

お礼

回答いただきまして、大変有り難う御座います。
＞Yahoo! 10周年 のボタンは，
＞ムービークリップで作られているのです。
ムービークリップって色々な部分で使えるんですね。本当に勉強になりました。

ボタンで行き詰まる事を考慮して、何度も回答頂いた事に頭の下がる思いです。
yahoo10周年のような演出なんですが、ボタン部分を一目見て、見る人が「これはボタンだ」と分かるようにしてみたかったのです。
色々見て回るうちに、ちょうどyahoo10周年のFLASHにいきついて、こういった演出なら分かりやすいのでは？と思い作成に挑戦しようと思った次第です。

3度にわたる丁寧な回答を頂きまして、本当に有り難う御座います。
ボタンに関しては、ムービークリップだと色々できて面白いとの事ですので、ぜひ研究実施を重ねていきたいと思います。