Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » as » Creating Flash Panels for Photoshop using Flash CS4

Creating Flash Panels for Photoshop using Flash CS4

Learn how to create a Photoshop CS4 Flash panel using Flash CS4

Continuing with the CS4 series, let's look at a less known feature of Photoshop CS4. The ability to create custom panels using Flash or Flex. The focus of this article will be on creating Flash panels using Adobe Flash CS4, which at the time of this writing was still soon-to-be-released.

This will actually be a two part article. In the first part we will look at how to build a "Hello World " panel, which for those who don't know is a common practice in scripting. You start off by building a very simple example and then move on to real world uses.

All of the code and files required to complete this tutorial can be downloaded here (CS4 required), which you can use to follow along.

Tools required to complete this tutorial:

  • Adobe Flash CS4
  • Adobe Photoshop CS4

Now that you know what we are going to build, and what you will need, let's get started.

Getting Started

Start by opening Flash CS4 and creating a new ActionScript 3 document. You can create an ActionScript 3 document using the File menu File > New.. and choosing Flash File (ActionScript 3.0). Or you can use create a new document using the Welcome Screen (by default) as seen in figure 1.


Figure 1: Welcome Screen in Flash CS4

Adding the textbox

Once you have a new ActionScript document open, select the Text Tool (T) and then go to the Properties panel and change the Text Type to "Dynamic Text". Then click and drag out a text box on the canvas, as shown in figure 2, the width and height are not important, but in this example I used a height of 100px and a width of 200px.


Figure 2: Creating a new text field on the canvas.

With the newly created text box still selected change the Instance Name to "myTxt" in the Properties panel, as shown in figure 3. This text box will display messages that will be sent from Photoshop when the panel is running.


Figure 3: Text field properties.

Changing the document options

The default width and height of a Flash file is clearly to large for a panel, so let's change that. Click on the grey portion surrounding the canvas to deselect the text box and then in the Properties panel, click the "Edit..." button to the right of Size. In the Document Properties dialog, change the width to 230 and the height to 300, as shown in figure 4. Then click OK, leaving all the other settings at their defaults.


Figure 4: Changing the document properties

Adding the SWC

The library of code required to control and initialize a panel in Photoshop is controlled by a custom SWC that was developed by Adobe. You can find this SWC in the SDK with Photoshop.

In order for Flash to see this SWC you must add it to the project or global path. For this example we will simply add it to the project path, which means if you moved the source files to a new machine it would still work properly.

Go to File > Publish Settings..., click on the Flash tab, as shown in figure 5 and then click Settings... to the right of the Script drop-down, as seen in figure 6. In the Advanced ActionScript 3.0 Settings dialog box, click the Library Path tab and then click the plus (+) arrow to add a new entry. In the new text field, add the SWC name with a ".:" in front of it, as shown in figure 7, to inform Flash the file is in the same location as the Flash (FLA). Once you have added the entry, click OK and then click OK once again in the Publish Settings dialog to commit the change. Finally save the document so you don't have to complete this step again.


Figure 5: Click on the Flash tab to open the settings.


Figure 6: Opening the Settings... dialog.


Figure 7: Adding the path to the SWC.

Adding some very basic code

Now that you have the SWC loaded, the next step is to create a very basic test of the panel library, also referred by CSXS. The CSXS library is used to control the panel and interact with the host application, which in this case would be Photoshop CS4.

To begin adding the necessary code, open the Actions panel (F9) and import the necessary classes. The CSXSInterface class is the main handler, which will control all the interactions. The other two class packages handle the events results, which we will add in just a moment.

The com.adobe. class path is referencing the CSXS code that is located inside the SWC you loaded earlier in this process.

import com.adobe.csxs.core.CSXSInterface;
import com.adobe.csxs.types.*;
import com.adobe.csxs.events.*;

The next section to add assigns event listeners to the StateChangeEvent for when the window opens and when it closes. The close event is important if you want to keep stats or send an event to a session based service, but you should rely on it because Photoshop does not dispatch that event all the time.

CSXSInterface.instance.addEventListener(StateChangeEvent.WINDOW_OPEN, creationComplete);
CSXSInterface.instance.addEventListener(StateChangeEvent.WINDOW_CLOSE, onPanelClose);

For this simple example, the close event will dispatch an alert box via Javascript. You can of course remove this portion if you want. The Javascript call is made using ExternalInterface, which is used to communicate with the host application code.

function onPanelClose(e:Event):void
{
	ExternalInterface.call("alert", "Closing Panel");	
}

The other function is assigned to the WINDOW_OPEN event which will be called anytime the panel is open inside Photoshop. This ensures the panel is properly loaded before you begin making calls. If you started making calls before this event was dispatched you would likely get errors or simply crash the panel.

function creationComplete(e:Event):void
{
	var result:SyncRequestResult = CSXSInterface.instance.getSystemPath("applicationData");
	myTxt.appendText("\nisLoaded: " + CSXSInterface.instance.currentStateInfo.isLoaded);
	myTxt.appendText("\napplicationData: " + " result: " + result.toString());
}

The creationComplete() function that is seen above makes a call to Photoshop to gather a piece of information. This basically ensures everything is properly set up and ready to be used for a more complex example. Finally the response is placed in the text-box you added, so you can clearly see the CSXS library is working.

You should now have an understanding of how the Flash panel is created. Now let's take a look at how you get Flash panels to appear in Photoshop.

Loading the panel into Photoshop

All of the custom (user added) panels are located in the ~/Plug-ins/Panels/ directory inside the Photoshop application directory. On a Mac you will find Photoshop installed in Applications/ and on a PC in C:/Program Files by default.

Locate the SWF (publish it if you haven't already done so) and place it in the Panels/ directory described above.

Once Photoshop is opened or restarted, go to Window > Extensions > HelloWorldPanel. Photoshop names the panel based on the SWF filename.

Note: You will only have to restart Photoshop in order to see the new panel, when you add it for the first time.

You should now see your newly created panel running inside Photoshop, as shown in figure 8, with the environment text displayed in the text field (which is invisible).


Figure 8: The completed panel running inside Photoshop CS4.

At this point you have now completed a basic Flash panel using Flash CS4. I hope you enjoyed and found this article useful. In part 2 we will create a much more interesting panel now that the basics are out of the way.

Special thanks to Jeff Tranberry, Tom Ruark and John Nack and all the rest of the Adobe family that create and support these awesome features and to my web host for the cheapest webhosting.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Creating Flash Panels for Photoshop using Flash CS4

 Ammar Midani  Sat Nov 1, 2008 7:08 am  
Can't wait till part 2.

In a side note I wonder if theres a workaroung to change the opening screen?

Thank you.

 mkeefe  Sun Nov 2, 2008 11:49 am  
@Ammar - Thanks for the comments, part 2 is being worked on now. btw, changing the opening screen of which portion?
 Ammar Midani  Tue Nov 4, 2008 7:24 am  
Hi Matthew,

What I menat is Photoshop loading scrren.

Thanks.
 Mike Hale  Fri Nov 7, 2008 1:26 pm  
Do you have a time frame for part two?
 mkeefe  Fri Nov 7, 2008 1:38 pm  
@Mike, I am hoping to have it completed in the next week or so. All depends on my work load.. which is quite extensive at the moment.
 Mike Hale  Sat Nov 15, 2008 3:46 pm  
While waiting for part two I have have been having trouble with part one. I can't find CSXSLibrary_withManifest.swc in the SDK. I did find CSXSLibrary.swc for working with Flex. When I use that Lib I don't see the isLoaded text. The panel loads but on text.

Any idea what I'm doing wrong or does it require the other Lib?

 igraczech  Thu Nov 27, 2008 9:11 am  
I'm also having problem reaching the library with manifest. Adobe Photoshop Panels Developer's Guide says it's included, but it is not.
 DavideB  Tue Dec 2, 2008 4:50 pm  
Really looking forward to see next part, hope you'll post it soon. Great work!
 alex kent  Sun Dec 7, 2008 8:42 pm  
hi. i'm also unable to make the code work.
i'm using the "CSXSLibrary.swc" library, since the 'withManifest' version doesn't seem to exist anywhere.

my panel loads in Photoshop, static graphics appear, but the creationComplete function never gets called.

:(
 mkeefe  Tue Dec 9, 2008 8:25 am  
@alex - I have also been unable to locate the library mentioned in this article. I will ping Adobe once more and see if I can get all the issues resolved here.

Also I am still in the process of writing the second part but need to get this issue worked out before I can focus on releasing it, since no one would be able to benefit from it.
 Simon  Wed Dec 10, 2008 6:34 pm  
Thanks for the info Matt. I was wondering where did you get the "CSXSLibrary_withManifest.swc"? Was it in an earlier version of the panel developer's guide or the CS4 SDK?

If it's on any Adobe SDK currently available it would be good to know as some of us might have access to those.

Otherwise it should not be protected information so it would be very appreciated by everyone here if you could just post the SWC for download until Adobe clears it up.

Cheers
 igraczech  Thu Dec 11, 2008 6:53 am  
It works perfectly with any CSXSLibrary (with or without manifest). The library is inside Adobe's "Photoshop Panel Developer's Guide" pack, folder "libraries".

You just need to add these three lines to the very beginning of tutorial code above:

// this fixes the "manifest" question/issue
code import mx.core.*


// this is from another forum thread
var resourceManagerImpl:Object = flash.system.ApplicationDomain.currentDomain.getDefinition("mx.resources::ResourceManagerImpl");

mx.core.Singleton.registerClass("mx.resources::IResourceManager", Class(resourceManagerImpl));

BTW: I need more info on Photoshop Events (instance.menuClicked?)
 Frank  Thu Dec 11, 2008 12:40 pm  
Still doesnt work even if I add those 3 lines of code:

import mx.core.*;

var resourceManagerImpl:Object = flash.system.ApplicationDomain.currentDomain.getDefinition("mx.resources::ResourceManagerImpl");

mx.core.Singleton.registerClass("mx.resources::IResourceManager", Class(resourceManagerImpl));
 igraczech  Thu Dec 11, 2008 12:49 pm  
Well, DOESN´T WORK is not exactly a bug report, but anyway... that three lines make ResourceManager working.flash

Another caveat is in onPanelClose:

ExternalInterface.call("alert", "Closing Panel");

does not work in Photoshop (displays dialog with undefined content). This works:

CSXSInterface.instance.evalScript("alert", "Closing Panel");
 igraczech  Thu Dec 11, 2008 12:54 pm  
Without:
import mx.core.*

I get this error:
ReferenceError: Error #1065: Variable mx undefined.
at ColorWheel_fla::MainTimeline/frame1()

Without:
var resourceManagerImpl:Object = flash.system.ApplicationDomain.currentDomain.getDefinition("mx.resources::ResourceManagerImpl");

mx.core.Singleton.registerClass("mx.resources::IResourceManager", Class(resourceManagerImpl));

I get this:
Error: No class registered for interface 'mx.resources::IResourceManager'.
at mx.core::Singleton$/getInstance()
at mx.resources::ResourceManager$/getInstance()
at mx.logging::LogLogger()
at mx.logging::Log$/getLogger()
at com.adobe.csxs.core::CSXSInterface$cinit()
at global$init()
at ColorWheel_fla::MainTimeline/frame1()Error: No class registered for interface 'mx.resources::IResourceManager'.
at mx.core::Singleton$/getInstance()
at mx.resources::ResourceManager$/getInstance()
at mx.logging::LogLogger()
at mx.logging::Log$/getLogger()
at com.adobe.csxs.core::CSXSInterface$cinit()
at global$init()
at ColorWheel_fla::MainTimeline/frame1()

Tested on both Mac and PC versions of Flash CS4 10.0.
 igraczech  Thu Dec 11, 2008 12:59 pm  
Sorry for making mess, I´m not a good programmer. But this works for me:

import mx.core.*

var resourceManagerImpl:Object = flash.system.ApplicationDomain.currentDomain.getDefinition("mx.resources::ResourceManagerImpl");
mx.core.Singleton.registerClass("mx.resources::IResourceManager", Class(resourceManagerImpl));

// import net.stevensacks.preloaders.*;
import com.adobe.csxs.core.CSXSInterface;
import com.adobe.csxs.types.*;
import com.adobe.csxs.events.*;

CSXSInterface.instance.addEventListener(StateChangeEvent.WINDOW_OPEN, creationComplete);
CSXSInterface.instance.addEventListener(StateChangeEvent.WINDOW_CLOSE, onPanelClose);

var panelMenu:XML=new XML("");

function creationComplete(e:Event):void {
setMenu(e);
}

function setMenu(e:Event):void {
var panelMenu:XML=new XML("");
var r:SyncRequestResult=CSXSInterface.instance.setPanelMenu(panelMenu);
}

function onPanelClose(e:Event):void {
ExternalInterface.call("alert", "Closing Panel");
}
 Frank  Thu Dec 11, 2008 2:01 pm  
Hey thx for answering.
I tried your code, no compile errors.
But I just cant get the alert when closing the panel in photoshop CS4

Do you know why??
Thx
 igraczech  Fri Dec 12, 2008 4:52 am  
I'm not sure. I've noticed that this event is not dispatched always, but works with the closing button in left top panel corner.

You can try to call the event manually using a button

myButton.addEventListener(MouseEvent.MOUSE_UP, onPanelClose);

 igraczech  Fri Dec 12, 2008 4:57 am  
Also I've noticed that there's missing XML for menu in my code... this forum won't let me post it. But it's just a simple object Menu with three childern MenuItem, different labels.

// This event is fired when a panel menu is clicked.
CSXSInterface.instance.addEventListener(MenuClickEvent.FLYOUT_MENU_CLICK, flyoutClickEvent);

function flyoutClickEvent(eventObj:Event) {
// this is very dirty and unlocalizable
//
if (eventObj.toString().search("About...")>0) {
// menu that contains string "About..." selected
}
 Frank  Fri Dec 12, 2008 11:22 am  
So im trying a simple test here, 1 button that, when pressed, will alert me with this message: "Closing panel" .
So I add a button in the scene, name it myButton. And here's the code. But guess what, in photoshop, when I
launch my panel, I see my button...fine, but when i press it...nothing happend!


import mx.core.*;
var resourceManagerImpl:Object = flash.system.ApplicationDomain.currentDomain.getDefinition("mx.resources::ResourceManagerImpl");
mx.core.Singleton.registerClass("mx.resources::IResourceManager", Class(resourceManagerImpl));

import com.adobe.csxs.core.CSXSInterface;
import com.adobe.csxs.types.*;
import com.adobe.csxs.events.*;

myButton.addEventListener(MouseEvent.MOUSE_UP, onPanelClose);

function onPanelClose(e:Event):void
{
CSXSInterface.instance.evalScript("alert", "Closing Panel");
}

I just dont get it...
 alexkent  Sat Dec 13, 2008 10:26 am  
@igraczech
thanks a lot! that's great, the panel is fundamentally working for me now.

i've noticed something else, i was getting a Flash security error in photoshop when trying to open the panel "Adobe flash player has stopped a potentially unsafe operation... ...is trying to communicate with the Internet-enabled Location: "

i fixed this by changing the 'Local Playback Security: ' in the flash publish settings to "Access network only".

before changing this, photoshop usually crashed (unexpected quit) after displaying the warning panel :D

hope this is helpful to someone else
 igraczech  Mon Dec 15, 2008 8:10 am  
alexkent: I have the same issue with playback security. I had to modify the application (Flash Panel) to use all its information from the web.

I have found another questionable thing:
When scripting Photoshop using evalScript, i'm able to pass script in string and create empty document with predefined settings. This script has to be simple, but several commands on one line divided by semicolor works.

The question is, HOW can i call external .jsx from SWF panel so I could use external JavaScript function to pass foreground and background color to Photoshop?

works (but return value is undefined): ...evalScript("documents.add(100, 100, 72, "fileName",...);
does not work but should: ("app.foregroundColor(0xFF6600);");

I'm afraid I'll have to turn whole project to Adobe Flex Builder, if possible, so I can link the SWF and JSX using MXML header.
 Mike Hale  Tue Dec 16, 2008 9:26 am  
igraczech: I'm still having trouble getting this working. But I have an answer to your last comment.

app.foregroundColor expects a solidColor object. So you need to do something like this:

var newColor = new SolidColor;
newColor.rgb.hexValue = 'FF6600';//expects a string
app.foregroundColor(newColor);

You might also want to try an include to avoid having to put all your javascript code on one line.

Contact me at www.ps-scripts.com/bb/ as the details are too much to post in a comment here.
 mkeefe  Sun Dec 21, 2008 7:24 pm  
@all - I am in the process of rewriting this tutorial (editing really) to provide more clear information and a fully working demo to help you get started. Not 100% sure when I will have it done with the holidays and a book deadline catching up to me, but it's coming!
 Ayaz  Wed Mar 11, 2009 3:32 am  
Hello,
How can i make custom textbox in photoshop for my website just like www.ask.com have?
 omar  Mon Apr 13, 2009 7:01 am  
hi
 mkeefe  Tue Apr 14, 2009 5:32 pm  
@Ayaz - You could create the UI in Photoshop, then code it in Flash, which is basically covered in this article.
 Ram  Thu May 7, 2009 9:41 pm  
Hi all, thanks for the tutorial and info guys, been a big help so far.

My current problem is I'm trying to make a "Liquid" UI in flash so when you resize the panel window my controls will scale correctly etc. I can register the StateChangeEvent.WINDOW_RESIZE event and get the width and height of the window, the only catch is that the flash container seems to get scaled, ie if I get stage.stageWidth it neven changes. When I resize the panel window it just scales the whole SWF up and down. Any one else getting this? TNKS!
 Ram  Fri May 8, 2009 1:19 am  
Sorry, that was prolly a bit of a noob question. This works fine (action on frame 1):

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
 mkeefe  Fri May 8, 2009 1:29 am  
@Ram - Sorry for not responding sooner, but glad you got it worked out and that you enjoyed the tutorial. Look out for more coming very soon, no way to pin a date on it, but its going to be soon!
 Matt  Mon Dec 14, 2009 11:20 am  
Aww I am looking forward to part 2 still :(
 sidekick  Fri Jan 7, 2011 11:26 pm  
No new progress or part 2 on this?
 mkeefe  Tue Jan 18, 2011 12:45 am  
@sidekick - Sadly no.. with my "day time" commitments I have been unable to update Scriptplayground as much is in the past. However in 2011 that is changing as I have returned to full-time freelancing.
 barbu victor  Sat Jan 28, 2012 2:27 pm  
Great work!
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles