内容 (What's Covered)

この文書では、Adobe Fireworks でロールオーバーを作成する方法について説明します。

A. ロールオーバーとは

ロールオーバーとは、マウスポインターが画像上に触れると、別の画像が表示される機能です。ロールオーバーをトリガーするのは、スライス、ホットスポット、ボタンといった Web オブジェクトです。

Fireworks では、ロールオーバーで画像が切り替わるだけの単純なものから、複数の状態を持つボタン、リンクを設定したロールオーバーボタンなどを作成することができます。

B. シンプルロールオーバーの作成

シンプルロールオーバーでは、一番上のステートの画像をそのすぐ下にあるステートの画像に入れ替えます。シンプルロールオーバーは 1 つのスライスにのみ適用されます。

  1. Fireworks を起動し、ドキュメントを開きます。
  2. トリガーオブジェクト(ロールオーバーを設定するオブジェクト)が共有レイヤー上にないことを確認し、選択ツールで選択します。
  3. 編集/挿入 から、「長方形スライス」または「多角形スライス」を選択して、トリガーオブジェクトの一番上にスライスを作成します。



  4. ステートパネルの「ステートの作成 / 複製」ボタン をクリックして、ステートを新規作成します。

    ※ ステートパネルが表示されていない場合は、ウィンドウ/ステート を選択して表示します。



  5. 新しいステート(ステート 2)で、以下のいずれかの操作を行い、スワップ画像として使用する画像を用意します。

    ・ Fireworks のツールを使用して、画像を作成します。

    ・ クリップボードに画像をコピーし、Fireworks で 編集/ペーストを選択して画像を貼り付けます。

    ・ ファイル/読み込み を選択し、既存の画像を読み込みます。



  6. ステート 2 のスライスの下に画像を配置します。

    ※ スライスは、ステート 2 で作業しているときも表示されています。



  7. ステートパネルでステート 1 を選択して、オリジナル画像を含むステートに戻ります。



  8. スライスを選択し、ビヘイビアーハンドル上にポインターを置きます。



  9. ビヘイビアーハンドルをクリックし、メニューから「シンプルロールオーバービヘイビアーを追加」を選択します。



     
  10. 「プレビュー」タブをクリックし、シンプルロールオーバーを確認します。



C. ジョイントロールオーバーの作成

ジョイントロールオーバーでは、マウスポインターが Web オブジェクト上に触れたりクリックしたりすると、別の Web オブジェクトの画像を入れ替えます。マウスポインターが触れるオブジェクトがトリガー、入れ替わるオブジェクトがターゲットです。まず、トリガー、ターゲットスライスおよびスワップ画像が置かれるステートを設定する必要があります。次に、ビヘイビアーラインで、トリガーをターゲットスライスにリンクします。ジョイントロールオーバーのトリガーには、スライス、ホットスポット、またはボタンを使用できます。

  1. Fireworks を起動し、ドキュメントを開きます。
  2. トリガーオブジェクト(ロールオーバーを設定するオブジェクト)が共有レイヤー上にないことを確認し、選択ツールで選択します。
  3. 編集/挿入 から、「長方形スライス」、「多角形スライス」、「ホットスポット」のいずれかを選択して、トリガーオブジェクトの一番上にスライスまたはホットスポットを割り当てます。

     注意 : 選択したオブジェクトがボタンの場合、またはスライスやホットスポットに既に画像が含まれている場合、この手順は省略します。



  4. ステートパネルで、「ステートの作成 / 複製」ボタンをクリックして、新規ステートを作成します。

    ※ ステートパネルが表示されていない場合は、ウィンドウ/ステート を選択して表示します。



  5. 新しいステート(ステート 2)で、以下のいずれかの操作を行い、ターゲットとして使用する画像を用意します。

    ・ Fireworks のツールを使用して、画像を作成します。

    ・ クリップボードに画像をコピーし、Fireworks で 編集/ペーストを選択して画像を貼り付けます。

    ・ ファイル/読み込み を選択し、既存の画像を読み込みます。



  6. ステート 2 の任意の位置に画像を配置します。

    ※ 手順 3. で作成したスライスまたはホットスポットの下以外であれば任意の場所に配置できます。
  7. 画像を選択し、編集/挿入から「長方形スライス」または「多角形スライス」を選択して、画像にスライスを割り当てます。



  8. ステートパネルでステート 1 を選択して、オリジナル画像を含むステートに戻ります。



  9. トリガーオブジェクトをクリックして選択し、マウスポインターをビヘイビアーハンドルに合わせます。



  10. トリガーオブジェクトのビヘイビアーハンドルを、ターゲットスライスにドラッグします。



  11. ビヘイビアーラインが、トリガースライスの中心からターゲットスライスまで引かれ、スワップ画像 ダイアログボックスが表示されます。



     
  12. 「スワップ画像元」ポップアップメニューから、手順 4. で作成したステートを選択し、「OK」をクリックします。



  13. 「プレビュー」タブをクリックし、ジョイントロールオーバーを確認します。



D. ボタンシンボルを使用したロールオーバー

ボタンシンボルを使用すると、簡単に 2 ~ 4 種類の状態を持つロールオーバーボタンを作成することができます。また、ボタンエディタではボタンのアクティブ領域(クリックするとボタンが動作する領域)を指定することができます。

  1. Fireworks を起動し、ドキュメントを開きます。
  2. ツールで描画したり、ファイル/読み込み から画像を読み込むなどして、ボタン用のオブジェクトを配置します。

    ※ 編集/挿入/新規ボタン でボタンを作成した場合は、手順 7. に進んでください。



  3. オブジェクトを選択した状態で、 変更/シンボル/シンボルに変換 を選択します。
  4. 表示された シンボルに変換 ダイアログボックスの「種類」で「ボタン」を選択し、「OK」をクリックします。



  5. シンボルに変換されたオブジェクトをダブルクリックすると、シンボル編集画面に切り替わります。



  6. ステートパネルが表示されていない場合は、ウィンドウ/ステート を選択して表示します。
  7. ステートパネルで各ステートを選択し、プロパティインスペクターなどからボタン画像を編集します。

    ※ 新規ボタンを作成した場合は、ボタン編集画面での操作となります。



  8. 各ステート時の画像編集が終了したら、左矢印をクリックしてドキュメント画面に戻ります。



  9.  「プレビュー」タブをクリックし、マウス操作を行ってロールオーバーを確認します。



     

アドビコミュニティフォーラムをご利用下さい

この文章はお役に立てましたでしょうか?さらに情報をお探しになる場合には、アドビスタッフがお届けしている解決事例やメンバー同士での活発な意見交換をチェックできるコミュニティフォーラムをご利用下さい。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー