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
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Working with States in Flash Catalyst


We are still working on our website header animation in FlashR CatalystTM. See the links below to catch up.

Now we need to decide the order that we want our elements to slide onto the header. I think it will look nice to have the Birthday card slide-in first, then the Christmas card and next the Pumpkin card. We will end the animation with the business name sliding-in. We will control all this in the Catalyst Timelines panel. You will see the State Transitions list on the left. The one we will be working with is the Start >  End Transition. Click on that layer.

Next to this on the right, you will also see that we have three other columns. The left column is the Start page thumbnail and under it are the design elements. The right column is the End page thumbnail and design elements. The center column is where we do all the work. It contains four controls named Move. Catalyst has assumed that we want to move our design elements and has given us a control for each one.

By default, the Timeline has a span of little over one second (1 s). Let's increase this a little. At the bottom, you will see the slider control for the Timeline. Move this to the left until you see "3 s" on the Timeline. Now, we have three seconds to work with.

  1. Let's set the slide-in duration for the Company Name element to one second. Click on the Move tool next to the Company Name. You will see a little semi-circle appear. Pull this until the bar expands to the 1s mark.

  2. Repeat this for the three cards.

    But, we don't want all the elements to slide-in at the same time. Let's stagger the controls on the Timeline.

  3. The Birthday card will slide-in first. So we will not change this control.

  4. We want the Christmas card to slide-in next. Move the control so that it starts at the 3/4 s mark and ends at 1 3/4 s mark.

  5. Next, it's the Pumpkin card. Move this control so that it starts at 1 1/2 s and ends at 2 1/2 s.

  6. Finally, the Company Name. Move this control to start at 2 s and end at 3 s.

    Here is what the Timeline should look like now. We can test our animation by clicking the Play button at the top of the Timeline. As you can see, the design elements slide-in as we want them to do. We now need to tell Catalyst to start the animation when the page loads.


Join us in the Flash forum.


Add Working+with+States+in+Flash+Catalyst to Twitter Add Working+with+States+in+Flash+Catalyst to Facebook Add Working+with+States+in+Flash+Catalyst to MySpace Add Working+with+States+in+Flash+Catalyst to Del.icio.us Digg Working+with+States+in+Flash+Catalyst Add Working+with+States+in+Flash+Catalyst to Yahoo My Web Add Working+with+States+in+Flash+Catalyst to Google Bookmarks Add Working+with+States+in+Flash+Catalyst to Stumbleupon Add Working+with+States+in+Flash+Catalyst 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 © 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.

g


g features
Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Animated Title in Motion

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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor