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.

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.

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

Duration

Determines how long the effect lasts from start to finish.

Delay

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

Repeat

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.

Easing

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:

Default

Applies a constant rate of change from start to finish.

Linear

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.

Sine

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

Power

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.

Elastic

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

Bounce

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
Timelines panel.

Select an object in the Timeline.

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

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

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

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

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

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

Duration

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.

Simultaneous

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.

Select the component or group to which you’ll add the
action sequence.

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

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.

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.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.