Printer Friendly Version

BellaOnline's Flash and Animation Editor

Creat an Animation in Flash Catalyst

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

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

  1. 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.

  2. 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".

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. We want the Birthday card to drop down from the top of the page. Drag the Birthday card above and off the page.

  8. The Christmas card will slide-in from the right. Drag this card to the right and off the page.

  9. 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.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

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.

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

BellaOnline Editor