Custom skinnable components

While Flash Catalyst comes with various wireframe components and can convert custom artwork into a set of pre-defined components, many applications require custom components. A developer can create a custom component in Flash Builder and focus solely on its structure and behaviors. By defining the component in Flash Builder as a custom skinnable component, the developer can leave the visual aspects of the component - its skin - to the designer. The designer can then import the component into Flash Catalyst and create the skin.

Setting up the custom skinnable component

Designers and developers should collaborate and discuss the desired functionality of the component so there is a common understanding of and agreement upon the necessary parts, states and behaviors, and naming.

The developer starts the workflow by creating the custom skinnable component in Flash Builder. For detailed steps (for developers) on creating custom skinnable components, see Create an ActionScript skinnable component in Using Flash Builder). The designer then imports the custom skinnable component into Flash Catalyst, and edits the "skin" or visual appearance.

Depending on your particular project and development team, you may end up working with custom skinnable components that already have "dummy" or placeholder skins associated them, or not. Following are steps outlining how to work with both.

Custom skinnable components (with placeholder skins)

When developers include a placeholder skin for the custom skinnable component, it appears in Catalyst’s Project Library panel after import. Including a placeholder skin with custom skinnable components in Flash Builder is considered a best practice, as it helps to clarify the purpose of the component, and gives the designer a visual representation to drag onto the Flash Catalyst artboard.

You may receive custom skinnable components in either an FXP or FXPL file. If they are contained in an FXP, simply open that file as a project in Flash Catalyst. If they are in an FXPL, follow these steps:

  1. With the project open, click Import Library Package (.fxpl) on the Library panel.

  2. Select the FXPL file that defines the custom skinnable component.

  3. The custom skinnable component appears in the Project Library, and can be dragged onto the artboard.

    View full size graphic
    Importing a Library Package that contains a custom skinnable component named "DragAndDropListSkin". The developer included a "dummy" skin for the component, so it shows up in the Project Library and can be dragged onto the artboard.

  4. Position the component on the artboard as desired. You can edit the dummy skin by double-clicking the component.

    For details see Editing a component with edit-in-place.

  5. If the custom skinnable component contains developer code that should not be edited in Flash Catalyst, you will see messages alerting you to this.

    View full size graphic
    Flash Catalyst shows you when a custom skinnable component contains protected developer code from Flash Builder; in this case the imported data list is connected to protected data.

Custom skinnable components (without placeholder skins)

The first step in working with a custom skinnable component that does not already have a placeholder skin, is, to convert the artwork you will use for the skin into an instance of the component.

Prepare the artwork

  1. In your Flash Catalyst project file, import or create the artwork needed for the component's skin. For example, for a button or menu component, draw the shapes and text that represent the button.

  2. Select all of the artwork for the component's skin.

Import the custom skinnable component

  1. Click Import Library Package (.fxpl) on the Project Library panel.

  2. Select the FXPL file that defines the custom skinnable component.

Convert the selected artwork to the component

  1. With the artwork still selected, from the HUD select Choose Component, then Skinnable Component.

    Note: Skinnable Component appears as an option under Convert Artwork to Component only when your Project Library contains an imported Custom Skinnable Component. If you do not see this option in the HUD, ensure that you imported the FXPL file that defines the component, or check with your developer.
  2. In the Select skinnable component dialog box, select the custom skinnable component you received from the developer. Flash Catalyst prompts you to name the skin you are creating for the component and suggests a name based on best practice naming conventions. You can change this name if you wish; see Naming components.

    The artwork is now converted into an instance of the custom skinnable component. As with some of the more complex built-in components, you may have to assign parts in the custom skinnable component.

Assign artwork to parts of the component

  1. On the HUD, click Edit Parts. The HUD updates to indicate you need to select art and assign it to parts of the component.

  2. On the artboard, select the approriate pieces of art for a part of the component, then click on a part name in the HUD to assign it.

Repeat steps 1-2 as needed to complete assigning parts to your custom skinnable component. For more info on component parts and states, see Components skin parts and statesand Editing a component with edit-in-place.

Export the component skin for handoff

When you are finished editing the skin of your custom skinnable component, you can hand it back to the developer for integration into the Flash Builder project.
  1. Click Export Library Package (.fxpl) on the Project Library panel.

  2. Save the FXPL file with a name according to the conventions you and your developer agree upon.

For an overview of how custom skinnable components can help facilitate a design-develop workflow for small to medium teams, see Multi-person workflow between Flash Builder and Flash Catalyst.

Learn more from the community

There is a growing collection of custom skinnable components available for download from the FlashCats blog, covering a wide range of options including the popup component used in the illustrations on this page.