PhotoshopとFlashを統合する際のヒント集

筆者：Michael Ninness

今月号の記事

パート1：FlashでのAdobe Photoshopレイヤーの読み込み

レイヤー分けされたPhotoshopファイル（PSD）をFlashドキュメント（FLA）に読み込むと、その結果に驚くかもしれません。Flash Professional 8とそれ以前のバージョンは、PSDファイルをどのように処理すれば良いのかが分からないのです。Flashが読み込めるのは、レイヤーを1つに統合したPSDファイルだけで、しかも読み込みにはQuickTimeがインストールされている必要があります。

しかし幸運にも、FlashにPhotoshopのレイヤーを読み込むための回避策はいくつか存在しますので、ここでは次の3つの回避策を紹介することにします。

PhotoshopからPNGを書き出す

PSDファイルの各レイヤーは、それぞれ個別のPNGファイルに書き出すことで、レイヤーの透明度設定が維持できます。一方、レイヤーをJPEGやGIFに書き出すと背景が透明度のない白色になってしまいます。

そこで、各PNGをFlashに読み込み、シンボルに変換して個別のレイヤーに配置します。このプロセスはImageReady CS2の「ファイル」メニューから「書き出し」を選び、レイヤーからファイルを選択することで自動化できます。

書き出しておいた一連のPNGをFlashに読み込むと、これらは個別の画像として扱われるものの、すべて同一フレームの同一レイヤー上に配置されてしまいます。それぞれの画像をFlashタイムライン上の個別のレイヤーに配置したい場合は、「修正」→「タイムライン」→「レイヤーに配分」を選択します。

このテクニックの唯一の難点は、読み込んだ画像の領域ボックスがそのレイヤーに含まれているピクセルの最小範囲ではなく、元のPhotoshopドキュメントと同じサイズになってしまうことです。この場合、ステージ上で画像を選択するのが困難になります。

ImageReadyからSWFを書き出す

PhotoshopやImageReadyから個別のPNGファイルを書き出す代わりとして、ImageReady CS2から単一のSWFを書き出す方法もあります。この場合は「ファイル」メニューから「書き出し」→「Macromedia Flash SWF」を選択します。この際、大半のケースでは「外観の保持」オプションをオフにしておくことが推奨されます。書き出し処理を実行すると、各レイヤーの全画像を含む単一のSWFファイルが生成されます。

この手法を利用するメリットは、PhotoshopのテキストレイヤーがFlashのテキストオブジェクトにきちんと変換されることで、Flash上でもテキストの編集が可能になります。なお、この手法の場合、PhotoshopからPNGを書き出す際にみられた領域ボックスの問題は発生しませんが、Photoshop上のレイヤー名が維持されず、各レイヤーに対して汎用的なシンボル名が付くという短所があります。ライブラリのシンボルに与えられた名前は、後からでも分かりやすい名前に変更することをお勧めします。

PSD2FLAプラグインを利用する

Photoshop用の書き出しプラグイン「PSD2FLA」を利用すれば、レイヤー構成のPSDファイルの全レイヤーが維持できるだけでなく、PhotoshopレイヤーをFlashタイムライン上の個別レイヤーに配置しながらPSDファイルをFLAファイルとして書き出せます。

しかも、Photoshop上のレイヤー名は生成された画像と、それに対応したレイヤーの名前として正しく維持され、さらに画像の領域ボックスも適切な大きさになります。Photoshop 4.0以降で動作するこのプラグインは、日常的にPhotoshopで作成したレイヤー構成のモックアップをFlashで利用しているユーザにお勧めできる製品です（PSD2FLAはMedia Labより$89で購入できます）。

パート2：Flash上でピクセルベースの画像を使用する際のヒント

Flash上で画像サイズを変更することを避ける

Flashで使用する画像は、Flashに持ち込む前に実際の用途の大きさ（ピクセル単位のサイズ）で用意しておくことが重要です。Flashのステージ上で画像の大きさを変更すると、その都度、画像が再サンプル・補間されます。この再サンプル処理は、Photoshopを利用するほうがはるかに優れた結果が得られます。

なお、唯一この限りではないのが、画像の大きさをアニメーション化する場合です。この場合は、事前にPhotoshop上で、アニメーション時の最大サイズの画像を用意すると良いでしょう。

解像度は無関係

Webデザイナーの中には、いまでもWebグラフィックスの解像度を72dpiにしておかなければならないと考えている方が見受けられます。しかし実際には、解像度の設定はグラフィックスを印刷する場合に限り関係があります。つまり、モニタ上で表示されるグラフィックスに関しては、解像度ではなく、画像のピクセル寸法にだけ注意すれば良いのです。

「そんな筈はない」と思われる方は、次の手順を試してみてください。Photoshopの新規ドキュメントダイアログボックスを開き、幅と高さを800 x 600ピクセルに変更します。次に、解像度を72dpiから600dpiに変更してみます。ファイルサイズが全く変わらないことが確認できるはずです。

バイキュービック法（シャープ）を使用する

Flashプロジェクトで使用する画像は、ほとんどの場合、Photoshopの「画像解像度」コマンドを利用して再サンプリングし、サイズを下げる必要があります。このコマンドのダイアログボックスは上下2つのセクションに分かれており、上側はWebデザイナー、下側はプリントデザイナーのためにあるようなものです。

この上側の部分に含まれていないのが解像度の設定フィールドです。上側の幅と高さのフィールドが調整できない状態になっている場合は、ダイアログボックスの最下部にある「画像の再サンプル」にチェックが入っていません。この項目にチェックを入れると、画像のサイズを変更する代わりに、「画像解像度」コマンドを利用して画像を再サンプルできるようになります。

再サンプルを行うと、画像内のピクセル総数（およびファイルサイズ）が変更されます。一方のサイズ変更を行うと、画像内のピクセル総数は変わらず、単に印刷時の大きさとその解像度が調整されます。

Photoshopは再サンプル時のアルゴリズムとして「バイキュービック法」を利用するようにデフォルトで設定されていますが、画像サイズを下げる方向で再サンプルを行う場合は、「バイキュービック法（シャープ）」を利用することをお勧めします。バイキュービック法を利用すると画像がややソフトに仕上がりますが、バイキュービック法（シャープ）を利用すれば、オリジナルのディテールがより忠実に維持できます。

ピクセルグリッドに合わせる

Flashに画像を配置する際には、必ず整数でX、Yの位置を指定するようにします。これは、Flashのピクセルグリッドに沿って画像を配置しない場合、書き出したSWF内で予期せぬ「ピクセルズレ」が起こる恐れがあるからです。

必ず要素をグリッドに沿って配置されるようにするには、「表示」→「吸着」→「ピクセル」に吸着を選択します。なお、このコマンドは操作を遡って適用されるものではないので、画像をステージに配置する前に有効にしておく必要があります。

つまり、「ピクセルに吸着」コマンドを有効化する以前に、画像をピクセルグリッドから外れた位置に配置した場合、Flashは自動的にこれらの画像をグリッド上へと移動するわけではありません。

この場合は、該当する画像を個別に選択し、プロパティパネルのX、Y値を手動で変更する必要があります。なお、このコマンドが有効になってさえいれば、ステージ上の画像はキーボードの矢印キーを使って1ピクセル単位で移動できます。もちろん、移動後の画像はピクセルグリッドに沿って配置されます。

パート3：Flashでのビットマップ最適化の制御

パブリッシュ設定

デフォルト設定のFlashでは、たとえPNGファイルをドキュメントに読み込んだとしても、結果として生成されるSWFファイルにはPNGではなく、JPEGが書き出されます。JPEGは画像劣化を許容するファイル形式であることから、必然的に画質が落ちることになります。

PNGの読み込み時にはデフォルトのJPEG画質設定が適用されますが、この設定は任意に変更することができます。「ファイル」→「パブリッシュ設定」→「Flash」タブを選択し、タブ内のJPEG画質スライダで設定を調整します。

なお、ビットマップ画像ごとに個別の最適化設定を適用する方法については、この記事の最後の「オブジェクトごとの圧縮設定」セクションを参照してください。

最適なJPEGを読み込む

図1: オブジェクトごとの圧縮設定

Flashに搭載されているJPEG最適化エンジンはPhotoshopの「Web用に保存」コマンドほど高度ではありません。画像をJPEGとして保存する際には、Photoshop、ImageReady、Fireworksのいずれかを利用する方が、Flashより良好かつ、Flashより期待通りの結果が得られます。

確かに、これは作業手間が増えることを意味しますが、ここでの朗報は、Flashに読み込んだJPEGがそのままSWFファイルに書き出されるという点です。つまり、Flashに読み込んだJPEGはSWFに書き出される際に、再圧縮されるようなことがありません。

オブジェクトごとの圧縮設定

Flashがビットマップを読み込む際の最適化設定は、オブジェクトごとに個別で指定することも可能です。

個別の設定を行うには、ライブラリパネルで設定を変更したい画像をダブルクリックし、ビットマッププロパティダイアログボックスを開きます。JPEGファイルを選択した場合は、より画質の低い方法で圧縮するように、動作を強制することができます。この場合、同時にファイルサイズも小さくなります。

一方、PNGファイルを選択した場合は、画質劣化を防ぐためにPNGのままで書き出すことを強制できるだけでなく、パブリッシュ設定ダイアログボックスの「Flash」タブに指定された、デフォルト設定以外のJPEG画質で書き出すことも指定できます。

ぜひこの機会にOnline Training Libraryの 1週間無料パスをお試しください。

‹ 戻る