6 Replies Latest reply on Apr 28, 2010 1:06 PM by codeBoyX1138

    [AS2] Problem positioning MC on Stage based on image height/width

    codeBoyX1138

      I just completed an excellent tutorial, Photo Gallery Using XML and Flash by kirupa | 2 September 2004

       

      http://www.kirupa.com/developer/mx2004/xml_slideshow.htmhttp://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm

       

      The problem is I have pictures that are different sizes so I am trying to center the picture's movieclip on the stage dynamically based on the image height and width, but it won't work. I am unable to get this value from the movieclip for some reason.

       

      function firstImage() {
      if (loaded == filesize) {
      picture._alpha = 0;
      picture.loadMovie(image[0], 1);

      trace(eval (picture)._height); // returns 0

      desc_txt.text = description[0];
      picture_num();
      }

      Any thoughts?


        • 1. Re: [AS2] Problem positioning MC on Stage based on image height/width
          Ned Murphy Adobe Community Professional & MVP

          You need to wait until the image is loaded before you can access any of its properties.  The loadmovie() method does not support having a listener assigned to it so that you can determine when the loading is complete.  To be able to detect loading completion you will need to switch to using the MovieClipLoader.loadClip() method.

           

          You should go thru the help documentation or search online for information about the MovieClipLoader class and its loadClip() and addListener() methods... the help docs have a fairly complete example in the MovieClipLoader.addListener() section.  THe only difference in your case is that example listens for the onLoadInit function, but you can use the onLoadComplete event instead since you are not loading swf files (which need the extra time to set themselves up for play).

          1 person found this helpful
          • 2. Re: [AS2] Problem positioning MC on Stage based on image height/width
            codeBoyX1138 Level 1

            Great forum, thanks for the reply.

             

            I have tried to incorporate your solution as loadMC(), and it works, but only after the first image of a specific size is presented.

             

            In other words, when I first run the app, the image is off center, then when I hit next, the next image of that same size is now centered, but as I click through when I reach an image of a different size it is off center until I hit next again (to another image of that same size) it becomes centered.

             

            My entire code is below, (adapted from http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm), if you could help me understand why this isn't working correctly, I would be most grateful.

             

            function loadXML(loaded) {
            if (loaded) {
              xmlNode = this.firstChild;
              image = [];
              description = [];
              total = xmlNode.childNodes.length;
              for (i=0; i<total; i++) {
               image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
               description[i] = xmlNode.childNodes[i].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;
               loadMC();
               picture._x = ((Stage.width / 2) - picture._width / 2);
               desc_txt.text = description[p];
              
               picture_num();desc_txt._y = picture._height + 25;
               trace(">> " + (picture._height + 25));
              }
            }
            }
            function prevImage() {
            if (p>0) {
              p--;
              picture._alpha = 0;
              loadMC();
              picture._x = ((Stage.width / 2) - picture._width / 2);
              desc_txt.text = description[p];
              desc_txt._y = picture._height + 25;
               trace(">> " + (picture._height + 25));
              picture_num();
            }
            }
            function firstImage() {
            if (loaded == filesize) {
              picture._alpha = 0;
              loadMC();
              picture._x = ((Stage.width / 2) - picture._width / 2);
              desc_txt.text = description[0];
              desc_txt._y = picture._height + 25;
               trace(">> " + (picture._height + 25));
              picture_num();
            }
            }
            function picture_num() {
            current_pos = p+1;
            pos_txt.text = current_pos+" / "+total;
            }

             

             


            function loadMC(){
            var loadListener:Object = new Object();

            loadListener.onLoadComplete = function(picture:MovieClip):Void {
                trace(">> loadListener.onLoadComplete()");
                trace(">> =============================");
                trace(">> picture._width: " + picture._width);    // 0
            }

            loadListener.onLoadInit = function(picture:MovieClip):Void {
                trace(">> loadListener.onLoadInit()");
                trace(">> =============================");
            trace(">> (Stage.width / 2) - picture._width / 2): " + ((Stage.width / 2) - picture._width / 2));
            }

            var mcLoader:MovieClipLoader = new MovieClipLoader();
            mcLoader.addListener(loadListener);

            var picture:MovieClip = this.createEmptyMovieClip("picture", this.getNextHighestDepth());
            mcLoader.loadClip(image[p],picture);

            picture._x = ((Stage.width / 2) - picture._width / 2);

            }

            • 3. Re: [AS2] Problem positioning MC on Stage based on image height/width
              Ned Murphy Adobe Community Professional & MVP

              There appear to be so many places where you are either assigning or testing the (Stage.width-picture._width)/2 that I cannot follow it.  You should only be setting that in one place after the image is loaded.

              • 4. Re: [AS2] Problem positioning MC on Stage based on image height/width
                codeBoyX1138 Level 1

                Sorry about that. I have created a translate() method where that particular code gets executed in an attempt to clean this up. The confusing thing is, no matter where I call it from in the code, it always gets executed before the loadListener methods get executed. I don't understand why.

                 

                Here is the trace output:

                 

                >> loadMC()
                >> =============================
                >> picture 0
                >>
                >> translate()
                >> =============================
                >> (Stage.width / 2) - picture._width / 2): 222.5
                >>
                >> loadListener.onLoadComplete()
                >> =============================
                >>
                >> loadListener.onLoadInit()
                >> =============================
                >>

                 

                Here is the pertinent code sections:

                 

                // first
                     function firstImage() {
                           if (loaded == filesize) {
                            picture._alpha = 0;
                            loadMC();
                            translate(); // it seems logical that this would occur after loadMC() is completely finished, but it doesn't, it always happens before. ???
                            picture_num();
                      }

                }

                 

                // load movie clip
                     function loadMC() {

                           trace(">> loadMC()");
                           trace(">> =============================");
                           trace(">> picture "+p);
                           trace(">> ");
                           var loadListener:Object = new Object();

                 

                           loadListener.onLoadComplete = function(picture:MovieClip):Void  {
                            trace(">> loadListener.onLoadComplete()");
                            trace(">> =============================");
                            trace(">> ");
                      };

                 

                      loadListener.onLoadInit = function(picture:MovieClip):Void  {
                            trace(">> loadListener.onLoadInit()");
                            trace(">> =============================");
                            trace(">> ");
                      };

                 

                      var mcLoader:MovieClipLoader = new MovieClipLoader();
                      mcLoader.addListener(loadListener);

                      var picture:MovieClip = this.createEmptyMovieClip("picture", this.getNextHighestDepth());
                      mcLoader.loadClip(image[p],picture);


                }

                 

                // translate picture
                     function translate() {

                           trace(">> translate()");
                           trace(">> =============================");
                           picture._x = ((Stage.width/2)-picture._width/2);
                           trace(">> (Stage.width / 2) - picture._width / 2): "+((Stage.width/2)-picture._width/2));
                           trace(">> ");
                           desc_txt.text = description[p];
                           desc_txt._y = picture._height+25;

                }

                • 5. Re: [AS2] Problem positioning MC on Stage based on image height/width
                  Ned Murphy Adobe Community Professional & MVP

                  Use your load complete function to manage your placements.  The code doesn't wait for loadMC to finish loading before moving on to the next line.

                  1 person found this helpful
                  • 6. Re: [AS2] Problem positioning MC on Stage based on image height/width
                    codeBoyX1138 Level 1

                    Thanks for your help, as it turned out I needed to call the translate method from within the onLoadInit function instead of onLoadComplete.

                     

                    loadListener.onLoadInit = function(picture:MovieClip):Void  {
                      trace(">> loadListener.onLoadInit()");
                      trace(">> =============================");
                      trace(">> ");
                      translate();
                    };

                     

                    http://www.bretbolton.com/testing/gallery.html