Animate transitions between view states

Transitions are animations that play in an interactive project as a user moves from one state to another, or from one component state to another. Common transitions are fade ins and fade outs, rotating or moving objects, or resizing images. Flash Catalyst transition effects are created using time-based animation.

Anytime the content in one state of your project differs from the content in another state, Flash Catalyst automatically creates a default transition for you. These default transitions appear in the Timelines panel. Default transitions always have durations of zero seconds to start with, so they're really more like placeholders-- they have no effect until you increase the amount of time they play.

View full size graphic
Default transitions, with durations of zero seconds, are created automatically on the Timeline between two states (Main and Fly) with differing content.

You can edit a transition, for example, adjusting the speed to slow it down or speed it up; by dragging the effects bars on the timeline. You can choreograph the timing of when an image in your starting state fades out in relation to when an image in your ending state fades in, by moving the effects bars.

View full size graphic
Adjusting the Fade Out and Fade In transitions, to increase the time it takes to move between the start and end states, creating a more gradual transition.

Note: The type of default transition (Fade, Move, and so on) depends on how each instance of an object differs from one state to another.

The following transition effects are added for you automatically:

  • Fades (fade in or fade out)

  • Move

  • Rotate

  • Resize

Transition effects are not added when you change the following properties:

  • Stroke or fill

  • Opacity

  • Corners

  • Blend modes

  • Add filters

  • Edit the text in a text object (same text object with different type in each state)

  • Text properties

Edit transitions

  1. In the States panel, select either the beginning or ending state of the transition.

    Note: To edit a component transition, double-click the component to open it in Edit-In-Place mode. The component transitions appear in the Timelines panel.
  2. Select a transition in the State Transitions section of the Timelines panel.

  3. Click Smooth Transition.

    The default transition changes from zero to one half second, creating a smooth transition between states.

    Note: You can also click the Down Arrow beside the Smooth Transition button and enter a different duration for the transition.
  4. To shorten or lengthen the duration of a transition, drag the resize handle. To move the transition to begin earlier or later, drag the transition effects bar rather than the resize handle.

    A green dot means that a transition has been edited

    Play transition button

    Drag the effects bar to adjust transition timing

    Specify duration of effect (Fade in this case) by dragging the resize handle

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

    You can also use the Properties panel to define properties for a selected transition.
Note: Transition effect bars are color coded. Effect bars are green. The selected effect is blue.

Transition Options

You can set transitions to automatically reverse themselves or repeat, and control how transitions behave when interrupted.

Repeat Transitions

To understand reversing a transition, consider an example where you have a project with two states with an object in each state. If you set up a transition to move the object when going from state 1 to state 2 with a duration of one second, you would often want the same one second transition set to move the object back to its original position when going from state 2 back to state 1. You can do this easily by clicking the Automatic Reverse checkbox on the Properties panel when you have the transition selected. A double-headed arrow will appear on the transition to inform you that the reverse is activated.

Interrupting Transitions

On occasion, you may have a transition that can be interrupted by another transition. For example, while the transition from state 1 to state 2 is playing, your user might click a button to return to state 1. You can control what should occur in this case by selecting the desired setting on the Properties panel for the transition. You can choose Smooth, in which case the transition will stop and then play from its current location, or Snap to End, which will cause the object to “jump” to the end of transition and play from there.

Repeating Entire Transitions

Individual effects can be set to repeat within transitions, but you can also configure the entire transition to repeat by selecting the Repeat checkbox on the Transition’s Properties panel and then setting the desired options.

Common effect properties

Determines how long the effect lasts from start to finish.

Delays the start of the effect relative to the start of the transition or action sequence.

Repeat the effect a specified number of times. Select Forever to repeat the effect continuously.

To and From Opacity
Set the start and end opacity of an object in a fade in/fade out effect.

X and Y Position
Set the start and end position of an object in a move effect.

Width (W) and Height (H)
Set the start and end size of an object in a resize effect.

To and From Angle
Set the start and end angle of an object in a rotation effect.

Add gradual acceleration or deceleration during an animation, which makes your animations appear more realistic.

Changing the origin of the transition

Move, Resize, and Rotate transitions allow you to specify the origin point. If you select a move transition, you can choose State Transition to have the object move from its location in one state to its location in the other state. You can also choose Relative and specify the number of pixels on the x and y axes to which the object should move in the transition from , or Specific Location to choose the point to which it should move.

For a Resize transition, you can choose Relative to have the object resize from its size in the first state to its size in the second, or Specific Size to set the width and height to which it should change. The Rotate transition similarly allows you to set either Relative or Specific Angle.

Easing transitions

You can achieve more realistic looking movements by applying easing to your effects. Easing consists of two phases: the acceleration, or ease in phase, followed by the deceleration, or ease out phase.

Easing is added in the Properties panel and there are several easing options:

Applies a constant rate of change from start to finish.

Starts out slow, quickly easing into the effect. It then maintains a constant rate until just before the end of the effect when the rate slows down, easing out of the effect.

Eases in and accelerates to a mid point. It then immediately begins decelerating, or easing out.

Power is similar to Sine because it eases in to a point and then begins easing out. But with the Power option, you can also set the Exponent property. A higher exponent value creates greater acceleration and deceleration.

Causes a moving object to snap back and jiggle one it reaches its destination.

Causes the moving object to reach its destination, and then bounce backward before settling into its final position.

Add extra effects to a transition

You can add more than one effect to the same objects to create more advance transitions. For example, an object can fade in, rotate in 3D, and play a sound effect at the same time.

  1. Open the Timelines panel.

  2. Select a transition in the State Transitions section of the Timelines panel.

  3. Select an object in the Timeline.

  4. Click Add Action, and choose an action or effect from the pop-up menu.

  5. Adjust the effect properties in the Timeline or Properties panel.

The following is a list of the effects and actions in the Add Action pop-up menu:

Video Control
Play, pause, or stop a video. Import your video and add a video player before you can control video playback. For more information, see Video and sound.

SWF Control
Play or stop a SWF movie. You can also add play or stop a SWF movie at a specific frame in the SWF movie. Set the Start Frame value in the Properties panel.

Set Component State
Display a specified state of a component. Specify which state to display in the Properties panel.

Set Property
Change a property of a component or group as the result of a user interaction. Specify which property to change in the Properties panel.

Fade an object from one opacity setting to another (fade in or fade out). Set the From and To Opacity values in the Properties panel.

Sound Effect
Play any sound effect in the project library. In the Properties panel, set the sound to play once or repeat. If you choose Repeat, you can then set the Count value (number of repeats). You can choose Forever to make the sound play continuously in a loop.

Move an object from one location to another. In the Properties panel, choose Relative to move the object a specific number of pixels from its starting position. You can also choose Specific Location to move the object to an exact X and Y location. When used in a transition, the effect is based on position in the old and new states.

Resize an object. In the Properties panel, choose Relative to change the height and width to a specified percentage of its current size. You can also choose Specific Size to change the height and width to an exact number of pixels. When used in a transition, the effect is based on size in the old and new states.

Rotate an object. In the Properties panel, choose Relative to rotate the object relative to its current angle (if the object begins rotated). Choose Specific Angle to rotate the object to a specific angle (starting from 0°). When used in a transition, the effect is based on angle in the old and new states.

Rotate 3D
Rotate an object in three dimensions. Using the Properties panel, you can set From and To angles for rotation around the object’s center, a vertical axis, and a horizontal axis.

Transitioning Fills, Strokes, Gradients and Filters

You can change an object’s fill and stroke during a transition. For example, if you had a star with an orange fill in one state and a blue fill in another state, you can set a transition to animate the color change. This transition is added automatically to the Timeline when you have an object with different colors between states. The same applies to strokes: if you change an object’s stroke between states, a Solid Color Stroke transition will be added to the Timeline.

Gradient transitions are likewise added automatically. However, a gradient transition will only be added if the gradient has the same number of color spots in each state, and the fill of the shape must be a gradient in both states - you cannot animate between a solid fill and a gradient fill. Both gradient fills and strokes can be used.

You can also animate filters. If you set a filter on an object in one state, and then change any of the filter’s properties in another state, a transition will be added to the timeline.

Smooth transition options

Clicking Smooth Transitions in the Timelines panel adds the default Smooth Transition settings to the effects in the Timeline. You can change the default settings in the Smooth Transition Options dialog box.
Smooth Transition Options dialog box
Sets the overall time of the transition from start to end. The start of the transition is at 0 seconds in the Timeline, not when the first effect begins playing.

Applies smooth transitions to each effect equally, using the value you set in the Duration field. Each effect begins and ends at the same time.

Smart Smoothing
Adjusts the duration and delay (start time) of each effect, creating a series of staggered effects. The effects play at different times over a duration you specify. Flash Catalyst uses a logical order for effects, beginning with objects fading out. After objects fade out, all resize and move effects play, followed by objects fading in.

Overwrite Existing Effects
Replaces existing transition settings with the settings in the dialog box.

Trigger standalone animations using action sequences

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. Action sequences are nothing more than sets of effects, so you can create the sequence by clicking Add Action, selecting the effect you wish to add, and settings its properties and duration. You can have individual actions repeat, or set the entire sequence to repeat by using the Action Sequence’s Properties panel.

Edit action sequences

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.