Rookie'sFlashLaboratory
Homeへもどる
PHASE07 ドロップダウンメニュー
ドロップダウンメニューの作成です。

大変実用的で、いたる所で活用できますのでオススメです。

ここで紹介している作成方法は、あくまで一例にすぎません。
他にもっと簡単な作成方法があるかもしれませんので、さがしてみてください。

ボタンにマウスカーソルが重なるとメニューが下に、にゅるっと出ます。





注:今回、最初に表示されるボタンを「ボタン」
  ロールオーバーで表示されるボタンを「ロールオーバーボタン」
  ロールオーバーで出てくるメニューを「メニュー」
  メニューに配置する「ロールオーバーボタン」以外のボタンを「メニューボタン」
と表記しています。
ややこしいですが、ご了承ください。



1
まず、ボタン用の画像を用意します。
「ボタンを追加」で作ってもいいですが、ここではわかりやすくするためと
作業の手間を惜しんで画像を用意するだけにします。
2
「クリップ」メニューから「クリップの新規作成」を選択します。
サイズは、
幅:「ボタン」画像の横幅
高さ:任意
で入力してください。
今回の「幅」は、「ボタン」画像の横幅と同じ100pxになります。
「高さ」は、高さ25pxの画像を5つタテに並べますので125pxです。
ですが、フチが欠ける法則にしたがって、
「幅」:101px
「高さ」:126pxにします。

入力してOKボタンを押します。


3
「クリップ」に「メニュー」用の画像を配置します。
カンバスの一番上にくる「ロールオーバーボタン」用画像を
タイムラインの一番上にくるようにしてください。
でないと、アニメーションをつけた時、「メニューボタン」が
「ロールオーバーボタン」の上を通り過ぎていきます。
言ってることがわけわからんと思いますが、プレビューで一度おためしください。
ちょっと、笑ってしまいますよ・・・。

今回ばかりでなく、この配置オブジェクトの重なり順は大切な項目ですので、
注意しながら配置しましょう。

画像でなくても、カンバス上でテキストを書き、
それを「メニューボタン」としても問題はありません。
ただ、画像とテキストでは、アニメーションを設定した時に
多少違いがでますのでご注意ください。

また、「ボタンを追加」で作ってもいいでしょう。
すっごい面倒ですけどね・・・。


4
この時、各オブジェクトをある程度ドラッグでそろえてから、
各オブジェクトのプロパティの「位置とサイズ」項目にある、
「左端」「上端」に数値入力すると、楽に配置できます(状況によります)。
5
つづけて各オブジェクトにアニメーションの設定をしてください。
一番上の「マウスオーバーボタン」は設定しません。
それ以外の全ての「メニューボタン」は、
「上から現れる」に設定します。
各詳細設定の「フェードイン」のチェックをはずしておきます。
6
各「メニューボタン」に設定が終わったら、
タイムラインでスピードの調節をします。

右の画像のタイムラインウィンドウをご覧ください。
上から二番目の画像「Mail」をクリックして選択し、
一番下の「Information」を「Shiftを押しながらクリック」すると、
一括選択できます。
今回のアニメーションは全て同じ動きをさせます。
なので、一括選択しておくと、選択されたオブジェクト全てまとめて
タイムラインの調整ができます。


7
アニメの設定がすべて終わったら、タブを
「クリップ内ページリスト」に切り替えます。
作成しているクリップをダブルクリック。
表示される「ページのプロパティ」の「ストップボタン」を
選択しておいてください。
これを設定しておかないと、永遠に「メニューボタン」たちが
上から降りてきます・・・。

今回は設定しませんが、各オブジェクトにリンク設定をするのも
忘れないようにしましょう。
カンバス上の「戻る」ボタンをクリックして、大元のページ編集にもどります。


8
ページ編集画面に戻ったら、「クリップリスト」から
作成した「メニュー」のクリップをドラッグアンドドロップします。
位置の調節もしてください。
最初に配置した「ボタン」用の画像と「メニュー」クリップに配置した
「ロールオーバーボタン」の画像がぴったり重なるように配置します。
重なり順は「ボタン」が下、「メニュー」が上に来るようにしてください。


9
変数の設定をします。
「ボタン」:「ロールイン時に変数の値をセットする」を
     「変数1を1にする」に設定します。

「メニュー」:「変数の値により表示・非表示」に、
     「変数1が1に等しいとき表示する」
     「変数1が0にひとしいとき表示しない」
     の2つを設定してください。

     つづけて、
     「ロールアウト時に変数に値をセットする」に、
     「変数1を0にする」と設定してください。
     
     これで、マウスカーソルがボタンの上に来た時にメニューが表示され、
     カーソルがメニューを離れたらメニューが消えるように設定できました。

以上で完成です。



「メニューボタン」は、ヨコから出てくるようにしてもいいですし、
フェードインさせてもいいですね。
発想しだいで様々な面白いドロップダウンメニューが作れると思います。

ドロップダウンメニューはホームページに動きをつけ、彩りを添える効果があると思います。
JavaScriptでこれを作るのは大変面倒なのですが、フラッシュで、しかもFlashMakerを使えば簡単に作成できます。
ホント、おすすめです。

 
Copyright (C) 2008 森静四郎, All rights reserved.