User interface

The Flash Catalyst CS5 user interface has two workspaces. These workspaces include Design and Code. Use the Workspaces pop-up menu to change between workspaces.

    Design workspace

    The Design workspace shows a graphical representation of your pages and states. This workspace includes the panels and tools used for creating and editing projects. Use the Hand tool to grab and pan the artboard as an alternative to scrolling. Use the Zoom tool or Magnification menu to change the view from between 25% and 800% of actual size. Use the magnifying glass to zoom into a specific part of the artboard (Alt-click (Windows) or Option-click (Mac OS) to zoom out). When you enter a term in the Search box, the Adobe Community Help client appears. It gives you access to online Help and community resources.

    Design workspace
    A.
    Artboard

    B.
    Breadcrumbs bar

    C.
    Hand tool

    D.
    Zoom tool

    E.
    Zoom Magnification menu

    F.
    Heads Up Display

    G.
    Tools panel

    H.
    Workspaces pop-up menu

    I.
    Search box

    Artboard
    The artboard represents what users see when they view the published application. The artboard is where you place artwork, interactive components, and other objects that make up the application interface. It has rulers, grids, and guides for positioning and snapping elements. These features are available in the View menu. Use the Modify menu to align, group, and arrange (front to back) the objects on the artboard.

    Breadcrumbs bar
    The Breadcrumbs bar, located directly above the artboard, tracks where you are as you work in Flash Catalyst. For example, when you open a component, you can use the Breadcrumbs bar to quickly close the component and return to the main artboard.

    Pages/States panel
    The Pages/States panel displays a thumbnail for each page in the application. It shows the different states for any component you select. You can duplicate, remove, add, and rename pages and component states according to your project plan. For more information, see Defining structure with pages and states.

    Tools panel
    The Tools panel includes tools for creating, selecting, and transforming objects, including simple lines, shapes, and text.

    Layers panel
    The Layers panel is an organized collection of the objects in the application (artwork, components, video, and so on). When you import a design document created in Illustrator, Photoshop, or Fireworks, Adobe Flash Catalyst preserves the original layer structure. As you add pages and component states to the application, you use the Layers panel to show or hide objects in each state. For more information, see Layers.

    Library panel
    The Library displays the entire list of graphics and other media available in the project, including your project skins and components. For more information, see Library.

    Wireframe Components panel
    Wireframe components are ready-to-use interactive components with a simple default appearance. You can drag these components to the artboard and use them “as is” or modify them to fit the appearance of your application. For more information, see Interactive components.

    Interactions panel
    Add interactions that define what happens as users interact with the application. For example, you can add interactions that transition from one page or component state to another when a user clicks a button. You can also add interactions that play animation, control video playback, or open an URL. For more information, see Interactions and action sequencesTransitions and the timeline.

    Timelines panel
    The Timelines panel provides controls for creating and editing transitions and action sequences. You can also use the Timelines panel to control the playback of video and SWF content, and to add sound effects. For more information, see Transitions and the timeline.

    Design-Time Data panel
    After creating a data list component, use the Design-Time Data panel to control which data (images and text) appear in the data list. For more information, see Creating scrolling images, panels, and lists.

    Properties panel
    Use the Properties panel to edit the properties for selected objects, such as graphics, text, and components. The available properties change as you select different objects in the artboard, Layers panel, or Timelines panel.

    Heads Up Display (HUD)
    The HUD gives quick access to common commands related to the current action or currently selected object. It shows some of the key actions you can perform on the selected objects. For example, the HUD appears when you select artwork on the artboard, giving you the choice of converting the artwork to a component. Use the HUD to quickly create components.
    The HUD displays context-appropriate commands.

    • If you don’t see the HUD when you select an object, select Window > HUD.

    • When converting objects to components, the HUD displays a message if additional steps are required to complete the component.

    • All of the functionality in the HUD is also available in the main menu. For example, you can choose Modify > Convert Artwork To Component.

    Use the HUD to quickly:

    • Convert artwork to components or component parts.

    • Edit the parts and states of a component.

    • Optimize graphics elements.

    • Make the parts of a component the same in all states or copy changes from one state to another.

    A.
    HUD with new data list component selected

    B.
    Component message

    For more information on using the HUD, see Interactive components, Creating scrolling images, panels, and lists, Creating shapes, lines, and text.

      Code workspace

      The Code workspace shows the underlying application code. This code is generated automatically as you work in Flash Catalyst.

      The applications you build in Flash Catalyst are build on the Flex framework. Flex is an open source framework for building and deploying applications that run in all major browsers and operating systems. MXML is the language developers use to define the layout, appearance, and behaviors in Flex. ActionScript 3.0 is the language used to define the client-side application logic. When you publish a Flash Catalyst project, your MXML and ActionScript are compiled together as a SWF file.

      Viewing the MXML code gives designers the opportunity to understand how the application is programmed. The Code workspace is read-only. To edit the code, open the project in Adobe Flash Builder. For more information, see Extending Flash Catalyst projects using Flash Builder.

      Code workspace
      Code panel
      Shows the MXML code in the Code panel.

      Problems panel
      Shows any errors in the current MXML code.
      You can double-click an error in the Problems panel to locate the error in the code.

      Project Navigator panel
      Shows the Flex project directory structure and files being created as you design your project in Flash Catalyst.