Interactions and action sequences

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 page when a user clicks a button. In this case, you define an interaction triggered by clicking that button.

With an interactive component button selected, you can use the Interactions panel to connect your buttons to view states in your project.

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

  • Transition from one page or component 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

From the Interactions panel, choose the event that triggers the interaction, such as On Click. Then choose the response to that event, such as Play Video. Last, choose the state where that interaction occurs.

Add interactions

You can add interactions to components 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 an action sequence.

    • 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.

    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.

Create action sequences

Action sequences are interactions that trigger one or more actions. Action sequences occur within a single state, so they can play over and over. For example, you can have an object that animates each time a user moves the pointer over it.

The types of actions that are available include:

  • Play, pause, or stop a video

  • Control the playback of a SWF movie

  • Set the component state

  • Set the properties of an object

  • Fade an object

  • Add a sound effect

  • Move, resize, or rotate an object

  • Rotate an object in 3D

Action sequences are added to components or groups using the interactions panel.

Note: To add an action sequence to a component or group within another component, double-click the parent component to open it in Edit-In-Place mode.
  1. Select the component or group to which you’ll add the action sequence.

  2. Click Add Interaction in the Interactions panel.

  3. Choose a method to trigger the action sequence.

  4. Choose the Play Action Sequence interaction.

  5. Choose the state where the action sequence occurs (or leave the default setting When In Any State).

  6. Click OK.

    An empty action sequence is added to the Timelines panel and ready for editing.

Edit an action sequence

Action sequences are edited in the Timelines panel. Editing an action is similar to editing a transition.

  1. In the Timelines panel, select the action sequence you want to edit.

  2. Select an object in the artboard, click Add Action, and choose an action or effect from the pop-up menu.

  3. Repeat step 2 for any other objects, or add additional actions to the same object.

    The Timelines panel displays the effects bar for each action you add to the sequence.

    Action sequence in the Timelines panel
  4. To shorten or lengthen the duration of the effect, drag the resize handle. To move the action to begin earlier or later, drag the effects bar rather than the resize handle.

  5. To preview the action sequence, click the Play button (right-pointing arrow) in the Timelines panel.

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