アークウェブ
Webデザイン
SandBox
Web制作会社アークウェブのスタッフが、デザインのTips・ノウハウをまとめているWikiです
アークウェブシステム開発SandBox
アークウェブWebマーケティングSandBox
アークウェブWebデザインSandBox
アークウェブ アクセシビリティWiki
http://www.ark-web.jp/sandbox/design/wiki/295.html
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
Adobe MAX Japan 2009 2日目レポート
Ajax/角丸ライブラリ
AsEventListener
ComponentExplorer
Flex/Flash Catalyst βを試す
FormatDate
FrontPage
Google Browser Size でファーストビューをチェック
InterWikiName
JavaScript
MT/管理画面/テンプレートのオーバーライド
MenuBar
PHP
PukiWiki
RecentDeleted
SandBox
WebデザイナーにもわかるFlex画面デザイン(1)
WebデザイナーにもわかるFlex画面デザイン(2)
WebデザイナーにもわかるFlex画面デザイン(3)
WebデザイナーにもわかるFlex画面デザイン(4)
WebデザイナーにもわかるFlex画面デザイン(5)
WikiName
WikiWikiWeb
YukiWiki
Zen Cart/tips
event/POINT OF VIEW 第0回
event/インクルーシブデザインワークショップ
iPad/iPadにだけCSS付与するには
jQuery
jQuery/ECサイトで使ってみたいプラグイン
tag
イテレーション1
サンプル
タグ/PGP
パフォーマンス改善/Bookmark
ヘルプ
志田
小沼
進地
整形ルール
斉藤
大家メモ
大家メモ/MAMP/MAMP環境でのPHPエラー表示
大家メモ/MAMP/Mac OSXローカルにMAMPでサイト制作環境を構築
竹村
中野
日本語
八木
勉強会
勉強会/アクセシビリティ勉強会@2008.01.29
勉強会/アクセシビリティ勉強会@2008.01.22
**スキンとは [#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と画像で構成されていて、スキンを変えることで見た目をがらりと変えることができます。
タイムスタンプを変更しない
[[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]]
テキスト整形のルールを表示する
アークウェブのサービスやソリューションはこちら
サービス
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指針