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起動し、[ファイル]メニューから[新規]を選択します。

fsde_fla01

 

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

fsde_fla02

 


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」は単一コンポーネント編集です。

fsde_fw01fsde_fw02

※ここでキャンセルすると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スキン選択パネルが表示されます。

fsde_ai01fsde_ai02

 


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

fsde_ps01fsde_ps02

 

Share and Enjoy:
  • Print this article!
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Related posts