In order to communicate to the host application (Photoshop or Illustrator CS4) using the CSXS SWC library, our code is sent as a string message via BridgeTalk, which will then be evaluated once it reaches the host application. Not a big deal if we're only sending a few lines of code at max, but when our ExtendScript code is lengthy, we would either have to manually wrap each line of code up as a string or use the work-around process we will use in this tutorial to simplify our life.

For this tutorial, you will create a Flash plug-in within a Flex Builder MXML project using the CSXSLibrary.swc. The ExtendScript .js file will be embedded and accessible to our ActionScript code. When you run the Flash panel within Photoshop CS4, it will send the ExtendScript code to Photoshop that when executed, will display an alert dialog box with a message.

After completing this tutorial, you should be able to:

• Create a Flash panel for Photoshop
• Add the Adobe CSXSLibrary SWC library to your Flex Builder Project.
• Initialize the CSXSLibrary client.
• Embed an ExtendScript .js file into our ActionScript code.
• Send the embedded ExtendScript as a message to Photoshop from the SWF that sends an alert message.

Requirements

In order to make the most of this article, you need the following software and files:

Photoshop CS4

• Try
• Buy

Flex Builder 3

• Try
• Buy

Photoshop Developer's Guide (includes the CSXSLibrary.swc)

• Download

Sample files:

• integrating_extendscripts.zip (ZIP, 966K)

Prerequisite knowledge

You must be comfortable with developing in Flex Builder. Basic familiarity with ExtendScript ToolKit would be beneficial, but is optional. You should have already worked through the Hello World examples for Photoshop panels (using the CSXSLibrary.swc), SwitchBoard and PatchPanel.

Steps

1. Open Flex Builder
2. Select File > Import > Flex Project
3. In the Import project from section, select Project folder and click on the Browse button.
4. Navigate to the /PhotoshopPanel/PSPanel_IntegrateWithES.mxml directory and click on Choose.

5. That should return you back to the Flex Builder Import Flex Project dialog box. From here, click the Finish button to import the project into Flex Builder.

   Note: Open up the imported project folder. You will find a src folder that contains the basic files we will use to construct this example. In the solutions folder, the final source files are included for reference. The CSXSLibrary.swc is already in the libs directory.

6. Let's start by opening /src/PSPanel_IntegrateWithES.mxml and the /src/js/HolaWorld.js files.

   There's not much to the HolaWorld.js file because this exercise is all about the process of how to embed this file into our ActionScript, convert it to a string and then pass it as a string to the host application, which will be Photoshop CS4.

   The mxml file has the basic code in place and can act as a template to create future CSXS projects. As you will recall if you have worked through the sample files included with the SDK download (Prerequisites: 3A & 3B), we need to import the CSXS magic and all of the code necessary for debugging our Flash panel.

7. Embed HolaWorld.js and create an instance of it.

   [Embed(source="js/HolaWorld.js",mimeType="application/octet-stream")]
   private static var HolaWorldJS: Class; 

8. Next, we need to create a method that is called when the creationComplete event is triggered.

   public function onCreationComplete():void
   {
        var myString: String = new HolaWorldJS().toString();
        CSXSInterface.instance.evalScript(myString);
   } 

   In the first line of code for onCreationComplete, we convert HolaWorldJS to a string and save it as the value of myString. In the second line of code, we use the CSXSInterface to pass myString to the host application. That's all there is to it!

9. Before we export our SWF to Photoshop, we need to call the method onCreationComplete.

   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" creationComplete="onCreationComplete()" 
        xmlns:csxslogtargets="com.adobe.csxs.logging.targets.*">

   Compare your code to /solutions/PSPanel_IntegrateWithES-fin.mxml.

10. Select File > Export > Release Build... and click Finish in the Export Release Build dialog box.
11. In the /bin-release folder, right click (control click on Macintosh) on the PSPanel_IntegrateWithES.swf and select Export from the popup menu
12. Select File System and click Next.
13. To the far right of the To directory: textfield, click on the Browse button.
14. Navigate to the the /Adobe Photoshop CS4/Plug-Ins/Panels/ directory.

15. Click on Finish.

    Note: If you already have a copy of the swf you are creating in this directory, Flex Builder will prompt you with a replace dialog box titled 'Question'. If so, click on Yes To All. You can then skip the next step because a link to that file will already be established within Photoshop.

16. If this is the first time you are exporting your SWF to Photoshop, you will need to restart Photoshop. Otherwise, skip this step.

17. In the menu Window > Extensions select HelloWorldEnhanced. Your Flash panel should open up and an alert dialog box should pop up as well with the 'Woohoo! Hola World!' message.

    Note: If you need to make changes to your code, when you are finished, repeat steps 10-16 to continue testing your SWF from within Photoshop.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author