In this ecard project, we will practice several Flash^R skills from drawing vector shapes and applying filters to animating with the new object-based Flash animation and loading the main ecard animation as an external swf. This project will be an intro animation that can be used with any ecard, as long as the frame rate of the two swf files are the same. We will talk more about that soon. Our goal is to build the intro with design elements that can be customized to match any ecard that we may wish to load as an external swf. These elements will be the background color, the envelope and stamp colors, the thumbnail image of the ecard and the name and path to the external swf.

This will be an advanced animation and intro for our ecard. The character in this animation is the envelope for the ecard. We will use the Flash drawing tools and filters to create the 5 vector shapes that make up our envelope and animate these shapes, sometimes together and sometimes alone, to create a complex animation. Our envelope will first tumble onto the stage from the upper left and stop when at the center of the stage. A “Click on the stamp” message and invisible button over the stamp will let the viewer continue the animation to open the envelope. Once clicked, the envelope will turn over and the flap will open, revealing a thumbnail image representing the ecard inside. The envelope will drop down to the right off the stage and fade away. As the envelope moves off the stage, the thumbnail image will enlarge to the dimensions of the external ecard swf. Then, the external swf loads in the same position as the thumbnail and begins to play.

Imagine trying to explain all that to a potential client. That’s where a storyboard can help. It can be very fancy or just a simple drawing that will visually explain the animation sequence. A storyboard is simply a sequence of images that represent the major scene changes in your animation. You can use arrows and text notes to emphasize and explain the details.

Now that we have an idea of the basic steps for our animation, we can start to make a list of the design elements that we will need. Of course, we will need our envelope. However, we cannot just draw one envelope on the stage. In order to give the illusion that the envelope has the ecard inside when it opens, some parts of the envelope must be behind the ecard thumbnail and some parts will be in front. Because of this, we will need 5 pieces, not including the thumbnail.

Piece 1
This will be the envelope front (with stamp) that falls into the center of the stage. Let's name this EnvFront1.

Piece 2
When the envelope turns over, we will see the back of the envelope and the flap will be closed. We will call this EnvBack1.

Piece 3
When the envelope begins to open, the flap will need to be a separate shape from the rest of the envelope back. This will be called EnvFlap.

Piece 4
This is the back of the envelope without the flap. As you can see, it has a triangular cut out to reveal the thumbnail inside. Because it is the second envelope back shape we will use in the animation, let's name it EnvBack2.

Piece 5
As the envelope falls away from the thumbnail and off the stage, we will need to add one more piece. Because the thumbnail is staying in place on the stage, we will have nothing behind the triangular cutout. We have the open cutout because we are missing the front of the envelope that you can see when the envelope is empty. This will be our EnvFront2.

Thumbnail
We will also need a thumbnail image that will represent our external ecard.

Except for the invisible button that we will create when we need it, that's all we need for our intro animation.

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.