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

Hello World Panel

The Hello World Panel tutorial will highlight the first project for any computer programmer - having it say "Hello World." The developer will first use Adobe Flex Builder to create a Adobe Photoshop Panel with a label that says "Hello World." Then the developer will copy the Adobe Flex Builder produced SWF file to the Adobe Photoshop panels folder and view it in Adobe Photoshop. The result is an Adobe Photoshop Panel that says "Hello World" within Adobe Photoshop.

Instructions:

  1. Complete the Starting a Flex Project.
  2. Go to File > New > Flex Project.
    1. Under Project name:, type in HelloWorld.
    2. Deselect Use default location and under Folder:, save to the Desktop in a new folder called HelloWorld.
    3. Under Application type, select Web application (runs in Flash Player).
    4. Press Finish.

  3. Go to Design Mode by selecting Design under the HelloWorld.mxml tab or go to Window > Switch Source/Design Mode.
  4. Go to the Components window or go to Window > Components.
    1. Under the Controls folder in the Components window, drag and drop the Label control component to the design area.
    2. Double-Click on the Label control component placed in the design area and type in Hello World and press Enter.
  5. Go to Run > Run HelloWorld to preview the design area in the web browser.
  6. Close the web browser.
  7. Close Adobe Flex Builder.
  8. Open the HelloWorld folder on the desktop.
  9. Open the bin-debug folder.
  10. Copy HelloWorld.swf into the Panels folder under the Adobe Photoshop CS5\Plug-ins\ folder located under:
    • Applications for Macintosh
    • Program Files for Windows
  11. Open Adobe Photoshop.
  12. Go to Windows > Extensions > HelloWorld.
  13. The HelloWorld Panel opens as a panel like seen below:
  14. Close the Hello World Panel.
  15. Close Adobe Photoshop.