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

Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Ecard Shop Animation

At this point in our Flash projectR, we have our card shop filled with miniature cards. Now it's time to start the presentation of our artists. Each artist has a card on the shelf. We will animate each of these cards and display the artist's information in a text balloon.

Each ecard will have the same animation, so we will be creating the animation 6 times. Remember, our goal is to have each ecard start as a small ecard on the shelf and enlarge to almost fill the stage. Our first step is to set a few horizontal and vertical guides that we can use to position the ecard and text balloon. Our first ecard will be a winter snowman scene painted in watercolors by Kate Mawdsley. First we import the ecard graphic to the Flash Library.

Next, add a keyframe on a layer of the Timeline where we want the animation to begin. Let's start with Frame 275. Drag the ecard graphic onto the stage, placing it next to the guides. Right-click and convert the graphic to a symbol named KateM. Right-click again and choose Create Motion Tween from the menu. We will use the first 30 frames to make the small ecard zoom off the shelf. If we add 30 frames beyond Frame 275, we will have the ecard enlarged to full size on Frame 305. Add a keyframe to Frame 305. This will "lock in" the full size and end position of the ecard.

Now we can go back to Frame 275, the beginning of the animation, and use the Transform tool to reduce the ecard to a small square. Next, we will place the small ecard on top of the matching ecard that is on the shelf. Use the Timeline slider to scrub along the 30 frames of our animation. We should see the card start on the shelf and enlarge to full size. One last touch will be to reduce opacity of the ecard to 0% at the beginning of the animation. Now the card starts out invisible and zooms to full size and full opacity over the first 30 frames.

For the next 60 frames (305 to 365) we want the ecard to remain on the stage and, basically, do nothing. This gives the viewer a chance to view the ecard. We will also be adding the text balloon during this time. So add a keyframe to Frame 365 to "lock" the ecard in place over those 60 frames. Finally, we will reduce the opacity of the ecard to make it appear to fade-out. This will take only 10 frames. Add a keyframe to Frame 375 and reduce the opacity of the ecard to 0%. That's the entire animation for the first ecard. Now we can add the matching animation for the text balloon.

Pamela Gladding Ecards

Join us in the Flash forum.

Add Ecard+Shop+Animation to Twitter Add Ecard+Shop+Animation to Facebook Add Ecard+Shop+Animation to MySpace Add Ecard+Shop+Animation to Del.icio.us Digg Ecard+Shop+Animation Add Ecard+Shop+Animation to Yahoo My Web Add Ecard+Shop+Animation to Google Bookmarks Add Ecard+Shop+Animation to Stumbleupon Add Ecard+Shop+Animation 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
Bookry Drag and Match Jigsaw Puzzle

Bookry Drag & Match Widget Settings

Create a Hype Template for iBooks Author

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