Flex Skin Design Extensionsの日本語版Adobe CS3へのインストールについて。
2008年10月15日更新:Flex Builder 3のリリース版での記述に修正。
Flex Skin Design Extensions はFlex3のスキン編集用に用意されたCS3(Flash・Illustrator・Photoshop・Fireworks)のための拡張機能で、Flex3とCS3用というところがちょっと注意です。
Flex Skin Design Extensions は Flex Builder 3 のインストールディスクに付属しているものを使用するか、下記サイトよりダウンロードして使用します。
Flex Skin Design Extensions & Flex Component Kit for Flash CS3
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins
拡張機能のインストール方法や使用方法・Flexのスキンとしてエクスポートする説明は「Importing Skins into Flex Builder」というPDFドキュメントに書いてあります。
[PDF]Importing Skins into Flex Builder
http://www.adobe.com/go/flex3_skinning_doc
でも、日本語環境だとIllustratorやPhotoshopで動かない場合があるんですね。
ということで、各CS3アプリケーションでSkin Extensionの開始までをメモしときます。
(Mac・Windows XPで確認)
Flash CS3
まずはFlashから。
「Flex Skin Design Extension for Flash」(flex_skins_flash.mxp or Flex_Skins_12_05.mxp)をインストールするんですが、その前に「Flex Component Kit for Flash CS3」をインストールしていない場合は「Flex Component Kit for Flash CS3」をインストールします。
「Flex Component Kit for Flash CS3」も上記のFlex Skin Design Extensions & Flex Component Kit for Flash CS3のページからダウンロードして使用するか(FlexComponentKit.mxp)、Flex Builder 3のインストールディスクにある「FlexComponentKit_ja.mxp」を使用してインストールします。
「Flex Component Kit for Flash CS3」と「Flex Skin Design Extension for Flash」をインストールしたら、Flash CS3起動し、[ファイル]メニューから[新規]を選択します。

表示されるダイアログで「一般」から「テンプレート」に切り替え、「テンプレートから新規作成」ダイアログにすると、カテゴリに「Flex Skins」が追加されていて、「Flex Skins」を選択し、テンプレートでスキン編集を行うアイテムを選択するか、全部入り「flex_skins」を選択すると、Flexスキンを編集するFlaファイルが開かれます。

Fireworks CS3
「Flex Skin Design Extension for Fireworks」(flex_skins_fireworks.mxp or FW_Flex_Skinning_11_20.mxp)をインストールするだけで、Fireworksの場合はシンプルです。
使用するには[コマンド]メニューから[Flex Skinning] > [New Flex Skin]と選択し、編集するスキンを選びます。表示されるパネルの「multiple components」はコンポーネント全部入り、「specific component」は単一コンポーネント編集です。

※ここでキャンセルするとFireworksが落ちたりする(Mac)。
Windows Vistaにおいて、FlashやFireworks用のMXPファイルによるインストール完了後に拡張機能が正常に動作しない場合は、ユーザーアカウント制御(UAC)の設定などを変更して、MXPの再インストールということが必要なったりするかもしれません。
Illustrator CS3
Illustrator用の「Flex Skin Design Extension for Illustrator」では、「flex_skins_AI.zip or AI_Flex_Skinning_11_20.zip」を解凍してできる「FlexSkinning」の中身を指定ディレクトリにコピーします。
まず、FlexSkinning/Scriptsの「Flex Skin」フォルダを、Adobe Illustrator CS3/プリセット/スクリプト内に配置します。
次に「FlexSkinning」の「FlexSkinning/Templates」フォルダにある「FlexSkins」フォルダを配置しますが、「Adobe Illustrator CS3」フォルダに「Cool Extras」フォルダを用意し、さらに「Cool Extras」の中に「Templates」フォルダを作成します。そして、その「Templates」フォルダ内に「FlexSkins」フォルダを配置します。
または、この「FlexSkins」フォルダを「Adobe Illustrator CS3/エクストラ/テンプレート」に配置しても良いのですが、その場合には後述のIllustrator日本語版のパスに対応させる修正が必要になります。
Adobe Illustrator CS3/プリセット/スクリプト/Flex Skin
- Create Flex Skin.jsx
- Export Flex Skin.jsx
Adobe Illustrator CS3/Cool Extras/Templates/FlexSkins
- components フォルダ(単体Flexスキン用aiテンプレートファイル群)
- flex_skins.ait(Flexスキン用aiテンプレートファイル)
または、
Adobe Illustrator CS3/エクストラ/テンプレート/FlexSkins
- components フォルダ(単体Flexスキン用aiテンプレートファイル群)
- flex_skins.ait(Flexスキン用aiテンプレートファイル)
FlexSkinsフォルダを「エクストラ/テンプレート」に配置した場合には、日本版環境のパスに対応させるため「Create Flex Skin.jsx」を編集します。
「Create Flex Skin.jsx」をテキストエディタ等で開いて、71行目の「flexSkinPath = app.path.fullName + “/Cool Extras/Templates/FlexSkins”;」部分を日本語環境のパスに書き換えます。
Create Flex Skin.jsx
//71行目:英語版パスを日本語パスで指定 //flexSkinPath = app.path.fullName + "/Cool Extras/Templates/FlexSkins"; flexSkinPath = app.path.fullName + "/エクストラ/テンプレート/FlexSkins";
またこのスクリプトファイルの編集時には、ファイルの「読み取り専用」解除やVistaのユーザーアカウント制御(UAC)の設定の変更などが必要になるかもしれません。
Macの場合は「Adobe Illustrator CS3/Cool Extras.localized/Templates.localized/FlexSkins」のように「localized」が付いて参照されているので、ディレクトリが日本語のままでもOKで、変更の必要はありません。(また変更しても動作します)
[ファイル]メニューから[スクリプト]を選択し、[Flex Skin] > [Create Flex Skin]を選ぶと編集するFlexスキン選択パネルが表示されます。

Photoshop CS3
PhotoshopでもIllustratorの場合と同じように「flex_skins_photoshop.zip or PS_Flex_Skinning_11_20.zip」の中身である「Presets」を指定ディレクトリにコピーします。
「Presets」内の「FlexSkins」と「Scripts」フォルダを、Adobe Photoshop CS3/プリセットに置き、その後日本語パスに対応させるために修正を行います。
※補足:「Scripts」フォルダ内のファイル(ExportFlexSkins.jsxとNewFlexSkins.jsx)をAdobe Photoshop CS3/プリセット/スクリプトに入れても大丈夫です。
Adobe Photoshop CS3/プリセット
- Flex Skins フォルダ(Flexスキン用psdファイル群)
- Scripts フォルダ(jsxファイル2つ)
または、
Adobe Photoshop CS3/プリセット
- Flex Skins フォルダ(Flexスキン用psdファイル群)
Adobe Photoshop CS3/プリセット/スクリプト
- ExportFlexSkins.jsx
- NewFlexSkins.jsx
Photoshopで日本語パスに対応させるには、「プリセット/Scripts」または「プリセット/スクリプト」の「NewFlexSkins.jsx」を修正します。Illustratorと違って、Mac環境でもスクリプトの修正が必要になります。
「NewFlexSkins.jsx」の47行目を日本語環境のパスに書き換えます。また「NewFlexSkins.jsx」が読み取り専用となっている場合は読み取り解除して編集します。
NewFlexSkins.jsx
//47行目:英語版パスを日本語パスで指定 //var strPresetsFolderDirectory = localize( "$$$/Windows/PresetsFolder/Directory=Presets" ); var strPresetsFolderDirectory = localize( "$$$/Windows/PresetsFolder/Directory=プリセット" );
このスクリプトファイルの編集時には、ファイルの「読み取り専用」解除やVistaのユーザーアカウント制御(UAC)の設定の変更などが必要になるかもしれません。
[ファイル]メニューから[スクリプト]を選択し、[New Flex Skin...]でFlexスキン選択パネルが表示されます。








