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:
Transition effects are not added when you change the following
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.
Select a transition in the State Transitions section of the
Click Smooth Transition.
The default transition changes
from zero to one half second, creating a smooth transition between
Note: You can also click the Down Arrow beside the Smooth
Transition button and enter a different duration for the transition.
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
- Drag the effects bar
to adjust transition timing
duration of effect (Fade in this case) by dragging the resize handle
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.
You can set transitions to automatically reverse themselves
or repeat, and control how transitions behave when interrupted.
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.
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
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
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
- 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.
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
- 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
- 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.
Open the Timelines panel.
Select a transition in the State Transitions section of the
Select an object in the Timeline.
Click Add Action, and choose an action or effect from the
Adjust the effect properties in the Timeline or Properties
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
- Fade an object from one opacity setting to another (fade
in or fade out). Set the From and To Opacity values in the Properties
- 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
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
- 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
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.
Select the component or group to which you’ll add the
Click Add Interaction in the Interactions panel.
Choose a method to trigger the action sequence.
Choose the Play Action Sequence interaction.
Choose the state where the action sequence occurs (or leave
the default setting When In Any State).
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
Edit action sequences
Action sequences are edited in the Timelines panel. Editing
an action is similar to editing a transition.
In the Timelines panel, select the action sequence you
want to edit.
Select an object in the artboard, click Add Action, and choose
an action or effect from the pop-up menu.
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
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.
To preview the action sequence, click the Play button (right-pointing
arrow) in the Timelines panel.