第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高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します |
|
| プロフィール：廣畑 大雅（ひろはた たいが） ブログ フリーランスの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業務アプリ開発には欠かせない |
|
 |
リッチクライアント＆帳票 全記事一覧へ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
