If you are designing in Flash, especially for skinning Flex components, I highly recommend NOT using strokes.
Solution:
Use complete shape fills or turn your stroke into a fill by selecting the stroke, then going to the menu Modify>Shape>Convert Lines to Fills
*note: You will have to realign your object after doing this
Explanation:
For one, strokes in Flash are centered relative to the edge of the shape they are outlining. This means that if you are using hairline or 1 px stroke, then it is centered and .5 px will be inset and .5px will be outset.
This shot shows the stroke with the right edge deleted. You can see how the strokes sits on top of the shape fill.
A shape(fill) that is 50px w with a 1 px stroke will actually be 51px w, but only measure 50px w in the properties panel.
In my examples, the red shape is a fill with no stroke and is 50px w (aligned 0,0). The blue shape with green outline is also 50px (aligned 0, 10) and measures 50px w in the properties panel, because it doesn’t account for the stroke. (The stroke is actually a separate object in Flash)
What happens? If you are dealing with an object with strokes and do not account for this, then your placement of these items will be slightly off. Some would say it’s only a half a pixel, is that such as big deal? Yes it is. Especially if you will be dealing with multiple items and relative binding or anchoring. A half a pixel can cause a 10px shift in a list of 10 items.
Another major issue is how your shape will be displayed. Fractional alignments on shapes and/or strokes, causes a bad visual display of that object. You can really see this on rounded corners. You may not see it until you compile, but I always ensure my shapes are on whole pixels and I design with solid shapes not strokes. This is relative to your shape dimensions and pixel width, as even pixel stroke widths do make it easier, but I still convert them.
(These shots are exaggerated to better represent the issue)
The top rectangle appears in the property panel that it is on a whole pixel x =50 , y= 125 and it is 280px x 160px. If it had a 1 pixel stroke, in actuality, it would be 281px x 161px and its alignment would be 50.5, 125.5.
You can also see the slight distortion of the corners. It is usually more noticeable on the left side of a shape with rounded corners. You can see in the bottom image (red rectangles) that the top rectangle’s corners appear distorted and the bottom one has been converted to fills and aligned on whole pixels.
I have adapted this into my Fireworks designing as well, because I usually carry my Fireworks vector shapes right into Flash for skinning.
Fireworks handles pixel alignment in a strange way as well. You can draw a shape at 0, 0 and it may display this in the properties panel, but sometimes Fireworks does not really draw it at that location. To make sure, click in the x or y input in the properties panel and press “enter.” If your shape was off, you will see a minor re-alignment. If not, then you won’t see anything.
This also affects the shape when copying, create a new file, then pasting. (which, most design apps will naturally create a new file with a canvas size equal to that of the copied object.) A fellow coworker of mine experienced this recently on an object that was 9px x 9px. It as just like another object , but just a different color. They both measured 9px x 9px, but when he copied and created a new file, it created a 11px x 9px canvas. We aligned it properly and this fixed the issue.