■チュートリアルのトップへ　 >>　WEBサイト構築テクニックのトップへ　■コラムのトップへ　■オリジナルプロダクト　■制作料金
FIREWORKSでの作業の効率化について

シンプルロールオーバーのボタンを作成する
ブラウザ上のボタンにマウスが重ねると、
ボタンの色や形が変化するページをご覧になったことがあると思います。

これはロールオーバーという技法で、JavaScriptによってマウスに反応して、
異なる画像ファイルを表示する仕組みです。


 シンボルの種類には、前ページで説明したグラフィックシンボル以外に、
ボタンシンボルというものがあり。これを使うと簡単にロールオーバーボタンを作成できます。

ボタンシンボルを作成するには［挿入］→［新規ボタン］を選択するか、
［挿入］→［新規シンボル］を選択して［シンボルのプロパティ］パネルを表示し、
［ボタン］を選択して［OK］ボタンをクリックします。

［ボタンシンボル］作成パネルは、［アップ］［オーバー］［ダウン］［オーバーダウン］［ヒット］の
5つの表示パネルに分かれており、上部タブによって表示を切り替えます。



今回の作成では、マウスが重なると異なるイメージを表示する［シンプルロールオーバー］の設定ですので、
グラフィック作成作業は［アップ］と［オーバー］しか使いません。

［アップ］はマウスが重なる前、［オーバー］はマウスが重なった状態
まずアップにロールオーバーボタンに設定したいグラフィックを作成します。

今回は、シンプルな矩形のパスオブジェクトに、ライブエフェクトで
［ベベル（内側）］と［ドロップシャドウ］を適用しました。
それぞれの設定のパラーメータは以下の通りです。




ボタンを作成するのであれば、
何のボタンなのか分かるように文字を重ねなければなりません。

［ツールボックス］から［テキストツール］を選択して文字を入力しました。

これでボタンのベースは完成です。

次にマウスが重なった時の状態を作成します。
マウスが重なった時の状態をマウスオーバーと呼び、［オーバー］のウィンドウにグラフィックを作成します。

ロールオーバーボタンでは、［アップ］のバリエーションとして［オーバー］が作成されることが多いです。
今回は［アップ］の状態をコピーして［オーバー］を作成する事にしました。



［アップのグラフィックをコピー］して、バックのボタン（パスオブジェクト）の
ドロップシャドウのパラメータを若干変更し、
テキストとボタンを下方向に2ピクセル、右方向に2ピクセル移動しました。

さらに、テキストのカラーを変更してマウスが重なった時の変化を表現しました。

次ページでは作成したボタンシンボルのドキュメントへの配置を説明します。

もどる 次へ
　　

このWEBサイトに掲載されている文書・画像・映像・写真等の著作権はSilicon Cafe'に帰属し、許諾なく 複製・頒布を行うことは 法律で固く禁じられています。 Copyright (C) 1995-2003 Silicon Cafe'. All rights reserved