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

Autism Spectrum Disorders
Mental Health
Blogs / Social Networking
Kidney Disease
Today in History

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Flash and Animation Site

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.

Add Creat+an+Animation+in+Flash+Catalyst to Twitter Add Creat+an+Animation+in+Flash+Catalyst to Facebook Add Creat+an+Animation+in+Flash+Catalyst to MySpace Add Creat+an+Animation+in+Flash+Catalyst to Del.icio.us Digg Creat+an+Animation+in+Flash+Catalyst Add Creat+an+Animation+in+Flash+Catalyst to Yahoo My Web Add Creat+an+Animation+in+Flash+Catalyst to Google Bookmarks Add Creat+an+Animation+in+Flash+Catalyst to Stumbleupon Add Creat+an+Animation+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
Image Preparation for Holiday Intro Video

Holiday Season Motion Graphics Storyboard

Understanding Video SEO by Ian Lurie

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