Keep on Pixel
Keeping visualizations on pixel can improve readability. What is on pixel? Just making sure your rectangles are located and sized to whole numbers. This may seem a bit anal at first, but when there’s lots of info on screen, it can make a difference in legibility and eyestrain. It’s also one of those things that you might not notice until you look for it. Fortunately, it’s easy to solve. Just use Math.round and round all your values to a whole number. Obviously, you can’t keep all shapes on pixel – circles and diagonal lines will be anti-aliased by Flash.
This is basically the same idea behind fonts made specifically for Flash. Flash does a good job at anti-aliasing (but not nearly as good as Illustrator), but, if you can avoid anti-aliasing, you should. It makes things blurry. (Flash fonts sit exactly on pixel and have a fixed point size.)
If you are not dynamically attaching all your content, check everything on screen in the properties box and make sure the x, y, height, and width values are whole numbers. How you keep text on pixel depends on the text. First, make sure the _y of the text is a whole number. For left-aligned make sure the _x is on pixel as well – width and height will not make a difference. Centered text cannot be guaranteed to be on pixel. Right-aligned text will be on pixel if the text width and the _x location sum to a whole number. Fortunately, Flash 8 makes resizing text fields much easier – dragging the text area so it is wider does NOT scale the text as it did in earlier versions.
Lines are a bit different. I’ll write a separate post on lines in the next couple days. Quickly, pre-Flash 8, lines were centered on the pixel – so a 1 pixel, horizontal line at _y of 10 actually draws from _y 9.5 to 10.5. I started this post by including lines, but it got too long.
Here’s the source for the files. Source contains a project (Flash 8), an fla with one line of code (saved as Flash 7), and 3 classes. Code will only work in Flash 7 (Flash 6 compatable except for getNextHighestDepth().)
Comments
Leave a Reply