Skip to main content
January 25, 2011
Answered

How to draw a line under the first paragraph

  • January 25, 2011
  • 1 reply
  • 1044 views

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 has been closed for replies.
Correct answer robin_briggs

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

1 reply

robin_briggsCorrect answer
Adobe Employee
January 25, 2011

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

February 1, 2011

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.

Adobe Employee
February 1, 2011

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