14 Replies Latest reply on Feb 11, 2018 11:06 PM by mehmetk89082497 Branched to a new discussion.

    Assigning XML content to dynamic text fields

    TapLuke

      Hey there,

       

      after searching through the forums, I have found that I can load XML files and content to Animate CC by using the XMLHttpRequest, but how do I load the content into a specific dynamic text field?

       

      I have found some answers that confirm that we should be using XMLHttpRequest and some users that have made it work, but not how. Any help would be very appreciated.

       

      Below you can find how I added the request and how the dynamic field has been set up.

       

      this.frame_0 = function() {

        var xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function() {

           if (xhttp.readyState == 4 && xhttp.status == 200) {

           myFunction(xhttp);

           }

        };

        xhttp.open("GET", "name.xml", true);

        xhttp.send();

       

        function myFunction(xml) {

           var xmlDoc = xml.responseXML;

           document.getElementsByTagName("nameTextField").innerHTML = /*this part is not correct, but for now I have not found any better solution */

           xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

        }

       

      }

       

      And for the text field (created by Animate CC):

       

      this.nameTextField = new cjs.Text("", "53px 'Arial'");
      this.nameTextField.name = "nameTextField";
      this.nameTextField.textAlign = "center";
      this.nameTextField.lineHeight = 61;
      this.nameTextField.lineWidth = 388;
      this.nameTextField.setTransform(265,124.4);

       

       

      this.timeline.addTween(cjs.Tween.get(this.nameTextField).wait(2));

       

      I really hope anyone can help, I have spent hours searching and trying solutions.

       

      Cheers,

       

      Luke

        • 1. Re: Assigning XML content to dynamic text fields
          ClayUUID Adobe Community Professional

          Is it really necessary to create a textfield from scratch? This would be far simpler if you were just assigning to the .text property of a textfield already on the stage.

          1 person found this helpful
          • 2. Re: Assigning XML content to dynamic text fields
            Colin Holgate MVP & Adobe Community Professional

            Maybe this doesn't involve FLAs at all. You wouldn't normally write code like:

             

             

            this.frame_0 - function...

             

            or

             

            this.timeline.addTween(cjs.Tween.get(this.nameTextField).wait(2));

             

            That is how it is after you have published, but normally you use the power of the Animate environment to make it easier for you. As with Clay suggesting to just have an existing textfield, and setting its .text value. If you do need to add something at runtime, like say if sometimes you needed five fields, and sometimes 8, having a library symbol that holds a textfield would be as simple as:

             

            var t = new lib.MyTextHolder();

            this.addChild(t);

            t.nameTextField.text = "some text";

             

             

            1 person found this helpful
            • 3. Re: Assigning XML content to dynamic text fields
              TapLuke Level 1

              Thanks for the fast responses, Clay and Colin.

               

              This is exactly what I actually meant, how do I assign a XML tag to the .text property of a textfield already on stage? This is what I have been struggeling with.

               

              I created and animated dynamic text fields in Animate, gave it a specific names. Then I have a XML document which has several headlines (<title>), content (<content>) and URLs (<link>). Then I was trying to assign the content from the XML document to the different text fields, but with no success.

               

              I originally posted the source code to show how I tried it (and THAT I tried it ). Sorry for creating confusion.

               

              Is there a way? And where would I add the code, with the actions panel or adapting the js file afterwards?

              • 4. Re: Assigning XML content to dynamic text fields
                ClayUUID Adobe Community Professional

                So, fetching an XML document is the easy part. You can just do this:

                 

                // load XML file
                var req = new XMLHttpRequest();
                req.open("GET", "test.xml", true);
                req.addEventListener("load", transferComplete);
                req.send();
                
                function transferComplete(e) {
                    console.log(e.target.response);
                }
                

                 

                It's actually parsing the XML that's the hard part. Support for XML parsing is pretty good in modern browsers, but if you want to support anything older than IE10, it gets hairy. Depending on how simply the XML is formatted, you might be able to get away with using a regex to extract the data.

                1 person found this helpful
                • 5. Re: Assigning XML content to dynamic text fields
                  ClayUUID Adobe Community Professional

                  To expand on my previous post, while the "correct" way to do this is to parse the XML object and then traverse the node tree, for 90% of non-enterprisey scenarios this function should be adequate:

                   

                  // return array of all matching tag values
                  function getTagValues(xml, tag) {
                      var match;
                      var matches = [];
                      var re = new RegExp("<" + tag + ">(.*?)</" + tag + ">", "gi");
                      while (match = re.exec(xml)) {
                          matches.push(match[1]);
                      }
                      return matches;
                  }
                  

                   

                  So for example, if you had this XML file:

                   

                  <mydata>
                      <animal>Liger</animal>
                      <animal>Tigron</animal>
                      <descrip>It's pretty much my favorite animal.</descrip>
                  </mydata>
                  

                   

                  After loading the raw XML you could call the function above as follows:

                   

                  var animals = getTagValues(rawXML, "animal");
                  

                   

                  And it would return an array containing "Liger" and "Tigron".

                   

                  Note that this approach does NOT handle retrieving tag properties, like "<mydata time='30981208'>". For that you'd need a significantly more complex function.

                  • 6. Re: Assigning XML content to dynamic text fields
                    TapLuke Level 1

                    Thanks so much for taking the time, this has been very helpful already as I would just need basic XML properties like <animal>, so this would do the trick.

                     

                    But how would you assign the code

                    var animals = getTagValues(rawXML, "animal");

                     

                    to the dynamic text field?

                    • 7. Re: Assigning XML content to dynamic text fields
                      ClayUUID Adobe Community Professional

                      Like has already been said:

                       

                      this.mydynamictextfield.text = "hello I am text in a dynamic text field";
                      

                       

                      If you need really, really specific, it would be in this particular case:

                       

                      this.mydynamictextfield.text = animals[0];
                      
                      • 8. Re: Assigning XML content to dynamic text fields
                        TapLuke Level 1

                        Yeah, sorry. I needed really specific. But now I got it. Thanks a million. I really appreciate it.

                        • 9. Re: Assigning XML content to dynamic text fields
                          Animated gif

                          Hi ClayUUID
                          Thanks for sharing all this ideas, but sadly I couldn't managed to make it work....
                          Can you please share a complete code (or file) to make Adobe Animate CC load XML files?

                           

                          Thanks a lot!

                          • 10. Re: Assigning XML content to dynamic text fields
                            EmbussyBus Level 1

                            Hi TapLuke, I've been trying to get this working but to no avail.

                            Is there any chance you could share a downloadable example of your solution please?

                            • 11. Re: Assigning XML content to dynamic text fields
                              benedicteb77992392

                              Hi,

                              I'm really sorry to post an other question (sory for my bad english too....)

                               

                              I had learning how to import a file json on my textareas but I want a xml file. Where I must to change my code?

                               

                              my code for json :

                              _this = this;

                               

                              // charge le fichier json

                              var lq = new createjs.LoadQueue(true);

                              lq.addEventListener('complete', parseJson) ;

                               

                              // indique le chemin du fichier

                              var randy = "json/content.json?"+ Math.floor(Math.random() * 10000);

                              lq.loadFile({id:"json", src:"json/content.json"});

                               

                               

                              // variable de référence

                              trombines = new Array();

                               

                              // fonction appelée après le chargement, appelle la fonction qui va parser le fichier

                              function parseJson(e){

                                  var json = e.target.getResult('json');

                                 

                                  for(s in json){

                                          trombines.push(json[s]);

                               

                                  }

                              }

                               

                              // rempli le trombino avec les données récupérées

                              rempliTrombino = function(trombine) {

                              // photo

                              document.getElementById('photo').src = trombines[trombine].photo;   

                               

                              // champs texte

                              _this.nom.text = trombines[trombine].nom;

                              _this.prenom.text = trombines[trombine].prenom;   

                              _this.age.text = trombines[trombine].age;

                              _this.email.text = trombines[trombine].email;

                              _this.bio.text = trombines[trombine].bio;

                              }

                               

                              /***********************

                              Ecouteurs boutons

                              ***********************/

                              this.bt1.addEventListener("click", function()

                              {

                              rempliTrombino(0);

                              }

                              );

                              this.bt2.addEventListener("click", function()

                              {

                              rempliTrombino(1);

                              }

                              );

                               

                               

                              I understand to load my xml like this but after, I don't know...

                              1. // load XML file 
                              2. var req = new XMLHttpRequest(); 
                              3. req.open("GET", "test.xml", true); 
                              4. req.addEventListener("load", transferComplete); 
                              5. req.send(); 
                              6.  
                              7. function transferComplete(e) { 
                              8.     console.log(e.target.response); 

                               

                              Thanks a lote for help me

                              • 12. Re: Assigning XML content to dynamic text fields
                                benedicteb77992392 Level 1

                                Please,

                                can you send the file?

                                My code isn't ok... and my containertext stay empty...

                                 

                                Thanks a lot

                                • 13. Re: Assigning XML content to dynamic text fields
                                  mehmetk89082497 Level 1

                                  last 5 days i try to find solution for that

                                  xml txt php what ever i want to import or get or post one or other way

                                  but i cant find any answer  this part problem

                                  yes it's import but where is this data how can i convert and how can take that value i don't know

                                  when html load i can take every data no problem.
                                  my problem after load every thing i must be load some external value but i am not success

                                   

                                   

                                  1. function getTagValues(xml, tag) { 
                                  2.     var match; 
                                  3.     var matches = []; 
                                  4.     var re = new RegExp("<" + tag + ">(.*?)</" + tag + ">", "gi"); 
                                  5.     while (match = re.exec(xml)) { 
                                  6.         matches.push(match[1]); 
                                  7.     } 
                                  8.     return matches; 
                                  • 14. Re: Assigning XML content to dynamic text fields
                                    mehmetk89082497 Level 1

                                    its working well no problem

                                    this is animate code


                                    problem point in here every one make same mistake
                                    first rawxml give  var other ways it's not in stage it's go canvas
                                    and we cant find or other problem i don't now but problem point this

                                    firs var rawxml  after use rawxml with out var. under transfercomplete function

                                    • it's working thanks every one
                                      var rawXML;

                                     

                                     

                                     

                                     

                                     

                                    this.stop();

                                    var rawXML;

                                    this.abbas.text = "aeiauie";

                                    // load XML file  

                                    var req = new XMLHttpRequest();  

                                    req.open("GET", "temizlik-sirketi.xml", true);  

                                    req.addEventListener("load", transferComplete);  

                                    req.send();  

                                      

                                     

                                    function transferComplete(e) {  

                                    rawXML = e.target.response;  

                                    console.log(rawXML);  

                                     

                                     

                                    }

                                     

                                     

                                    function getTagValues(xml, tag) {  

                                        var match;  

                                        var matches = [];  

                                        var re = new RegExp("<" + tag + ">(.*?)</" + tag + ">", "gi");  

                                        while (match = re.exec(xml)) {  

                                            matches.push(match[1]);  

                                        }  

                                        return matches;

                                    }

                                     

                                     

                                     

                                     

                                     

                                     

                                    this.istanbul.addEventListener("click", istanbult.bind(this));

                                     

                                    function istanbult()

                                    {

                                    this.abbas.text = rawXML;

                                     

                                      var textEntry = getTagValues(rawXML, "TextEntry");

                                     

                                    this.textFile01.text = textEntry[0];

                                    this.textFile02.text = textEntry[1];

                                    this.textFile03.text = textEntry[2];

                                     

                                     

                                     

                                    }

                                     

                                     

                                    here xml side

                                     

                                    <temizlik-sirketi>

                                      <temizlik>1 elma</temizlik>

                                      <temizlik>2 armut</temizlik>

                                      <temizlik>3 erik</temizlik>

                                    </temizlik-sirketi>

                                     

                                     

                                    it's working no problem  also i share fla

                                     

                                     

                                     

                                     

                                     

                                     

                                     

                                     

                                     

                                    this is fla file and xml

                                    https://pisev.com/xmlimport.zip