第４弾　■　ディスジョイント・ロールオーバー（Disjointed Rollover）

第４弾は、「ディスジョイント・ロールオーバー」。直訳すると「分離した部分の切り替え」って感じかな？　マウスが上に来ると画像が入れ替わる機構ということでは第２弾のナビゲーションバーに似ているけれど、ちょっと違う。マウスが上に来たときに、画面上の全く別の場所の画像が変わる…というもの。よく、メニューにマウスを近づけると、コンテンツの内容説明が別の場所に出てくる…なんていうのを見たことはあるでしょう。そういうのを作ろうというわけ。

またスライスとフレームの組み合わせで作業をするので、頭が混乱しがちだけれど、一度覚えてしまうと、ユーザインタフェース設計の幅がかなり広がるので、がむばろう。

ちょっと長いので３ページ構成です。

・page1++1.全体設計/2.ボタンの設計/3.シンプルロールオーバー
・page2++4.スワップ画像の用意/5.ディスジョイント・ロールオーバーの設定
・page3++6.透明GIF化/7.Dreamweaverとの連携/8.まとめ（その他の例）

１．まずは全体を設計する

まずは全体設計。どんな構成にしようか考えるところね。今回は、私が去年に取ったFireworksの上級コースで設計した右のようなページのメイキング。現在でも現役で使ってるので、実物を見るとわかりやすいかも。

http://homepage.mac.com/chinoboo/

見てもらえると分かるように、左右にある５つのボタンが私のサイトへのリンクになっていて、そこにマウスを持っていくと、真ん中にそれぞれのサイトの画面ダンプと説明が出る…というもの。マウスを持っていったときにボタンの色が変わるのは第２弾で紹介したけれど、今回はそれにさらに画面上の全く別の場所の画像が変わる。

どんなものを作りたいのかイメージが分かってもらえたかな？

２．何が必要なのか考える…まずはボタン、いってみよ〜〜！

まずは左右のボタンの部分だけに注目してみよう。画像が変わる機能を作るには、フレームを使うというのは第２弾で話したとおり。

・フレーム１：普通の状態
・フレーム２：マウスが上に来た状態
・フレーム３：クリックされた状態
・フレーム４：クリック状態でさらにマウスが上に来た状態

今回の設計では、フレーム１と２だけしか使わない。何故か…というと、前回の場合は常時表示するメニューだったので「今、何が選択されいてるのか（自分がどのコンテンツを見ているのか）」を示しておいたほうがユーザにとってわかりやすいと判断したけれど、今回の場合は１つ選んでリンク先に行った後には、どれが選択されたかを覚えておく必要はない。なので、クリックされた状態や、それにマウスが乗った状態は必要ない（これが正しいとは限らないけどね。でも、ユーザがどう感じるかを常に考えて設計することは大切）。

今回考えたボタンの変化はフォーカス。マウスがボタンの上に来たときに、ぼやけていた文字がハッキリする（ボタンの色も多少変化する）というもの。

最初の状態で画面全体を設計し、それを「フレームの複製」でフレーム２にコピーし、フレーム２でぼやかすエフェクトをやめる…という方法で制作。このあたりについては第２弾も参照のこと（下の例ではフレーム３以降も作られているけれど、ここでは気にしないで（笑））。

文字をぼかすには、塗りのエッジ設定を変更するだけなので、やめることも、あとから調整することも可能。

ここまで用意しておけば、あとはマウスが来たときに画像を入れ替える動作を指定するだけ。

３．シンプルロールオーバーの設定

マウスがボタンの上に来たときにだけ色を変える動作のことを、Fireworksでは「シンプルロールオーバー」と呼ぶ（他のソフトや一般的な言い方とは違うかもしれないので注意）。今回のボタンは、これに当てはまるので、まずはその動作の設定。

まずは上のようにスライスを作る。この次点では左右のボタンの操作をしている段階なので、まだ真ん中のスライスはとりあえず必要ない。クチを酸っぱくして言っているけど、各スライスにはオブジェクトパレットで名前を付けておくこと！

次に、ボタンの１つを選択して（ここでは[Western highways]のスライス）、ビヘイビアパレットを表示し、[＋]から「シンプルロールオーバー」を選択。

すると、次のような動作が設定される（下の図は目玉マークを選択して詳細を表示している）。

マウスが上に来たとき（onMouseOver）スライス名link-to-westernの部分をフレーム２で置き換える（スワップ）。フレーム２の画像はページを表示したときに取り込んでおく（プリロード）、そしてマウスが外に出たとき（onMouseOut）元のデータに戻す（スワップイメージの復元）。…というわけだ。

この作業をボタン全部について繰り返せば、マウスの変化でボタンが変化する動作の指定は終わり。この状態で動作を確認するには、メインウィンドウの左上にあるタブで「プレビュー」を選ぶ。

さて、ここから先が今回のメインイベント「ディスジョイント・ロールオーバー」の作業。長くなりそうなので、ページを分けることにしましょう。

| 1 | 2 | 3 |