WebデザイナーにもわかるFlex画面デザイン（2）のつづきです。
スキンについて解説します。

[edit]

スキンとは †

Flexには、スキンというものがあります。
OSやブログツールにおけるスキンやテーマと同等のものと考えて差し支えありません。
（2）で解説したように細かくスタイル指定するのではなく、全体のデザインを指定できます。

たとえば、デフォルトのスキンにも名前があり、
このスキンは「Halo（ヘイロー）」といいます。

そのほかにもスキンがいくつか用意されていて、切り替えることが可能です。

これらのスキンはCSSと画像で構成されていて、スキンを変えることで見た目をがらりと変えることができます。

↑
[edit]

スキンの設定 †

  1. configファイルを用意する。
  2. ファイル名-config.xml（sample.mxmlだったら、sample-config.xmlのように命名）を用意すると、そのmxml用の設定ファイルになるので、mxmlと同じ階層に置く。
  3. 下記のように書く。（パスは各自確認してください）
  4. 再コンパイル。
<flex-config>
	<compiler>
		<theme>
			<filename>/(インストールしたパス)/flex-sdk-3/frameworks/themes/HaloClassic/haloclassic.swc</filename>
		</theme>
	</compiler>
</flex-config>
↑
[edit]

スキンのしくみ †

デフォルトであるHaloの場合は、下記のようなswfを読み込んでいます。

sample03_07.png

また、Flexは画像だけでなくswf、およびswf内のシンボル単位でもCSSで読み込むことができるので、

Button
{
	disabledSkin: Embed(source="AeonGraphical.swf", symbol="Button_disabledSkin");
	downSkin: Embed(source="AeonGraphical.swf", symbol="Button_downSkin");
	overSkin: Embed(source="AeonGraphical.swf", symbol="Button_overSkin");
	upSkin: Embed(source="AeonGraphical.swf", symbol="Button_upSkin");
}

というように、CSSで記述します。
こうしておくと1つのファイルにまとめておけるので管理しやすくなります。
デフォルトのデザインを変えたい場合は、このswfを編集するとよさそうです。

↑
[edit]

スキンの可能性 †

などのFlex用スキンを配布しているサイトがあります。
Mac風、Vista風などいろいろなデザインが配布されており、これを見るとFlexでもデザインの自由度はあって、結構いろいろできるんだな、と思われると思います。

↓このへんとか面白い。
こういうのを見ると、業務システムメインで使うのはもったいないと思うのですよ。
いろいろ可能性がありそう。

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

| append.gif

tag: Flex?

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

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

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