You are here: Home > Design > Design topics > Image wobbles when animated

Image wobbles when animated

Print versionEdit this page

Problem

Bitmap images can have a wobbly effect when doing a fade or when hovering over it with the mouse pointer.

Solution

  1. Always put a bitmap image inside a movieclip.
  2. Write down the size and location of the clip.
  3. Inside the movieclip, scale the image to 200%.
  4. One level up, scale the movieclip back to its original size (50%)

See also:

For years, Flash developers have been forced to jump through a series of unnecessary, annoying, time-sucking steps to get around a Flash player bug which mangled any image without whitespace around its perimeter. If your image was tightly cropped to the nearest whole pixel (like all web designers instinctively do) and imported into Flash, when published the edges of the image would blur and appear slightly distorted. If your image was bitmap typography, the effects were even more pronounced.

To get around the bug, designers were forced into adding at least 2 pixels of transparent space around the image to fool the Flash player into keeping the edges sharp. Not a big deal if you’re only working with a few images, but if your project included an html component, each and every bitmap used in html would have to be re-edited and exported - either by hand or with an Action - in Photoshop. Not exactly an optimal workflow environment.

To make matters worse, the real edge of your imported image (when placed inside a movie clip or graphic) would then sit at x:2, y:2 — making pixel-perfect placement (either by hand or through ActionScript) a pain because you had to factor in the extra 2 pixels of empty margin. Ugh.

from Finally! Correct Bitmap Support in Flashexternal link

and follow-up: Flash Bitmap-Shift Bug Fixed? Sortaexternal link