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

Folklore and Mythology
Women's Fashion
Holiday/Seasonal Cooking
Hiking & Backpacking
New Age
Weight Loss

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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
Whiteboard Animation - Writing Text

Whiteboard Animation - Painting Motion

Whiteboard Animation - The Timeline

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor