Tips for drawing in flash #1

Flash drawing tools - generally a bit crap. But if you know a few tricks you can get the job done. Take a look at the black lines around the shapes in the image below: (if you can't tell the difference between the two, this post is not for you ;)

What we're trying to do is draw a 100px x 100px shape with a single pixel line border. The problem is that if we grab the rectangle primitive tool and do that (making sure we keep the shape on an even pixel value, in this case x:55, y:40) we get the result on the left. The border is distorted and looks terrible.

The trick to getting the border looking nice as it does on the right is to set the shape to coordinates that are +0.5px for both x and y, and then reduce the size of the shape by one pixel.

So the green shape is set to x: 205.5, y: 40.5 and is actually set to be 99px x 99px in Flash. When we publish, the shape has a nice smooth border, and actually displays in the SWF as 100px x 100px in size.

Yep, it's a hack. In Flash. Surprise!

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Comments

February 20. 2008 03:09

I have noticed that when creating a progress bar preloader with a hairline stroke that has a 1px gap from the bar to the stroke that you need to offset the x and y coordinates another 1 pixel. So on the left and top of the bar there would be a 2px gap and beneath and to the right there would only be a 1px gap

Split

April 8. 2008 09:35

Well my comments just keep on coming...

Just discovered a handy little checkbox that somewhat handles this issue. If you tick stroke hinting when you create a shape with a stroke, it should eliminate the blurryness

Split

May 14. 2009 13:18

subpixel font rendering in flash

http://alienryderflex.com/sub_pixel/

Ka.sh

Comments are closed