Create navigation and behavior with interactions

Interactions are events that occur in response to some user action, such as the click of a button. For example, the application can display a new state when a user clicks a button. In this case, you define an interaction triggered by clicking that button.

View full size graphic
With the "latest" navigation button selected on the artboard, the Interactions panel is used to assign an On Click interaction that triggers a transition to the "latest" view state.

Flash Catalyst has many built-in interactions that you can quickly add to components or grouped objects, including:

  • Transition from one component or application state to another

  • Trigger an action sequence, such as playing a sound, moving an object, or playing an animation

  • Go to a URL

  • Play, pause, or stop a video clip

View full size graphic
From the Interactions panel, choose the event that triggers the interaction, such as On Click.

Add interactions

You can add interactions to components, optimizedgraphics, video players, or grouped artwork. Use groups to hold interactions when you don't need a reusable component.

  1. Select a component or group.

  2. Click Add Interaction in the Interactions panel.

  3. Choose an event that triggers the interaction, such as On Click or On Roll Over.

  4. Choose an interaction, such as Play Transition to State or Go To URL.

    • If you choose Play Action Sequence, edit the action sequence in the Timelines panel. For more information see Edit action sequences.

    • If you choose Go To URL, enter the URL, and select a window for displaying the web page.

    • If you add an interaction used to control video, select a video to control. This video must exist in the project.

    • If you select Play Transition to State, choose which state to view when the event occurs.

      You can also choose another component and play a transition to its state by selecting the component and then selecting its state. You can only play transitions to states in other custom components.

    Note: By default, new interactions apply to every instance of the component or group, unless you indicate a specific state when adding the interaction. The default setting is When In Any State. When an interaction is set to function only in a specific page or component state, you are creating a conditional interaction.

Target Interactions

You can build interactions whereby components can trigger transitions to other states in components other than the parent. For example, a button in a component can be used to trigger a state change in another component.

To create an interaction that targets another component, follow these steps:

  1. Double-click the component that contains the component that will initiate the interaction.

  2. Select the component to which you wish to add the interaction.

  3. On the Interactions panel, choose Add Interaction.

  4. Select the event you wish to use, and choose Play Transition to State.

  5. Select Choose Target.

  6. Choose Select Other Item.

  7. Use your mouse to select the other component. You can use the Breadcrumbs bar to exit editing mode for the component if you need to select a component at a different level in the application.

  8. Click Select.

  9. Choose the state of the other component.

  10. Click OK.

You can only target states in other custom components.

On Application Start interactions

You can create an interaction that plays automatically when someone starts the application. This is called an On Application Start interaction. For the interaction type, you can choose to play a transition to state, go to a URL, control a video, or play an action sequence. For example, you use an On Application Start interaction to trigger an action sequence that plays a SWF file. When you add an action sequence, you can use the create an On Application Start interaction, make sure that nothing is selected in the artboard when you click Add Interaction. The actions you define occur as soon as the application starts.

To do this:

  1. Import your SWF file to your Flash Catalyst project.

  2. Make sure nothing is selected in the artboard.

  3. In the Interactions panel, click Add Interaction.

    Note: When nothing is selected in the artboard, On Application Start appears as the default event to trigger the interaction.
  4. In the Interactions panel, choose Play Action Sequence (in the second menu.)

    An empty action sequence is added to the Timelines panel.

  5. Select your SWF object in the artboard. Click Add Action in the Timelines panel, and choose SWF Control > Play.

    This assigns the Play SWF action to your SWF.

On Application Start interaction that plays a SWF movie from a specific frame

Conditional interactions

Conditional interactions are behaviors predicated upon some condition. For example, clicking a Next button takes the user viewing page 1 to page 2, and the user viewing page 2 to page 3. Conditional interactions are added just like any other interaction. The only difference is that you change the conditional setting from When In Any State to something more specific.

Conditional list interactions

You can add conditional interactions to a data list that trigger an action when someone selects an item in the list. The list can be images or text. Conditional interactions are similar to other interaction. The difference is that the conditional setting, When In Any State, becomes When Any Item Is Selected or When A Specific Item Is Selected. If you choose When A Specific Item Is Selected, you enter the number of the item in the list that triggers the interaction.

Conditional list interaction