フェリシモトップのようなアニメーション

質問

Flash初心者です。

現在、通販会社「フェリシモ」のトップＦｌａｓｈのような、ボタンに触れるとはじめ表示された内容が変わり、またボタンに触れると内容が変わって停止するようなアニメーションを作りたいと思いまして↓
http://www.felissimo.co.jp/

…簡易ですが徐々にできてきました。私は、ボタンのムービーを先に作って一番上のレイヤーに配置し、各内容のムービーもその下にレイヤーで重ね、すべてフレーム1コマ目に配置する方法をはじめ試していたのですが、10枚以上レイヤーを重ねるころにうまくいかなくなりました。

そこでレイヤーをボタンのレイヤーと各ムービーのレイヤー二つだけにし、ムービーのレイヤーに、1フレームにつきムービーを1つずつ配置して、ボタンに触れるとそのフレームにとんで、ムービーが再生される方法にしようとしたのですが、スクリプトに不慣れなもので、全くわかりません。

どなたか、良い解決策をご存知でしたらぜひよろしくお願いします。

回答No.1

sjt2007

ボタンに触れる(RollOver)と
表示中のムービーの下に新しくムービーを作り、
ムービーの深度を入れ替えて
フェードインさせるのはどうでしょうか？

まず、表示させたいムービー全てに識別子を設定してください。
ライブリのムービーを右クリック→リンケージ
「ActionScriptに書き出し」、
「最初のフレームに書き出し」をチェックし、
「識別子」にmovie1(以降movie2,movie3…)と書いてください。

ダミーMCを用意します。
ムービーを表示させたい所に配置します。
ダミーの名前をBASEにしてください。
次にボタンを配置してください。
名前はbutton1(以降button2,button3…)として下さい。

フレームに以下のスクリプトを書いてください。
var movie_total:Number=6; //ムービーの数を入れてください
var fade_speed:Number=15; //フェードインのスピード
//
//初期設定
function Init(){
//最初に表示するムービーをattach
BASE.attachMovie("movie1","movie1",2);
//ボタンを設定する
for(var i=1;i<=movie_total;i++){
this["button"+i].num=i;
this["button"+i].onRollOver=function(){
movie_change(this.num);
}
}
}
//
//ムービーを変える
function movie_change(num){
movie_set(num);//ムービーをセット
swap_mc();//MCを入れ替える
fade_in();//フェードイン
}
//
//ムービーをセットする
function movie_set(num){
BASE.attachMovie(["movie"+num],["movie"+num],1);
}
//
//MCを入れ替える
function swap_mc(){
//
//下部のMCを透過してから上部のMCと深度を入れ替える
BASE.getInstanceAtDepth(1)._alpha=0;
//BASE.getInstanceAtDepth(2)._alpha=100;
BASE.getInstanceAtDepth(2).swapDepths(BASE.getInstanceAtDepth(1));
}
//
//フェードイン
function fade_in(){
//
//上部のMCのアルファを上げ、下部のMCのアルファを下げる
this.onEnterFrame=function(){
BASE.getInstanceAtDepth(2)._alpha+=fade_speed;
BASE.getInstanceAtDepth(1)._alpha-=fade_speed;
//上部のMCが不透明になった所でフェード処理は止める
if(BASE.getInstanceAtDepth(2)._alpha >=100){
delete onEnterFrame;
}
}
}
//
Init();

お礼

ありがとうございます！
さっそく今日、試してみます。
本当に困り果てていましたので、心から感謝します…。