アクセス解析を見ると、Flexの画面デザインに関連したキーワードで検索されている方がいらっしゃるようなので、まとめてみました。
ただし、自己流です。エレガントじゃないです。

クライアントから画面デザインを依頼された後に、mxmlとcssでコーディングするところまでしてほしい、とのご依頼をいただいたのは今年の2月頃。
私はFlash使うことすら苦手で写真流すぐらいの簡単なムービーしか作れません。自分でASは書けません。のレベルです。

htmlに似た書式のmxmlという言語にcssでデザインする、というぐらいはちょっと調べればわかりましたが、オリジナルデザインの画面を具体的にどうやってコーディングしたらいいのか、ネットで何時間も探しました。
ボタンひとつを変更、とかじゃなくて、ほぼ全てのパーツをデフォルトスキンのhaloとは違うデザインに変えたかったのです。

当時のことはこの辺りに書いていますが、プログラマ向けの情報はそれなりに見つかるのですが、デザイナー向けの情報ってほんとに見つからないのです。
Adobeのデベロッパーセンターの内容は素人にはさっぱりわからんし。

で、結局、力技でやりました。

1.　Fireworksで制作した画像を、通常のweb制作と同様にスライスしてPNGで書き出す

↓こんなことを考えながら…

• 背景画像は繰り返しや位置指定ができないので、Scale 9を使うか、1枚まるごと切り出す
• webサイトのようなブラウザ間調整は考えなくてもいい
  →　フォントサイズを固定するので、たとえば14pixel×○文字分の幅、のようにボックスの大きさを決められる
• PNGなので半透明の実現が簡単！　やっはー

※デザイン制作のアプリはなんでもいいです。単に私がweb用にはFireworksを愛用しているだけですので。

2.　Flex Builder 3でコーディング開始

1. 新規プロジェクトを作り、プロジェクトルート/src/assets/に画像ファイルとcssファイルを入れる

※この時点ではデザインだけが実現できれば良かったためこちらでプロジェクトを作りました。
cssファイルは適当なタイミングで制作して入れればいいと思います。

3.　コンポーネントを作る

ヘッダ・メイン部分・フッタ　の3カラムデザインだったので、別ページで使い回すためにmxmlファイルを3つに分けて、それをmain.mxmlに読み込みます。

1. 読み込み用のmxmlファイル（コンポーネント）を作る
   →　たとえばフッタの部分は、footer.mxmlとしてプロジェクトルート/src/components/に保存
2. footer.mxmlに、フッタのデザイン要素を配置（Flexのコンポーネントや画像、テキストなど）する
3. デザインを変更したいオブジェクトにはclass名をつけ（Flash Builder3ではidはデザイン要素の指定には使えません）、cssファイルに指定を記述する

※ちなみにclassの書き方は「styleName＝”xxx”」です。htmlの「class=”xxx”」と異なるので注意。

（例）footer.mxml（簡単でスミマセン）

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="960">
	<mx:Box width="960" styleName="footer">
		<mx:Text>
			<mx:text>Copyright (C) 2010 SpongeDesign All Rights Reserved.</mx:text>
		</mx:Text>
	</mx:Box>
</mx:HBox>

（例）footer部分のcss

1
2
3
4
5
6
7
8
9
10
11

.footer{
	fontSize: 11;
	borderStyle: solid;
	borderSides: top;
	borderThickness: 2px;
	borderColor: #adb3b8;
	paddingTop: 5px;
	paddingLeft: 10px;
	paddingBottom: 10px;
	backgroundColor: #ffffff;
}

※styleNameにはハイフン、アンダーバーは使えません。

※各コンポーネントのどの要素が変更できるのかわからんし！　とか　要素名の記述方法がわからん！　という場合、Flex Builderのプロパティパネルを見てみるとよろしいかと。
プロパティパネルで何か変更してみるとソースに直接挿入されるので、要素名や記述方法がわかると思います。
しかし、ソースに直書きなら反映されるのにcssファイルに書くと反映されない要素ってのが各コンポーネントごとにあるようで…（共通ではwidthとか）、それはやってみるまでわからなかったので、試行錯誤しました。

あとはアークウェブさんのサイトにもあったFlex Style Explorerはけっこう使えました。

flexspyは使ったことがないので、ググってみてください。ちらほら出てきます。

4.　コンポーネントを読み込んで配置する

1. 読み込み元となるファイルMain.mxmlを新規で作って　プロジェクトルート/src/に保存
2. Main.mxmlに、html＋cssのdivのように、Box系のコンポーネントを並べてレイアウトし、class名をつけてcssファイルに指定を記述する（width、heightはcssでは制御できないので直接mxml内に記述）
   私は、この時点でいったん、プロジェクトを実行して、はみだしたりスクロールバーが出たりしていないかブラウザで画面を確認します
3. レイアウトしたBoxにファイルを読み込む
   →　デザインモードでコンポーネントパネルメニュー内からドラッグして配置

（例）Main.mxml

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:comp="components.*">
<mx:Style source="assets/style.css" />
	<mx:VBox styleName="container">
		<comp:header width="100%" />
		<mx:Box styleName="main" width="960">
			<comp:contents styleName="contents" height="100%" />
		</mx:Box>		
		<comp:footer width="960" />
	</mx:VBox>
</mx:Application>

※ソースモードで入力するときは、読み込むコンポーネントとファイル名が一致していないと反映されません。
たとえばfooter.mxmlを読み込む場合は

<comp:footer>

となります。

※もっとスマートで大変わかりやすいコンポーネントの作成方法↓
Flex/第3回勉強会 mxmlを使ったカスタムコンポーネントの作成
私の方法では単にファイルを読み込んでいるだけですが、上記は名前空間を定義されています。

余談

Flexでメニューやボタンなどのコントロールを使用していると、マウスオーバーしたときもカーソルに変化がないことが気持ち悪くてたまらなかったのですが、以下のようにプロパティを追記することで解決しました。

<mx:Button label="Button" buttonMode="true" />

教えてもらったサイト→　へたれプログラマの備忘録

上記ブログ作者さんと同じく、デフォルトがfalseなのか…　と脱力。

これで納品完了。

しかしその後アプリ開発が継続するなかで、Flash Builder4が発売されました。

Flash Builder4ではコントロールや指定可能なcssの要素もかなり変更されたので、コードもあとから修正しました。
次回はそこら辺をちょっと書いてみます。

【Flash Builder4使用の現在、参考にさせていただいているサイト】

• Flex User Group
  フォーラムがあります
• kenichis::TechNotes

• 
• Tweet