• ホーム
• 購読申込
• ヘルプ
• アーカイブ

注目の新機能ベスト10

Adobe Fireworks CS3

Alan Musselman

 

ここからはFireworks CS3の新機能トップ10をここで紹介しましょう。今回のFireworks CS3のリリースにあたり、Fireworksチームは多大な労力を重ねてきました。そしてさらにベータテスターの皆さんが示した情熱は、特筆に値するでしょう。ここで取り上げる機能の数々を見れば、今回のリリースがFireworks史上最も重要であることがお分かりいただけると思います。

1. 複数ページのサポート

Fireworks CS3 には新たに「ページ機能」が実装されています。従来は、Web サイトのレイアウトやモックアップ、バリエーションを保存するためにフレームを使用するのが一般的でしたが、新バージョンでは 1 つのドキュメント内で複数のページを追加できるため、フレームを時間軸に沿ったアニメーションや JavaScript のロールオーバといった、本来フレームが得意とする用途に専念させることができるようになります。

Fireworks CS3 がページ機能をもったことで、各ページに独自のスライス、ロールオーバ、画像解像度、キャンバスサイズを設定した Web サイトデザイン、および Web アプリケー ションの配置が可能になります。

また、これらのページ間には簡単にリンクの設定ができるので、Web サイトやリッチインターネットアプリケーション（RIA）のレイアウト上で、ナビゲーションがどのように展開されるのかも表現できます。さらにページ間でレイヤーを共有したり、キーボードショートカットやキャンバスウィンドウのクイックジャンプメニューを利用して、ページ間をすばやく移動することも可能です（図1）。

図1　ページパネル

2. ９スライスの拡大・縮小機能

Fireworks CS3 に搭載された 9 スライスの拡大・縮小機能も注目に値します。この機能によって、これまでベクトルオブジェクトやビットマップオブジェクトを拡大・縮小する際に発生していた問題が解決されるのです。

これまではこれらのオブジェクトを拡大・縮小するとオブジェクトのプロポーションが崩れていましたが、この「賢い」拡大・縮小機能を利用すれば、オブジェクトのどの部分の大きさを変化させ、どの部分を一定に保つかが指定できます（図2）。

たとえデザインの初期段階では想定しなかった量のコンテンツが発生しても、これからは 1 つのビットマップを 3 つ、あるいは 9 つのパーツに分割してサイズを調整できるので、コンテンツをレイアウトに収めるという単調な作業が不要になります。

図2　サイズの拡大例（上）と、９ スライスの拡大・縮小機能のガイド（下）

3. 階層化されたレイヤー管理

新バージョンではレイヤーパネルが大幅に改良されています。これからはレイヤー内に複数のサブレイヤーを作ることも可能です（図3）。これにより、非常に複雑な構成のモックアップを扱う場合でも、サブレイヤーを使用して手軽に各パーツに名前を付けたり、整理することができます。

また、Photoshop や Illustrator のファイルを読み込む際には、レイヤー階層情報が維持されるので、その都度レイヤーを整理することなくスムーズに編集作業に取りかかれます。

図3　階層化されたレイヤー

4. Adobe Flex との統合

Adobe Flex アプリケーションのレイアウトやプロトタイプを作成する際には、Fireworks CS3 上で、Flex で頻繁に使用されているコンポーネント群を利用することができます（図4）。

図4　既製の Flex コンポーネントを利用してFireworks CS3 でデザインされた Flex アプリケーション

Fireworks CS3 での作業が完了したら、MXML（図5）、CSS、画像を書き出して、Flex アプリケーションを手掛けるデベロッパーに渡すことができます。アセットを Flex Builder に読み込む際には、コンポーネントに設定されたスタイルやレイアウトの情報がそのまま維持されます。

図5　Fireworks CS3 の MXML 出力を Flex Builder で開いた状態

5. Adobe Bridge CS3 との統合

ファイルやフォルダを参照・操作するための新しい体験。これを提供するのが、大半の Fireworks ユーザにとって初めてとなる Adobe Bridge CS3 です（図6）。Bridge があれば、ファイル管理に有益な XMP メタデータも手軽に追加できます。また一度追加したデータは後々 Fireworks や Bridge 上でも編集できます。画像に対する各種コマンドの実行や バッチ処理も Bridge を使えば簡単です。

図6　Adobe Bridge を使用してファイルやフォルダを参照・操作

6. Photoshop ブレンドモードの採用

Fireworks CS3 と Photoshop CS3間の新次元の統合機能として、Photoshop で人気のブレンドモード、ディザ合成、焼き込み（リニア）、覆い焼き（リニア）、ビビッドライト、リニアライト、ピンライト、ハードミックスが Fireworks CS3 にも装備されています。これによって PSD ファイルの読み込み・書き出しの際に、これらのブレンドモードはもちろん Photoshop のレイヤー効果もそのまま維持されます（図7）。

図7　Photoshop との統合

7. Illustrator CS3 との密接な連携

これまで、古いバージョンの Illustrator ファイルを保管したり、Fireworks 上で効果やアートワークを再現しなければならなかったことは、Fireworks ユーザの悩みの種だったといえます。しかし Fireworks CS3 では、Illustrator CS3 との連携ワークフローが強化されており、Fireworks CS3 で直接 AI ファイルを開くことができます。また新しくなった読み込み機能は、Illustrator のパターン、レイヤー構成、透過処理はもちろん、リンクされた画像もサポートしています（図8）。

図8　Illustrator CS3との統合

8. 共有ライブラリ

Fireworks CS3 ではボタン、グラフィック、アニメーションシンボルなどのリッチシンボルをすべて 1箇所に集約して保管・アクセスできます。メニューコマンドの「共有ライブラリに保存」で、プロジェクト間で共有するアセットを共有ライブラリに保存しておけば、さらに簡単にデザインの一貫性が保てるようになります。

また、この機能は開発チームが利用する共有ライブラリを標準化するためにも有効なので、共同作業時にシンボルの保管場所が統一できなかったという従来の問題も解決できます。（図9）。

図9　 共有ライブラリ

9. リッチシンボル

Web サイトや Flash モックアップ、Flex アプリケーションなどを作成する際には、ユーザインタフェイス要素の状態が制御できる既製のリッチシンボルを利用することで、高い作業生産性を発揮できます（図10）。リッチシンボルのプロパティは、新しいシンボルプロパティパネルの中で手軽に変更できるので、どのレイヤーの表示・非表示を切り替えなければならないかを把握したり、オブジェクトのグループ化を解除したりといった必要がありません。

図10　リッチシンボル

リッチシンボルとは、つまるところ JavaScript ファイルによってそのプロパティをカスタマイズできるグラフィックシンボルです。スクリプティングに自信のないユーザのためには、基本的な JavaScript を生成するためのコマンドも用意されています。また Fireworks CS3 では、Fireworks 8 以前で未対応だった、シンボルインスタンスの入れ替えにも新たに対応しました。

10. コマンド、オートシェイプ、スタイル

Fireworks CS3 には新たに 2つのコマンドパネル、9 つのテキストコマンド、そして 16 個ものオートシェイプ（図11）、新しくなったスタイルパネル（図12）が装備されています。これらは Fireworks コミュニティからの貢献によって実現したものばかりです。

図11　シェイプパネル

図12　スタイルパネル

新しいパネルとしては、ベクトルオブジェクトの編集機能が充実した「パスパネル」と、配色スキームの計画・作成およびオリジナルカラーパレットが作成できる「カラーパレットパネル」（図13）が含まれています。また Spry、HTML、Flash を使ったスライドショーが生成できる「スライドショーを作成」パネルと、リッチシンボルの作成・カスタマイズ時に JavaScript を自動生成する「シンボルスクリプトを作成」パネルも装備されています。

 

図13　新しいパスパネル（左）とカラーパレットパネル（右）

Fireworks CS3をさらに詳しく知るには?

ここで紹介した Fireworks CS3 の新機能について、皆さんにもその良さを理解していただけたでしょうか。なお、この記事で紹介したのは最新バージョンのごく一部の機能にすぎません。さらに詳しい情報については製品紹介ページと機能ツアーを参照してください。

‹ 戻る

---