Printer Friendly Version

BellaOnline's Flash and Animation Editor

Flash Catalyst Smooth Transitions

In the last article, you were introduced to the FlashR CatalystTM 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.

Join us in the Flash forum.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor