技術的な質問です！

質問

いつもお世話になっています。

ウェブサイトを作り始めた初心者です。
​http://www.rmkrmk.com/index.html​
こちらのサイトのように、
横からメニューが飛び出したりするような仕組み（？）
をつくりたいのですが、どのような仕組みになっているんでしょうか。

簡単な説明だけでも結構ですので、教えていただけないでしょうか？

こちらは、Actionscriptでやってるんでしょうか？
それともJavascript??

ちなみに、私はFlashCS4 ＆　AS3を使っています！

もし、なにか良いサンプルがあれば教えていただけるとうれしいです！！！

回答No.1

BlurFiltan · ベストアンサー

Flash でしたら JavaScript は少なくともこの場合関係しないでしょう。

ご質問は動きですか？
動きの部分のみに関しては ActionScript も特に要りません。
ActionScript で動かしたければ動かせますが
ActionScript で動かしたくなければその必要はありません
ということです。

動きではなく，
動きを発生させる原因（クリックなど）を感知させる部分にはActionScript が必須です。

要は，Flash はアニメーションソフトですから，
動きは ActionScript など抜きでいっくらでも作れます。
ただ，
ボタンをクリックしたときにアニメーションを開始させるとかいう部分には
ActionScript が必要だということです。

動的要因によって動かし方が変わるでしょう？
その部分には ActionScript が必要です。

＝＝＝ ＝＝＝ ＝＝＝

ステージ上にボタン（ボタンシンボルに変換したインスタンス）を４つくらい作成して，
その４つくらいのボタンを，まとめて１つのムービークリップに変換します。

そのムービークリップ内の編集に入って，
１つ１つのボタンを別々のレイヤーに配置し，
フレームを適当に伸ばして，
各ボタンを時間差で出し入れする動きを作成します 【図】↓。

【図】では，
１～15フレームで各ボタンが出てくる
16～30フレームで各ボタンが引っこむという例を示しています。
動かしているのは CS4 のモーショントゥイーンです。
（CS4 で言うところのクラシックトゥイーンでもかまいません。）

ActionScriptを書くレイヤーを挿入して，
フレーム1 のキーフレームに

this.stop();

と書きます。
意味は，「このムービークリップ内の再生を停止」です。

ムービークリップ内の真ん中のフレーム（【図】の場合フレーム15）をキーフレームにして，
ここにも

this.stop();

と書きます。

要は フレーム1 と フレーム15 で，
ムービークリップ内アニメーションを停止させます。
これで動きは一応完成です（細部の修正や微調整などは後でします）。

「シーン 1」などメインのタイムラインの編集に戻ります。
上で作ったムービークリップを選択してプロパティパネルでインスタンス名を付けます。
たとえば 「menu_mc」 というインスタンス名を付けることにしておきます。

メインのタイムラインのステージ上に，
上の 「menu_mc」 のタイムラインを制御するためのボタンを２つ作成します。

「menu_mc」を開くボタンには
たとえば 「open_btn」 というインスタンス名を付けます。

「menu_mc」を閉じるボタンには，
たとえば 「close_btn」 というインスタンス名を付けます。

　　レイアウト一例↓

　　　close_btn→▼
　　menu_mc↓
　┏━━━━┓
　┃［ボタン１］┃
　┃［ボタン２］┃
　┃［ボタン３］┃
　┃［ボタン４］┃
　┗━━━━┛
　　　open_btn→▲

そしてメインのタイムラインのレイヤーにも
ActionScriptを書くためのレイヤーを挿入して，
次のように書けばできあがりです。

-----------------------------------------------
//「close_btn」 を非表示にする
close_btn.visible=false;

//「open_btn」にイベントリスナーを登録(クリック,実行関数openMenu)
open_btn.addEventListener(MouseEvent.CLICK,openMenu);

//関数 openMenu の定義
function openMenu(evt:MouseEvent):void {
// 「menu_mc」内をフレーム2から再生
menu_mc.gotoAndPlay(2);
// 「open_btn」を非表示にする
open_btn.visible=false;
// 「close_btn」 を表示する
close_btn.visible=true;
}

//「close_btn」にイベントリスナーを登録(クリック,実行関数closeMenu)
close_btn.addEventListener(MouseEvent.CLICK,closeMenu);

//関数 closeMenu の定義
function closeMenu(evt:MouseEvent):void {
// 「menu_mc」内をフレーム16から再生
menu_mc.gotoAndPlay(16);
// 「open_btn」を表示する
open_btn.visible=true;
// 「close_btn」 を非表示にする
close_btn.visible=false;
}
-----------------------------------------------

上のままでは，
ボタンが出入りする動きが 今ヒトツ だと思います。
「カスタムイージング」 などで動きを演出すれば，
味わいのある動きになると思います。

Home / Flash のヘルプ＆サポート / モーションエディタの利用
http://www.adobe.com/jp/designcenter/flash/articles/lrvid4057_fl.html

お礼

こんなにご丁寧に本当にありがとうございます（TдT）
感激です！！！本当にわかりやすいです！！！！

がんばります！！！本当にありがとうございます！！！！