Creat an Animation in Flash Catalyst

In the last tutorial, we built our website header design file in Photoshop^R. If you have not read that tutorial, there is a link at the bottom. Now we are ready to import the Photoshop image into Flash^R Catalyst^TM and create the intro animation.

Open Adobe Flash Catalyst and let's get to work.

To import your Photoshop project file in to Catalyst, choose Create New Project from Design File – From Adobe Photoshop PSD file. Keep all the default settings for the Photoshop Import Options.

As you can see, the layers from Photoshop have been saved and imported into Catalyst. They have the same names and are in the same layer order. One exception is that the drop shadow layer style for each card is on a layer under the card. Let's group each card with its drop shadow layer below. This will make it easier to move them simultaneously.
Select both the Christmas card and the drop shadow layer below it. Right-click and choose Group from the menu. Rename the group to "Xmas".
Repeat the last step for both the Birthday and Pumpkin card.

Now we are ready to work on our animation. Creating an animation in Catalyst is much like creating a Tween in Flash. There is a beginning and ending "State". We have already imported our header in its ending State or how we want it to look at the end of the animation.
At the top of the Catalyst workspace you will see the Pages/States panel. We have one page so far. Click the Duplicate State button to copy this page.
Rename Page1 to "Start" and Page2 to "End".

We are ready to remove the design elements from the Start page. Remember that we want these elements to slide-in during the animation. Therefore, we need to remove them at the start of the animation. To see better, set the Zoom to 50%. You will find the drop-down menu for this at the top of the workspace.
We want the company name to slide-in from the left. Drag this element off the page to the left. Hold down your Shift key to keep the text at the same horizontal position as you drag.
We want the Birthday card to drop down from the top of the page. Drag the Birthday card above and off the page.
The Christmas card will slide-in from the right. Drag this card to the right and off the page.
The Pumpkin card will slide-in from the bottom. Drag this card below and off the page.

Your Start page should look like this.

Join us in the Flash forum.