A word about animations

http://laair.org/node/203

Posted December 14th, 2007 by Ktu

Since I was old enough to realize I was looking at a flash application rather than pure html I have noticed an obnoxious flaw in so many websites and applications.

Most animations are simply TOO LONG. They are long, and slow, and boring, and excessive. Tone it down. If there is one thing I have found, its that I hate waiting for stupid animations to finish so I can do something else.

Don’t get me wrong I am not bashing animations. I am simply bashing animations that are simply too long or too extravagant for their purpose. Every animation can be broken down to having a purpose. Figure out the purpose of your animation and apply accordingly.

l
l
l
My Acronym: KISS ASS (Keep It Short, Sweet And Simple Stupid)
Despite your longing to create snazy, jazzed up, star gazing, craptastic animations, you ultimately must kiss ass to the users.

• For most animations, keeping it less than 1 second really helps. In one second you can find enough frames to make your animation smooth enough, and still get your point across.
  l

   

• If you have an animation heavy interface; That’s ok! But try making your animations shorter still, like around the .5 second mark.
  l

   

• When creating your animations, try not to lie to the user. Bounce effects, Curving, Elastic effects, etc… (unless that is the goal) can, and will be very frustrating. WAIT, I thought you were going to end up over there! Why did you go backwards! WHY DO YOU TOY WITH ME!!!
  l

   

• If an object is going to slide off the stage and disappear, and your flash embed is not full page, try adding a mask with a gradient edge or a gradient edge on the entire document that goes to alpha = 0. This will stop your objects from simply cutting off at a line and disappearing. It will give it a more natural feel especially if your flash is not the full size of the browser they are in.
  l

   

• If you are going to use shape tweens that morph please please please make sure that none of your points cross over in weird ways. I don't want to see corners flipping over each other to replace another corner that should have stayed where it was. If you must use a morphing tween, use the Shape Hints. They are great tools to help your morphing animations look more natural and smooth. If that still doesn't do the trick, try breaking the animation up into multiple tweens to get the desired look.
  l

   

• A great tool for more complex flash projects is Caurina's Tweener class. I'm sure a lot of you have seen it or used it. This Tweener class allows you to create time or frame based animations that is very flexible by using actionscript. If you have have been having issues trying to manage your animations within a project, try taking a dabble in this class. The documentation is clear enough to understand and can help you create amazing sites with a lot less mess of 'what part of the timeline should I go to?'

Yet even with all of these restrictions, your users have come to your site for a reason, and you should ALWAYS try to provide an experience that the user will enjoy. Try applying the few tips above and keep in mind that animations can MAKE or BREAK a site.
Don't forget there are times when extravagant and sweet animations can be acceptable and awesome, just make sure its the right time to use it.

I love suggestions and input.

Ktu