Expression Web 2 のリリースに伴い、「Dreamweaver 使いからみた Expression Web 2」 として引き続きおつきあいいただきます。どうぞ、よろしくお願いいたします。
第 6 回は、Photoshop や Flash ムービーの扱いが強化された点についてふれてみます。
Photoshop ファイルのインポート
Web サイトの制作では、グラフィック制作は切り離せませんが、その分野では Photoshop (.psd) やFireworks (.png) が使われるケースがほとんど。「データを PSD (ピーエスディー) でいただけますか ?」 と言った表現がされるほどです。これを受け、Expression Web 2 では Photoshop ファイルのインポート (読み込み) がサポートされました。
実際に Photoshop をインポートするには、[挿入] メニューの [図] → [Adobe Photoshop (.psd)] をクリックします (図 1)。
図 1 ： [挿入] メニューの [図] → [Adobe Photoshop (.psd)] をクリックする代わりに、
デスクトップからドキュメントにドラッグ アンド ドロップすることもできる。
ファイル選択のダイアログボックスで開きたい PSD ファイルを選択すると、[Adobe Photoshop (.psd) ファイルのインポート] ダイアログボックスが開きます (図 2)。
図 2 ： [Adobe Photoshop (.psd) ファイルのインポート] ダイアログボックスでは、
読み込むレイヤー、最適化設定、書き出すファイル名などを設定する
- 左上の [Photoshop レイヤー] の項目では、[すべてのレイヤー] を選択して Photoshop のレイヤーをまとめて読み込むほか、[選択されたレイヤー] を選んで読み込むレイヤーをチョイスすることができます。
- 左下の [最適化設定] の [エンコード] で、「GIF」、「JPEG」、「PNG24」 の形式を選択します。 [推定サイズ] の欄に書き出し時のおおよそのファイルサイズ (バイト数) が表示されます。
JPEG の場合には、画質を定義することができますが、GIF の場合、色数や透明度の設定、マットのカラーなどを選択することができません。
また、ファイル名は、オリジナルのファイル名が 「ダッキー.psd」 の場合、選択したファイル形式に応じて 「ダッキー.psd.jpg」 のように設定されます。当然ながら、Web 公開を前提とした場合、半角英数字は NG ですが、「.psd」 も残ってしまいますのでファイル名を忘れずにチェックしましょう。
これらの設定が終了したら、[インポート] ボタンをクリックします。
[アクセシビリティのプロパティ] ダイアログボックスが表示されたら (図 3)、[代替テキスト] を入力して [OK] をクリックすれば画像が挿入されます (図 4)。
図 3 ： [アクセシビリティのプロパティ] ダイアログボックスの [代替テキスト] は必ず入力しておく。
[詳しい説明] は空白のままで OK。
図 4 ： 画像が挿入された。
補足：
- Photoshop レイヤーの透明部分は保持されます。
-
Photoshop のレイヤースタイルやクリッピングマスク、レイヤーマスク、調整レイヤーも保持されます。
ただし、レイヤースタイルや調整レイヤーは [すべてのレイヤー] 以外では無効になってしまいます。
- Photoshop のレイヤーカンプには対応していません。
- Photoshop CS3 にも対応しています。
Flash ムービーの配置
ファイル挿入関連のもうひとつの強化点がメディアコントロールです。Expression Web 2 では「Flash ムービー」「Silverlight」「Windows Media Player」の 3 つの項目が追加されました (図 5)。
図 5 ： [挿入] メニューの [メディア] のサブメニューから
「Flash ムービー」「Silverlight」「Windows Media Player」を選択することができる。
Flash ムービーでは、swf 形式のファイルの挿入を行います。ちなみに、Flash ドキュメントは 「.fla」、このファイルから Web 公開用に書き出した形式が 「.swf 」 です。
Flash ムービーを挿入すると、Expression Web 2 では 「200 ピクセル × 200 ピクセル」 になってしまいます (図 6)。
図 6 ： Flash ムービーを挿入した直後
Flash ムービーの大きさを設定するには [タグのプロパティ] の height/width を設定するか、Flash ムービーの上で右クリックして表示されるメニューから [Flash SWFのプロパティ] をクリックすると表示されるダイアログボックスで設定します (図 7)。
図 7 ： [Flash SWFのプロパティ] ではサイズの指定のほか、[透過] の設定などを行うこともできる。
[Flash SWFのプロパティ] ダイアログボックスのサイズでは、ピクセル指定のほか、パーセント指定を行うこともできますが、デフォルトでは [縦横比を保持する] にチェックがついていますので、はずしてから行うとよいでしょう。
Flash のステージ背景色を無効にする [透過] の設定もここで行います。
なお、次のようなソースコードが挿入されます。Embed 要素が排除されていることに要注目です。
<object id="flash1" data="test.swf" height="200" type="application/x-shockwave-flash" width="200">
<param name="movie" value="test.swf" />
</object>
Flash が読み込めないときの代替要素として、img 要素を指定したり、Flash Player のダウンロードを指定するといったソースコードは書かれませんので、実際には手を入れる必要があります。
少し古い資料ですが、Flash の埋め込みについては下記が参考になるでしょう。
HTML 規格に準じて、フラッシュコンテンツを埋め込むには
中村 享介 (株式会社ロクナナ)
http://kyosuke.jp/portfolio/seminar/2006-04csslite/flash.html
まとめ
- メニューに [Adobe Photoshop (.psd)] や [Flashムービー] と表示されていて、ビックリしました。ふところが深いといいますか…
- PSD 読み込みでは、レイヤースタイルやクリッピングマスク、レイヤーマスク、調整レイヤーもサポートしているなど、かなりチカラが入っているなと感じました。PSD 読み込みの際に重要なのは最適化の設定です。現在は JPEG の画質設定しか行えません。この部分の強化を期待したいところです。
- Flash ファイルの配置では、サイズを読み込めないことが残念です。当然、Silverlight や Windows Mediaの扱いにウエイトが置かれているのだと解釈しました。
