アークウェブ
Webデザイン
SandBox
Web制作会社アークウェブのスタッフが、デザインのTips・ノウハウをまとめているWikiです
アークウェブシステム開発SandBox
アークウェブWebマーケティングSandBox
アークウェブWebデザインSandBox
アークウェブ アクセシビリティWiki
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[WebデザイナーにもわかるFlex画面デザイン(2)]]のつづき...
スキンについて解説します。
**スキンとは [#pa2a2b69]
Flexには、スキンというものがあります。
OSやブログツールにおけるスキンやテーマと同等のものと考え...
(2)で解説したように細かくスタイル指定するのではなく、全...
たとえば、デフォルトのスキンにも名前があり、
このスキンは「Halo(ヘイロー)」といいます。
#flash( /sandbox/design/data/flex/sample03_01.swf, 420x30...
そのほかにもスキンがいくつか用意されていて、切り替えるこ...
- HaloClassic(Flex1.5用のスキン。AS2用なのでエラーが出る...
- Ice
- Smoke
- Wooden
- Institutional
これらのスキンはCSSと画像で構成されていて、スキンを変える...
**スキンの設定 [#u7c4c679]
+ configファイルを用意する。
+ ファイル名-config.xml(sample.mxmlだったら、sample-conf...
+ 下記のように書く。(パスは各自確認してください)
+ 再コンパイル。
<flex-config>
<compiler>
<theme>
<filename>/(インストールしたパス)/flex-sdk-3/framewor...
</theme>
</compiler>
</flex-config>
-HaloClassicに変更したところ。
#flash( /sandbox/design/data/flex/sample03_02.swf, 420x30...
-Ice
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Ic...
#flash( /sandbox/design/data/flex/sample03_03.swf, 420x30...
-Smoke
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Sm...
#flash( /sandbox/design/data/flex/sample03_04.swf, 420x30...
-Wooden
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Wo...
#flash( /sandbox/design/data/flex/sample03_05.swf, 420x30...
-Institutional
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/In...
#flash( /sandbox/design/data/flex/sample03_06.swf, 420x30...
**スキンのしくみ [#ad732fe3]
デフォルトであるHaloの場合は、下記のようなswfを読み込んで...
#ref(http://ark-web.jp/sandbox/design/data/flex/sample03_...
また、Flexは画像だけでなくswf、およびswf内のシンボル単位...
Button
{
disabledSkin: Embed(source="AeonGraphical.swf", symbol=...
downSkin: Embed(source="AeonGraphical.swf", symbol="But...
overSkin: Embed(source="AeonGraphical.swf", symbol="But...
upSkin: Embed(source="AeonGraphical.swf", symbol="Butto...
}
というように、CSSで記述します。
こうしておくと1つのファイルにまとめておけるので管理しやす...
デフォルトのデザインを変えたい場合は、このswfを編集すると...
**スキンの可能性 [#e2479dec]
-Slice9
--http://www.scalenine.com/
などのFlex用スキンを配布しているサイトがあります。
Mac風、Vista風などいろいろなデザインが配布されており、こ...
-Mac OS X
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://www.scalenine.com/themes/aqua/Aqua.html
-Windows XP
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://weblogs.macromedia.com/mc/archives/WindowsXPthem...
-Brownie
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://www.scalenine.com/themes/brownie/Brownie.html
↓このへんとか面白い。
こういうのを見ると、業務システムメインで使うのはもったい...
いろいろ可能性がありそう。
-RockOn
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://www.scalenine.com/themes/rockon/RockOn.html
-Black Edding
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://fleksray.org/skins/edding/Edding.html
-Flekscribble
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://fleksray.org/skins/scribble/Scribble.html
**追記:スキン編集方法 [#l43cc9e6]
PhotoshopやFireworks(CS3)等に拡張機能をインストールすれ...
詳しくは
http://www.adobe.com/jp/devnet/flex/articles/skins_styles...
ダウンロード
http://www.adobe.com/products/flex/flexdownloads/#skins
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex...
インストール方法などは
http://violentcoding.com/blog/2007/10/10/archives/49
で詳しく説明されています。
#blikifooter(小森)
tag: [[Flex>tag/Flex]]
終了行:
[[WebデザイナーにもわかるFlex画面デザイン(2)]]のつづき...
スキンについて解説します。
**スキンとは [#pa2a2b69]
Flexには、スキンというものがあります。
OSやブログツールにおけるスキンやテーマと同等のものと考え...
(2)で解説したように細かくスタイル指定するのではなく、全...
たとえば、デフォルトのスキンにも名前があり、
このスキンは「Halo(ヘイロー)」といいます。
#flash( /sandbox/design/data/flex/sample03_01.swf, 420x30...
そのほかにもスキンがいくつか用意されていて、切り替えるこ...
- HaloClassic(Flex1.5用のスキン。AS2用なのでエラーが出る...
- Ice
- Smoke
- Wooden
- Institutional
これらのスキンはCSSと画像で構成されていて、スキンを変える...
**スキンの設定 [#u7c4c679]
+ configファイルを用意する。
+ ファイル名-config.xml(sample.mxmlだったら、sample-conf...
+ 下記のように書く。(パスは各自確認してください)
+ 再コンパイル。
<flex-config>
<compiler>
<theme>
<filename>/(インストールしたパス)/flex-sdk-3/framewor...
</theme>
</compiler>
</flex-config>
-HaloClassicに変更したところ。
#flash( /sandbox/design/data/flex/sample03_02.swf, 420x30...
-Ice
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Ic...
#flash( /sandbox/design/data/flex/sample03_03.swf, 420x30...
-Smoke
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Sm...
#flash( /sandbox/design/data/flex/sample03_04.swf, 420x30...
-Wooden
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/Wo...
#flash( /sandbox/design/data/flex/sample03_05.swf, 420x30...
-Institutional
--/(インストールしたパス)/flex-sdk-3/frameworks/themes/In...
#flash( /sandbox/design/data/flex/sample03_06.swf, 420x30...
**スキンのしくみ [#ad732fe3]
デフォルトであるHaloの場合は、下記のようなswfを読み込んで...
#ref(http://ark-web.jp/sandbox/design/data/flex/sample03_...
また、Flexは画像だけでなくswf、およびswf内のシンボル単位...
Button
{
disabledSkin: Embed(source="AeonGraphical.swf", symbol=...
downSkin: Embed(source="AeonGraphical.swf", symbol="But...
overSkin: Embed(source="AeonGraphical.swf", symbol="But...
upSkin: Embed(source="AeonGraphical.swf", symbol="Butto...
}
というように、CSSで記述します。
こうしておくと1つのファイルにまとめておけるので管理しやす...
デフォルトのデザインを変えたい場合は、このswfを編集すると...
**スキンの可能性 [#e2479dec]
-Slice9
--http://www.scalenine.com/
などのFlex用スキンを配布しているサイトがあります。
Mac風、Vista風などいろいろなデザインが配布されており、こ...
-Mac OS X
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://www.scalenine.com/themes/aqua/Aqua.html
-Windows XP
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://weblogs.macromedia.com/mc/archives/WindowsXPthem...
-Brownie
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://www.scalenine.com/themes/brownie/Brownie.html
↓このへんとか面白い。
こういうのを見ると、業務システムメインで使うのはもったい...
いろいろ可能性がありそう。
-RockOn
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://www.scalenine.com/themes/rockon/RockOn.html
-Black Edding
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://fleksray.org/skins/edding/Edding.html
-Flekscribble
--&ref(http://ark-web.jp/sandbox/design/data/flex/sample0...
--http://fleksray.org/skins/scribble/Scribble.html
**追記:スキン編集方法 [#l43cc9e6]
PhotoshopやFireworks(CS3)等に拡張機能をインストールすれ...
詳しくは
http://www.adobe.com/jp/devnet/flex/articles/skins_styles...
ダウンロード
http://www.adobe.com/products/flex/flexdownloads/#skins
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex...
インストール方法などは
http://violentcoding.com/blog/2007/10/10/archives/49
で詳しく説明されています。
#blikifooter(小森)
tag: [[Flex>tag/Flex]]
ページ名:
アークウェブのサービスやソリューションはこちら
サービス
Webの企画・戦略立案
Webデザイン
Webシステム開発
Zen Cartソリューション
Zen Cart導入コンサルティング, RFP作成, トラブル診断
Zen Cartで大規模ECサイト構築
Zen Cartモジュールの開発・カスタマイズ
Zen Cart制作会社(デザイン・企画会社)様向けサービス
Zen Cart海外向け・多言語ECサイトの制作
Zen Cartのデザイン, ペルソナ/シナリオ法, RIA(Ajax・Flex)
Zen Cartのセキュリティ・運用保守サポート
Zen Cart企画・マーケティング戦略, SEO・SEM(サーチエンジン広告)
Zen Cartハイエンド版(大規模サイト用高可用バージョン)
EC-CUBEとZen Cart 機能比較表(概要)
Zen Cart携帯モジュール(モバイルショップ構築用)
Zen Cartの導入事例
Zen-Cart.JPのご紹介とアークウェブの取り組み
Zen-Cartモバイルショップ構築サービス
Movable Typeソリューション
企業サイトでのMovable Type活用
Movable Type用プラグイン一覧
MT用フォーム作成プラグイン「A-Form」
A-Formパートナー制度
その他ソリューション
AjaxでRIA開発
Ruby on Rails
Flexによる業務システム構築
ペルソナ/シナリオ法
ビジネスブログ
SNS・ソーシャルソフトウェア
SEO・SEM
アークウェブのCSR(企業の社会的責任)
アークウェブのCSR指針