チュートリアルのトップへ >> Fireworksトレーニングのトップへ ■コラムのトップへ ■オリジナルプロダクト ■制作料金
シンプルロールオーバー/1(基本)

シンプルロールーバーの設定は、旧バージョンとあまり変わりませんが、細かいパネル類の変更などがありますので、説明をしておきます。
まず、ロールオーバーの為に、フレームを2つ作成します。


上図左が、フレーム1に作成されたイメージで、ブラウザでマウスがイメージに重なっていないデフォルトの状態です。上図右は、マウスがイメージに重なった時に表示するイメージで、フレーム2に描画します。

今回は、このイメージ全体をロールオーバーの設定にしたいと思います。

そのために、スライスツールを使って、ロールオーバーで変化するエリアを選択していきます。旧バージョンでは[URLツールバー]の中にURLツールとスライスツールの設定がありましたが、Fireworks 2からは、[ツールボックス]の中に[URLツール]と[スライスツール]が納められています。


スライスツールで、ロールオーバーさせたいイメージを囲い込んだら、[オブジェクト]パネルを使って、スライスオブジェクトの設定を行います。今回は単純なロールオーバーだけですので、詳しい設定を行いませんでしたが、ロールオーバーしたオブジェクトをクリックしたら、URLにジャンプする設定、その際のターゲットの設定。また“alt”タグを使ったテキスト代替表示などをここで設定します。



スライスオブジェクトの設定を終えたら、[ビヘイビア]パネルを使って、アクションの設定を行います。「+」ボタンをクリックすると、プルダウンメニューが現れますので、ここで「シンプルロールオーバー」を設定します。

シンプルロールオーバーを選択すると、以下のようなダイアログボックスが現れます。今回はマウスUpとOverだけの単純なロールオーバーですので、上にある2つのチェックボックスは外しておきます。




上画面の「OK」をクリックすると、[ビヘイビア]パネルに設定されたアクションが表示されます。

シンプルロールオーバーの設定では、マウスイベントはonMouseOver(マウスが重なった時にアクションを実行する)しか設定することができません。

さらに、「ステイタスメッセージを表示」などのビヘイビアを追加したい場合は、「+」ボタンをクリックして、ビヘイビアを追加します。 これで、ロールオーバーの設定は完了です。あとは、書き出しを行って、完成です。

旧バージョンではスライスの書き出しは[ファイル]メニューの中に別項目として設けられていましたが、Fireworks 2からは、すべての書き出しは[ファイル]→[書き出し]で行います。

[書き出し]を実行すると[書き出しのプレビュー]ダイアログボックスが表示されますので、そこで必要な設定を行って次のステップに進みます。

今回は[オブジェクト]パネルで書き出し画像のファイル設定(jpeg)を選択していますので、そのまま「OK」をクリックして、書き出しの最終画面(下図)に必要な設定を入力します。




ロールオーバーのテスト最終画面では、スライスの設定、HTMLファイルの設定、書き出しファイルのディレクトリの設定を行います。

全ての設定を終えて、書き出されたロールオーバーイメージがこれです(左)

マウスが重なった時に、画面がフレーム2に描画したイメージを表示するようになっています。

 
マウスが重なる前と、重なった状態の画像を2種類用意しておくこと…これがシンプルロールオーバーの基本ですね。これは現行バージョンでも同じ仕様です。

ただし、Fireworks4からのシンプルロールオーバーに関しては、スライスオブジェクトを選択し、中央のターゲットアイコンをプレスすれば、ビヘイビアの設定ウィンドウがオープンするので、設定がとても簡単になりました。

また、Fireworks3以降は、ドキュメント作成時にウィンドウをプレビュー状態に切り替えることができるようになり、シンプルロールオーバーなどは、ブラウザでの動作確認をシミュレートしているので、書き出しを行う前に確認することが容易になりまた。
 


  

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