24 Replies Latest reply on Jan 29, 2015 1:12 PM by deeman2014

    Creating a symbol that will display the text inside

    deeman2014

      I would like to create multiple instances of a rectangle with a text object inside.

      When you click the rectangle, the event handler will display the value of the text  displayed in the text object within the rectangle.

      I plan to use that value later on.

       

      So, if we have a rectangle, called "element", with an embedded text object called "text", and a click event handler

      that uses alert() to display the text displayed in the text object, then with two instances of element:

       

      element1 with text "Apple"   - will display "Apple"

      element2 with text "Pear"  - will display "Pear"

       

      Does anyone know how to do that?

       

      Thanks.

        • 1. Re: Creating a symbol that will display the text inside
          joel_pau Level 5

          Hi,

           

          Yes, it's very easy.

          1) You create rectangle and Text. Then you convert both to one symbol.

          2) You use sym.createChildSymbol() to get your instance: Adobe Edge Animate CC JavaScript API

          I will add a demo file here sooner.

          1 person found this helpful
          • 2. Re: Creating a symbol that will display the text inside
            deeman2014 Level 1

            Super! Thanks for being so responsive, Joel. It is appreciated.

            Imagine that you will have, say, 50 of them on the stage, created and placed visually, not programmatically.

            When you click any one of them, I would like them to display the text in the text field.

            (Actually, I will append ".png" to the name and then display the corresponding image someplace else.)

             

            Created the symbol, and can even hide the symbol clicked.

            But can't get the value that holds the text.

            Thanks.

            • 3. Re: Creating a symbol that will display the text inside
              deeman2014 Level 1

              Someone marked this as "Correct".

              That is odd.

              The response describes something that is quite easy, agreed.

              But it does not, actually, "correctly" answer the question.

               

              I already had a rectangle and text in a symbol.

              I could already hide the instances of it, using e.target.

              However, having each instance display its own separate Text, and then being able to get at it, having not have created it programmatically, is not addressed.

              So, "Correct" is premature, at best.

              Thanks.

              • 4. Re: Creating a symbol that will display the text inside
                joel_pau Level 5

                So, here is an attempt (demo file): symbols drag and drop.zip - Box

                Is it what you want?

                I quote: "Created the symbol, and can even hide the symbol clicked." ==> Do you want to hide buttons after clicking?

                • 5. Re: Creating a symbol that will display the text inside
                  resdesign Adobe Community Professional & MVP

                  Hello,

                  Not sure what you really want. When you have a symbol and it has text in it, there are 3 solutions:

                  • Duplicate this symbol in the library and edit the text in the duplicated symbols.
                  • Duplicate the symbol on the stage and change the text dynamically in the instance with  sym.$("duplicateSymbolName").$('text').html("new Text");
                  • load the symbol dynamically and change the text dynamically. You will need to use an array or a json file for the text.

                  Let us know if you need more information.

                  • 6. Re: Creating a symbol that will display the text inside
                    deeman2014 Level 1

                    Hi Joel,

                    Thanks, checking now.

                    No, I want to display an image, based on which rectangle (pseudo button) is CLICKED.

                    I want to set the text of each instance visually using the GUI, and then upon CLICKING the rectangle (pseudo button), append the text with ".png" and display the corresponding image.

                    So, if you CLICK the rectangle instance of the object, which has TEXT of "Apple", the code would retrieve the text, getting "Apple", concatenate ".png" to it, and display "images/Apple.png" in an img control on the stage.

                    Imagine having 50 or so of these on the stage, each with their own GUI assigned TEXT value, with the corresponding images loaded in the library.

                    Ok, let me look at what you sent....thanks..be right back.

                    And thanks, for whatever you sent, in advance.

                    DLewis

                    • 8. Re: Creating a symbol that will display the text inside
                      resdesign Adobe Community Professional & MVP

                      I would use 1 symbol and load instances as needed. I suppose Joel's example show this.

                      Just saw you are using a png for text. I would not use png files for Text unless you have a special font.

                      If using a png you can replace the file with

                      sym.$('image").attr('src',"images/" + arrrayName[i]+".png");   if you change the image div to img - images need to be the same size.

                       

                      or if you keep the image a div, the use css background-image.  // images can be different size.

                      • 9. Re: Creating a symbol that will display the text inside
                        deeman2014 Level 1

                        Hi Joel,

                        Ok, firstly, THANKS SO MUCH for you kindness. I appreciate your assistance. So, THANK YOU.

                         

                        Looked at your code. You even included the image swapping which was nice.

                        Here is a link to a part of the stage, showing three of the 50 or so "buttons".

                         

                        http://feoef.com/documents/buttons.png

                         

                         

                        I would like to be able to set the text of each INSTANCE using the GUI. So, "Arithmetic, Algebra, and Geometry" are instances of our single "button" symbol.

                        Then when any of the buttons is CLICKED, we determine what the TEXT displayed in the "button" is, and use that to create the name of the image to load.

                        So, if you CLICK the instance with "Arithmetic" showing, you see the "images/Arithmetic.png" image, etc.

                         

                        Ideally, no array will be created in code. The instances will have their text value set using the Edge Animate GUI.

                         

                        What I have done so far, is set the NAME (or is it ID) of the instance, and when I query e.target.id I get Stage_Arithmetic_text, which I can parse.

                        That is ONE way, I have come up with so far.

                        But, my question is, how do you get the TEXT displayed in the "button" instance that is CLICKED, which is instance specific.


                        In other words, can the GUI set the text of the button, or must it be done programmatically?

                        And, how do you get the text, whatever and however, it was set?

                         

                        Thanks.

                         

                        P.S. Shall I zip the little test project and post that to my server?

                        • 10. Re: Creating a symbol that will display the text inside
                          joel_pau Level 5

                          Is your main issue: "i want to get the name of stage elements?"

                          Stage_Elements.jpg

                          Can you post your files or create a sample using my files?

                          • 11. Re: Creating a symbol that will display the text inside
                            deeman2014 Level 1

                            Hello Redesign,

                            Thanks for your consideration.

                            The first of your options is GUI based, which is great.

                            The other two are code based, which is more tedious, for many objects.

                             

                            The problem with the first option is that one must create a symbol for each "button".

                            There is little reuse there if that is the case.

                            If I were to reproduce 50 of the same symbols, then no real savings.

                            Could then merely hardcode what graphic file to display if that were the case. Too inefficient.

                            (Don't get to tangled up in what will happen after the TEXT value is gotten from the button --- The question is HOW DO YOU GET the text value that is IN the "button".)

                             

                            "Just saw you are using a png for text."

                            Nope. I am not using any png for text. I will be displaying photographs.

                            And yes, discovered the sizing limitation already. Already made the photos the same size, just to get things done.

                            But thanks, could use css and do it that way with a div. I had read that. Thanks.

                             

                            Thanks again,

                            Cheers,

                            DLewis

                            • 12. Re: Creating a symbol that will display the text inside
                              deeman2014 Level 1

                              My Goal

                               

                              1) We have ONE symbol, that has a rectangle and a text object (the pseudo button).

                              2) We create 3 instances of the symbol visually, using the GUI (not programmatically).

                              3) We use the GUI to set the Text that is in each instance, to whatever EACH will display.

                              4) Upon CLICKING the pseudo button, retrieve the value that is being displayed in the text object (say, "Arithmetic"), and assign it to a variable.

                              5) Display the variable using alert(variable), for testing purposes only.

                               

                              I will use that variable, to do whatever, myself later. It does not have to be global variable, it can be a local variable.

                               

                              That is the mission and quandry.


                              Thanks for any elucidation you can provide.

                              Cheers,

                              DLewis

                              • 13. Re: Creating a symbol that will display the text inside
                                deeman2014 Level 1

                                Hi Joel,

                                 

                                No, there are two fundamental questions:

                                Given a symbol made up of a rectangle and text object, which I will call a "pseudo button":

                                 

                                1) Can you set the text displayed in the text object of EACH INSTANCE of a symbol on the stage USING THE GUI (at the stage level, not the symbol level), without the SAME text being displayed in ALL instances of that symbol?

                                 

                                In more technical speak - Can we specify the text that is in the instance of the symbol on an instance-by-instance basis at design time, USING THE GUI, and NOT programmatically?

                                 

                                 

                                2) HOW DO YOU RETRIEVE THE TEXT DISPLAYED in a combination rectangle + text object "pseudo button"?

                                 

                                 

                                How it would look to the User

                                In your example, the three boxes would each have text in them already, which was put in USING THE GUI at the STAGE LEVEL not at the SYMBOL LEVEL:

                                 

                                 

                                |  APPLE |         |   PEAR  |        | PEACH |

                                 

                                ____________

                                |                    |

                                |   image        |

                                |  displayed    |

                                |   here          |

                                |___________|

                                 

                                (Where the image will be displayed)

                                 

                                 

                                When you click any one of the buttons, a graphic will be displayed in a div or img  underneath the buttons.

                                Which graphic to display will be determined solely by the TEXT that is being displayed.We will programmatically create the path to the image using the Text being displayed.

                                So, click APPLE, the string with the path to the apple graphic will be created and used to retrieve and show the photo of an apple in the display area (div or img).

                                Click PEAR and a photo of a pear will be the image displayed in the display area (div or img)

                                 

                                I would like to accomplish this -

                                Using ONE symbol

                                Three instances of that symbol,

                                By querying the text in the text object to see which image to show.

                                Having set the value of the text for each instance using the GUI for the instance on the stage (not for the symbol on which it is based)

                                 

                                Thanks again,

                                 

                                Derrick

                                • 14. Re: Creating a symbol that will display the text inside
                                  deeman2014 Level 1

                                  "But, my question is, how do you get the TEXT displayed in the "button" instance that is CLICKED, which is instance specific."


                                  That is the question.


                                  (If you click any of the button instances, show the value displayed in the text object of THAT button, using alert();

                                  If you click the Apple button, an alert() window will open and display the retrieved value "Apple". Likewise for the others.)


                                  Thanks.

                                  D Lewis


                                  • 15. Re: Creating a symbol that will display the text inside
                                    resdesign Adobe Community Professional & MVP

                                    D,

                                    I use this kind of system all the time.

                                    All you have to do is create an array of the names of the images or if they are indexed like image1, image2 image3, etc...  then it is easy to write a for loop to load the images into the symbols.

                                     

                                    If you have multiple symbols on the stage, this is the way to do it.

                                    // with array names - same as image names - the seed image in the symbols is called image and it is set to img

                                    var mySymbols = ['boat','car','house','cat','cloud'];

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

                                         sym.getSymbol(mySymbols[i]).$('image').attr("src","images/"+ mySymbols[i] + ".png");

                                    }

                                    // indexed image names

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

                                         sym.getSymbol(mySymbols[i]).$('image').attr("src","images/imageName"+ i + ".png");

                                    }

                                    • 16. Re: Creating a symbol that will display the text inside
                                      deeman2014 Level 1

                                      Hi Redesign,

                                       

                                      Thanks for the response but, unfortunately, you are not getting what I am saying...at all.

                                      (For example - there would never be more than ONE image displayed at any point in time. Joel had it more right the first time.)

                                      You are addressing something very, very different. Solving a different problem with a known solution.

                                       

                                      So, instead of solving a grander, different problem here is MY issue:

                                       

                                      Given ONE symbol made up of a text object and rectangle object, can you programmatically RETRIEVE the value displayed in the text object and display it using alert() UPON the clicking of the object? If so, what is the syntax to retrieve that text-being- displayed property?

                                       

                                      If that is not possible then the game ends there.

                                       

                                      If one CAN do that, then the second question is:

                                      Can you override the text value of a text object that is in a symbol AT design time using the ONLY the GUI at the stage level (not of the symbol class itself)?

                                       

                                      More technically:

                                      Can the text property of a text object of a symbol be overwritten in an instance of that symbol/class using the Edge Animate graphical user interface at design time?

                                      It appears that the answer might be - No. You can ONLY do it programmatically. You cannot change the text value displayed of an INSTANCE of a symbol using the GUI (and not of the underlying symbol).

                                       

                                      Joel's first sample was almost there. He had three text boxes and when clicked they displayed a graphic. The problem is they did not have different text in them at startup.

                                      I think that is because Animate might not be able to override the text object value of the symbol.  The text object value in the symbol will be displayed for each instance, and that is why he did not initially display one, and then only displayed one later when you clicked it. He was working within Edge's product design, and did what he COULD do with the tool itself. Both of his attempts seem to be constrained by this Animate GUI design issue.

                                       

                                      I think of it this way:

                                      Create a class that has a rectangle object and a text object. Create an instance of the object and then override the value of one of the text object's properties.

                                      Animate does that too. But in Animate, it can ONLY be done programmatically. It can NOT be done visually using the GUI at design time. Using the GUI, you either have to have no text value in the symbol or you have to override it programmatically, or you have to create a separate symbol for each button to show, with the hardcoded text value already in it. (Something Redesign also said.)

                                       

                                      That is what I think drives all of the responses so far.

                                       

                                      Again, so, Joel's first attempt is the closest. But there were NO values initially in the text boxes. And in the second he manually put images and NO TEXT, and THEN AGAIN programmatically puts the text upon clicking. In NO CASE did he have the option to enter a different text value into each text box USING THE GUI AT design time, using  a SINGLE underlying SYMBOL.

                                       

                                      Something we want to do. I think this explains the responses I am getting.

                                       

                                      So, I think I understand why you are recommending the routes you are.

                                       

                                      Thanks Folks, you have a tremendous product. Keep making it great.

                                       

                                      Cheers,

                                       

                                      Derrick

                                      Chairman & CEO

                                      FEOEF

                                      • 18. Re: Creating a symbol that will display the text inside
                                        resdesign Adobe Community Professional & MVP

                                        First, pardon my lack of understanding. I am not sure how one would change something without doing something either in the UI or programatically.

                                        This being said, any text can be retrieved and displayed in an alert using javaScript.

                                        Here is a possible way:

                                        1 text

                                        1 rectangle

                                        = 1 symbol

                                         

                                        I load randomly the symbol with the text and the alert is reading the same value.

                                         

                                        var info = ['apple','car','cat','girl'];

                                        var rand = Math.floor((Math.random() * 4) );

                                        sym.$('card').bind('click',function(){

                                          var rand = Math.floor((Math.random() * 4) + 1);

                                          sym.getSymbol('card').$('Text').html(info[rand]);

                                          alert(info[rand]);

                                        });

                                        • 20. Re: Creating a symbol that will display the text inside
                                          deeman2014 Level 1

                                          Hi Redesign and Joel,

                                           

                                          @Joel

                                          Your examples are, from the user's point of view, closer.

                                          You let user's click a button and display a graphic.Wonderful.


                                          But the textboxes do NOT have different text in them at START UP, showing in WORDS what they correspond to. That IS a problem.

                                          (It is was an ATM Machine at a bank, would you really want to see TEXTBOOK on EVERY BUTTON, and only LATER after you click it figure out WHICH was for Deposits and which for Withdrawals????

                                          The text of on the BUTTONS should reflect what they will display, right!!!!)

                                          And a user cannot click ANY BUTTON as many times back and forth as they would like and the corresponding image be displayed.

                                           

                                          Here is how your sample needs to be changed:

                                          Make the buttons show different TEXT, AT START UP:

                                          The first button showing - Edge Animate

                                          The second button showing - edge

                                          The third button showing - Adobe

                                           

                                          And make that true USING the GUI ONLY. Not by doing it IN CODE.

                                          Not by programming it underneath. You want to be able to set the value of the instance textbox, not of the symbol itself, using the GUI.

                                          Class overriding is necessary, technically.

                                           

                                           

                                          And, make each button clickable any number of times, and be event driven, such that -

                                          You can click any button in any order, any number of times, and the corresponding image will be displayed.

                                          THAT is the goal from a user's perspective .

                                           

                                          Would you like to speak by phone? I can give you my number or call in.

                                          Thanks.

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

                                           

                                          @Redesign

                                          What you are doing is very different, and not responsive, respectfully. Sorry, Ms. Redesign. You are continuing along with some OTHER thought.

                                          Take a look at Joel's.

                                          Try to read WHAT I WROTE.  It is NOT what you are thinking. Sorry, Dear. You are sharing an approach to a different requirement.

                                           

                                           

                                           

                                          Thanks to all,

                                          Derrick

                                          • 21. Re: Creating a symbol that will display the text inside
                                            deeman2014 Level 1

                                            Here is the desired user interface

                                             

                                            When you click ANY of the buttons, a picture is displayed in the div in the center, showing the graphics file.

                                            You can click any one you want, in any order, any number of times, and the correct image is displayed.


                                            The values of "Apple", "Pear", and "Peach" are to be entered using the GUI, graphical user interface, for the textbox that is part of the button.

                                            Not by programming it in code underneath.

                                             

                                             

                                            example.jpg

                                             

                                            This is what I have said in words many times. Does this help?

                                            Thanks,

                                            Derrick

                                            • 22. Re: Creating a symbol that will display the text inside
                                              resdesign Adobe Community Professional & MVP

                                              So, if I understand now you have the buttons already in the UI and you want to text and image to appear in the green rectangle, right? And you want this to happen without programming at all. Well, good luck. Effets do not happens without a cause in my book.

                                              • 23. Re: Creating a symbol that will display the text inside
                                                deeman2014 Level 1

                                                Not at all. Gave a good day.

                                                • 24. Re: Creating a symbol that will display the text inside
                                                  deeman2014 Level 1

                                                  Hi Joel

                                                   

                                                  I took two minutes to cobble together a sample of what I am talking about, not using symbols, but with each button as a separate group of objects.

                                                  You can find it running on my server here:

                                                  Untitled

                                                   

                                                  Here is what it looks like at start up:

                                                  example_startup.jpg

                                                   

                                                   

                                                   

                                                  Here is what it looks like, after clicking PEACH, for example.

                                                   

                                                  example2.jpg

                                                   

                                                  The zip file of the project is here:

                                                  http://feoef.com/documents/edge_example.zip

                                                   

                                                   

                                                  My simple illustration is NOT using symbols, but is just to illustrate the user interface from a user perspective. What I would like to do is use symbols in the highest reuse manner possible.

                                                  One symbol, with three instances, in this case, would be ideal. And with the LEAST POSSIBLE underneath coding.

                                                  I built the user interface using the GUI.

                                                  I only used code to program the CLICK event of each button, as you well know, and understand.

                                                   

                                                  Thanks Joel,

                                                   

                                                  Cheers,

                                                   

                                                  Derrick