Interactive components

Interactive components are the building blocks of any Flash Catalyst project. An interactive component consists of artwork, plus any interactivity associated with it. Click the tabs in the interactive piece below to see examples of the various components.

Flash Catalyst provides a collection of components with predefined interactivity. For example, to enable creation of a hover or rollover effect, the Button component contains four built-in states: up, over, down, and disabled. The appearance of the button in each of these four states can be edited independently to create the desired effect.

Editing the Over state of an interactive button by adding a Glow filter in the Properties panel, to create a hover effect

In general, you create components in two ways:

  • Convert static artwork (imported or drawn) into a component. Convert artwork by using options in the Heads Up Display (HUD) or by choosing Modify > Convert Artwork To Component. You can choose from a list of built-in component types or design a custom/generic component.

  • Add a wireframe component with a generic appearance from the Wireframe Components panel.

After creating a component, you can add interactions that define the desired behavior when a user interacts with that component. For more information on interactions, see Interactions and action sequences.

Note: Data lists, a complex type of component, are discussed separately. For more information on data lists, see: Creating scrolling images, panels, and lists.

Create a component from custom artwork

Most components are made from a collection of parts. For example, a button can have a background design and a label. A scroll bar includes a track, thumb, and can also include scroll arrows.

When you convert artwork to a component, Flash Catalyst groups the selected objects as a new component. The component is added to the project library and appears in the Components category in the Library panel. Flash Catalyst automatically replaces your artwork with an instance of the component. The component is now part of your application, and you can share that same instance of the component to other states. The instance of the component also appears in the Layers panel.

To convert artwork to a component:

  1. Using the Layers panel or in the artboard, select the objects you want to convert to a component.

  2. In the HUD, click Convert Artwork To Component and choose a component type. If you select from one of the built-in components, the states are defined automatically. If you select Custom/Generic Component, you can define its states the same way you define page states.

Note: Some components have special requirements and do not function properly until you define their required parts. For example a Data List must have a repeating item, and a scroll bar must have a track and thumb. If the component has special requirements, a message appears in the HUD with instructions on how to complete the component. The commands to create and edit components are also available from the Modify menu.
  • To make a component based on an existing one, right-click the component in the Library panel and choose Duplicate.

  • To rename a component in the Library panel, right-click the component and choose Rename (or double-click the component). Type a new name and press Enter (Windows) or Return (Mac OS). Component names must contain only letters, numbers, or the underscore character. They must be unique to the project and begin only with a letter or underscore.

If you create a component from artwork that is shared in multiple states, you lose stateful properties or transition effects associated with that item. It is a good practice to define component structure before building transitions. If you plan to convert artwork to components, avoid sharing that artwork to other states until you have created your components.

Set component properties

Each component can appear in more than one state and can have its own unique set of properties in each state. For example, a button can be enabled on page 1, but disabled on page 2. Other examples of component properties are opacity, filters, and rotation.

When a component is disabled in the Properties panel, its disabled state is shown. Design the disabled state to appear selected. Then disable the button in its target state. For example, if a navigation button is labeled 1 and clicking the button takes you to page 1, then disable the button in page 1. When you are in page 1, the button is disabled and appears selected.
To change component properties, select the component in the artboard, and modify its properties in the Properties panel. When you apply components properties, the changes only apply to the current state. You are not editing the component. To apply the same properties to the same component in all other states, select the component and choose States > Make Same In All Other States.
Note: You cannot use the Properties panel to change the height and width properties of a component with a custom skin; however, you can use the Properties panel to change the height and width of wireframe components. For more information, see Resizing Flash Catalyst components with custom skins.

To resize a component, or make other changes that apply to all instances of the component, edit the component using Edit-In-Place. When you edit a component using Edit-In-Place, the changes you make apply to all instances in all states. See Edit-In-Place.

You can edit the properties for each instance of a component

Component properties include:

Accepts Mouse Events
Makes an object appear visible to the mouse. If you deselect Accepts Mouse Events, mouse events pass through to the next item in the layer order. Changing this setting does not change how the component appears.

Transparency Accepts Mouse
Areas within the component or group bounds that are transparent respond to mouse rollovers and clicks. The mouse-responsive area is always a rectangle (as opposed to following the contours of the opaque pixels). In most cases, objects underneath the transparent area no longer respond to mouse rollovers and clicks, because the transparent group/component on top is “blocking” them.
Suppose you have a text list with a background image spanning the entire list area. In order for the list to be visible, individual list items (Repeated Items) must have a transparent background. Check “Transparency accepts mouse” so that the user can click anywhere within the list item to select it (not just on the opaque text.)

Tab Index
Controls the order of items when pressing tab to move the keyboard focus. Lower numbers place the item earlier in the sequence. The -1 indicates a default order based on the Layer panel order.

Tab To Focus
Means that it is possible to give the component keyboard focus by tabbing to it. If Tab To Focus is deselected, pressing tab does not give the component keyboard focus. It must be clicked to get focus.

Tooltip
Enter text to display as a tool tip when the user interacts with the component.

Display As Password
Displays the text field’s contents as a series of asterisks.

Editable
The text in a Text Input can be selected, but cannot be edited (when deselected).

Max Characters
Automatically sizes a Text Input control to accommodate a specific number of characters. This property is only applicable for a wireframe text input that has not been manually resized.

Selected Index
The item selected in a list by default. The first item is 0, the second items is 1, and so on. A value of -1 means nothing is selected.

Focus Ring
The color of the halo or highlight shown on a control when it has the keyboard focus.

Hand Cursor
Rolling over the object with the mouse shows a pointing hand.

Accessible Text
The text describing the object for screen reader technologies.

Radio Button Group
Only one radio button within a group can be selected. Radio buttons are in the same group if this property is set to the same name. Radio buttons are also in the same group if they are grouped, inside the same component, or at the application level.

Page Size
How far the thumb moves in a scrollbar when clicking in the track.

Step Size
How far the thumb moves when clicking the arrows. In a slider, Step Size controls how far the thumb moves when pressing the arrow keys.

Snap Interval
Forces the thumb in a scrollbar to snap in increments rather than moving smoothly. Page Size and Step Size are always forced to be multiples of the Snap Interval.

See the following for more information on setting object properties:

Modify drawing and text properties

Edit-In-Place

After adding a component to the artboard, you can edit the component by using Edit-In-Place and modify its individual parts. When you edit component parts using Edit-In-Place, the changes apply to all instances of the component in all states. Any properties that you have applied in each state, such as opacity, are preserved.

  1. Select the component you want to edit. In the HUD, choose the state you want to edit, or click Edit Parts or Edit Appearance.

    Note: You can also double-click a component to enter Edit-In-Place or choose Modify > Edit Component.

    Flash Catalyst changes to Edit-In-Place mode, indicated by a dimmed artboard. The different states of the component appear in the Pages/States panel. The Breadcrumbs bar shows the name of the component you have open.

    Breadcrumbs bar

    The Layers panel divides into two sections. One section shows the layers for the component your are editing. The other section (below it) shows the main application layers. You can drag objects between the main application and the component you are editing.

    Layers panel with a component in Edit-In-Place mode
  2. Use the Layers panel to hide or show artwork in each state.

    When a component is in Edit-In-Place:

    • You can duplicate states, add new blank states, or delete states in the Pages/States panel.

    • You can modify the artwork in each state by using the drawing tools and Properties panel. For example, you can change the size, stroke, fill, and opacity of a shape or other parts of the component.

  3. Exit Edit-In-Place mode by pressing Escape or clicking the name of the application in the Breadcrumb bar above the artboard. You can also click the dimmed area in the artboard or choose Modify > Edit Editing.

Moving the parts of a component while in Edit-In-Place can change the size of the component. If you have Auto Size Component Bounds selected in the Modify menu, the component bounds resize automatically in all states. When Auto Size Component Bounds is turned off, you can select Clip To Component Bounds in the Modify menu. Clip To Component Bounds clips any parts that extend beyond the component.

Add a wireframe component

  1. In the Pages/States panel, select the page in which to add the component.

  2. In the Layers panel, select the target layer in which to add the component.

  3. In the Wireframe Components panel, drag a component to the artboard.

  4. Use the Select tool, in the Tools panel, to position the component in the artboard.

  5. Use the Properties panel to set component properties, such as size.

You can use the wireframe components as is, or double-click a component to edit its parts. As soon as you edit a wireframe component, you create a custom skin. The new component is added to the Components category in the Library panel.

Note: You cannot use the Properties panel to change the height and width properties of a component with a custom skin.
You can determine if a component is a generic wireframe component or a component with a custom skin. Select the component in the artboard. View the name of its skin in the Common section of the Properties panel. Wireframe components have the skin name “Wireframe.” Custom components have a custom skin name that is derived from their component name.
You can place wireframe components inside a custom component that you have open for editing.