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
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.

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.



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


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


Content copyright © 2014 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
Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Add Static Text To Craft Product Trailer Template

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 © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor