Resources | Resources |



Creating button component with states

This section is the first part of creating a .swf using Adobe Catalyst to create a device group with button components and control button. The Catalyst output, .fxp, is the default type used when saving a Catalyst project.

Begin in Adobe Catalyst by creating a new project from a design file, using either a new project from an Adobe Illustrator .ai file or an Adobe Photoshop .psd file. The previous section of this document provides an overview of creating a .ai file of the visual assets used in the following steps, so this section will continue using an Adobe Illustrator file as an example. The artboard size in Catalyst automatically defaults to the size of your design file when you create a new project from a design file.

  1. Select your .ai file on your machine and click Open. An Illustrator Import Options dialog will display.
  2. In the Import Options dialog, be sure that Import non-visible layers is selected, and click OK. The layers panel in Catalyst will resemble the layers panel from your design file, as shown in the following image.

  3. Select one of your button sub-layers.

  4. Select Convert Artwork to Component in the Heads Up Display (HUD) in the artboard, and select Button.
  5. Rename the new button component in the layers panel to a descriptive name. For example, rename "Button" to "rotaryWheelButton-2".
  6. Double-click the new button component on the artboard, or with the button selected, click on any of the states (Up, Over, Down, Disabled) in the HUD.

    From within the button component (as displayed in the image below), you can set up different states of the button.

  7. Make visible layers that you want displayed in the Over state. Hide any other layers of the button, as shown in the image below.

  8. Repeat step 8 for the other states of the button. Then return to the main artboard by clicking on the name of your document in the top left of the artboard to access the all the other buttons.

  9. Repeat steps 7 through 9 for all other device buttons.
  10. When all device button assets have been converted to button components and their states set up, select all the assets in the layer and group them by pressing Ctrl+G, or selecting Modify > Group from the Catalyst menu. Only group the assets in the same layer. Grouping screens, assets, and other components together help developers know where to add their code when moving to Flash Builder 4, where the code is added for the simulated screen.
  11. Convert all of your control buttons for the device such as open, close and rotate into button components with all states set up. Give them a meaningful name, such as rotateButton, in the Layers panel. The Layers panel should be similar to the following:

Once a device group with the device button components and control button are contained, move to part 2 to set up additional pages for different states of the device.