スタイルとシンボルについて

パネルグループを確認します。「スタイル」パネルがあります。
「スタイル」パネルを少し広げて、利用しやすいようにしておきます。
図 1: スタイルパネル
パネル内のドロップダウンメニューに、現在のドキュメントと表示されています。これは、Fireworks CS4の新機能のひとつです。
現在のドキュメントにおいて利用できるスタイルが表示されていることを示しています。ドロップダウンメニューを開くと、スタイルのライブラリが開き、その他の利用可能なスタイルを選ぶことができます。
図 2: スタイルのライブラリ

プロパティインスペクタ

「プロパティ」インスペクタでスタイルのプロパティを修正することができます。

プロパティインスペクタ

図 3: 「プロパティ」インスペクタ

プロパティインスペクタにアクセスします

パネルをアイコン化します。「プロパティ」インスペクタ右端の、スタイルに関する機能が含まれている領域まで、利用できるようになりました。
ページ内のいくつかの要素を選択してみましょう。ドロップダウンメニュー内のスタイル名が変わりません。背景も含め、今選択したすべてのオブジェクトに同じスタイルが適用されていることがわかります。
1つのオブジェクトのスタイルを編集してみます。左端のMoviesと書かれたページのタブを選択します。「線形」の塗りのカラーピッカーをクリックして、グラデーションを黒から、濃い赤に変更します。選択していたタブに、設定したグラデーションが反映されました。塗りの変更を確定します。
図 4: 塗りの色を変更
ドロップダウンメニューに、コンテナ、デザイン+と表示されています。さらに、メニューの下側には一連のアイコンがあります。プラスのアイコンは、利用していたスタイルに、何かの変更が施されたことを示しています。
アイコンにマウスを合わせます。「スタイルを再定義」と表示されました。クリックします。同じスタイルを利用していたすべてのオブジェクトに、更新されたスタイルが適用されました。
図 5: スタイルを再定義
いったん操作を元に戻します。Control キー（Windows）またはCommand キー（Macintosh）を押しながらZ キーを押します。
例えば、いくつかのオブジェクトには同じスタイルを適用しますが、背景には適用したくない場合は、スタイルのリンクを解除することで、背景への更新されたスタイルの適用を防ぐことができます。背景を選択します。
「スタイルへのリンクを解除」をクリックします。
図 6: スタイルへのリンクを解除

シンボルの導入

スタイルは表示上の特性を複数のオブジェクトに対して同時に設定することができました。シンボルにはスタイルだけではなく、複数のオブジェクトを含めることができます。例えば、ボタンやナビゲーションバーなど、コンテンツ内で共有する要素がある場合、シンボルを作成し、それを繰り返し利用すると良いでしょう。

左上のダブルアイデンティティというロゴを選択します。F8キーを押します。「シンボルに変換」ダイアログボックスが表示されました。種類として、グラフィック、アニメーション、ボタンから選択できます。
図 7: 「シンボルに変換」ダイアログボックス
Tip: さらに、９スライスに関するオプションもあります。これにより、オブジェクトの形を崩すことなく、拡大･縮小をすることができます。
「シンボルに変換」ダイアログボックスを閉じます。このデザインには、すでにいくつかのシンボルが含まれています。
全体のインタフェースの部分をクリックで選択します。中央に小さなプラスのマークが表示されます。これは、選択中のオブジェクトがシンボルであると言うことを示しています。
ダブルクリックします。画面のデザインが変わり、シンボルの編集モードへ移りました。
ノート: Fireworks CS4では、シンボルの編集モードの時にキャンバスの上部に、小さなバーが表示されています。シンボルがネスト構造で作成されている場合、そのシンボルの深い階層に行けば行くほど、ブレッドクラムの連なりが長くなります。

図 8: ブレットクラム
シンボルにすでに、9スライスが適用されています。シンボルが、青と白の点線により分割されています。これは、このインタフェース全体が9つのスライスにより分割されていると言うことを示しています。そして、このように9スライスを適用しておくことによって、拡大・縮小を行った際に、形状を崩すことがありません。
図 9: 9スライスガイド
下の方にいくつかのちいさなコントローラーがあります。これらはビデオの再生やボリュームをコントロールするために用意されたシンボルです。これらのシンボルはネストされた構造になっています。例えば、こちらのストップボタンを選択します。すると、ボタン内にシンボルであることを示す小さなプラスのマークが表示されました。ダブルクリックします。すると、ボタンの部分を残し、他の部分はグレーアウトされました。そして、ストップボタンのシンボルだけがアクティブな状態となっています。
ノート: 上部のブレッドクラムと見比べましょう。2Dスタイルと書かれているのは、現在のこの小さなストップボタンのことです。そして、そのボタンはSymbolと名前の付けられたインタフェースのシンボルの中に配置され、さらにそれはページ1の中にあります。このように、シンボルはネスト構造で配置することができます。
シンボルの編集が終わったら、キャンバス上をダブルクリックし、ひとつ上の階層のシンボルに戻ります。
キャンバスでダブルクリックして、元のデザインに戻ります。

Fireworks CS4の新しいシンボル

Fireworks CS4はいくつかの共有ライブラリがあらかじめ用意されており、利用することができます。

パネルグループを拡張して、「共有ライブラリ」を開きます。「共有ライブラリ」は刷新され、多くのグラフィックを利用することができます。
「Webとアプリケーション」フォルダを展開し、スクロールして、目的のオブジェクトを探します。
図 10:「 Webとアプリケーション」フォルダ
クリックすると、プレビューすることができます。また、キーボードの矢印キーで選択を進めることができます。
インタフェースをダブルクリックしてシンボルの編集モードで開きます。
再び、「Webとアプリケーション」のフォルダを展開し、選択したグラフィックをドラッグアンドドロップで配置します。
「拡大・縮小」ツールを選び、シンボルのサイズを小さくします。
図 11: 拡大縮小ツール
さらに、このシンボルを編集したい場合は、ダブルクリックします。新しく配置したシンボルの編集モードになり、その他のインタフェースやシンボルの部分はグレーアウトされます。これで、このシンボルだけを編集できる状態になりました。