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スキン選択パネルが表示されます。
Related posts
