こんにちは、イマジカデジタルスケープの伊藤和博です。

今回は、前回ご紹介したAdobe Edgeの中で、エレメントパネルのことを【FWのレイヤーパネルに近い、エレメントパネル】とご紹介しましたが、今回はそのAdobe Fireworks(以下FW)のレイヤーパネルについてご紹介します。


他Adobe製品のレイヤーには無い、特別な機能を持ったレイヤーパネル


レイヤーパネルは、皆さんご存知の通り、AI、PSではおなじみのパネルで、レイヤー=階層を表すものです。パネルの名称こそ違いますが、レイヤーそのものはFLにもAEにもあり、レイヤー単位で作業を進めたり、階層の順番を入れ替えることで効率的な編集作業を行うことができる、大変便利な機能の1つです。

FWのレイヤーパネルも階層の順番を入れ替えたり、など、AI、PSと同じように操作可能ですが、FWのレイヤーパネルはHTMLの「要素と属性を階層で操作する」という方がいいかもしれません。

例えば、新規ドキュメントを作成すると、レイヤーパネルの初期設定は以下のようになっています。



はじめからWebレイヤーとレイヤー1という、2つのレイヤーが用意されています。このレイヤー1とは、いわゆるAIで新規ドキュメントを作成した時にはじめからあるレイヤー1と同じように機能します。Webレイヤーはスライスを管理するためのレイヤーでこれは、このブログの下の方で説明します。



長方形ツールで作成した矩形は、divの領域として機能する。


レイヤーパネルにいくつかの新規レイヤーを追加→レイヤー名を変更し、divというレイヤーに長方形ツールで矩形を書いた状態が以下の状態です。



FWでは、この長方形ツールで描いた領域がそのままdivの領域として機能します。今回は書き出したエリアをわかりやすくするために各長方形に別々のカラーを設定しています。

AI同様にネストレイヤーの機能を持っており、親のレイヤー名はdiv、images、textという名前にしています。ただし、この名前はあくまでもドキュメントを作る上で作業をわかりやすくするためで、divというレイヤー名にしたからdivとして書き出される訳ではありません。長方形ツールで領域を定義すると、その領域がdivの領域として定義されるのです。

また、divレイヤーの中にある名前に注目していただくとわかりますが、各サブレイヤーの名前にidとクラスで名前をつけています(クラスは書き出し後にどのようになるか注目)。



書き出し後


FWから書き出したファイルをDWで見ると、以下のように各長方形がdivで書き出され、サブレイヤーの名前がそのままidの名前になるのがわかります。ただし、btnレイヤーに関してはピリオドで名前を設定してもidにとして書き出されるため、これもレイヤー名を#で書き始めたからidになる、という訳ではありません。




ただし、CSSを見るとわかりますが、#rightは、floatがleft、displayがinlineになっています。ドキュメントに長方形ツールを描いたときに、その長方形を横に並べると、float:right;で右に回っているのではなく、display:inlineによって並んでいるのがわかります。



Webレイヤー書き出し後


スライスを定義すると、そのスライスを元に画像を書き出してくれます。予めPSなどで画像サイズを計算して作っておいてもいいですし、FWのスライスツールで任意のサイズにスライスすることも可能です。また、複数の画像を貼り込んでいる場合、それらを1つ1つ個別の画像として書き出すか、それら複数の画像を全て1つのスライスとして書き出す、ということも可能です。



Adobe MasterCollectionの中でもFWのレイヤーパネルがHTMLやCSSと一番関連性が高く、これらの機能を使ってWebサイトのプロトタイプを作成することが可能になります。

ただし、先ほどのCSSでの書き出しも含め、ですが、FWから書き出されたHTMLソースを見ると、float: left;とclear: both;の繰り返しでdivが都度生成されるため、この辺りの細かいソースの修正をDWと連携して行うことで、プロトタイプから完成品、という形に仕上げることができるわけです。

Adobe Edge Preview版のエレメントパネルも、1つ1つをdivで扱うところはまさにFWのレイヤーパネルの機能さながら、といえるのではないでしょうか?





もっとFireworks CS5 の使い方を詳しく知りたい方は!
Fireworks CS5の使い方・基本トレーニングの受講がオススメです!




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei




■■イトウ先生のTipsNote(実践・新機能コンテンツ)アーカイブ■■


基本トレーニングの受講後に、さらに学習しておきたい内容やTips、新機能を、隔週1回(月2回)で公開しています。


●Macintosh基本操作編(意外と知らない操作も多い!?)
○入力モードや変換のショートカット
○デスクトップで使えるショートカット
○階層やファイルパスの把握に便利な機能

●Illustrator(AI)
○アウトライン化と孤立点の削除について
○データを軽く作る方法について
○シンボルの親子関係について・その1
○編集モード
○シンボルの親子関係について・その2
○カラーパネルの「使えるショートカット」
○カラー一括変換のグローバルスウォッチとは
○配置した画像のすばやい編集方法
○CS5新機能01:すべてのアートボードにペースト
○CS5新機能02:内側描画と背面描画
○CS5新機能03:Web・インタラクション用のデザイン
○CS5新機能04:遠近描画
○CS5新機能05:線パネルと線幅ツール

●Photoshop(PS)
○消しゴムツールの活用
○ななめの画像をまっすぐにする方法
○自然な合成テクニック・角版
○自然な合成テクニック・切り抜き画像
○画像合成後の便利なショートカット
○調整レイヤー
○レイヤーパネルの不透明度と塗りについて
○不透明度のショートカット
○CS5新機能01:「コンテンツに応じる」機能
○CS5新機能02:絵筆ブラシと混合ブラシ
○CS5新機能03:人の記憶に近い画像・HDRについて
○CS5新機能04:パペットワープ
○CS5新機能05:3Dオブジェクトとアニメーション

●FLASH(FL)
○Illustratorだけでできる、Flashアニメ
○CS5新機能01:IKボーンスプリングでバネアニメ
○CS5新機能02:コードスニペットパネルで簡単ActionScript3.0
○CS5新機能03:パターン描画ツール

●InDesign(ID)
○CS5新機能01:マルチステートを使った、IDからFlashアニメの作り方
○CS5新機能02:アニメーションパネルとタイミングパネルを使った、IDのモーションプリセット
○CS5新機能03:キャプションの自動作成機能
○CS5新機能04:オブジェクトの間隔と配置
○CS5新機能05:画像一括貼り替え

●Dreamweaver(DW)
○CS5新機能01:新しいサイト定義と、CSSスターターレイアウト
○CS5新機能02:HTML5 Pack
○CS5新機能03:スマートフォン検証・CSS3のメディアクエリー
○CS5新機能04:ブラウザ検証便利ツール・Adobe BrowserLabについて

●AfterEffects(AE)
○CS5新機能01:ロトブラシ
○CS5新機能02:新しい便利なショートカット
○CS5 パペットアニメーションと、時間反転キーフレーム
○CS5 ビデオや画像の型抜きについて「トラックマットとステンシルアルファ」
○CS5 動画の動きを捕らえて、他のレイヤーに適用する「モーショントラック」

●FireWorks(FW)
○CS5新機能01:Device Centralと連携した、スマートフォンのプロトタイプ
○CS5新機能02:divのタイル背景の強化
○レイヤーパネル