[FlashでPhotoshopパネルが作れる!] Hello Photoshop Panel !

2010/04/23

こんにちは。きんくまです。

今回はPhotoshopの拡張パネルをFlashで作れるPhotoshop Panelについてです。

以前の記事はこちら

>>[Photoshop] Photoshop用のswf拡張パネルを作ろうとしたらAPIが3種類もあって迷った件

まずはswcをダウンロード

>> Photoshop Developer Center

上のページからPhotoshop Panel Developer’s Guideをダウンロードします。

ph_panel_fig1

Hello Photoshop Panel

今回のエントリは上のファイルの中に入っていたチュートリアルのままのせていきます。

jsxを作成

ExtendScript ToolKitを立ち上げて、以下を入力します。
ファイル名は「ShortcutButtons.jsx」にします。
ExtendScript ToolKitは別になくてもテキストエディタでも問題ないと思います。
その際は文字コードをUTF-8にしてください。

function addDocument(str){
	alert(str);
	app.documents.add();
}

function closeDocument(){
	app.activeDocument.close();
}

Flexでパネルを作成 1.新規プロジェクト作成

チュートリアルがそうだったので、今回はFlexでやりますけど、
Flash CS4でもswcのパスを通せば問題なくいけると思います。

Flexを立ち上げて、
ファイル > 新規Flexプロジェクト

設定パネルで
プロジェクト名は「ShortcutButtons」に、
プロジェクトの場所は適当に。
アプリケーションの種類だけ「Webアプリケーション」に。

Flexでパネルを作成 2.swcの設定

Photoshop Panel Developer’s Guideの中に入っていた、
libraries/CSXSLibrary.swcを
Flexプロジェクトのlibsフォルダにコピー

こんな感じ
ph_panel_fig2

Flexでパネルを作成 3.mxmlを作成

以下のコードを入力

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
	<mx:Script>
		<![CDATA[
			import com.adobe.csxs.core.CSXSInterface;
			
			public var newDocTimer:Timer = new Timer(10 * 1000);
			public var closeDocTimer:Timer = new Timer(12 * 1000);
			
			public function callAddDocument():void
			{
				CSXSInterface.instance.evalScript("addDocument", "Hello World!");
			}
			
			public function callCloseDocument():void
			{
				CSXSInterface.instance.evalScript("closeDocument");
			}
			
			public function init():void
			{
				CSXSInterface.instance.evalScript("PhotoshopPersistent");
				newDocTimer.addEventListener(TimerEvent.TIMER, newDocTimeHD);
				closeDocTimer.addEventListener(TimerEvent.TIMER, closeDocTimeHD);
				newDocTimer.start();
				closeDocTimer.start();
			}
			
			public function newDocTimeHD(e:TimerEvent):void
			{
				if(actNewDoc.selected){
					callAddDocument();
				}
			}
			
			public function closeDocTimeHD(e:TimerEvent):void
			{
				if(actCloseDoc.selected){
					callCloseDocument();
				}
			}
		]]>
	</mx:Script>
	<mx:Button x="10" y="10" label="New Document" width="118" click="callAddDocument();"/>
	<mx:Button x="10" y="40" label="Close Document" click="callCloseDocument();"/>
	<mx:CheckBox x="136" y="10" label="Activate every 10 seconds" id="actNewDoc" />
	<mx:CheckBox x="136" y="40" label="Activate every 12 seconds" id="actCloseDoc"/>
	
</mx:Application>

Flexでパネルを作成 4.swfをパブリッシュ

三角ボタンを押してパブリッシュします。

Photoshopのフォルダにコピー

上の工程でできあがった2つのファイル
・ShortcutButtons.jsx
・ShortcutButtons.swf

をPhotoshpのプラグインフォルダ以下にコピーします。
私の場合は
C:\Program Files\Adobe\Adobe Photoshop CS4 (64 Bit)\Plug-ins\Panels\
でした。

ちなみに、Panels以下にフォルダをさらに作ってもうまく作動したので、パネルごとにフォルダを作って整理してもいいかもしれません。

Photoshopを起動してテストする

Photoshopを起動すると
ウインドウ > エクステンション > ShortcutButtons
が選べるようになっています。

選ぶとしたのようなパネルが現れます。

ph_panel_fig3

ためしにNew Documentをクリックすると

ph_panel_fig4

alertのダイアログがswfからの引数つきで表示されたあと、新規ドキュメントが作成されます。

Close Documentをクリックすればドキュメントが閉じます。

ASからJS(jsx)に引数つきで関数を呼び出せるので、いろいろとできそうです。

しばらくチュートリアルを続けてみたいと思います。

LINEで送る
Pocket

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る