Table of Contents

Introduction
Who Should Read This?
How Does It Work?
Download(s)
System and Software Requirements
Adobe Photoshop Reserved Words

Tutorials
Overview

1. Starting a Flex Project
2. Hello World Panel
3. Placing the CSXS Library


4. Shortcut Buttons Panel
   1. JavaScript
   2. Design the Panel
   3. ActionScript
   4. Photoshop Persistent
   5. CSXS Logger AIR Debugger (Optional)


5. Setting Up Script Listener


6. Color Picker Panel
1. JavaScript
2. Design the Panel
3. Find Character ID Code to Register Events
4. ActionScript
5. Create Custom Icons


7. Flickr Search Panel
1. Design the Panel
2. Create a Flickr Service
3. Design a Custom Module
4. Modify Panel's Properties
5. Connect on Preferences


8. Per Layer Metadata Panel
1. View Metadata
2. JavaScript
3. Find Character ID Code to Register Events
4. Designing the Panel
5. ActionScript
6. Using Photomerge

Other Samples
Best Practices
Frequently Asked Questions
Acronyms and Definitions
Links

Adobe^® Photoshop^® Panel Developer's Guide

---

Color Picker Panel: JavaScript

The first part of the Color Picker Panel is creating a JavaScript file. The JavaScript file will have functions to set and get the foreground color and set and get the background color. The JavaScript file will have a utility functions to convert an color integer value sent by the SWF file to red, green, and blue values for variable type Solid Color. Another important utility function in the JavaScript file is creating an XML object of the property and value to be sent to the SWF file. The JavaScript file will be created using ExtendScript Toolkit. The result is to place the JavaScript file into the Adobe Photoshop Panels folder for the SWF file to communicate with. Please refer to the Adobe Photoshop CS3 Javascript Reference for the Application Programming Interface (API).

Go to Color Picker Panel's JavaScript API that covers a summary of functions and scripts used.

Instructions:

1. Open ExtendScript Toolkit.
2. Go to File > New JavaScript.
3. Copy the following JavaScript code into the file:

function setForeground(color){
   app.foregroundColor = translateColor(color);
}


function getForeground(){
   xml = "<object>";
   xml += convertToXML(app.foregroundColor.rgb.hexValue.toString(), "foreground");
   xml += "</object>"
   return xml;
}


function setBackground(color){
   app.backgroundColor = translateColor(color);
}


function getBackground(){
   xml = "<object>";
   xml += convertToXML(app.backgroundColor.rgb.hexValue.toString(), "background");
   xml += "</object>"
   return xml;
}
	

Code Walkthrough: The two functions, setForeground and setBackground, respectively set Adobe Photoshop's background and foreground color by taking an integer parameter color from the Color Picker Panel. The two functions, getForeground and getBackground, respectively retrieve the Adobe Photoshop's foreground and background color respectively by returning an XML object understood by the Color Picker Panel.

4. Copy and append the following JavaScript utility code into the file:

   function translateColor(c){
      var color = new SolidColor;
      color.rgb.red	 = (c >> 16) & 0xFF;
      color.rgb.green = (c >> 8) & 0xFF;
      color.rgb.blue	 = c & 0xFF;
      return color;
   }
   
   
   function convertToXML(property, identifier){
      var type = typeof property;
      var xml = '<property id = "' + identifier + '" >';
      
      switch(type){
         case "number":
            xml += "<number>";
            xml += property.toString();
            xml += "</number>";
            break;
         case "boolean":
            xml += "<" + property.toString() + "/>";
            break;
         case "string":
            xml += "<string>";
            xml += property.toString();
            xml += "</string>";
            break;
         case "object":
            // Object case is currently not supported
            alert("Object case is currently not supported");
            //xml += "<object>";
            //for(var i in property)
            //   xml += convertToXML(property[i], 
            //xml += "</object>";
            break;
         case "undefined":
            xml += "<string>undefined</string>";
            break;
         default:
            alert("Type " + type + " is unknown.");
            return "";
      }
      xml += '</property>';
      return xml;
   }
   		

Code Walkthrough: The function translateColor takes in an integer value c and translates to red, green, and blue values into SolidColor named color. The function convertToXML takes a property and a unique identifier to return as an XML object understood by the Color Picker Panel.

5. Go to File > Save As....
1. Under Save As:, type in ColorPicker.jsx.
2. Save the file into the Panels folder under the Adobe Photoshop CS5\Plug-ins\ folder located under:
• Applications for Macintosh
• Program Files for Windows
3. Press Save.
6. Close ExtendScript Toolkit.

Continue to Design the Panel