Flash CS3

Mac OS X：

Macintosh HD/ライブラリの
Application Support/Adobe/Flash CS3/ja/Configuration/HelpPanel/Help

Windows XP：

C:¥Documents and Settings¥All Usersの
Application Data¥Adobe¥Flash CS3¥ja¥Configuration¥HelpPanel¥Help

ActionScript 3.0 コンポーネントリファレンスガイドなら、

Help/ActionScriptLangRefV3/index.htmlになる。

Flex Builder 3

Flex Builder 3の場合はというと、Flex Builder 3をインストールしたフォルダの「plugins/com.adobe.flexbuilder.helpなんとか」というのがヘルプ用HTMLファイル類。

その中で日本語ヘルプファイルは「com.adobe.flexbuilder.help.nl1_3.0.194161/nl/ja」にある「doc.zip」。

Adobe Flex Builder 3/plugins/com.adobe.flexbuilder.help.nl1_3.0.194161/nl/ja/doc.zip

Adobe Flex 3 リファレンスガイドなら、「doc.zip」を解凍して

doc/langref/index.htmlになる。

Webのリファレンスが使えない時は思い出してあげてください。
まぁ、普通にアプリを立ち上げればそれで済むんだけどね。

Flex Team
Update on Flex, ActionScript, AIR Posters

中垣 茂 （ Shigeru Nakagaki ） | ブログ （ Flex, AIR, ColdFusion ）
AS3, Flex 3, AIR ポスター．．．97メガっすか

てっく煮ブログ
AIR・AS3・Flex3のクラス相関図ポスターが公開中

申し訳ないですが、Silverlightです。
Silverlight 2.0 Beta Silverlight 3のプラグインが必要なので見たい人は入れてください。

Microsoft Silverlight: Light Up the Web
http://www.microsoft.com/silverlight/default.aspx

Deep Zoom Adobe ActionScript 3.0 Class Diagram Viewer – Silverlight 3
http://violentcoding.com/content/AdobeAS3ClassDiagramViewer/index.html

posters.pdfから1枚7,200×10,800ピクセル（解像度300相当）のPNG画像に書き出し、それら５枚を横に並べています。各画像のサイズは、22.3MB、32.3MB、32.7MB、24.1MB、30.0MBというボリュームです。

SilverlightのDeep Zoomという機能を使って表示してます。
MIX08で紹介されていたHard Rock Cafeのサイトで使っているやつです。

Hard Rock Memorabilia
http://memorabilia.hardrock.com/

マウスドラッグで画像の移動やマウスホイールで拡大縮小ができます。

Deep Zoomでは拡大縮小や移動を行っている最中に、結構な負荷がかかっています・・・。
CPU%で拡大縮小・移動時には80% – 90%位のスコアをたたき出しております。

作りはMSエバンジェリスト 大野さんの完コピです。

develop .net : Silverlight 2 の新機能 – Deep Zoom
http://blogs.msdn.com/mohno/archive/2008/03/12/silverlight-2-deep-zoom.aspx

develop .net : Silverlight 2 の新機能 – Deep Zoom（マウスホイール編）
http://blogs.msdn.com/mohno/archive/2008/03/12/Silverlight-2-Deep-Zoom-with-Mouse-Wheel.aspx

The “Specific component with style name” acts as a hint to CSS Design View and serves to document the purpose of the style. However, Flex itself ignores the component name portion of the name.

So, if you have Label.myLabel{} in a css file and open that file in CSS Design View, you will see a preview of that style with a Label as the sample component. If you have just myLabel{}, CSS Design View will not know what to use as the sample component, so you would need to select the sample component from the combo box at the top of CSS Design View.

In the MXML source code, Flex considers Label.myLabel and myLabel to be the same thing. This is a limitation of Flex and the MXML compiler. It ignores all characters before the dot in the style name.

So, the Label.myLabel syntax is only useful in Flex Builder CSS Design View. It saves you from having to select Label as the sample component. We also consider it to be a good practice because it makes it clear from the name that the style is intended for use with a Label and not some other kinds of components.

– Greg Dow
– Adobe Flex Builder Team

TypeセレクタとClassセレクタがくっついたLabel.myLabel{…….} みたいなのはCSS Design Viewのみで意味ある書き方で、プレビューするコンポーネントを指定できるだけという事みたいです。
あと、スタイル名でドットの前はFlex・MXMLコンパイラで無視されるって書いてますね。

Flex 3:Feature IntroductionsのCSS Design View (Updated for Beta 2)にビデオがあるので、それを見ればだいたいのCSS Design Viewでできることは分かると思います。

ひとことで言うとFlex Builder内でFlex Style Explorerみたいなことができるようになった感じです。

CSSファイルを新規作成して、CSSデザインビューに切り替えると、”New Style”ボタンがあって、そこからコンポーネント用のCSS定義を作成できたり、開いているCSSファイルに含まれるCSS定義からデザインビューに表示するものをプルダウンで選択できたりします。
で、それをCSSデザインビューのプロパティパネルからスタイル調整できるのです。

さらにはコンポーネントに含まれる別の部分のCSS定義に進める（画像のDropdown Listの”Edit”ボタン）仕様になっていて、なかなか考えられている印象です。

MXMLのデザインビューでも、コンポーネントにインラインでスタイル設定した後に、プロパティパネルから”Convert to CSS”ボタンでCSSファイルに移したり、CSSデザインビューに直接移動したりすることができます。

しかもコンポーネントのスタイルをインラインで再編集して、再び”Convert to CSS”ボタンを押すと、適用されているCSS定義の内容を上書きしてくれるなど、なかなかやります。

その”Convert to CSS”ボタンやCSSデザインビューの”New Style”からは、

• All components (global)
  globalセレクタ（ global{…….} ）
  コンポーネント・スタイル名指定なし
  既にglobalセレクタがある場合は選択してもOKできない
  その後、デザインビューでプレビューするコンポーネントを選択する。（適宜変更可）
• All components with style name
  Classセレクタ（ .myStyle{…….} ）
  スタイル名を指定する
  既に同じ名前のClassセレクタがある場合は選択してもOKできない
  その後、デザインビューでプレビューするコンポーネントを選択する（適宜変更可）
• Specific component
  Typeセレクタ（ Button{…….} ）
  コンポーネントを選択する
  既に同じコンポーネントのTypeセレクタがある場合は選択してもOKできない
• Specific component with style name
  Typeセレクタ.Classセレクタ？（Button.myButton{…….} ）
  コンポーネント・スタイル名を指定する
  既にTypeセレクタ.Classセレクタの名前の組み合わせがある場合は選択してもOKできない

の４つのセレクタのタイプを選択することができます。

その時、MXMLデザインビューから”Convert to CSS”ボタンを押した場合には、そのコンポーネントにstyleNameが設定されます。

で、４つ目のTypeセレクタとClassセレクタがくっついたSpecific component with style nameが良く分かりません。styleNameではClassセレクタ部分のみが使用されるので（styleName=”myButton”）、Classセレクタと区別がつかないし、また既に指定してあるClassセレクタ名（ .myButton{……} ）とバッティングしても作成時にOKボタンが押せてしまいます。

ついでにClassセレクタはMXMLのデザインビューでプロパティパネルのStyleのコンボボックスに表示されるけど、このTypeセレクタとClassセレクタが繋がったやつは表示されないのです。

ただスタイル作成時にプレビューできるコンポーネントを限定しているだけなんですかね・・・

追記：Specific component with style nameについてFlex3のフォーラムで回答をもらいました。
[Flex] CSS Design Viewが良い感じ。(2)

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