7 Replies Latest reply on Sep 17, 2009 10:11 AM by Ned Murphy

    Load a specific image in an array

    AESS1981

      Hi,

       

      In my photo gallery, I have an array of images that load sequentially using 'next' / 'prev' buttons. The code fades out the current swf, recognises when the new external swf has fully loaded, then fades in:

       

      this.pathToPics = "portfolio/100_design/";

      this.pArray = ["1.swf", "2.swf", "3.swf", "4.swf"];

      this.fadeSpeed = 40;

      this.pIndex = 0;

      //loads an image automatically when you run animation

      loadMovie(this.pathToPics+this.pArray[0], _root.image_holder);

      MovieClip.prototype.changeImage = function(d) {

      // make sure pIndex falls within pArray.length

      this.pIndex = (this.pIndex+d)%this.pArray.length;

      if (this.pIndex<0) {

      this.pIndex += this.pArray.length;

      }

      this.onEnterFrame = fadeOut;

      };

      MovieClip.prototype.fadeOut = function() {

      if (this.image_holder._alpha>this.fadeSpeed) {

      this.image_holder._alpha -= this.fadeSpeed;

      } else {

      this.loadPhoto();

      }

      };

      MovieClip.prototype.loadPhoto = function() {

      // specify the movieclip to load images into

      var p = _root.image_holder;


      p._alpha = 0;

      p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);

      this.onEnterFrame = loadMeter;

      };

      MovieClip.prototype.loadMeter = function() {

      var i, l, t;

      l = this.image_holder.getBytesLoaded();

      t = this.image_holder.getBytesTotal();

      if (t>0 && t == l) {

      this.onEnterFrame = fadeIn;

      } else {

      trace(l/t);

      }

      };

      MovieClip.prototype.fadeIn = function() {

      if (this.image_holder._alpha<100-this.fadeSpeed) {

      this.image_holder._alpha += this.fadeSpeed;

      } else {

      this.image_holder._alpha = 100;

      this.onEnterFrame = null;

      }

      };

       

       

      This works beautifully when scrolling images sequentially. However I also have buttons 'menu1', 'menu2', 'menu3', 'menu4'...

      Is there a way on 'menu2', I can do the following:

       

      - fade out the current swf

      - load '2.swf' into _root.image_holder and fade in

      - ensure the 'next' / 'prev' buttons recognise the position of the current swf relative to the array (so when 'next' is pressed '3.swf' loads)

       

       

      Thanks!!!

        • 1. Re: Load a specific image in an array
          Ned Murphy Adobe Community Professional & MVP

          Have you tried something and it isn't working?  It would seem that if your buttons were to assign the pIndex value for the selected image and then call the fade out function, things might manage for themselves as is.  In any case, to answer your question is yes, you should be able to have that set of events/conditions occur.

          1 person found this helpful
          • 2. Re: Load a specific image in an array
            AESS1981 Level 1

            Hi Ned,

             

            The script I have been trying is:

             

            on (release) {

            loadMovie("portfolio/100_design/2.swf", _root.image_holder);

            _root.image_holder.pIndex = 2;

            }

             

             

            This loads '2.swf' but the current swf does not fade out, and the position within the array doesn't register.

            I am a novice at AS so am unsure of the best way to achieve this and reference the correct code.

             

            Cheers

            • 3. Re: Load a specific image in an array
              Ned Murphy Adobe Community Professional & MVP

              Pardon me if I miss something, it's just a little bit tangly (for me) to follow the code.  But what I think you need to do is essentially mimic the changeImage function, but not the part that sets the next image index.  So for starters, I'd say try something like what follows below, and if that doesn't pan out, then you can probably create another function like the changeImage one and call it... just removing the part that sets the next image index.  Your button will take care of assigning the next image index.

               

              on (release) {

                   _root.image_holder.pIndex = 2;

                   this.onEnterFrame = fadeOut;

              }

              1 person found this helpful
              • 4. Re: Load a specific image in an array
                AESS1981 Level 1

                 

                Everything I try comes back with the following Output statement:

                 

                 

                Error opening URL 'file:///Macintosh%20HD/Users/andrew/Desktop/Website/NaN'

                I have tried to make a new function (in bold) but am completely lost. I appreciate this is tricky for you at this stage. Hopefully you can shed some light!
                this.pathToPics = "portfolio/100_design/";
                this.pArray = ["1.swf", "2.swf", "3.swf", "4.swf"];
                this.fadeSpeed = 40;
                this.pIndex = 0;
                // d=direction; should be 1 or -1 but can be any number
                //loads an image automatically when you run animation
                loadMovie(this.pathToPics+this.pArray[0], _root.image_holder);
                MovieClip.prototype.changeImage = function(d) {
                // make sure pIndex falls within pArray.length
                this.pIndex = (this.pIndex+d)%this.pArray.length;
                if (this.pIndex<0) {
                this.pIndex += this.pArray.length;
                }
                this.onEnterFrame = fadeOut;
                };
                MovieClip.prototype.image2 = function() {
                this.pIndex = 2;
                this.onEnterFrame = fadeOut;
                };
                MovieClip.prototype.fadeOut = function() {
                if (this.image_holder._alpha>this.fadeSpeed) {
                this.image_holder._alpha -= this.fadeSpeed;
                } else {
                this.loadPhoto();
                }
                };
                MovieClip.prototype.loadPhoto = function() {
                // specify the movieclip to load images into
                var p = _root.image_holder;
                p._alpha = 0;
                p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
                this.onEnterFrame = loadMeter;
                };
                MovieClip.prototype.loadMeter = function() {
                var i, l, t;
                l = this.image_holder.getBytesLoaded();
                t = this.image_holder.getBytesTotal();
                if (t>0 && t == l) {
                this.onEnterFrame = fadeIn;
                } else {
                trace(l/t);
                }
                };
                MovieClip.prototype.fadeIn = function() {
                if (this.image_holder._alpha<100-this.fadeSpeed) {
                this.image_holder._alpha += this.fadeSpeed;
                } else {
                this.image_holder._alpha = 100;
                this.onEnterFrame = null;
                }
                };

                 

                • 5. Re: Load a specific image in an array
                  Ned Murphy Adobe Community Professional & MVP

                  THat appears to be reporting an invalid url.  Try tracing the url before th loadMovie call...

                   

                  trace(this.pathToPics+this.pArray[this.pIndex]);

                  p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);

                   

                  Also, if your intention is to open 2.swf, that would be pIndex = 1.

                  1 person found this helpful
                  • 6. Re: Load a specific image in an array
                    AESS1981 Level 1

                    Cracked it Ned!

                     

                    Added a new function:

                     

                    MovieClip.prototype.menuTwo = function(d) {

                    this.pIndex = (this.pIndex=1)%this.pArray.length;

                    this.onEnterFrame = fadeOut;

                    };

                     

                     

                    On the button, the code was:

                     

                    on (release){

                    _root.menuTwo();

                    }

                     

                     

                    Thanks a lot for all your time and help!

                    • 7. Re: Load a specific image in an array
                      Ned Murphy Adobe Community Professional & MVP

                      You're welcome.