Ecard Shop Animation
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
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Editor's Picks Articles
Top Ten Articles
Content copyright © 2018 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.