logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


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.

g


g features
Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Animated Title in Motion

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor