27 Replies Latest reply on May 24, 2006 1:10 AM by nardove

    trouble loading images from XML files using AS

    DPSwebmaster Level 1
      I am creating a slideshow and found a script that will load the images via an XML document, but I believe the script is for an absolute references image such as <a href=" http://www.myimages.com/image1.jpg"> and I want to be able to have them in a file and reference the file in the XML such as :

      <pic>
      <image>images/04_02.jpg</image>
      <caption>Soleil Center 4</caption>
      </pic>

      When I test movie I get an error

      Error opening URL "path_to_image/01_02.jpg"

      Is there something I need to change in the AS to be able to reference a folder on my desktop (in the same directory as .fla file).

      here is the AS code:

      function loadXML(loaded) {
      if (loaded) {
      xmlNode = this.firstChild;
      image = [];
      description = [];
      total = xmlNode.childNodes.length;
      for (i=0; i<total; i++) {
      image = xmlNode.childNodes.childNodes[0].firstChild.nodeValue;
      description = xmlNode.childNodes.childNodes[1].firstChild.nodeValue;
      }
      firstImage();
      } else {
      content = "file not loaded!";
      }
      }
      xmlData = new XML();
      xmlData.ignoreWhite = true;
      xmlData.onLoad = loadXML;
      xmlData.load("images.xml");
      /////////////////////////////////////
      listen = new Object();
      listen.onKeyDown = function() {
      if (Key.getCode() == Key.LEFT) {
      prevImage();
      } else if (Key.getCode() == Key.RIGHT) {
      nextImage();
      }
      };
      Key.addListener(listen);
      previous_btn.onRelease = function() {
      prevImage();
      };
      next_btn.onRelease = function() {
      nextImage();
      };
      /////////////////////////////////////
      p = 0;
      this.onEnterFrame = function() {
      filesize = picture.getBytesTotal();
      loaded = picture.getBytesLoaded();
      preloader._visible = true;
      if (loaded != filesize) {
      preloader.preload_bar._xscale = 100*loaded/filesize;
      } else {
      preloader._visible = false;
      if (picture._alpha<100) {
      picture._alpha += 10;
      }
      }
      };
      function nextImage() {
      if (p<(total-1)) {
      p++;
      if (loaded == filesize) {
      picture._alpha = 0;
      picture.loadMovie(image[p], 1);
      desc_txt.text = description[p];
      picture_num();
      }
      }
      }
      function prevImage() {
      if (p>0) {
      p--;
      picture._alpha = 0;
      picture.loadMovie(image[p], 1);
      desc_txt.text = description[p];
      picture_num();
      }
      }
      function firstImage() {
      if (loaded == filesize) {
      picture._alpha = 0;
      picture.loadMovie(image[0], 1);
      desc_txt.text = description[0];
      picture_num();
      }
      }
      function picture_num() {
      current_pos = p+1;
      pos_txt.text = current_pos+" / "+total;
      }
        • 1. Re: trouble loading images from XML files using AS
          Mr_Interweb Level 1
          What happens when you trace your image array and your description array?
          • 2. Re: trouble loading images from XML files using AS
            DPSwebmaster Level 1
            I am not sure if I am adding the trace in the right place, but by adding it here:

            for (i=0; i<total; i++) {
            trace("i:" + i);
            image = xmlNode.childNodes.childNodes[0].firstChild.nodeValue;
            description = xmlNode.childNodes.childNodes[1].firstChild.nodeValue;
            }
            firstImage();
            } else {
            content = "file not loaded!";
            }
            }

            outputs:

            i:0
            i:1
            i:2
            i:3
            i:4
            i:5
            i:6
            Error opening URL "file:///C|/Documents%20and%20Settings/tyc/Desktop/Test/slideshow/images/01_02.jpg"
            • 3. Re: trouble loading images from XML files using AS
              Mr_Interweb Level 1
              You have this code:
              image = [];
              description = [];
              total = xmlNode.childNodes.length;
              for (i=0; i<total; i++) {
              image = xmlNode.childNodes.childNodes[0].firstChild.nodeValue;
              description = xmlNode.childNodes.childNodes[1].firstChild.nodeValue;
              }

              This is what I would do:

              • 4. Re: trouble loading images from XML files using AS
                Mr_Interweb Level 1
                Opps!



                Let me update the code:

                One big problem that I noticed was that you kept reassigning image and description to node values and not pushing the node values to the array. Also, you want to have your image and description arrays outside of the loadXML funciton otherwise they will not exist after the funciton is done. Another thing to remember is strong typing your variables helps.
                • 5. Re: trouble loading images from XML files using AS
                  DPSwebmaster Level 1
                  o.k, thanks. Changing to your script outputs:

                  image[0] = undefined
                  description[0] = undefined
                  image[1] = undefined
                  description[1] = undefined
                  image[2] = undefined
                  description[2] = undefined
                  image[3] = undefined
                  description[3] = undefined
                  image[4] = undefined
                  description[4] = undefined
                  image[5] = undefined
                  description[5] = undefined
                  image[6] = undefined
                  description[6] = undefined

                  they are defined!!

                  <?xml version="1.0" encoding="utf-8" standalone="yes"?>
                  <images>
                  <pic>
                  <image>/images/01_02.jpg</image>
                  <caption>description of image 1</caption>
                  </pic>
                  <pic>
                  <image>/images/02_02.jpg</image>
                  <caption>description of image 2</caption>
                  </pic>
                  <pic>
                  <image>/images/03_02.jpg</image>
                  <caption>description of image 3</caption>
                  </pic>
                  <pic>
                  <image>/images/04_02.jpg</image>
                  <caption>description of image 4</caption>
                  </pic>
                  <pic>
                  <image>/images/05_02.jpg</image>
                  <caption>description of image 5</caption>
                  </pic>
                  <pic>
                  <image>/images/06_02.jpg</image>
                  <caption>description of image 6</caption>
                  </pic>
                  <pic>
                  <image>/images/07_02.jpg</image>
                  <caption>description of image 7</caption>
                  </pic>
                  </images>

                  xml file ia at root level with .fla file and images are in a folder called images.

                  I also tried taking out the / in the image path so it would be :

                  <image>images/07_02.jpg</image>

                  and that doesn't work either!!
                  • 6. Re: trouble loading images from XML files using AS
                    Mr_Interweb Level 1
                    Try tracing this to see what is being read from the XML: (put this in the loop)
                    trace('File Name Value: '+xmlNode.childNodes.childNodes[0].firstChild.nodeValue);
                    • 7. Re: trouble loading images from XML files using AS
                      DPSwebmaster Level 1
                      outputs:

                      image[0] = undefined
                      description[0] = undefined
                      File Name Value: undefined
                      image[1] = undefined
                      description[1] = undefined
                      File Name Value: undefined
                      image[2] = undefined
                      description[2] = undefined
                      File Name Value: undefined
                      image[3] = undefined
                      description[3] = undefined
                      File Name Value: undefined
                      image[4] = undefined
                      description[4] = undefined
                      File Name Value: undefined
                      image[5] = undefined
                      description[5] = undefined
                      File Name Value: undefined
                      image[6] = undefined
                      description[6] = undefined
                      File Name Value: undefined

                      I placed the trace here:

                      var image:Array = new Array();
                      var description:Array = new Array();
                      function loadXML(loaded) {
                      if (loaded) {
                      var xmlNode:XMLNode = this.firstChild;
                      var total:Number = xmlNode.childNodes.length;
                      for (var i:Number = 0; i<total; i++) {
                      image.push(xmlNode.childNodes.childNodes[0].firstChild.nodeValue);
                      description.push(xmlNode.childNodes.childNodes[1].firstChild.nodeValue);
                      trace('image['+i+'] = '+image );
                      trace('description['+i+'] = '+description
                      );
                      trace('File Name Value: '+xmlNode.childNodes.childNodes[0].firstChild.nodeValue);
                      }
                      }
                      }
                      • 8. Re: trouble loading images from XML files using AS
                        Mr_Interweb Level 1
                        Parsing XML was frustrating for me when I was learning to do it in Flash. The thing that you must remember is one function, TRACE. If you are getting undefined data, trace it out untill it makes sense. For example if you had traced:
                        trace('File Name Value: '+xmlNode.childNodes);
                        You would have noticed that this produces the entire XML aggragate below the root node. This way to treat these is as if you were navigating an array.
                        trace('File Name Value: '+xmlNode.childNodes .nodeName);
                        nodeName comes in real handy to figure out what you are looking at.
                        Below is what you want, but I just want to make sure that you know how and why it works this way. You can solve most all of your XML parsing problems with trace.

                        image.push(xmlNode.childNodes
                        .childNodes[0].firstChild.nodeValue);
                        description.push(xmlNode.childNodes .childNodes[1].firstChild.nodeValue);
                        • 9. Re: trouble loading images from XML files using AS
                          DPSwebmaster Level 1
                          thanks for all of your assistance Mr. Interweb. As I m still learning how to pull in XML data, I am not sure if I have my code correct or not. I tested it and nothing is getting pulled in.

                          Here is what I now have (Traces removed)

                          var image:Array = new Array();
                          var description:Array = new Array();
                          function loadXML(loaded) {
                          if (loaded) {
                          var xmlNode:XMLNode = this.firstChild;
                          var total:Number = xmlNode.childNodes.length;
                          for (var i:Number = 0; i<total; i++) {
                          image.push(xmlNode.childNodes.childNodes[0].firstChild.nodeValue);
                          description.push(xmlNode.childNodes.childNodes[1].firstChild.nodeValue);

                          }
                          }
                          }
                          xmlData = new XML();
                          xmlData.ignoreWhite = true;
                          xmlData.onLoad = loadXML;
                          xmlData.load("images.xml");
                          /////////////////////////////////////
                          listen = new Object();
                          listen.onKeyDown = function() {
                          if (Key.getCode() == Key.LEFT) {
                          prevImage();
                          } else if (Key.getCode() == Key.RIGHT) {
                          nextImage();
                          }
                          };
                          Key.addListener(listen);
                          previous_btn.onRelease = function() {
                          prevImage();
                          };
                          next_btn.onRelease = function() {
                          nextImage();
                          };
                          /////////////////////////////////////
                          p = 0;
                          this.onEnterFrame = function() {
                          filesize = picture.getBytesTotal();
                          loaded = picture.getBytesLoaded();
                          preloader._visible = true;
                          if (loaded != filesize) {
                          preloader.preload_bar._xscale = 100*loaded/filesize;
                          } else {
                          preloader._visible = false;
                          if (picture._alpha<100) {
                          picture._alpha += 10;
                          }
                          }
                          };
                          function nextImage() {
                          if (p<(total-1)) {
                          p++;
                          if (loaded == filesize) {
                          picture._alpha = 0;
                          picture.loadMovie(image[p], 1);
                          desc_txt.text = description[p];
                          picture_num();
                          }
                          }
                          }
                          function prevImage() {
                          if (p>0) {
                          p--;
                          picture._alpha = 0;
                          picture.loadMovie(image[p], 1);
                          desc_txt.text = description[p];
                          picture_num();
                          }
                          }
                          function firstImage() {
                          if (loaded == filesize) {
                          picture._alpha = 0;
                          picture.loadMovie(image[0], 1);
                          desc_txt.text = description[0];
                          picture_num();
                          }
                          }
                          function picture_num() {
                          current_pos = p+1;
                          pos_txt.text = current_pos+" / "+total;
                          }

                          thanks again. I am stil learning how Trace works.
                          • 10. Re: trouble loading images from XML files using AS
                            Mr_Interweb Level 1
                            That is because of this:
                            image.push(xmlNode.childNodes.childNodes[0].firstChild.nodeValue);
                            description.push(xmlNode.childNodes.childNodes[1].firstChild.nodeValue);

                            Should be:
                            image.push(xmlNode.childNodes .childNodes[0].firstChild.nodeValue);
                            description.push(xmlNode.childNodes
                            .childNodes[1].firstChild.nodeValue);

                            Treat childNodes as an array. Meaning that if you want to access an element from the array you must specify which element you are trying to get from the array (example: array[0], array[1]). It would be helpful to do some research on how arrays work and how they work in Flash.
                            • 11. Re: trouble loading images from XML files using AS
                              Mr_Interweb Level 1
                              Wait a second. I am just about ready to put my entire foot in my mouth. I just realized that this forum is stripping out parts of the code. It is making my array accessor an italics. Use the 'Attach Code' feature.
                              • 12. Re: trouble loading images from XML files using AS
                                DPSwebmaster Level 1
                                thx,

                                my trace now outputs

                                File Name Value: <pic><image>/images/01_02.jpg</image><caption>description of pict 1</caption></pic>,<pic><image>/images/02_02.jpg</image><caption>description of pict 2</caption></pic>,<pic><image>/images/03_02.jpg</image><caption>description of pict 3</caption></pic>,<pic><image>/images/04_02.jpg</image><caption>description of pict </caption>

                                etc.


                                but the images still aren't showing up in the slide show so maybe I am not referencing them correctly in the XML?

                                again, the .fla and the xml are at root level and I have the images in a folder called 'images'.

                                referenced as :

                                <pic>
                                <image>/images/04_02.jpg</image>
                                <caption>Soleil Center 4</caption>
                                </pic>

                                in the xml..

                                any thoughts?
                                • 13. Re: trouble loading images from XML files using AS
                                  Level 7
                                  Take away the leading slash from your file references in the XML doc.

                                  The directory path in the XML file should be the same as if you were
                                  linking to the image from the HTML page in which you will embed the SWF.

                                  Try this for each image in the XML file:

                                  <image>images/04_02.jpg</image>

                                  DPSwebmaster wrote:

                                  >
                                  > but the images still aren't showing up in the slide show so maybe I am not
                                  > referencing them correctly in the XML?
                                  > <image>/images/04_02.jpg</image>
                                  • 14. Re: trouble loading images from XML files using AS
                                    Rothrock Level 5
                                    As ImagicDigital points out all external file references are from the html page not from the swf. Also the same thing if you ever use a projector file. This gets people all the time!

                                    Also, you might not want to encode the images directory into the file location in your XML. Just on the off chance that in the future you end up needing to move everything around – naaaa that would never happen, would it?

                                    Instead, you might just want to have <image>04_02.jpg</image> and then have another place where you provide Flash with the path to the images. This can also come in handy when you need to switch the path because of that crazy "relative to the html" stuff. Just a thought.
                                    • 15. Re: trouble loading images from XML files using AS
                                      DPSwebmaster Level 1
                                      something is still amiss here becuase I placed the xml and images at the root level and the images still do not load. I don't get any kind of error and Trace tells me the file is being loaded.

                                      took out the /images/ part so that in the XML it's now :

                                      <pic>
                                      <image>07_02.jpg</image>
                                      <caption>Image Description</caption>
                                      </pic>

                                      and here is the AS code:

                                      var image:Array = new Array();
                                      var description:Array = new Array();
                                      function loadXML(loaded) {
                                      if (loaded) {
                                      var xmlNode:XMLNode = this.firstChild;
                                      var total:Number = xmlNode.childNodes.length;
                                      for (var i:Number = 0; i<total; i++) {
                                      image.push(xmlNode.childNodes .childNodes[0].firstChild.nodeValue);
                                      description.push(xmlNode.childNodes
                                      .childNodes[1].firstChild.nodeValue);
                                      trace('File Name Value: '+xmlNode.childNodes);
                                      }
                                      }
                                      }
                                      xmlData = new XML();
                                      xmlData.ignoreWhite = true;
                                      xmlData.onLoad = loadXML;
                                      xmlData.load("images.xml");
                                      /////////////////////////////////////
                                      listen = new Object();
                                      listen.onKeyDown = function() {
                                      if (Key.getCode() == Key.LEFT) {
                                      prevImage();
                                      } else if (Key.getCode() == Key.RIGHT) {
                                      nextImage();
                                      }
                                      };
                                      Key.addListener(listen);
                                      previous_btn.onRelease = function() {
                                      prevImage();
                                      };
                                      next_btn.onRelease = function() {
                                      nextImage();
                                      };
                                      /////////////////////////////////////
                                      p = 0;
                                      this.onEnterFrame = function() {
                                      filesize = picture.getBytesTotal();
                                      loaded = picture.getBytesLoaded();
                                      preloader._visible = true;
                                      if (loaded != filesize) {
                                      preloader.preload_bar._xscale = 100*loaded/filesize;
                                      } else {
                                      preloader._visible = false;
                                      if (picture._alpha<100) {
                                      picture._alpha += 10;
                                      }
                                      }
                                      };
                                      function nextImage() {
                                      if (p<(total-1)) {
                                      p++;
                                      if (loaded == filesize) {
                                      picture._alpha = 0;
                                      picture.loadMovie(image[p], 1);
                                      desc_txt.text = description[p];
                                      picture_num();
                                      }
                                      }
                                      }
                                      function prevImage() {
                                      if (p>0) {
                                      p--;
                                      picture._alpha = 0;
                                      picture.loadMovie(image[p], 1);
                                      desc_txt.text = description[p];
                                      picture_num();
                                      }
                                      }
                                      function firstImage() {
                                      if (loaded == filesize) {
                                      picture._alpha = 0;
                                      picture.loadMovie(image[0], 1);
                                      desc_txt.text = description[0];
                                      picture_num();
                                      }
                                      }
                                      function picture_num() {
                                      current_pos = p+1;
                                      pos_txt.text = current_pos+" / "+total;
                                      }
                                      • 16. Re: trouble loading images from XML files using AS
                                        Mr_Interweb Level 1
                                        DPSwebmaster, to me it sounds like you are not having a problem loading the XML file. It sounds like you are having problems parsing the XML into your images array and your descriptions array. I can not tell if the code that you keep posting is correct or not, because this forum strips out code if it is not "attached". Do not use the quick reply if you are going to be posting any code. Use the regular reply and then click the button named "Attach Code". This will ensure that you do not lose your indentation and certain characters will not be stripped from your code. I have no way of telling if your code is correct or not untill you do this.

                                        Please repost your code using "Attach Code"
                                        • 19. Re: trouble loading images from XML files using AS
                                          Mr_Interweb Level 1
                                          Ok. Bruce, it looks like your XML parsing is working. You can verify this by putting the traces listed in the attached code. Before we start worrying about file paths, we want to make sure that the paths your are grabbing from the XML are making it into your images array. Can you verify that the paths you are trying to load are assigned in the array?
                                          • 20. Re: trouble loading images from XML files using AS
                                            Rothrock Level 5
                                            And you are sure the jpegs haven't been saved as progressive? Flash will try and load those and not throw an error but they won't show.
                                            • 22. Re: trouble loading images from XML files using AS
                                              DPSwebmaster Level 1
                                              I am not even sure how you save .jpgs as progressive?
                                              • 23. Re: trouble loading images from XML files using AS
                                                Mr_Interweb Level 1
                                                This is good news. At least now you can be sure that your XML is being parsed right. Now all you need to worry about is loading the images. So I am assuming that the directory images is at the root of your site. Another thing you might want to try out is putting in the full http://www.yoursite.com/images/myImage.jpg as the load resource. You can do this easily in the actionscript by putting something like:
                                                • 24. Re: trouble loading images from XML files using AS
                                                  Rothrock Level 5
                                                  If you are using Photoshop to create your jpegs there is an option to the save dialog. You would be surprised at how often that gets accidently checked by people who are very much surprised later. (I would be at least one of those people!)

                                                  To find out open the file, do a "Save as…" and see if the box is checked.
                                                  • 25. Re: trouble loading images from XML files using AS
                                                    DPSwebmaster Level 1
                                                    so far I have just been previewing from a folder on my desktop, maybe that is the problem.

                                                    • 26. Re: trouble loading images from XML files using AS
                                                      DPSwebmaster Level 1
                                                      does this need to be placed at the end of my AS code?
                                                      • 27. Re: trouble loading images from XML files using AS
                                                        nardove Level 1
                                                        hi there try this

                                                        <images thumbpath="/images/">
                                                        <pic>
                                                        <image>/images/01_02.jpg</image>
                                                        <caption>description of image 1</caption>
                                                        </pic>
                                                        ...
                                                        </images>

                                                        and for your as try this

                                                        this is for the image
                                                        xmlNode.firstChild.attributes.thumbpath+xmlNode.firstChild.childNodes[n].childNodes[0].fir stChild.nodeValue;

                                                        and this is for the description
                                                        xmlNode.firstChild.childNodes[n].childNodes[2].firstChild.nodeValue;

                                                        trace that to see what happens

                                                        hope that helps