Follow along with this tutorial to create a Hello World Flash panel for Photoshop. In this exercise, you will create a Flash plug-in within a Flex Builder MXML project. When you run the Flash panel within Photoshop, it will send 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.
• Send 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:

• enhanced_helloworld.zip (ZIP, 656K)

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_HelloWorldEnhanced/ 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 and incremental source files are included for reference.

6. Let's start by opening /src/HelloWorldEnhanced.mxml.

   Note: The CSXS SWC is already in the libs directory of the project and it has already been imported into our ActionScript.

7. The first thing we need to do is create a method that is called after the creation of the Adobe AIR application is complete.

   public function onCreationComplete(): void
   {
   } 

8. Next, we need to call onCreationComplete.

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

9. Now we need to add some code within the onCreationComplete method that will be send to the host application, Photoshop in this case, to be evaluated.

   CSXSInterface.instance.evalScript("alert('Woohoo! Hola World!')");

   Where CSXSInterface.instance provides an interface to the target application and evalScript will evaluate the script when it reaches Photoshop. The script to be evaluated is simply a one-line script: alert('Woohoo! Hola World!').

   Our code should look like solutions/HellowWorldEnhanced-fin.mxml. Verify it does before proceeding.

   Now it is time to install our SWF so that Photoshop can run it as a Flash panel.

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

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

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

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

    Note: If you need to make changes to your code, when you are finished, repeat steps 11-17 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