[[WebデザイナーにもわかるFlex画面デザイン（2）]]のつづきです。
スキンについて解説します。
**スキンとは [#pa2a2b69]
Flexには、スキンというものがあります。
OSやブログツールにおけるスキンやテーマと同等のものと考えて差し支えありません。
（2）で解説したように細かくスタイル指定するのではなく、全体のデザインを指定できます。
たとえば、デフォルトのスキンにも名前があり、
このスキンは「Halo（ヘイロー）」といいます。
#flash( /sandbox/design/data/flex/sample03_01.swf, 420x300, version=9)
そのほかにもスキンがいくつか用意されていて、切り替えることが可能です。
- HaloClassic（Flex1.5用のスキン。AS2用なのでエラーが出る？）
- Ice
- Smoke
- Wooden
- Institutional
これらのスキンはCSSと画像で構成されていて、スキンを変えることで見た目をがらりと変えることができます。
**スキンの設定 [#u7c4c679]
+ configファイルを用意する。
+ ファイル名-config.xml（sample.mxmlだったら、sample-config.xmlのように命名）を用意すると、そのmxml用の設定ファイルになるので、mxmlと同じ階層に置く。
+ 下記のように書く。（パスは各自確認してください）
+ 再コンパイル。
<flex-config>
<compiler>
<theme>
<filename>/(インストールしたパス)/flex-sdk-3/frameworks/themes/HaloClassic/haloclassic.swc</filename>
</theme>
</compiler>
</flex-config>
-HaloClassicに変更したところ。
#flash( /sandbox/design/data/flex/sample03_02.swf, 420x300, version=9)
-Ice
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Ice/Ice.css
#flash( /sandbox/design/data/flex/sample03_03.swf, 420x300, version=9)
-Smoke
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Smoke/Smoke.css
#flash( /sandbox/design/data/flex/sample03_04.swf, 420x300, version=9)
-Wooden
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Wooden/Wooden.css
#flash( /sandbox/design/data/flex/sample03_05.swf, 420x300, version=9)
-Institutional
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Institutional/Institutional.css
#flash( /sandbox/design/data/flex/sample03_06.swf, 420x300, version=9)
**スキンのしくみ [#ad732fe3]
デフォルトであるHaloの場合は、下記のようなswfを読み込んでいます。
#ref(http://ark-web.jp/sandbox/design/data/flex/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を編集するとよさそうです。
**スキンの可能性 [#e2479dec]
-Slice9
--http://www.scalenine.com/
などのFlex用スキンを配布しているサイトがあります。
Mac風、Vista風などいろいろなデザインが配布されており、これを見るとFlexでもデザインの自由度はあって、結構いろいろできるんだな、と思われると思います。
-Mac OS X
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample03_08.png);
--http://www.scalenine.com/themes/aqua/Aqua.html
-Windows XP
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample03_09.png);
--http://weblogs.macromedia.com/mc/archives/WindowsXPthemeDemo.htm
-Brownie
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample03_10.png);
--http://www.scalenine.com/themes/brownie/Brownie.html
↓このへんとか面白い。
こういうのを見ると、業務システムメインで使うのはもったいないと思うのですよ。
いろいろ可能性がありそう。
-RockOn
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample03_11.png);
--http://www.scalenine.com/themes/rockon/RockOn.html
-Black Edding
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample03_12.png);
--http://fleksray.org/skins/edding/Edding.html
-Flekscribble
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample03_13.png);
--http://fleksray.org/skins/scribble/Scribble.html
**追記：スキン編集方法 [#l43cc9e6]
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
で詳しく説明されています。
#blikifooter(小森)
tag: [[Flex>tag/Flex]]
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
