第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 ProfessionalやIllustrator、Photoshop、Fireworksで作成できます（CS3以降のバージョン）。

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

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

図9　Adobe Extension Manager

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

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

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

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

図11　Flex Skin Templete

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

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

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

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

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

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

図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高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します デザインハック ＜ リッチクライアント 2010/3/9

プロフィール：廣畑 大雅（ひろはた たいが） ブログ フリーランスの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業務アプリ開発には欠かせない

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

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）