http://www.ark-web.jp/sandbox/design/wiki/299.htmlWebデザイナーにもわかるFlex画面デザイン(3)のつづきです。今回はFireworks、Photoshopといったグラフィックソフトとの連携について解説します。CS3からmxml形式で書き出すことができるとのことで、試してみました。これまで、Fireworksで組んだものをまた一からmxmlで組みなおしていましたよ。[ウィンドウ]→[共有ライブラリ]にFlexコンポーネントが用意されています。Libraryにあるpngを一旦開いてみると表示されます)これをドラッグ&ドロップで配置していきます。用意されているのは下記の14コンポーネント。AccorodionButtonCheckBox?ComboBox?CursorNumericStepper?PanelPopUpButton?RadioButton?ScrollBar?TabTextArea?TextInput?ToolTip?すべてのコンポーネントが用意されているわけではないのが残念ですが、Fireworks上に置いてみるとこんな感じに。ラベルや文字色はシンボルプロパティウィンドウの値を変更することで修正できます。†[ファイル]→[書き出し]から書き出し形式を「mxmlとイメージ」にすると、mxmlファイルと画像が書き出されます。これをrascutにかければswfが生成されるのですが、ただ、mxmlの時点で日本語が化けてます。orzこれなにか解決方法あるのかな。時間切れなのでのちほど調査。↓なぜかShift-JISで書き出されている。orzエディタで開いて、UTF-8で保存しなおせばOK。(しかしなぜに...HTML書き出しはちゃんとUTF-8で出るのに。書き出したmxmlはこちら。flex04.mxmlそのmxmlをrascutにかけてswfにしたら、こんな感じになる。できたmxmlはなかなか優秀。位置関係を見ているのか、フォーム要素などはちゃんとPanelやAccordionの中に入っています。y="n"による絶対配置でレイアウトされます。コンポーネント化されていないテキストは、Labelとして書き出されるコンポーネントでない画像などのオブジェクトは画像として書き出される書き出し時にサブフォルダにイメージを置くにチェックを入れると、imagesフォルダに画像が入る画面キャプチャ画像も書き出される。レイヤーパネル上のオブジェクトの名前がidとしてつけられる。Fireworksは「ページ」という概念がある。現在のページ/全ページを書き出すことも可能。Tab、ToolTip?、Cursorは書き出されない。Fireworks上でTabに文字を入れられないCSSに書き出されるのは、シンボルプロパティ内にある値だけなので、主に文字周りだけ。背景色などはシンボルを編集すれば変わるけど、これらのデザイン変更は反映されない。別途CSSを書くか、スキンを変更する必要がある。書き出し後も調整が必要なので、これだけで完結とはいかないですが、作業時間短縮に役立ちそうです。3.7.7をリリースしました。