Flex4 Dotted “Line”

Quickly, I wanted to share some code around creating the elusive ‘dotted line’ in Flex4.

The end goal is a divider made up of 1px dots, like this:
dotted line example

My solutions isn’t a true line, in that you can’t you can’t draw it on a diagonal. However, if you need a 1px horizontal divider, here you go. 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.