WebデザイナーにもわかるFlex画面デザイン(2) http://www.ark-web.jp/sandbox/design/wiki/293.html

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

[edit]

スタイルシート

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

1)インラインでも書けるし、

<mx:Button color="#ff0000">

2)mxml内にも書けるし、

<mx:Style>
Button{
	color: #ff0000;
}
</mx:Style>

3)スタイルシートにも書ける。

<mx:Style source="stylesheets/hoge.css" />

表示結果はいずれでも同じ。

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

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

なお、

[edit]

ボタンのデザインを変えてみる

.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で指定できるのはかなーーり素敵だと思う。

[edit]

レイアウト

レイアウトによく使うのは、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よりきれいにできる。

[edit]

CSSerが戸惑うところ。XHTML+CSSとの違い

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

(以下、flex3の場合)

.content .main Button

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

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

逆に、

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

[edit]

CSSファイルの扱い

あと、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を徹底的に分ける、など設計をきちんとする必要があります。

[edit]

一番困ったこと。

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

たとえばこういうこんな感じ。

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

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

ちなみに、テキストの場合は、

[edit]

便利ツール

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

WebデザイナーにもわかるFlex画面デザイン(3)につづきます)

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

| append.gif

tag: Flex?


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-10-16 (木) 14:08:28 (5633d)

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