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

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でもデザインの自由度はあって、結構いろいろできるんだな、と思われると思います。

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

[edit]

追記:スキン編集方法

PhotoshopやFireworks(CS3)等に拡張機能をインストールすれば、FlexBuilder?と連携して行うことができます。

詳しくは
http://www.adobe.com/jp/devnet/flex/articles/skins_styles.html

ダウンロード
http://www.adobe.com/products/flex/flexdownloads/#skins
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins

インストール方法などは
http://violentcoding.com/blog/2007/10/10/archives/49
で詳しく説明されています。

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

| append.gif

tag: Flex?


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-01-15 (木) 11:59:47 (3873d)

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