How do you add a stroke to text?

Question

How do I add a stroke to text in Flex 4? Specifically I'd like to add it to a Label (the text will change in it).

Update
The closest solution suggested has been to add a drop shadow filter as shown below. I've added a rectangle with a stroke for comparison. If the stroke weight is between 2 to 3 it's acceptable. If it's above or below that then it's too blurry or rough. In my case I need to support 2 to 6 weight.

A follow up question would be is it possible to create a stroke filter through Pixel Bender.

<s:VGroup>

<s:Label text="Select an example on the left. Right-click to view source." 
         color="#FF8C00"
         top="10" left="10"
         fontSize="25">
    <s:filters>
        <s:DropShadowFilter blurX="2" blurY="2" distance="0" quality="1" strength="10" color="#000000"/>
    </s:filters>
</s:Label>

<s:Rect width="100%" radiusX="8" radiusY="8"
        height="18">
    <s:fill>
        <s:SolidColor color="#FF8C00"/>
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke weight="1" />
    </s:stroke>
</s:Rect>

<s:Label text="Select an example on the left. Right-click to view source." 
         color="#FF8C00"
         top="10" left="10"
         fontSize="25">
    <s:filters>
        <s:DropShadowFilter blurX="4" blurY="4" distance="0" quality="1" strength="10" color="#000000"/>
    </s:filters>
</s:Label>

<s:Rect width="100%" radiusX="8" radiusY="8"
        height="18">
    <s:fill>
        <s:SolidColor color="#FF8C00"/>
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Rect>

<s:Label text="Select an example on the left. Right-click to view source." 
         color="#FF8C00"
         top="10" left="10"
         fontSize="25">
    <s:filters>
        <s:DropShadowFilter blurX="6" blurY="6" distance="0" quality="1" strength="10" color="#000000"/>
    </s:filters>
</s:Label>

<s:Rect width="100%" radiusX="8" radiusY="8"
        height="18">
    <s:fill>
        <s:SolidColor color="#FF8C00"/>
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke weight="3" />
    </s:stroke>
</s:Rect>

<s:Label text="Select an example on the left. Right-click to view source." 
         color="#FF8C00"
         top="10" left="10"
         fontSize="25">
    <s:filters>
        <s:DropShadowFilter blurX="8" blurY="8" distance="0" quality="1" strength="10" color="#000000"/>
    </s:filters>
</s:Label>

<s:Rect width="100%" radiusX="8" radiusY="8"
        height="18">
    <s:fill>
        <s:SolidColor color="#FF8C00"/>
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke weight="4" />
    </s:stroke>
</s:Rect>

</s:VGroup>

Within the Flash animation tool you would need to convert the text to outlines and then apply a stroke, but of course then you can't change the text in code. — jhocking, Apr 12 '12 at 14:40

score 6 · Answer 1 · answered Apr 12 '12 at 04:31

6

Only way I know how is to apply a really, really strong GlowFilter with a tiny blur radius.

Something like:

var stroke:GlowFilter = new GlowFilter(0x000000, 1, 2, 2, 10, 1);
field.filters = [stroke];

answered Apr 12 '12 at 04:31

Marty

39,033
19
93
162

That's what I've used in the past but the results have been unsatisfactory. – 1.21 gigawatts Apr 12 '12 at 05:12
Yeah, unfortunately I don't think there is another way. – Marty Apr 12 '12 at 05:13
with a small `blurX/blurY` and a high strength, this works quite well. just be careful of using too many filters – divillysausages Apr 12 '12 at 08:08
Hi divilly - Those were the settings I used. – 1.21 gigawatts Apr 12 '12 at 16:16

score 3 · Answer 2 · answered Apr 12 '12 at 14:37

3

A drop shadow filter with a distance of 0 works too, the angle isn't important. Something like :

var shadow:DropShadowFilter = new DropShadowFilter(0, 90, 0x000000, 1, 10, 10, 10);
text.filters = [shadow];

answered Apr 12 '12 at 14:37

Barış Uşaklı

13,440
7
40
66

This is a little better than the glow filter. At the equivalent of a 1 to 2 weight stroke. Less than that it's too rough. Past that it's too blurry. I added a few comparisons in the original post. – 1.21 gigawatts Apr 12 '12 at 16:25

score 0 · Answer 3 · answered Apr 12 '12 at 05:51

0

You can't apply to text that way, but you can redraw the text as graphics and create the outlines that way.

You could use a library like degrafa, or look at (or use) the typography class inside five3d, that converts fonts into graphics Typography3D There is also an application that allows you to convert fonts to motifs, so you can use any font that way.

so essentially, it is possible, but the question is whether it is worth it.

answered Apr 12 '12 at 05:51

Daniel

34,125
17
102
150

I took a look at this. So you're saying if I convert my text to a bitmap (I know how to do this) then I can somehow add an outline to that? Is there an API for this? – 1.21 gigawatts Apr 12 '12 at 17:07
no, it's not bitmap. What it does is it converts the font glyphs into a series of drawing instructions. You can use those to draw the lines manually then. – Daniel Apr 12 '12 at 20:50
The fonts will be dynamic so I won't be able to embed them ahead of time. – 1.21 gigawatts Apr 13 '12 at 00:35
well there are other ways such as this: http://www.sakri.net/blog/2009/04/13/extract-shape-outline-points-from-bitmapdata/ – Daniel Apr 13 '12 at 04:08

How do you add a stroke to text?

3 Answers3