Are you a Flex or Flash developer? Have you ever wished you could develop projects to run inside Photoshop? If you answered "yes" to both questions, we want you to come play in our playground. We'll even help you get started.

During the CS3 development cycle, the Adobe and Macromedia teams melded together. One of the initial questions was how could one capture the synergy of both company's flagship products, Flash CS3 and Photoshop CS3. There were lots of visible ways the teams worked to make the products works well together for the end user. However, there's a hidden integration feature for developers that many people are just discovering: Flash runs inside Photoshop CS3 and can drive the Photoshop scripting engine.

Note: Please be aware that SWF Dialogs currently do not work in CS3 on Leopard.

We'll use Flex 3 to create a UI for our Photoshop script in this tutorial since it makes developing user interfaces a snap.

First things first. Let's look at the pieces that fit together to make this work. There are basically 3 moving parts: a .jsx file, a .mxml file, and a .swf file.

The .jsx file is an ExtendScript script that we'll create using the ExtendScript Toolkit. The .jsx is the executable script. Double-clicking or drag-and-dropping it onto Photoshop will run the script. It contains the code to tell the script run in Photoshop, create the window that the specified .swf will run in, and it also contains the library of functions we'll want to drive Photoshop.

The .mxml file is Flex file that contains the code for the UI layout and the event handlers to tell Photoshop to run a function when a button is clicked.

The .swf file is a compiled version of the .mxml file.

From the Flex application, choose File>New>File. Name the file myFirstApp.jsx. Save the file to a folder. Note that when you create a .jsx file, the ExtendScript Toolkit 2.0 IDE is launched. The ExtendScript Toolkit is a free application that ships along with Creative Suite applications.

The first bit of ExtendScript we need is to open Photoshop and bring it to the front:

// enable double clicking from the
// Macintosh Finder or the Windows Explorer
#target photoshop

// Make Photoshop the frontmost application
// in case we double clicked the file
app.bringToFront();

The next bit of ExtendScript is ScriptUI that describes the window that our .swf will play in. In this case, we want to make a FlashPlayer instance in a window 300 pixels wide by 100 pixels tall:

// Create a resource to describe the dialog
var windowResource =
"dialog {    \
fp: FlashPlayer { preferredSize: [300, 100] },    \
}";

In the following code, we instantiate the dialog from the above resource and tack on a few more attributes. The first is a label for the dialog, "Photoshop Scripting - Flex3 Hello World." The second are the margins, or how much padding to put between the edge of the window and the edges of the .swf movie:

// Create a new window from the Resource, with the label "Photoshop Scripting - Flex3 Hello World"
var dialog = new Window (windowResource, "Photoshop Scripting - Flex3 Hello World");

// how much padding do you want around the swf in the dialog. the default is 10px. You must enter 
// zeros to have no margins.
dialog.margins = [0,0,0,0];

The following code sets up the relationship between the Flash UI and ExtendScript, by specifying the path to the the SWF and playing the SWF. We also declare the ExtendScript functions that we'll call in our MXML code:

// Dialog Set-up
dialog.onShow = function () {
    
    // figure out the full name and path of this script
    var filename = new File($.fileName);
    
    // Figure out the directory this script is located in
    var myJSXPath = filename.parent;
    
    // Get the path to the swf we want to load, since 
    // we will store the swf file next to the jsx file
    var mySWFFile = myJSXPath + "/myFirstApp.swf"
    
    // store the swf to play in a variable
    var movieToPlay = new File (mySWFFile);
    
    try {
        
        // Load the swf in the dialog
        this.fp.loadMovie(movieToPlay);
                
        // declare the exitApp function so it can be called by the swf
        this.fp.exitApp = exitApp;
        
        // declare the helloWorld function so it can be called by the swf
        this.fp.helloWorld = helloWorld;
        
    } catch (e) {
        alert ("Load Movie function failed: " + e);
    }
}

We then call our main function and run the dialog:

/////////////////////////
// MAIN
/////////////////////////

// Show the dialog in Photoshop
dialog.show();

Here are the ExtendScript functions we'll run from our Flash UI:

/////////////////////////
// FUNCTIONS
/////////////////////////

// These are the functions we call from ActionScript

// Function to close the dialog
function exitApp(){
    try{
        dialog.close();
    }
    catch(e){
        alert(e);
    }
}

// Function to display an alert dialog with the string "Hello, World."
function helloWorld(){
    try{
        alert("Hello, World.");
    }
    catch(e){
        alert(e);
    }
}

Building the Flex UI

First off I would like to thank Jeff Tranberry of Adobe for taking the time to write this article with me. Okay, now that you have the .jsx completed, the next part is to build the UI in Flex Builder. For this I will be using Flex Builder 3, which was recently released from the labs.

Start off by creating a new project, by going to New > Flex Project.

Name your project "Photoshop Scripting - Flex3 Hello World" and click Finish to build the project.

Flex Builder automatically builds the project and opens the default .mxml file to start working with.

Setting the Application dimensions

The width and height of this application is set with the Application tag located at the top of the file. Simply add the parameters to the end of this line, such as:

    <mx:Application ... width="300" height="101">

Adding the application Buttons

You will need some way to call the javascript functions, so the best way to accomplish this is with Buttons. A Button is one of the included components which can be located in "Design" view. You can switch between "Source" and "Design" view by clicking the navigation element located at the top of the application window, as shown here:

Drag out 2 buttons from the components panel to the canvas.

Then switch back into "Source" view. You will now see more code has been added which is the two buttons. One of the cool things about Flex is the ability to build an application in Design or Source view, but either way it ends in code, so you can further tweak it. Now that the buttons are added to the canvas, let's start adding the events which will call the custom functions.

Adding the Event code

For this application you will use the "click" event, which is called whenever the Button is clicked with the mouse. In order to add the event, you simply include the following code in the Button tag.

    <mx:Button ... click="callHelloWorld();"/>

You would do the same for the other button, changing the method that is called.

    <mx:Button ... click="callExitApp();"/>

At this point you should have completed the application design, and added the specific event calls.

The next step is to start writing the code which in this application will be the event handlers called by each Button.

Coding it up

ActionScript can be located in an external .as (ActionScript) file or directly within the MXML file provided you use the special tags, as shown below.

  <mx:Script>
    <![CDATA[
      // code goes here
    ]]>
  </mx:Script>

For this application you can keep the code directly inline, but would most likely use an external file for a larger application. The first method is "callHelloWorld", which will create a call using the ExternalInterface class.

public function callHelloWorld():void 
{
  var f:String = "helloWorld";
  var m:String = ExternalInterface.call(f);            
  trace(m);             
}

The second method is "callExitApp", which will tell Javascript to close this window.

public function callExitApp():void 
{
  var f:String = "exitApp";
  var m:String = ExternalInterface.call(f);
  trace(m);
}

Bringing it all together

Now that you have completed the development of user interface (UI) and the .jsx file, the final step is to test it all out. Both pieces of the code are provided in full, at the bottom of this article.

Completed Code

ExtendScript code

// enable double clicking from the
// Macintosh Finder or the Windows Explorer
#target photoshop

// Make Photoshop the frontmost application
// in case we double clicked the file
app.bringToFront();

// Create a resource to describe the dialog
var windowResource =
"dialog {    \
fp: FlashPlayer { preferredSize: [300, 100] },    \
}";

// Create a new window from the Resource, with the label "Photoshop Scripting - Flex3 Hello World"
var dialog = new Window (windowResource, "Photoshop Scripting - Flex3 Hello World");

// how much padding do you want around the swf in the dialog. the default is 10px. 
// You must enter zeros to have no margins.
dialog.margins = [0,0,0,0];

// Dialog Set-up
dialog.onShow = function () {
    
    // figure out the full name and path of this script
    var filename = new File($.fileName);
    
    // Figure out the directory this script is located in
    var myJSXPath = filename.parent;
    
    // Get the path to the swf we want to load, since 
    // we will store the swf file next to the jsx file
    var mySWFFile = myJSXPath + "/myFirstApp.swf"
    
    // store the swf to play in a variable
    var movieToPlay = new File (mySWFFile);
    
    try {
        
        // Load the swf in the dialog
        this.fp.loadMovie(movieToPlay);
                
        // declare the exitApp function so it can be called by the swf
        this.fp.exitApp = exitApp;
        
        // declare the helloWorld function so it can be called by the swf
        this.fp.helloWorld = helloWorld;
        
    } catch (e) {
        alert ("Load Movie function failed: " + e);
    }
}

We then call our main function and run the dialog:

/////////////////////////
// MAIN
/////////////////////////

// Show the dialog in Photoshop
dialog.show();

/////////////////////////
// FUNCTIONS
/////////////////////////

// These are the functions we call from ActionScript

// Function to close the dialog
function exitApp(){
    try{
        dialog.close();
    }
    catch(e){
        alert(e);
    }
}

// Function to display an alert dialog with the string "Hello, World."
function helloWorld(){
    try{
        alert("Hello, World.");
    }
    catch(e){
        alert(e);
    }
}

Flex "MXML" code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  width="300" height="101">

  <mx:Script>
  <![CDATA[  
	
    public function callHelloWorld():void 
    {
      var f:String = "helloWorld";
      var m:String = ExternalInterface.call(f);            
      trace(m);             
    }

    public function callExitApp():void 
    {
      var f:String = "exitApp";
      var m:String = ExternalInterface.call(f);
      trace(m);
    }

  ]]>
  </mx:Script>

  <mx:Button label="Run My Script" id="btnRun" click="callHelloWorld();" 
    x="23" y="39" width="125"/>
  <mx:Button label="Exit" id="btnExit"  click="callExitApp();" textAlign="center" 
    x="156" y="39" width="125"/>

</mx:Application>