Flexフレームワークで変わるRIA開発の現場
連載インデックスへ
第4回

Flex開発の超便利ライブラリとスキン機能-3つのSWC


taiga.jp
廣畑 大雅
2010/8/5


【3】デザインツールの拡張機能でスキンSWC作成

 「Flex MX Skin Design Extensions」はAdobe Developer Connectionで配布されているAdobe CS用の拡張機能です(無償で公開されていますが、使うにはAdobe IDが必要です)。

 この機能を使用することによって、FlexのMXコンポーネントとして利用できるスキンFlash ProfessionalIllustratorPhotoshopFireworksで作成できます(CS3以降のバージョン)。

図8 Flex MX Skin Design Extensionsのダウンロードページ
図8 Flex MX Skin Design Extensionsのダウンロードページ

 拡張機能は、MXP形式で配布されているので、Adobe Extension Managerを使用してインストールします。

図9 Adobe Extension Manager
図9 Adobe Extension Manager

Flash ProfessionalでFlexスキンを作るには

 ここからは、Flash Professional用の拡張機能について解説していきます。拡張機能をインストールすると、Flash Professionalを立ち上げたときのスタートアップスクリーンに[Flex Skins]というテンプレートの項目が表示されるようになります。このテンプレートを用いることによってFlexのスキンを作成できます。

図10 Flash Professionalのスタートアップスクリーン
図10 Flash Professionalのスタートアップスクリーン

 [Flex Skins]を選択すると、[テンプレートから新規作成]のダイアログが表示されるので、そこからスキンを適用させたいコンポーネントのテンプレートを選択して編集します。

図11 Flex Skin Templete
図11 Flex Skin Templete

 これらのテンプレートでありがたいのは、コンポーネントに必要なステートが一目で分かることです。例えば、Buttonコンポーネントのスキンテンプレートのタイムラインを見ると、「up」「over」「down」「disabled」という4つのラベルが定義されていることが確認できると思います。

図12 Flash Professional用Buttonコンポーネント スキンテンプレート
図12 Flash Professional用Buttonコンポーネント スキンテンプレート

 これらは、Flexのステートに相当するのですが、このようなスキンを「ステートフルスキン」といいます。ステートフルスキンの詳細については、Flexのヘルプ「Flex 3 開発ガイド : ステートフルスキンの作成」に詳しく書かれているので、そちらをご覧ください。

 定義されているラベル単位でテンプレートのシンボルを編集してSWCファイルを書き出すだけで、自由なデザインのスキンを適用できるという点が、Flex MX Skin Design Extensionsの利点です。

実際にサンプルを読み込んでみよう

 実際にFlexプロジェクトのサンプルを用意したので、Flash Builderなどでご確認ください(ButtonSkinSmaple.fxp)。

図13 Buttonコンポーネント スキンテンプレート使用例
図13 Buttonコンポーネント スキンテンプレート使用例

地味だがFlex業務アプリ開発には欠かせない

 いかがでしたでしょうか。広告やコンシューマ系のFlashサイトなどで重宝されているライブラリと比較すると、今回紹介したライブラリや拡張機能は地味なものばかりで正直華はありませんが、Flexアプリケーション開発には欠かせない大切なものばかりです。

 日ごろ、Flex業務アプリケーション開発で苦戦されている方々にとって、この記事が何かヒントや参考になれば幸いです。

@IT関連記事


Flexのクライアントサイドをオープンソースで制覇する
大規模なWebアプリケーションを大人数で開発するときに便利なFlexのクライアントサイドのフレームワークを紹介
Amazon S3とAdobe AIRで“クラウドRIA”を作ってみた
クラウドの“クライアント”としてRIAを試す(2) S3 Firefox OrganizerプラグインのようにAmazon S3のデータ構造を体験できるサンプルをActionScriptライブラリで作成
リッチクライアント & 帳票」フォーラム 2009/9/29
Flex Builder 3でサクっとActionScriptコーディング!
作って学ぶAIRウィジェットの基礎→応用(3) 今回はAIRウィジェットの処理やロジックをActionScriptでコーディングします。Flex Builder 3を使うと便利な機能が満載です
リッチクライアント & 帳票」フ ォーラム 2008/3/24
Flashを閃光のごとく高速化するための基礎知識
速いFlash/ActionScriptチューニング入門(1) 
Flash高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します

プロフィール:廣畑 大雅(ひろはた たいが)
ブログ

フリーランスのWebディレクタ/デザイナ。
Flashコンテンツ、Flexアプリケーションの設計/開発を中心に活動中。
アドビ システムズ公式Flashユーザーグループ「F-site」にも懇親会専用スタッフとして活動する

1-2-3  

 INDEX
Flexフレームワークで変わるRIA開発の現場(4)
Flex開発の超便利ライブラリとスキン機能-3つのSWC
  Page1
3つのSWCファイルにまつわるTips
【1】業務用で超便利なライブラリ「as3Corelib」とは
  Page2
【2】日本語文字コード変換ライブラリ「as3jcode」とは
Page3
【3】デザインツールの拡張機能でスキンSWC作成
地味だがFlex業務アプリ開発には欠かせない


リッチクライアント&帳票 全記事一覧へ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間