Working with States in Flash Catalyst

We are still working on our website header animation in Flash^R Catalyst^TM. 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.

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.
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.
The Birthday card will slide-in first. So we will not change this control.
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.
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.
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.