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

Per Layer Metadata Panel: Design the Panel

The fourth part of the Per Layer Metadata Panel is designing the Adobe Photoshop Panel using Adobe Flex Builder. The developer will modify the design area to be a vertical layout to drag and drop horizontal box layout components, label control components, text input control components, text area control components, and also button control components. The tutorial will further the locations of the components and any property changes. The result is an Adobe Photoshop Panel containing an area to display the layer's name, last changed date and time with an update button, description, comments, and a button to apply changes of the metadata.

Instructions:

  1. Complete the Starting a Flex Project.
  2. Go to File > New > Flex Project.
    1. Under Project name:, type in PerLayerMetadata.
      Note: The Adobe Flex Builder Project filename and corresponding SWF filename must have the same name as the JavaScript filename.
    2. Deselect Use default location and under Folder:, save to the Desktop in a new folder called PerLayerMetadata.
    3. Under Application type, select Web application (runs in Flash Player).
    4. Press Finish.
  3. Go to Design Mode by selecting Design under the PerLayerMetadata.mxml tab or go to Window > Switch Source/Design Mode.
    1. Go to the Flex Properties window or go to Window > Flex Properties.
    2. Under Layout, set the Layout: to vertical.
  4. Go to the Components window or go to Window > Components.
    1. Under the Layouts folder in the Components window, drag and drop the first HBox layout component to the design area.
    2. Under Width: only in the Insert HBox dialog, type in 100%.
    3. Drag and drop the second HBox layout component to the design area under the first HBox layout component.
    4. Under Width: only in the Insert HBox dialog, type in 100%.
    5. Drag and drop the third HBox layout component to the design area under the second HBox layout component.
    6. Under Width: and Height: in the Insert HBox dialog, type in 100%.
    7. Drag and drop the fourth HBox layout component to the design area under the third HBox layout component.
    8. Under Width: and Height: in the Insert HBox dialog, type in 100%.
    9. Drag and drop the fifth HBox layout component to the design area under the fourth HBox layout component.
    10. Under Width: only in the Insert HBox dialog, type in 100%.
    11. Select the fifth HBox layout component from the top of the design area.
      1. Go to the Flex Properties window or go to Window > Flex Properties.
      2. Under Horizontal align:, select right.
    12. The design area should look what is seen below:
  5. 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 into each of the HBox layout components except the last from the top in the design area.
    2. Double-Click on the Label control component in the first HBox layout component from the top placed in the design area and type in Name: and press Enter.
    3. Double-Click on the Label control component in the second HBox layout component from the top placed in the design area and type in Last Changed: and press Enter.
    4. Double-Click on the Label control component in the third HBox layout component from the top placed in the design area and type in Description: and press Enter.
    5. Double-Click on the Label control component in the fourth HBox layout component from the top placed in the design area and type in Comments: and press Enter.
    6. The design area should look what is seen below:
  6. Go to the Components window or go to Window > Components.
    1. Under the Controls folder in the Components window, scroll down and drag and drop the following control components into the design area:
      • TextInput control components to the first and second HBox layout components from the top
      • TextArea control components to the third and fourth HBox layout components from the top
    2. Select all the TextInput and TextArea control components that was just placed in the design area.
      1. The design area should look what is seen below:
      2. Go to the Flex Properties window or go to Window > Flex Properties. Since all the TextInput and TextArea control components are selected, it shows the common properties between them.
      3. Under Layout, set the Width: and Height: to 100%.
    3. Select only the TextInput control components.
      1. The design area should look what is seen below:
      2. Go to the Flex Properties window or go to Window > Flex Properties.
      3. Under Common, set the Editable: to false.
    4. The design area should look what is seen below:
  7. Go to the Components window or go to Window > Components.
    1. Under the Controls folder in the Components window, drag and drop the Button control component into the second and fifth HBox layout component from the top placed in the design area. The Button control component in the second HBox layout component should be right of the TextInput control component.
    2. Double-Click on the Button control component in the second HBox layout component from the top placed in the design area and type in Update and press Enter.
    3. Double-Click on the Label control component in the fifth HBox layout component from the top placed in the design area and type in Apply Changes and press Enter.
    4. The design area should look what is seen below:
  8. Go to File > Save.
Continue to ActionScript