At Fi we have always held animation close to our hearts. Animation is a way to make our projects vibrant, be it through small icon animations or large and complex transitions. From my experience of creating animations for our projects I have developed a set of underlying guidelines which I apply to all of my work today.

Rounded movement. When you’re animating a change in location of a detailed graphical element (especially text), make sure to round the X and Y coordinates throughout the animation to avoid blurred and flickering lines/glyphs.

In, not out. When creating a transition between PageA and PageB, focus the animation on where PageB appears and not where PageA disappears. Your audience generally does not care about the old content disappearing, but is excited and willing to wait for the new content coming in.

Performance. Always consider the performance of your animations; for instance you can use BitmapData to take snapshots of your content and animate that snapshot – rather than directly animating a complex MovieClip hierarchy. This will ease the workload on the Flash Player – enabling better overall performance.

Responsiveness. Try to keep your animations at a reasonably fast pace, especially for interactions. Interactive elements that animate slowly tend to give a fragile impression, whereas a snappier element feels more solid and reliable.

The 20% rule. When an animation feels excessive, you can apply what we call the 20% rule. This means that you show only the last portion of an animation flow to the user. For instance, imagine a drop down... instead of animating it expanding all the way down – animate only the last bit where it falls into place. This leads to a shorter animation which focuses on where the dropdown lands and still feels smooth.

Consistency. In the same manner that a Designer sets the graphical style of a project, Interactive Developers need to set an animation style and follow it throughout the project.

Frame rate. Finding an appropriate frame rate has a big impact on the end result of your animations. Setting a frame rate that is too low will result in jerky playback. A frame rate that is too high on the other hand means more stress on the computer and can lead to lag – this will result in your user’s seeing very varied results depending on their hardware. In general your frame rate should be lower the more complex your project is, but you should also note that different browsers throttle the frame rate differently.

Technique. Always consider the most suitable technique for your animations. For instance, you should stay away from scaling bitmap assets as it will lead to graphical artifacts. Instead you could replicate the bitmap asset with vector shapes and scale those.

Video animations. Using video to replace complex and processor intense animations can be very helpful as it takes some of the strain off the user’s computer.

Remember, these are guidelines and not absolute rules; animations need to adjust to their surroundings for the most suitable implementation in any given case.