Flash / AS

Blend / WPF
ASP.net / PHP

Photoshop

Forums
Blog

About
 
page flipper
Interactive Flash Streaming with Influxis Flash Server Hosting: Fast, Reliable, Powerful, Affordable.

 

 

Principles of Animation
       by Danielthelion  |  3 December 2005

So before I began writing this tutorial I asked around in the forums if there was any general interest. I realize that a large percentage of the kirupa community is made up of developers and designers so I wasn’t quite sure how many here would benefit from this knowledge. Then I realized that what I plan on sharing with you all here can be utilized by just about everyone that uses flash to add more life to whatever projects come your way. Let’s begin.

Back in the Halcyon days of Disney, the animators there began trying to dissect really great character animation to figure out what made it great. After years of study they made a list of 12 principles that all great animation utilizes. Those 12 principles are as follows:

  1. Timing
  2. Squash and Stretch
  3. Slow in & Slow Out
  4. Arcs of Motion
  5. Anticipation
  6. Exaggeration
  7. Secondary Action
  8. Follow through & Overlapping Action
  9. Straight Ahead & Pose to Pose
  10. Staging
  11. Appeal
  12. Solid Drawing

Now my plan is to go over each one of these bad boys with you guys and talk about what they mean and how to utilize them in your work. For part one of this tutorial I have selected Squash and Stretch and Timing.

Ok. So what is timing and squash and stretch all about? Lets look at an example:

[ a simple animation created quickly in Flash 8 ]

See how the ball seems really affected by gravity and really squashes and stretches as it falls and bounces?

...yeah, neither do I. Everything is happening at the same slow speed and the ball is not responding to the action. This is bad animation, yet I see it all the time on websites the world over. Lets learn how to give something simple like a ball bounce more life!

Remember, these are principles and meant to carry over into every aspect of animation. As your going through this tutorial, try and apply it to whatever project your working on at the moment. With that said, let's start creating the illusion of life!

Onwards to the next page!

1 | 2 | 3 | 4


kirupa.com's fast and reliable hosting provided by Media Temple.
flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions.
Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.
Check out our high quality vector-based design packs!
Flash Effect Components

Flash Templates
CSS Templates
Dreamweaver Templates

flash menus, buttons and components
Digicrafts Components
The best flash components ever!
Entheos Flash Website Templates
Free Flash Page Flip
Learn how to advertise on kirupa.com