8 Replies Latest reply on May 6, 2016 7:12 AM by resdesign

    Edge Animate - split larger text into multiple textboxes

    xixao

      Hi all,

       

      I'm quite a newbie and I need some help with a very important uni project I'm working on.

       

      Basically, I'm trying to build an e-reader with some extra animated content (illustrations, text animations etc.).

       

      I've managed to get most of the effects working and I even managed to implement some things like GreenSock SplitText, but I'd really like to be able to get a big chunk of text (for example a short story) and divide it dynamically into prepared text boxes that I can use later to animate the book.

       

      Right now I have the text divided into boxes manually and it doesn't look too good - every text block has a different number of lines (cause I figured I have to end the block with a complete sentence) and I'd really love to have a whole block filled with text then neatly continuing on the next one.

       

      I have a feeling that I should be able to get the max number of lines that my box is able to show (box height vs height of the text in px) and somehow proceed to split/divide the rest of the text on to the next container/box.

       

      I'd be really grateful if anyone could give me some insight into this matter.

       

      Much obliged,

      Z.

        • 1. Re: Edge Animate - split larger text into multiple textboxes
          resdesign Adobe Community Professional & MVP

          I am not sure how  Greensock works in that case but I am wondering if it would not be better to use json or even an array in compositionReady to load the text. That way you text would be already split.

          • 2. Re: Edge Animate - split larger text into multiple textboxes
            xixao Level 1

            Thanks for a swift reply!

             

            Sure, I'm open to all and any solutions - no need for it to be a GreenSock implementation.

             

            Would you happen to have any basic code I could try with the metods you mentioned?

             

            Thanks a lot!

            • 3. Re: Edge Animate - split larger text into multiple textboxes
              resdesign Adobe Community Professional & MVP

              Of course it depends on how you load each book page. What event are you using?

              • 4. Re: Edge Animate - split larger text into multiple textboxes
                xixao Level 1

                Well right now I'm doing it manually - I assign something like 'sym.$('first').html("text on the first page");' for all the text boxes (basically for every page of the story).

                 

                I know this is probably a terrible implementation - that's why I need some help

                • 5. Re: Edge Animate - split larger text into multiple textboxes
                  resdesign Adobe Community Professional & MVP

                  OK. try this:  I named the boxes box1, box2, etc since I do not know what you named them.

                   

                  var info= [

                  {"text":"this is text for box 1", "box": "box1"},

                  {"text":"this is text for box 2", "box": "box2"},

                  {"text":"this is text for box 3", "box": "box3"},

                  {"text":"this is text for box 4", "box": "box4"},

                  {"text":"this is text for box 5", "box": "box5"}

                  ];

                   

                  for(i=0; i<info.length;i++){

                    sym.$(info[i].box).html(info[i].text);

                  }

                  • 6. Re: Edge Animate - split larger text into multiple textboxes
                    xixao Level 1

                    Thanks for your help!

                     

                    So now I have a few boxes named "box1", "box2", etc.

                     

                    I've tried changing the text in {"text":"this is text for box 1", "box": "box1"}, for something really long, to make sure it reaches the max height of the 'box1' container (460px) and the only thing that happened is that the long text keeps "filling" the first container all the way down, while only text in 'box2' is still "this is text for box 2".

                     

                    Any advice how to get the long text from 'box1' to continue in 'box2' when reaching the end height of the 'box1' container? Do I need some special setting for the box containers regarding width/height?

                     

                    Your help is much appreciated.

                    • 7. Re: Edge Animate - split larger text into multiple textboxes
                      resdesign Adobe Community Professional & MVP

                      Please PM me a link to your file so I can see what is wrong.

                      • 8. Re: Edge Animate - split larger text into multiple textboxes
                        resdesign Adobe Community Professional & MVP

                        OK. Add this to stage/compositionReady.

                        Make sure you change the info for the text in the array because I added some fake text.

                         

                         

                        resdesign wrote:

                        // here I put your first text and then some fake text. change to the text you need

                        var myText = ['t was the design of Angelo Ricci and Joe Czanek and Manuel Silva to call on the Terrible Old Man. This old man dwells all alone in a very ancient house on Water Street near the sea, and is reputed to be both exceedingly rich and exceedingly feeble; which forms a situation very attractive to men of the profession of Messrs. Ricci, Czanek, and Silva, for that profession was nothing less dignified than robbery.The inhabitants of Kingsport say and think many things about the Terrible Old Man which generally keep him safe from the attention of gentlemen like Mr. Ricci and his colleagues, despite the almost certain fact that he hides a fortune of indefinite magnitude somewhere about his musty and venerable abode. He is, in truth, a very strange person, believed to have been a captain of East India clipper ships in his day; so old that no one can remember when he was young, and so taciturn that few know his real name. Among the gnarled trees in the front yard of his aged and neglected place he maintains a strange collection of large stones, oddly grouped and painted so that they resemble the idols in some obscure Eastern temple. This collection frightens away most of the small boys who love to taunt the Terrible Old Man about his long white hair and beard, or to break the small-paned windows of his dwelling with wicked missiles; but there are other things which frighten the older and more curious folk who sometimes steal up to the house to peer in through the dusty panes. These folk say that on a table in a bare room on the ground floor are many peculiar bottles, in each a small piece of lead suspended pendulum-wise from a string.','text2 will be here','Add text3 here','And then more text here','This is the another text.'];

                        var boxes = ['box1','box2','box3','box4','box5','box'];  // these are the name of your text fields - they can be anything

                        // this is a for loop that load all the text in each box.

                        for(i=0;i<boxes.length;i++){

                          sym.$(boxes[i]).html(myText[i]);

                        }