■チュートリアルのトップへ　>> Fireworksトレーニングのトップへ　■コラムのトップへ　■オリジナルプロダクト　■制作料金


前のページでも少し触れましたが、全体にビヘイビアの設定が簡単に行えるようになりました。特にドラッグ&ドロップでスワップイメージを設定できるのは、ありがたいですね。

スワップイメージは、ロールオーバーと同じ考え方でマウスが重なると異なるイメージソース（画像ファイル）を表示するビヘイビアです。Fireworksでは異なるイメージを別 のフレームに配置して、スワップイメージ（イメージの交換）によってフレームを指定する仕掛けです。

まず、異なるイメージをフレームに配置しておきます。今回は3箇所のスワップイメージを作成するので、3つのフレームに異なるイメージ（今回は写 真画像）を配置しておきます。



フレームの状態は、右図のようになります。一番上のフレームが常時表示されているイメージ。フレーム2〜4までの合計3つのフレームは、ボタンをクリックすれば切り替わるイメージとして作成しておきます。

イメージを作成したら、スワップイメージのビヘイビアを設定するために、ドキュメントをスライスしていきます。

今回はボタンとなる3箇所のイメージと、ボタンによって切り替わる箇所をスライスオブジェクトを使ってスライスの設定を行います。

今回のバージョンからは、スライス設定が完了したら、ドラッグするだけでスワップイメージを設定することができます。スライスオブジェクトの中央の「トンボ」のようなアイコンをドラッグして、スワップイメージとして適用させたい（交換したいイメージ）スライスオブジェクトまでドラッグします。すると、2つのスライスオブジェクトがリンクされている表示になり、ポップアップパネルで表示させたいフレーム番号を指定します。





 これでスワップイメージの設定は完了です。あとは、ドキュメントウインドウでプレビューして動作確認を行ってください。

また、今回のスワップイメージはマウスで反応するような仕様にしたいので、それぞれのビヘイビアでマウスアクションを［onClick］に設定しておきます。

またスワップイメージのビヘイビアパネルの詳細設定で［onMouseOutのイメージの復元］のチェックを外すと、マウスからボタンを移動させても、次にクリックするまで同じイメージを表示し続けることができます。

次のページに掲載しているサンプルは、その方法で作成されたスワップイメージです。数字のボタンをクリックすると、スワップイメージによって個別 にフレーム配置された写真画像が同じ位置で表示されます。

スワップイメージそのものはFireworks2から搭載された機能ですが、以前よりも設定が行いやすくなりましたので、 今まで敬遠していた方々もこの機会にぜひトライしてみてください。

徹底検証4トップへ 前のページへ 次のページへ
　　

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