| Fireworks 2でドキュメントをスライス書き出しする |
 |
図1：今回は、ウェブページ全体をFireworksで作成した。付属CD-ROMにサンプルを収録してあるので、参考にしてほしい
図2：「情報」パネルでは、数値入力で正確なオブジェクト配置が行える
図3：「挿入」メニュー→「スライス」では複数のオブジェクトに対して、それぞれのオブジェクトごと、あるいは、ひとつのオブジェクトとしてスライスオブジェクトを生成できる。ドロップシャドーなどのエフェクトもスライスしてくれるので安心だ
図4：ドキュメントにスライス設定を行った状態。スライスオブジェクトはレイヤーパネルで非表示にすることもできる
図5：スライスオブジェクトを初めとして、Fireworksではすべてのオブジェクトのプロパティを「オブジェクト」パネルで行う。リンクや
図6：フレーム2にはロールオーバーでマウスがグラフィックに重なったときの状態を作成しておく。アイデア次第でインタラクティブなページを作成することが可能だ
図7：ビヘイビアを割り当てるスライスオブジェクトを選択する。「シンプルロールオーバー」の場合は、まとめて選択してもよい
図8：ほかのビヘイビアを追加したい場合は、「＋」ボタンをクリックする
●サンプルのダウンロード |
スライスオブジェクトを理解しよう
Fireworksにはウェブページ全体をレイアウトする機能が数多く用意されています。DTPソフトのようにページにグリッドを表示させたりガイドラインを引くことができるので、正確なレイアウトを行うことが可能です。また「情報」パネル（図2）では、選択したオブジェクトをピクセル単位で正確に配置したり、オブジェクトの大きさを変更することも可能です。もちろん整列や均等配置などのレイアウトに欠かせないコマンドも数多く用意されています。
レイアウトが完成したら、「スライス」で書き出す設定を行います。スライスとは、その名の通り、ドキュメントをスライスして複数の画像ファイルとして書き出すことです。スライスの設定は、ツールボックスから「スライス」ツールを選択して、スライスオブジェクトを描きます。さらに、Fireworks 2からはオブジェクトを選択した状態で「挿入」メニュー→「スライス」を実行すると、オブジェクトの形に沿ってスライスオブジェクトを自動的に生成するので便利です（図3、4）。
スライスオブジェクトは個別に書き出しの設定を行うことができるので、GIFやJPEGなどの異なる画像フォーマットも一括で書き出すことができます。ほかにも、スライスオブジェクトにリンクの設定やHTMLテキストエリアの設定を行うこともできます（図5）。
JavaScriptを使ったロールオーバー
Fireworksはスライスを設定する際に、JavaScriptを使ったロールオーバーの設定を行うことができます。ロールオーバーとは、ブラウザでマウスがイメージに重なった時、マウスに反応して異なるイメージを表示するものです。
マウスが重なった時に表示するイメージを、フレームの「2」に作成し（図6）、ロールオーバーさせたい部分のスライスオブジェクトを選択し（図7）、「ビヘイビア」パネルで「シンプルロールオーバー」を設定するだけで完成です（図8）。実際に書き出しを行う前にブラウザでプレビューして動作確認を行うとよいでしょう。