WebデザイナーにもわかるFlex画面デザイン（4） http://www.ark-web.jp/sandbox/design/wiki/299.html

WebデザイナーにもわかるFlex画面デザイン（3）のつづきです。
今回はFireworks、Photoshopといったグラフィックソフトとの連携について解説します。

[edit]

Fireworksでmxml書き出し †

Fireworks CS3からmxml形式で書き出すことができるとのことで、試してみました。
これまで、Fireworksで組んだものをまた一からmxmlで組みなおしていましたよ。。

sample04_01.gif

[ウィンドウ]→[共有ライブラリ]にFlexコンポーネントが用意されています。
（表示されない場合は（C）\Program Files\Adobe\Adobe Fireworks CS3\Configuration\Common Libraryにあるpngを一旦開いてみると表示されます）
これをドラッグ＆ドロップで配置していきます。
用意されているのは下記の14コンポーネント。

sample04_02.gif

すべてのコンポーネントが用意されているわけではないのが残念ですが、Fireworks上に置いてみるとこんな感じに。

 
sample04_03.gif

ラベルや文字色はシンボルプロパティウィンドウの値を変更することで修正できます。

 
↑
[edit]

mxml書き出し †

[ファイル]→[書き出し]から書き出し形式を「mxmlとイメージ」にすると、mxmlファイルと画像が書き出されます。
これをrascutにかければswfが生成されるのですが、

ただ、mxmlの時点で日本語が化けてます。。　orz orz

これなにか解決方法あるのかな。時間切れなのでのちほど調査。

↓

なぜかShift-JISで書き出されている。。　orz orz
エディタで開いて、UTF-8で保存しなおせばOK。
（しかしなぜに…HTML書き出しはちゃんとUTF-8で出るのに。CS4で直っていることを期待します）

↑
[edit]

やってみよう †

Fireworksでこんな感じにつくって、

sample04_04.gif
 

書き出したmxmlはこちら。

fileflex04.mxml
 

そのmxmlをrascutにかけてswfにしたら、こんな感じになる。

でも、できたmxmlはなかなか優秀。

一方、

と書き出し後も調整が必要なので、これだけで完結とはいかないですが、作業時間短縮に役立ちそうです。

（つづきます）

投稿者小森? | パーマリンク

| append.gif

tag: Flex?

添付ファイル: fileflex04.mxml 2838件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-11-20 (木) 14:27:25 (5636d)

アークウェブのサービスやソリューションはこちら

サービス
Zen Cartソリューション
Movable Typeソリューション
その他ソリューション
アークウェブのCSR(企業の社会的責任)