5 Replies Latest reply on Apr 5, 2012 3:37 PM by Mister MUX

    Lines Between Text...

    GRAMOPHONE Level 1


      Is there a way to render text member or text field with lines between every line of text like this?

      I mean like a table without vertical lines...



      The Guts Of living In New York City
      The Guts Of living In New York City
      The Guts Of living In New York City
      The Guts Of living In New York City
      The Guts Of living In New York City
      The Guts Of living In New York City
      The Guts Of living In New York City



        • 1. Re: Lines Between Text...
          Mister MUX Level 2

          Try this. Create a bitmap member in your cast. Just draw a box or something in it, it doesn't matter because the code will create the table image. Place the member in the sprite channel immediately following your text member. Then attach the following behavior to the bitmap. Run the movie and see if it is what you are looking for. You can adjust the FixedLineSpace property of the text member to create more "whitespace" around the text. Also the text can not wrap or the code will break (if it looks like your example it will be OK).


          ------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------ ----------------------

          property spriteNum


          on beginSprite me

            textSprite = sprite(spriteNum - 1)

            verticalAdj = (textSprite.member.fixedLineSpace - textSprite.member.fontSize) / 2

            boxSprite = sprite(spriteNum)

            tableImage = image(textSprite.width, textSprite.height, 24)

            tableImage.fill(0, 0, tableImage.width, tableImage.height, [#shapeType: #rect, #lineSize: 1, #color: rgb(255, 255, 255), #bgColor: rgb(0, 0, 0)])

            numLines = textSprite.member.line.count - 1

            repeat with lineNum = 1 to numLines

              y1 = textSprite.member.fixedLineSpace * lineNum

              y2 = y1 + 1

              tableImage.fill(0, y1, tableImage.width, y2, [#shapeType: #line, #lineSize: 1, #color: rgb(255, 255, 255), #bgColor: rgb(0, 0, 0)])

            end repeat

            boxSprite.width = tableImage.width

            boxSprite.height = tableImage.height

            boxSprite.member.image = tableImage

            boxSprite.member.regpoint = point (0,0)

            boxSprite.loc = textSprite.loc + point(0, verticalAdj)

            boxSprite.ink = 36


          ------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------ ----------------------

          • 2. Re: Lines Between Text...
            GRAMOPHONE Level 1

            It only render a square around the text member. Another thing that I notice is that if you scroll the text member, the square stays inmobile.

            • 3. Re: Lines Between Text...
              James Newton, ACP Level 3

              Here is a behavior that allows you to select multiple lines in a text member, by displaying a bitmap member above it. When you scroll the text member, the selected lines move with the text. (This actually works better with a custom scrollbar than with the built-in text scrollbars)




              Are you able to adapt the imaging lingo so that draws a single line between each line of text, rather than a solid selection line? Would this be a potential solution for you?

              • 4. Re: Lines Between Text...
                rduane Level 1

                Oh-ho!  You didn't mention that you wanted to be able to scroll the text too!  I actually thought Mister MUX's script was extremely clever - and BTW, it worked just fine for me.  (Note that the script depends on your text member actually having multiple lines of text in it - separated by carriage returns - to draw the intervening lines.)  But sometimes I think we have a tendancy to make solutions overly complicated on here.  Maybe not.  But let me ask you this: did you ever think of just selecting all the text in the text castmember, and then hitting the underline button?  Of course, you want the line to go all the way across.  Simple: just end every line of text with a TAB character, and make sure the only tab is out by the rightmost edge of the member.

                • 5. Re: Lines Between Text...
                  Mister MUX Level 2

                  Try this one, it moves the lines as you scroll



                  Message was edited by: Mister MUX  No functional changes, Tightend up the code a little. I jmoved a couple of lines out fo the drawTable handler that didn't need to be executed every time. Also was unnessecarily drawing more lines than needed, though you couldn't see them as they were being drawn outside of the images rect.


                  ------------------------------------------------------------------------------------------ ---------------------------------------------


                  property spriteNum, pPreviousScrollTop, pTextSprite, pBoxSprite, pTableImage, pNumLines, pVertAdj


                  on beginSprite me

                    pTextSprite = sprite(spriteNum - 1)

                    pTextSprite.member.scrollTop = 0

                    pNumLines = pTextSprite.member.line.count

                    pVertAdj = (pTextSprite.member.fixedLineSpace - pTextSprite.member.fontSize) / 2

                    pTableImage = image(pTextSprite.width + 2, pTextSprite.height + 2, 24)

                    pBoxSprite = sprite(spriteNum)

                    pBoxSprite.width = pTableImage.width

                    pBoxSprite.height = pTableImage.height

                    pBoxSprite.ink = 36

                    pBoxSprite.loc = pTextSprite.loc




                  on exitFrame me

                    if pTextSprite.member.scrollTop <> pPreviousScrollTop then drawTable(me)



                  on drawTable me

                    pPreviousScrollTop = pTextSprite.member.scrollTop

                    pTableImage.fill(0, 0, pTableImage.width, pTableImage.height, [#shapeType: #rect, #lineSize: 1, #color: rgb(255, 255, 255), #bgColor: rgb(0, 0, 0)])

                    repeat with lineNum = 1 to pNumLines - 1

                      lineLocV = pTextSprite.member.fixedLineSpace * lineNum - pTextSprite.member.scrollTop + pVertAdj

                      if lineLocV > 0 and lineLocV < pTextSprite.height then pTableImage.fill(0, lineLocV, pTableImage.width, lineLocV + 1, [#shapeType: #line, #lineSize: 1, #color: rgb(255, 255, 255), #bgColor: rgb(0, 0, 0)])

                    end repeat

                    pBoxSprite.member.image = pTableImage

                    pBoxSprite.member.regpoint = point (1,1)