g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

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.

Add Flash+Catalyst+Smooth+Transitions to Twitter Add Flash+Catalyst+Smooth+Transitions to Facebook Add Flash+Catalyst+Smooth+Transitions to MySpace Add Flash+Catalyst+Smooth+Transitions to Digg Flash+Catalyst+Smooth+Transitions Add Flash+Catalyst+Smooth+Transitions to Yahoo My Web Add Flash+Catalyst+Smooth+Transitions to Google Bookmarks Add Flash+Catalyst+Smooth+Transitions to Stumbleupon Add Flash+Catalyst+Smooth+Transitions to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


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

BellaOnline Editor