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

Cooking for Kids
Women's Fashion
Small Office/Home Office

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Planning Your Ecard Project - Storyboard

In this ecard project, we will practice several FlashR 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.

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.

Join us in the Flash forum.

Add Planning+Your+Ecard+Project+%2D+Storyboard to Twitter Add Planning+Your+Ecard+Project+%2D+Storyboard to Facebook Add Planning+Your+Ecard+Project+%2D+Storyboard to MySpace Add Planning+Your+Ecard+Project+%2D+Storyboard to Del.icio.us Digg Planning+Your+Ecard+Project+%2D+Storyboard Add Planning+Your+Ecard+Project+%2D+Storyboard to Yahoo My Web Add Planning+Your+Ecard+Project+%2D+Storyboard to Google Bookmarks Add Planning+Your+Ecard+Project+%2D+Storyboard to Stumbleupon Add Planning+Your+Ecard+Project+%2D+Storyboard 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
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor