Flex4 Dotted Line Hack

On 2010/10/15, in signal, webdev, by a b

There’s no dotted line in Flex. There’s no putting a background image in a div, with ‘repeat-x’. There’s no DottedStroke for drawning. Rather than write something clever, I wrote something quick.

What I wanted was this:
dotted line example

I didn’t need a true line, just a horizontal separator. No need for drawing on a diagonal. This is simply a Rect with a bitmap fill, using a dot as the bitmap. The bitmap is actually 1 pixel by 2 pixels, with the right pixel colored (#808080) and the left transparent, as such:

example of the dot png

Here’s the code that would draw your “line”:

<s:Rect width="500" height="1">
<s:fill>
<s:BitmapFill source="@Embed('/assets/images/dot.png')" fillMode="repeat"/>
</s:fill>
</s:Rect>

That’s about it. You can download the dot PNG here. Or, just make your own in Fireworks.

 

Comments are closed.