SEE IT! LIKE IT! BUY IT!Flash Animation 101: A behind the scenes look at what's involved in creating an effective web site animation
Animation is more involved than what appears in the final product.There are many aspects of animation that go unnoticed, such as paying attention to, and complimenting the message, legibility and limiting motion and breaking up the monotony.
Let me explain how I planned and animated the flash banner at
http://www.dreamcruises4u.com.
It is important to ensure that your copy is legible. It goes without saying that if you can't read the message, then you've failed already.I use white copy on a medium blue background in the opening scene. The copy is legible and is isolated in the corner so that the eye is drawn to it.
If I were to have multiple simultaneous animation on the banner in that scene, then the important message of, "Get Incredible Cruise Bargains" would suffer. Too much motion at once is distracting. Let your viewers have a chance to absorb your message before you start flying more copy in their faces.
Finding a way to break the monotony is very important. If you maintain a consistent standard for introducing your copy and it does not vary at all,then nothing important sticks out. Notice that I use an anchor to pull up the copy, "All Ports Worldwide!" This scene is effective, as the rest of the images have been "dissolved" and the simple animation of the anchor introduces the new copy without distracting from the message.
Nearing the final scenes, the copy "We'll find what you want for less!" is animated to jump out at you the viewer. The "For Less" copy is enlarged and centered so that it becomes the main focus. When it becomes smaller, it changes color so that it is still the primary focus. Still images are cycling underneath to give the viewer indications of the diversity that is possible with one of these fabulous cruises. We want them to see this,but it is more important for them to see the message above. Take great care in ensuring that your message is primary and the images are a compliment.
Finally, I use another "dissolve" in the end scene to take away the old images and reintroduce the image used in the first scene. "Dissolves"and "straight cuts" are a few of the best "transitions" to use. You will often find them in film and television, we just never pay attention to
those little details. This is when one object, scene, clip or animation fades away, while the other fades in. In digital video, one clip slightly overlaps the other clip and a "transition" is between them. I use dissolves and straight cuts in the final animation because the objects in the final scene are positioned so that your eye is drawn to them automatically without the need for further animation.
When you begin your animation, make sure you have a plan. Sketch out a timeline and know what you want to accomplish before hand to avoid a chaotic and disorganized animation. Vary the style of animation to create diversity and maintain interest. This is a rule that can be applied to many things. If you bold all of your copy, then nothing sticks out. If you fade in all your text, then nothing will stick out in your animation either. Pay close attention to the most important messages in your animation and use motion to draw the eye to it.
Remember, not everything needs to be animated. If you do, then you will have an animation that looks like objects thrown into a dust storm.You will lose the power of the animation and subsequently reduce the power of your marketing message.
Would you like to get your own animated flash banner for your site? Next 10 people only - save 20% Contact mailto:customerservice@worldprofit.com with subject line "FLASH ME"
Cris Anderson, PhotoShop Guru, is a member of the Worldprofit Design Team.
Let our expert design marketers work for you!
Contact mailto:customerservice@worldprofit.com
Want to get more expert design tips free?
Take our free online course at:
http://www.worldprofit.com/autoresponse
Send to a Friend
