6 Replies Latest reply on Oct 25, 2011 11:52 AM by pantelis224466

    Add next and previous button in xml as2 slideshow

    pantelis224466

      Hi there.

      I started a tutorial about creating a flash slideshow. This is the as2 code:

       

       

      import mx.transitions.Tween;

      import mx.transitions.easing.*;

       

      var myShowXML = new XML();

      myShowXML.ignoreWhite = true;

      myShowXML.load("slideshow.xml");

       

       

      myShowXML.onLoad = function() {

       

      _root.myWidth = myShowXML.firstChild.attributes.width;

      _root.myHeight = myShowXML.firstChild.attributes.height;

      _root.mySpeed = myShowXML.firstChild.attributes.speed;

       

      _root.myImages = myShowXML.firstChild.childNodes;

      _root.myImagesNo = myImages.length;

      total = myShowXML.childNodes.length;

       

      createContainer();

      callImages();

       

      };

       

       

      function createContainer() {

      _root.createEmptyMovieClip("myContainer_mc",_root.getNextHighestDepth());

       

       

      myContainer_mc.lineTo(_root.myWidth,_root.myHeight);

       

       

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

      myContainer_mc._y = (Stage.height-myContainer_mc._height)/2;

       

      }

       

       

       

      function callImages() {

       

      _root.myMCL = new MovieClipLoader();

      _root.myPreloader = new Object();

      _root.myMCL.addListener(_root.myPreloader);

       

      _root.myClips_array = [];

       

      _root.myPreloader.onLoadStart = function(target) {

       

      _root.createTextField("myText_txt",_root.getNextHighestDepth(),0,0,100,20);

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

      _root.myText_txt._y = (Stage.height-_root.myText_txt._height)/1.08;

      _root.myText_txt.autoSize = "center";

       

      };

       

      _root.myPreloader.onLoadProgress = function(target){

       

      _root.myText_txt.text = "Loading.. "+_root.myClips_array.length+"/"+_root.myImagesNo+" Completed";

       

      }

       

      _root.myPreloader.onLoadComplete = function(target) {

       

      _root.myClips_array.push(target);

      target._alpha=0;

       

      if (_root.myClips_array.length == _root.myImagesNo) {

       

      myText_txt._alpha=0;

       

      moveSlide();

      myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

       

      }

       

      }

       

      for (i=0; i<_root.myImagesNo; i++) {

       

      temp_url = _root.myImages[i].attributes.url;

      temp_mc = myContainer_mc.createEmptyMovieClip(i, myContainer_mc.getNextHighestDepth());

       

      _root.myMCL.loadClip(temp_url,temp_mc);

      }

       

      }

       

       

      function moveSlide() {

       

      current_mc = _root.myClips_array[_root.target_mc];

      new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);

       

      _root.target_mc++;

       

      if (_root.target_mc>=_root.myImagesNo) {

      _root.target_mc = 0;

      }

       

      next_mc = _root.myClips_array[_root.target_mc];

      new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

       

      }

       

       

      //I have created 2 buttons - NEXT with instance name:next_btn and PREV

      //with instance name:prev_btn and these are the on(release) functions:   

      previous_btn.onRelease = function() {

       

      prevImage();

       

      };

      next_btn.onRelease = function() {

       

      nextImage();

       

      };

       

       

       

      The images load from xml file and change through moveSlide function.

      And now i need to create those 2 new functions in order to give the user the opportunity to change the images by him/herself.

       

      I found somewhere a piece of code about this kind of functions:

       

      p = 0;

      function nextImage() {

       

          if (p<(total-1)) {

       

              p++;

              if (loaded == filesize) {

       

              picture._alpha = 0;

              picture.loadMovie(image[p], 1);

              picture_num();

              }

          }

       

      }

       

      function prevImage() {

       

      if (p>0) {

       

      p--;

      picture._alpha = 0;

      picture.loadMovie(image[p], 1);

      picture_num();

       

      }

       

      }

       

      function picture_num() {

       

      current_pos = p+1;

      pos_txt.text = current_pos+" / "+total;

       

      }

       

      The link i got these functions is this:

      http://kirupa.com/developer/mx2004/xml_flash_photogallery.htm

       

      How can i adjust these functions to my slideshow?

       

      P.S. Sorry, but i am not an as2 expert but any help is welcomed.

       

      Thanks in advance

        • 1. Re: Add next and previous button in xml as2 slideshow
          kglad Adobe Community Professional & MVP

          :

           

           

          import mx.transitions.Tween;

          import mx.transitions.easing.*;

           

          var myShowXML = new XML();

          myShowXML.ignoreWhite = true;

          myShowXML.load("slideshow.xml");

           

           

          myShowXML.onLoad = function() {

           

          _root.myWidth = myShowXML.firstChild.attributes.width;

          _root.myHeight = myShowXML.firstChild.attributes.height;

          _root.mySpeed = myShowXML.firstChild.attributes.speed;

           

          _root.myImages = myShowXML.firstChild.childNodes;

          _root.myImagesNo = myImages.length;

          total = myShowXML.childNodes.length;

           

          createContainer();

          callImages();

           

          };

           

           

          function createContainer() {

          _root.createEmptyMovieClip("myContainer_mc",_root.getNextHighestDepth( ));

           

           

          myContainer_mc.lineTo(_root.myWidth,_root.myHeight);

           

           

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

          myContainer_mc._y = (Stage.height-myContainer_mc._height)/2;

           

          }

           

           

           

          function callImages() {

           

          _root.myMCL = new MovieClipLoader();

          _root.myPreloader = new Object();

          _root.myMCL.addListener(_root.myPreloader);

           

          _root.myClips_array = [];

           

          _root.myPreloader.onLoadStart = function(target) {

           

          _root.createTextField("myText_txt",_root.getNextHighestDepth(),0,0,100 ,20);

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

          _root.myText_txt._y = (Stage.height-_root.myText_txt._height)/1.08;

          _root.myText_txt.autoSize = "center";

           

          };

           

          _root.myPreloader.onLoadProgress = function(target){

           

          _root.myText_txt.text = "Loading.. "+_root.myClips_array.length+"/"+_root.myImagesNo+" Completed";

           

          }

           

          _root.myPreloader.onLoadComplete = function(target) {

           

          _root.myClips_array.push(target);

          target._alpha=0;

           

          if (_root.myClips_array.length == _root.myImagesNo) {

           

          myText_txt._alpha=0;

           

          moveSlide();

          myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

           

          }

           

          }

           

          for (i=0; i<_root.myImagesNo; i++) {

           

          temp_url = _root.myImages[i].attributes.url;

          temp_mc = myContainer_mc.createEmptyMovieClip(i, myContainer_mc.getNextHighestDepth());

           

          _root.myMCL.loadClip(temp_url,temp_mc);

          }

           

          }

           

           

          function moveSlide() {

           

          current_mc = _root.myClips_array[_root.target_mc];

          new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);

           

          _root.target_mc++;

           

          if (_root.target_mc>=_root.myImagesNo) {

          _root.target_mc = 0;

          }

           

          next_mc = _root.myClips_array[_root.target_mc];

          new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

           

          }

           

           

          //I have created 2 buttons - NEXT with instance name:next_btn and PREV

          //with instance name:prev_btn and these are the on(release) functions:   

          previous_btn.onRelease = function() {

          _root.target_mc=Math.max(-1,_root.target_mc-2);

          clearInterval(myShowInt);

          myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

          moveSlide();

           

          };

          next_btn.onRelease = function() {

          clearInterval(myShowInt);

          myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);
          moveSlide();

          };

           

           

          • 2. Re: Add next and previous button in xml as2 slideshow
            pantelis224466 Level 1

            Hi there.

             

            Thank you very much for your reply. I used the code for the onRelase functions you suggested and i get this result:

             

            The gallery starts playing. If i push next button then i move to the next slide and if i wait a bti then the slide continuous (Ok)

            If i click previous button then nothing happens and the slide stops. If then, i click next i get a quick view of the next pic and then back to current pic. (Like the previous button has a kind of problem)

            Any ideas?

             

            P.S. Also, how can i make these buttons show at front of the image slideshow and not hiding behind the images?(I have placed the buttons at top layer but nothing happens.)

            1 person found this helpful
            • 3. Re: Add next and previous button in xml as2 slideshow
              kglad Adobe Community Professional & MVP

              my error.  use:

               

              var nextBool:Boolean = true;

               

              function moveSlide() {

              current_mc = _root.myClips_array[_root.target_mc];

              new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);

              if(nextBool){

              _root.target_mc=(_root.target_mc+1)%_root.myImagesNo;

              } else {

              _root.target_mc=(_root.target_mc+_root.myImagesNo-1)%_root.myImagesNo;

              }

              next_mc = _root.myClips_array[_root.target_mc];

              new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

              }

               

              previous_btn.onRelease = function() {

              clearInterval(myShowInt);

              myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

              nextBool=false;

              moveSlide();

              nextBool=true;

              };

               

              next_btn.onRelease = function() {

              clearInterval(myShowInt);

              myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

              moveSlide();

              };

               

              p.s.  if you're using movieclip buttons use swapDepths() to move them above your slide.  if they're simple buttons i think you can use swapDepths after defining it:

               

              Button.prototype.swapDepths=MovieClip.prototype.swapDepths;

              • 4. Re: Add next and previous button in xml as2 slideshow
                pantelis224466 Level 1

                To be completely correct, i had to use this:

                if (_root.target_mc>=_root.myImagesNo) {

                _root.target_mc = 0;

                }

                 

                before if(nextBool) to work.

                 

                I really appreciate your help!

                 

                As for swapDepths, my buttons are movieclips with instance names previous_btn and next_btn and if i use at the start of the code this:

                 

                previous_btn.swapDepths(current_mc);

                next_btn.swapDepths(current_mc);

                it doesn't work

                • 5. Re: Add next and previous button in xml as2 slideshow
                  kglad Adobe Community Professional & MVP

                  use:

                   

                  function createContainer() {

                  _root.createEmptyMovieClip("myContainer_mc",_root.getNextHighestDepth( ));

                   

                  previous_btn.swapDepths(_root.getNextHighestDepth());

                  next_btn.swapDepths(_root.getNextHighestDepth());

                   

                  myContainer_mc.lineTo(_root.myWidth,_root.myHeight);

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

                  myContainer_mc._y = (Stage.height-myContainer_mc._height)/2;

                  }

                  1 person found this helpful
                  • 6. Re: Add next and previous button in xml as2 slideshow
                    pantelis224466 Level 1

                    Thank you very much for your help!

                     

                    I apreciate it!