19 Replies Latest reply on Jun 18, 2014 1:53 PM by btaartdirector

    Text formatting in Edge Animate.

    unsocialplanet

      Hello,

       

      I was wondering whether or not anyone could help me with formatting text in Edge Animate. I am currently putting together a series of interactive quizzes, and while picking up how to create transitions and animations, etc. has been pretty quick. I cannot for thhe life of me figure out how to format text within a text box. For example: I need to display:

       

      "Of all Tolkien’s books, the one which I prefer is The Hobbit."

       

      While it is easy enough to get the entire text box into italics, I can't figure out how to set "which I prefer" as bold-italic within the text box.

       

      Any help would be much appreciated.

       

      Thanks

        • 1. Re: Text formatting in Edge Animate.
          chuba21 Level 2

          Hi unsocial

           

          I think you can use html to do that, always you are 'injecting' the text dynamically:

           

          sym.$('textField').html('Of all Tolkien’s books, the one <span style="font-weight:bold">which I prefer</span> is The Hobbit.');

           

           

          I didn't test the code, but I think you'll get a general idea.

           

          Hope that works, please advise. Adrian

          • 2. Re: Text formatting in Edge Animate.
            unsocialplanet Level 1

            Hi Adrian,

             

            Thanks for the code. I'm a bit of a noob when it comes to coding though. I don't suppose you'd know where to put that line of code? Can I put it in through Edge Animate, or do I need to put it into the javascript itself?

             

            Thanks again,

             

            Curtis

            • 3. Re: Text formatting in Edge Animate.
              resdesign Adobe Community Professional & MVP

              Put is in stage composition ready or where you need it.

              HEre is a sample file of using an array for text. Use html formatting as desired between the ""

               

              https://www.box.com/s/ddci4qeyh8nlxn4g7usl

               

              here text with color you can change in the array to:

              title: "your text <font color='red'>here</font> for title 1",

               

              Here is a text formatted in edge stage composition ready:

              sym.$('text').html("<p>this is some text</p><ul>title<li>first row</li><li>second row</li></ul><p><font color='red''>This text is red</font></p>");

               

              you can also use css for formatting text.

              Let me know if you need a sample.

              • 4. Re: Text formatting in Edge Animate.
                chuba21 Level 2

                I supposed you would point your text field from stage.compositionReady

                 

                Somthing to take in count is the use of the quotes if you enclose your text between double quotes, use single quotes to enclose the attributes of the tags.

                • 5. Re: Text formatting in Edge Animate.
                  resdesign Adobe Community Professional & MVP

                  I had a typo in this line - 'red' needs just one single end quote :

                  sym.$('text').html("<p>this is some text</p><ul>title<li>first row</li><li>second row</li></ul><p><font color='red'>This text is red</font></p>");

                  • 6. Re: Text formatting in Edge Animate.
                    Gnoggin01 Level 1

                    I think I found a workaround for you:

                     

                    Add the copy you want inside a text box in Aniamte, and then save the project.  Now open the "yourfilename_edge" Javascript file in something like Dreamweaver.  Search for that text and add your HTML tags there (<I>Your Text</I>).  Save the JS file and when you go back to your Animate porject the text will be formateed.  Crappy workaround, but at least there is one.

                     

                    Hope that helps,

                    Chris

                    • 7. Re: Text formatting in Edge Animate.
                      Xoco Level 3

                      And for RGB combination color?

                       

                      Thanks.

                      • 8. Re: Text formatting in Edge Animate.
                        resdesign Adobe Community Professional & MVP

                        hey, I have an example with all the different formats and also random colors:

                         

                        https://app.box.com/s/pagu0h315j9en73bxxg0

                        • 9. Re: Text formatting in Edge Animate.
                          resdesign Adobe Community Professional & MVP

                          Note: Sample abobe updated because of code error between Rectangle and Ellipse - added class for text.

                          for  a box, you can also use rgba:

                          sym.$('RoundRect').css({'background-color': 'rgba('255,255,255,1.0'});

                           

                          for  a text:

                          sym.$('TextField').css({'color': 'rgba('255,255,255,1.0'});

                           

                          in the sample above you could add for the text randomized color with rgb:

                          sym.$('result1').css({'color':"rgb("

                                      + randomColor(255) + ","

                                      + randomColor(255) + ","

                                      + randomColor(255) + ")"});

                           

                           

                          Good idea about formatting in dreamweaver or WYSIWYG software for html text.

                           

                          Note: when you have lots of different text fields or shapes for which you want to change the color at the same time, you can use a class name and then change it that way:

                           

                          text:

                          sym.$('.myText').css({'color':"rgb("

                                      + randomColor(255) + ","

                                      + randomColor(255) + ","

                                      + randomColor(255) + ")"});

                           

                           

                          box:

                           

                          sym.$('.myShapes').css({'background-color':"rgb("

                                      + randomColor(255) + ","

                                      + randomColor(255) + ","

                                      + randomColor(255) + ")"});

                          1 person found this helpful
                          • 10. Re: Text formatting in Edge Animate.
                            Xoco Level 3

                            sym.$('TextField').css({'color': 'rgba('255,255,255,1.0'}); // here missing a parenthesis after 0 and not necessary single quote before 255 Lapsus calami


                            Thanks, finally I used sym.$('CAT').css({'color': 'rgb(37,37,37)'});

                            • 11. Re: Text formatting in Edge Animate.
                              resdesign Adobe Community Professional & MVP

                              right! Sorry about that!

                              • 12. Re: Text formatting in Edge Animate.
                                vimster303909

                                Hi,

                                 

                                that method:

                                sym.$('textField').html('Of all Tolkien’s books, the one <span style="font-weight:bold">which I prefer</span> is The Hobbit.');

                                 

                                 

                                could this work within a textframe that is inside a Symbol???

                                 

                                (I can get it to work for a simple text frame directly on the stage, but not for a textframe that is inside a symbol)

                                 

                                 

                                any ideas?

                                 

                                 

                                 

                                thanks, j

                                • 13. Re: Text formatting in Edge Animate.
                                  resdesign Adobe Community Professional & MVP

                                  This should not be a problem in a symbol - It depends where you add the code and how.

                                  If you are in compositionReady, use:

                                   

                                  sym.getSymbol('yourSymbolName').$('textField').html('Of all Tolkien’s books, the one <span style="font-weight:bold">which I prefer</span> is The Hobbit.');

                                  1 person found this helpful
                                  • 14. Re: Text formatting in Edge Animate.
                                    vimster303909 Level 1

                                    hi,

                                     

                                    thanks a lot! works like charm!

                                     

                                     

                                    j

                                    • 16. Re: Text formatting in Edge Animate.
                                      Emmy52

                                      Hello,

                                       

                                      Could you please tell me how to change the colour of a single word in my text block at a specific time in the timeline?  I am trying to sinc a voice reading and the words changing colour at the same time. 

                                       

                                      I originally did this in an epub with smil files but I cannot figure out how to use those in edge.  I am guessing there is probably a way to do what I need right in edge itself, but I haven't the faintest idea where to begin.

                                       

                                      Any help you can provide would be greatly appreciated.

                                       

                                      All the best!

                                      • 17. Re: Text formatting in Edge Animate.
                                        iwywaw Level 1

                                        Hey Emmy, there will probably be a better solution than this but here's what I'd do:

                                         

                                        1. Insert a trigger on the timeline where you'd like the text color to change. (CTRL+T) or Timeline -> Insert Trigger

                                        2. Enter the following code on each trigger, placing the span tags around the word(s) that you want to color:

                                         

                                        sym.$("YourTextElement").html("The word <span style='color:#ff0000;'>Emmy</span> should be red.");

                                         

                                        Hope that helps!

                                        -Doug

                                        • 18. Re: Text formatting in Edge Animate.
                                          Emmy52 Level 1

                                          Thanks Doug!  I played around with this a bit and I think I understand.  I have to include the whole text of the text block in each trigger, and then use the span tag around the one word I want to change.  Now I just have to work out the timing of the voice and the words together… I’ll give it a try and see what happens.

                                           

                                          Thanks again!

                                           

                                          Emmy

                                          • 19. Re: Text formatting in Edge Animate.
                                            btaartdirector Level 1

                                            Gnoggin01 Your solution is the only one that worked for me. I see people needing just a few words in their text elements, but I needed a few paragraphs that also contained some code modifiers and code punctuations in the text. Here's what I ended up doing, and the \"  in the style information is very important!! The following is in the yourfilename_.edge.js

                                             

                                            text: 'Fishing fans will want to catch the <span style=\"font-weight:700;\">Cabela’s King Kat Fishing Tournament &amp; Kid’s Fishing Rodeo</span> (May) and the <span style=\"font-weight:700;\">WV Bass Tournament</span> (June).  The backwaters of Cheat Lake and Little Sandy Creek are prime spots for anglers!<br>Family-owned Padlz Canoe &amp; Kayak Rentals in Bruceton Mills offers fun on the water for all ages and skill levels. Several deer, ducks, turtles, blue heron, beaver and an otter family have been spotted on the flat waters of the Big Sandy River and the small Bruceton Lake.<br>Pack some power into your visit and discover all 14 acres of beautiful Cheat Lake on a jet ski or motorboat; don’t forget the skis and tubes! ',