[[WebデザイナーにもわかるFlex画面デザイン（3）]]のつづきです。
今回はFireworks、Photoshopといったグラフィックソフトとの連携について解説します。
（※このエントリは書き途中です）
**Fireworksでmxml書き出し [#ne9e7db1]
''Fireworks CS3からmxml形式で書き出すことができる''とのことで、試してみました。
これまで、Fireworksで組んだものをまた一からmxmlで組みなおしていましたよ。。
#ref(http://www.ark-web.jp/sandbox/design/data/flex/sample04_01.gif,around)
[ウィンドウ]→[共有ライブラリ]にFlexコンポーネントが用意されています。
（表示されない場合は（C）\Program Files\Adobe\Adobe Fireworks CS3\Configuration\Common Libraryにあるpngを一旦開いてみると表示されます）
これをドラッグ＆ドロップで配置していきます。
用意されているのは下記の14コンポーネント。
- Accorodion
- Button
- CheckBox
- ComboBox
- Cursor
- NumericStepper
- Panel
- PopUpButton
- RadioButton
- ScrollBar
- Tab
- TextArea
- TextInput
- ToolTip
#clear
#br
#ref(http://www.ark-web.jp/sandbox/design/data/flex/sample04_02.gif,around)
すべてのコンポーネントが用意されているわけではないのが残念ですが、Fireworks上に置いてみるとこんな感じに。
#clear
#br
#ref(http://www.ark-web.jp/sandbox/design/data/flex/sample04_03.gif,around)
ラベルや文字色はシンボルプロパティウィンドウの値を変更することで修正できます。
#clear
#br
***mxml書き出し [#f4a12720]
[ファイル]→[書き出し]から書き出し形式を「mxmlとイメージ」にすると、mxmlファイルと画像が書き出されます。
これをrascutにかければswfが生成されるのですが、
ただ、mxmlの時点で''日本語が化けてます。。 orz orz''
%%これなにか解決方法あるのかな。時間切れなのでのちほど調査。%%
↓
''なぜかShift-JISで書き出されている。。 orz orz''
エディタで開いて、UTF-8で保存しなおせばOK。
（しかしなぜに…HTML書き出しはちゃんとUTF-8で出るのに。CS4で直っていることを期待します）
***やってみよう [#p7743015]
Fireworksでこんな感じにつくって、
#ref(http://www.ark-web.jp/sandbox/design/data/flex/sample04_04.gif,center)
#clear
#br
書き出したmxmlはこちら。
#ref(flex04.mxml)
#br
そのmxmlをrascutにかけてswfにしたら、こんな感じになる。
#flash( http://www.ark-web.jp/sandbox/design/data/flex/sample04_05/exp.swf, 480x280, version=9)
でも、できたmxmlはなかなか優秀。
- 位置関係を見ているのか、フォーム要素などはちゃんとPanelやAccordionの中に入っています。
- ただし、x="n" y="n"による絶対配置でレイアウトされます。
- コンポーネント化されていないテキストは、Labelとして書き出される
- コンポーネントでない画像などのオブジェクトは画像として書き出される
- 書き出し時にサブフォルダにイメージを置くにチェックを入れると、imagesフォルダに画像が入る
- 画面キャプチャ画像も書き出される。
- レイヤーパネル上のオブジェクトの名前がidとしてつけられる。
- Fireworksは「ページ」という概念がある。現在のページ/全ページを書き出すことも可能。全画面をFireworksで作って書き出す、というフローに便利
一方、
- Tab、ToolTip、Cursorは書き出されない。
- Fireworks上でTabに文字を入れられない
- CSSに書き出されるのは、シンボルプロパティ内にある値だけなので、主に文字周りだけ。
- 背景色などはシンボルを編集すれば変わるけど、これらのデザイン変更は反映されない。別途CSSを書くか、スキンを変更する必要がある。
と書き出し後も調整が必要なので、これだけで完結とはいかないですが、作業時間短縮に役立ちそうです。
（※このエントリは書き途中です）
（つづきます）
#blikifooter(小森)
tag: [[Flex>tag/Flex]]
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
