In the last article, you were introduced to the Flash^R Catalyst^TM CS5 Timeline. Now we will learn how the Catalyst Timeline makes adding professional-looking transitions to our application an easy task.

If you are familiar with Flash, you know that there are two main parts to an animation. The first part is the transition such as moving from one page to another. In Flash we commonly use tweens to create these transitions. The second part is easing. Easing is a way to control a transition so that it appears to occur smoothly. Creating these tweens and easing is a somewhat complicated task in Flash but Flash Catalyst does all the work for us.

Let's go back to the Catalyst Timeline. We will continue to work on the top layer which controls the movement from the CityView page to the UnionParkView page of our website. Catalyst has already determined that we will be using the Move transition to move from one page to the other. If we tested our application now and clicked the button to move to the UnionParkView page, this page would simply pop up on our screen instantly. This is because we haven't attached any duration to the transition. We can do this in the Timeline.

At the bottom of the Timeline you will see the Smooth Transition button. Click on that button and Catalyst will add a duration of .5 seconds to the transition. We can see this because the small bar for the Move transition has expanded to cover .5 seconds of the Timeline. The default is .5 seconds but we can reduce or extend this duration simply by dragging on the end of this bar. The other button at the bottom of the Timeline is the Add Action button for adding other effects such as 3D rotation or the fade-in effect. For each action that we add, Catalyst will give us another control bar for setting the duration for that effect. For example, if we add a 3D rotation to this layer, Catalyst will add a control bar labeled 3D Rotation with the default .5 seconds duration.

At this point, we have only set the duration for the transitions attached to the top layer of the Timeline. In order to have smooth transitions throughout the website, we need to repeat these steps for the other layers in the Timeline.

*Adobe provided a review copy to me free of charge.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.