logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies
Romance Novels


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Craft Product Template - Background Layer

Craft Product Template Layers

Craft Product Trailer Design Elements

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor