Follow along with this tutorial to create a simple Flash plug-in that gets the RGB, CMYK and HSB values of the foreground color in Photoshop CS4. In this application, you will integrate the GetForegroundColor.jsx file within the Flash plug-in that you develop within a Flex Builder MXML project using the PatchPanel SWC library as the mechanism for communicating between your SWF and the host application, which is Photoshop in this example.

After completing this tutorial, you should be able to:

• Add the Adobe PatchPanel SWC library, cs4.swc, to your Flex Builder Project
• Import the Photoshop ExtendScript DOM
• Copy your ExtendScript code from ExtendScript Toolkit to Flex Builder
• Know how to determine what the required DataTypes are for ExtendScript objects like SolidColor, RGBColor, CMYKColor and HSBColor
• Install the SWF and accompanying JSX file so that it is accessible within Photoshop's Window > Extensions menu

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

PatchPanel CS3 & CS4 SDK (includes the SWC for Flex Builder)

• Download

Sample files:

• patchpanel_extendscript.zip (ZIP, 324K)

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 PatchPanel.

Steps

1. Open Photoshop CS4.
2. Open Flex Builder.
3. Select File > Import > Flex Project.
4. In the Import project from section, select Project folder and click the Browse button.

5. Navigate to the /PatchPanel/ PP_IntegrateESwithPP directory and click Choose.

   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 PP_IntegrateESwithPP project folder in Flex Builder. 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.

   Import the PatchPanel SWC for CS4 applications, cs4.swc, to your project's libs subfolder

6. Right-click in the Flex Navigator Pane, and select Import...
7. Select File System and click Next.
8. Click Browse (to the right of the From Directory field).

9. Select the folder on your file system containing cs4.swc. Hint: typically, it is in the PatchPanel/cs4/libraries folder. Click Select All and then click Finish.

   Note: If you prefer, adding the cs4.swc to the Library build path of your project properties settings instead of importing will achieve the same results.

10. Import the Photoshop ExtendScript DOM.

    // Get the Photoshop ExtendScript DOM
    import com.adobe.cs4.Photoshop.*;

11. Set up onCreationComplete.

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="325" height="330"
    creationComplete="onCreationComplete()">
    <mx:Script >
         <![CDATA[
              // Called when the control is completely initialized
              private function onCreationComplete():void
              {
                   // resize the panel
                   Photoshop.$resize( width, height );
              } 
          ]]>
    </mx:Script>

    Our code should look like solutions/PP_IntegrateESwithPP_v1.mxml. Verify it does before proceeding.

12. Define our target application.

    private var app : com.adobe.cs4.Photoshop.Application;

13. Create instances for each of our color variables and define their datatypes.

    private var fSC: SolidColor;
    private var fRGB: RGBColor; 
    private var fCMYK: CMYKColor;
    private var fHSB: HSBColor;

14. Create a method that gets the current foreground color and while we are at it, let's create an instance, app, of the Photoshop.app.

    private function getCurrentColors() : void
    {
          app = Photoshop.app;
    
     }

    Our code should look like solutions/PP_IntegrateESwithPP_v2.mxml. Verify it does before proceeding.

15. Open the application ExtendScript Toolkit (ESTK) and open the GetForeGroundColor.jsx file from within our Flex project directory PP_IntegrateESwithPP/solutions/. ESTK is located:

    Mac - <hard drive>/Applications/Utilities/ExtendScript Toolkit CS4
    PC - C:\Program Files\Adobe Utilities\ExtendScript Toolkit CS4

16. Just for kicks, let's test it within ESTK. Before we run it, we need to define the target application by selecting the top left ComboBox/pulldown menu and selecting Adobe Photoshop CS4. This tells ESTK which CS application to send our code to.

17. Ok. Let's run it by clicking the Green play button or selecting the menu option Debug > Run.

    Note: In the JavaScript Console panel in ESTK, the results should be displayed for the color variables we requested in lines 6 to 8 of the code. Your exact color values might be different from below, but nonetheless, they should be populated with floating point values.

    RGB:
    red: 43.0038922280073
    green: 35.0038927048445
    blue: 27.0038912817836
    
    CMYK:
    cyan: 62.945556640625
    magenta: 64.8834228515625
    yellow: 72.49755859375
    black: 73.1536865234375
    
    HSB:
    hue: 30.003662109375
    saturation: 37.20703125
    brightness: 16.864013671875
    Execution finished.

    Ideally, we want to have access to these color variables within our ActionScript code.

18. Copy the first 4 lines of code from the GetForegroundColor.jsx in ESTK to our new method getCurrentColors()in the PP_IntegratesESwithPP.mxml file in Flex Builder. Because we have already declared these variables, delete the var at the beginning of each line of code. Our code should look like this:

    private function getCurrentColors() : void
    {
          app = Photoshop.app;
          fSC = app.foregroundColor;
          fRGB = fSC.rgb;
          fCMYK = fSC.cmyk;
          fHSB = fSC.hsb;
          resultText.text = 'foreground color captured';
    }

19. Save our MXML file.

    Let's test it! We'll need to install the SWF and JSX files in the proper location so they're available within Photoshop.

20. In the /bin-debug folder of our project in Flex Builder, select both PP_IntegrateESwithPP.swf and the PP_IntegrateESwithPP.jsx files, right click and select Export from the popup menu.
21. Select File System and click Next.
22. To the far right of the To directory: textfield, click the Browse button.
23. Navigate to the /Adobe Photoshop CS4/Plug-Ins/Panels/ directory.

24. Click Finish.

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

25. Restart Photoshop.

26. In the menu Window > Extensions select PP_IntegrateESwithPP. Your Flash panel should open up. Clicking the Get foreground color button should place the following text within the Results TextArea:

          foreground color captured

    Note: If you need to make changes to your code, when you are finished, repeat steps 20 to 26 and then continue testing your updated SWF from within Photoshop.

    Your results should look like solutions/PP_IntegrateESwithPP_v3.mxml.

    Although we could have retrieved and output the results from Photoshop to our TextArea within a single method, we will break it down into two steps simply to show you that we can define and share variables across multiple methods in the same manner that we normally would when using ActionScript.

27. Create a method that will output the current foreground color RGB, CYMK and HSB values to the TextArea.

    private function outputResults(): void
    {
     
    }

28. Copy the last 3 lines of code from the GetForegroundColor.jsx in ESTK to our new method outputResults()in the PP_IntegratesESwithPP.mxml file in Flex Builder. Our code should look like this:

    private function outputResults(): void
    { 
          $.writeln('RGB:\nred: '+fRGB.red+'\ngreen: '+fRGB.green+'\nblue: '+fRGB.blue);
          $.writeln('\n\nCMYK:\ncyan: '+fCMYK.cyan+'\nmagenta: '+fCMYK.magenta+'\nyellow: '+fCMYK.yellow+'\nblack: '+fCMYK.black);
          $.writeln('\n\nHSB:\nhue: '+fHSB.hue+'\nsaturation: '+fHSB.saturation+'\nbrightness: '+fHSB.brightness); 
    }

29. Save our MXML file.

    Note: No errors or warnings will be issued. However, for this tutorial, we want the results to be written to our resultsText TextArea.

    Our code should look like solutions/PP_IntegrateESwithPP_v4.mxml. Verify it does before proceeding.

30. Let's replace all $.writeln( with resultsText.text = and delete all of the last ) at the end of each line. Our outputResults()should look like this now:

    private function outputResults(): void
    { 
          resultsText.text = 'RGB:\nred: '+fRGB.red+'\ngreen: '+fRGB.green+'\nblue: '+fRGB.blue;
          resultsText.text += '\n\nCMYK:\ncyan: '+fCMYK.cyan+'\nmagenta: '+fCMYK.magenta+'\nyellow: '+fCMYK.yellow+'\nblack: '+fCMYK.black;
          resultsText.text += '\n\nHSB:\nhue: '+fHSB.hue+'\nsaturation: '+fHSB.saturation+'\nbrightness: '+fHSB.brightness; 
    }

    The only thing left for us to do is to define what method is called when one of our two buttons is clicked. Refer to solutions/PP_IntegrateESwithPP_v5.mxml to verify that your code matches.

31. For the top button with the label "Get Foreground Color", on click, let's call getCurrentColors().

    <mx:Button x="89" y="181" label="Get Foreground Color" ick="getCurrentColors()"/> 

32. For the bottom button with the label "Output Results", on click, let's call outputResults().

    <mx:Button x="89" y="211" label="Output Results" width="147" click="outputResults()" />

    Refer to solutions/PP_IntegrateESwithPP-fin.mxml to verify that your code matches.

    Woohoo! We're ready to test it now.

33. Repeat steps 20 to 26 and to continue testing your updated SWF from within Photoshop.

Where to go from here

If you still want more, check out the tutorial PatchPanel: Flash Panels for multiple CS Applications.

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

About the author