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

Flickr Search Panel: Design the Panel

The first part of the Flickr Search Panel is designing the Adobe Photoshop Panel using Adobe Flex Builder. The developer will modify the design area to be a vertical layout and drag and drop a horizontal box layout component and a tile list control component. The developer will then drag and drop a text input control component and a button control component into the horizontal box. The result is an Adobe Photoshop Panel containing a text input to place image tag names, a button to search, and a tile list control component to display the images.

Instructions:

  1. Complete the Starting a Flex Project.
  2. Go to File > New > Flex Project.
    1. Under Project name:, type in FlickrSearch.
    2. Deselect Use default location and under Folder:, save to the Desktop in a new folder called ColorPicker.
    3. Under Application type, select Web application (runs in Flash Player).
    4. Press Finish.
  3. Go to Design Mode by selecting Design under the FlickrSearch.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 an HBox layout component to the design area.
    2. Under Width: only in the Insert HBox dialog, type in 100%.
    3. Under the Controls folder in the Components window, drag and drop the following control components into the design area:
      • TextInput control component to the HBox layout component
      • Button control component to the HBox layout component
      • TileList control component under the HBox layout component
    4. Double-Click on the Button control component placed in the design area and type in Search and press Enter.
    5. Select the Tile List control component placed in the design area.
      1. Go to the Flex Properties window or go to Window > Flex Properties.
      2. Under Layout, set the Width: and Height: to 100%.

    6. The design area should look what is seen below:
  5. Go to File > Save.
  6. Close Adobe Flex Builder.
  7. Complete Placing and Using the CSXS Library.
Continue to Create a Flickr Service