Skip to main content
Jan 25, 2011 4:30 PM UTC
Answered

How to draw a line under the first paragraph

Hi there,

I'm trying to solve a following problem: my text field should be divided into two parts, horizontally. First part is for a synopsis, and second one is for body. I need to visually divide them by drawing a line between them. The logic is to take the first paragraph and make it a synopsis. The rest is the body. So I need to be able to get the height of the first paragraph in order to draw the line at the right position. And I will have to adjust its position whenever user scrolls the text.

Any ideas how to go about this?

cheers,

Jan

This topic is closed to new replies. Start a new post to keep the conversation going.
robin_briggsCorrect answer
Adobe Employee
Jan 25, 2011 6:05 PM UTC

There's a discussion of various ways to do this in this thread:

    http://forums.adobe.com/message/3382440#3382440

You may also find the recent blog posting helpful:

    http://blogs.adobe.com/tlf/2011/01/decoration-example.html

- robin

4 replies

robin_briggsCorrect answer
Adobe Employee
Jan 25, 2011 6:05 PM UTC

There's a discussion of various ways to do this in this thread:

    http://forums.adobe.com/message/3382440#3382440

You may also find the recent blog posting helpful:

    http://blogs.adobe.com/tlf/2011/01/decoration-example.html

- robin

Translate
Feb 1, 2011 4:47 PM UTC

Thanks Robin, that works fine. I've got another challenge now, which is to insert some spacing between those two text lines where the horizontal line is displayed. I was hoping to use leadingModel=box but it doesn't seem to make any difference for me.

Here's what I'm doing to display a horizontal line:

private function updateSkinPosition():void     {         var lastFlowLineOfFirstParagraph:TextFlowLine             = findLastFlowLineOfFirstParagraph(textFlow.flowComposer);         lastFlowLineOfFirstParagraph.getTextLine().addChild(skin);         skin.y = 10;         // we expect the skin to have update(width) method         if (skin.hasOwnProperty("update"))         {             Object(skin).update(width);         }         // we offset the skin so that calculation inside the skin can assume that x=0 is the left         // edge of the container         skin.x = -lastFlowLineOfFirstParagraph.getBounds().left;     }

and the skin just draws a line:

public function update(width:Number):void     {         graphics.clear();         graphics.lineStyle(1, 0xff0000);         graphics.moveTo(0, 0);         graphics.lineTo(width, 0);     }

Thanks for suggestions.

Translate
Adobe Employee
Feb 1, 2011 11:26 PM UTC

If the line goes *after* the paragraph, you could set the paragraphAfterSpace on the paragraph, which will allow you force a little extra space after the paragraph and before the next text.

- robin

Translate