WebデザイナーにもわかるFlex画面デザイン（2）の編集

タイムスタンプを変更しない

[[WebデザイナーにもわかるFlex画面デザイン（1）]]のつづき。
Flexでのデザインの調整について書きます。

**スタイルシート [#cb0b9d14]
Flexではスタイルシートが使えます。
書式はHTMLでつかうものとよく似ています。

1）インラインでも書けるし、
 <mx:Button color="#ff0000">

2）mxml内にも書けるし、
 <mx:Style>
 Button{
 	color: #ff0000;
 }
 </mx:Style>

3）スタイルシートにも書ける。
 <mx:Style source="stylesheets/hoge.css" />

-hoge.cssの内容
 
 Button{
 	color: #ff0000;
 }

表示結果はいずれでも同じ。
//（キャプチャ）

でも構造と表示は分けたほうがよいので、やはり3）のようにスタイルシートに記述したほうがよいですね。
ちなみに、<mx:Style>は<mx:Application>直下に書かないとエラーになります。

上記のようにグローバルに指定する以外に、「styleName」が使えます。
classみたいなもんですね。

-mxmlでstyleNameを指定
 <mx:Button styleName="hogeButton" />

-cssの指定
 .hogeButton{
 	color: #ff0000;
 }

//（キャプチャ）

なお、
- idはスタイル指定には使用できません。
- styleNameにハイフン、アンダーバーは使えません。[[キャメルケース:http://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9]]をつかった命名がよいでしょう。

***ボタンのデザインを変えてみる [#bea14fe1]

#flash( /sandbox/design/data/flex/sample02_01.swf, 360x100, version=9)

.buttonType1{
 	color: #ffffff;
 	textRollOverColor: #660000;
 	highlightAlphas: 1, 0;
 	fillColors: #ffffff, #33ffff, #ffffff, #ff9900;
 }
 
 .buttonType2{
 	cornerRadius: 0;
 	textAlign: left;
 	textRollOverColor: #009DEF;
 	fillAlphas: 0.75, 0.65, 0.6, 0.4;
 	highlightAlphas: 0.3, 0.32;
 }
 
 .buttonType3{
 	fillAlphas: 1, 1, 0.9, 0.9;
 	fillColors: #ffffff, #ffffff, #ffff99, #ffff99;
 	textRollOverColor: #ff3300;
 	themeColor: #ff9900;
 	icon: Embed(source="shoppingcart.gif");
 }

こんな感じ。（ロールオーバーもあります）
個人的には、ボタンにグラデーションやアルファ値、角丸の程度をCSSで指定できるのはかなーーり素敵だと思う。

**レイアウト [#zbf3e6e0]

レイアウトによく使うのは、Box、HBox、VBox。divみたいなものです。
Flexの場合、ぶっちゃけていうと、要は''テーブルレイアウト''です。
floatとかabsoluteとかの概念はあまりない。
//ブロックレベル、インラインレベル

Boxは、子オブジェクトの並ぶ向きを決められます。VBoxは縦、HBoxは横。

<mx:VBox width="100%" height="100%" >
     <mx:Button label="Boo" width="100" height="18" />
     <mx:Button label="Hoo" width="100" height="18" />
     <mx:Button label="Wooooo" width="100" height="18" />
 </mx:VBox>

↑子を縦に並べる。

<mx:HBox width="100%" height="100%" >
     <mx:Button label="Boo" width="100" height="18" />
     <mx:Button label="Hoo" width="100" height="18" />
     <mx:Button label="Wooooo" width="100" height="18" />
 </mx:HBox>

↑子を横に並べる。

tableによるHTMLソースよりシンプルなソースになります。

また、Boxは子オブジェクトと子オブジェクトの間隔を設定することが可能です。（verticalGap、horizontalGap）
これによって均等配置はHTMLよりきれいにできる。

**CSSerが戸惑うところ。XHTML+CSSとの違い [#d2a3dc6d]

CSSを修正してデザインを変える、という点で共通なのですが、
やはり独自の癖みたいのがあります。

（以下、flex3の場合）

-marginはCSSで設定できない。エー
-paddingはCSSで設定できる。
-width,heightはmxmlのほうに記述しないといけない

-''継承が効かない。''

.content .main Button

みたいなことができないので、グローバルに設定するか、
個別にstyleNameをつけてあげないといけないのが歯がゆい。

-背景画像が扱いづらい
--背景画像は繰り返される。（no-repeatがない）
--背景画像は中央配置になる。（positionがない）

背景画像の多用でデザインをすることが多いと思われるので、これはちょっときつい制限だとおもう。

逆に、
-背景画像は100%表示もできる（オブジェクトにあわせて伸縮する）
-先にも書きましたがボタン類のグラデーション、角丸、透明度、アイコンをCSSで設定できる
-[[Scale 9:http://www.adobe.com/jp/devnet/flex/quickstart/embedding_assets/#EmbeddingImagesScale9]]が便利。四隅を指定できるので、1枚の背景画像で伸縮自在。

はよい点だと思う。（HTMLでもできるようになってほしいなぁ）

***CSSファイルの扱い [#x246b8c1]
あと、CSSで注意したい点としては、
HTMLだとページ単位でCSSを読み込むのでどんなに遷移しても
 a.html(include a.css) → b.html(include b.css)

と、ページ単位でincludeしたCSSのみ読み込みますが、
Flexの場合は、
 a.swf(include a.css) → b.swf(include a.css+b.css) → a.swf(include a.css+b.css)

と、一度読んだものが保持されてしまうんですね。
HTMLとは違い、styleNameを徹底的に分ける、など設計をきちんとする必要があります。

**一番困ったこと。 [#b8f36062]

-''折り返されない！！''

「折り返し表示」が鬼門。
意外と当たり前に思うことができません。。
HTMLだと複数子オブジェクトが横幅いっぱいになったら折り返しますが、折り返さない。
親の幅が100%だと、親の幅をどこまでも広げていったり。

たとえばこういうこんな感じ。
#flash( /sandbox/design/data/flex/sample02_02.swf, 360x150, version=9)

これの対策としては、ライブラリflowBoxを使用して解決しました。
http://code.google.com/p/flexlib/wiki/ComponentList

しかし、これにはちょっと参りました。。。
数や長さが確定していないオブジェクトを表示するときは
レイアウトを考えたほうがよさそうです。

ちなみに、テキストの場合は、
-labelは折り返し不可。文字が省略されます
-Textは複数行表示可能なので、長い文字/長さが不定ならこちらを使用。折り返したい場合はwidthを指定するとよい。

**便利ツール [#zaf750eb]
Flexはいろいろ便利なツールが揃っているので、このへんをうまく使ってデザインしましょう！

- StyleExplorer
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
コンポーネントごとにスタイル設定をその場で試せる。
（全部のスタイルが用意されているわけではないけれど）
ほかにどんなスタイルが指定できるかは、これを見たほうが早いっす。

- flex Spy
http://code.google.com/p/fxspy/
要はFirebugです。ボタンを埋め込んで使用することができる。これは便利。

（[[WebデザイナーにもわかるFlex画面デザイン（3）]]につづきます）

#blikifooter(小森)
tag: [[Flex>tag/Flex]]

テキスト整形のルールを表示する

アークウェブWebデザインSandBox

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