13 Replies Latest reply on Jul 3, 2011 4:42 PM by kglad

    Scripting Transition

    BlackOpsRanger

      Hello, I've been trying to figure out a way to add a transition script to my existing AS2 code so I can make my MC (picture) transition each time a new photo is called.

      Using Flash CS4 and calling images through an XML document. The code works perfectly right now, except it only uses the "fade alpha" technique as an image transition. I need to use a different transition method. I prefer something a little funky if possible, but ultimately I need something like the built in "Blinds" compnent to work. Here is the current code:

       

      stop();
      delay = 6000;
      //-----------------------
      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();

       

      }

       

      };
      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();
      slideshow();

       

      }

       

      }

       

      }
      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();
      slideshow();

       

      }

       

      }
      function picture_num() {

       

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

       

      }
      function slideshow() {

       

      myInterval = setInterval(pause_slideshow, delay);
      function pause_slideshow() {

       

      clearInterval(myInterval);
      if (p == (total-1)) {

       

      p = 0;
      firstImage();

       

      } else {

       

      nextImage();

       

      }

       

      }

       

      }

       

      I also tried to use the following script method, but it didnt work properly:

       

      import mx.transitions.*;
      var myTransParams:Object = new Object({type:Blinds, numStrips:15, dimension:1, direction:0, duration:1, easing:easing.Strong.easeOut});
      var myTM:TransitionManager = new TransitionManager(picture);
      myTM.startTransition(myTransParams);

       

      Any help is great appreciated and I thank you in advance!!

        • 1. Re: Scripting Transition
          kglad Adobe Community Professional & MVP

          the transitionmanager class is for as3.

           

          to use something comparable, you'll need to create your own transition or find one.  using google is a good way to find such things if you don't want to make your own.

          1 person found this helpful
          • 2. Re: Scripting Transition
            BlackOpsRanger Level 1

            Wow, I didn't even realize that. Thanks!!

            I don't mind making the transition myself, I'm just unsure of how to call it

            with actionscript so that it plays between each image. Thanks for your help,

            as always!

            • 3. Re: Scripting Transition
              kglad Adobe Community Professional & MVP

              your transition will usually require a sequence of small changes over time.  so, you'll probably want to use an enterframe loop or setInterval() loop.

               

              you'll probably want the current image to remain on-screen while you transition to your next image.  that will require, at least, two target movieclips.

               

              beyond that, you have many ways to accomplish whatever transition you can envision.

              1 person found this helpful
              • 4. Re: Scripting Transition
                BlackOpsRanger Level 1

                My current code already uses the setInterval() method. I would actually like to create something of a mask transition

                and call it at the correct point within the current code. I'm not sure how I would incorporate another target MC without

                having to duplicate sections of the existing code. If it were as simple as creating a basic transitionMC, giving it an instance

                name of "transition_mc" and then calling it from within the current code, I could do that. Otherwise, I'm not sure how it would fit in.

                • 5. Re: Scripting Transition
                  kglad Adobe Community Professional & MVP

                  if you're going to use a mask effect, you don't need to use a loop.  you can timeline animate your mask from a shape that masks nothing to a shape that masks the entire image.   different ways of animating the mask will yield different transition effects.  you can get some highly varied and interesting effects with this technique.

                   

                  assign your next image's target movieclip to have an alpha of 0 until loading is complete when you'll assign the mask to the target movieclip and assign the target's alpha to 100.

                  1 person found this helpful
                  • 6. Re: Scripting Transition
                    BlackOpsRanger Level 1

                    Is there anyway you would be able to put a sample script together to demonstrate what you mean? I know how to make the mask with the timeline animation, I'm just not sure how to call it and make it work using the code I already have. If you could put a quick sample together and insert it into my existing code, I would appreciate that.

                    I didn't write the initial code myself, I had help. So I'm not 100% on how to adjust it to reach my desired effect.

                    I know its a lot to ask, but I sincerely appreciate the help. Thanks again.

                    • 7. Re: Scripting Transition
                      kglad Adobe Community Professional & MVP

                      this will get you started:

                       


                       

                      stop();
                      delay = 6000;
                      //-----------------------
                      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();

                       

                      }

                       

                      };
                      p = 0;

                      var tl:MovieClip=this;

                       

                      function preloadF() {

                      filesize = picture.getBytesTotal();
                      loaded = picture.getBytesLoaded();
                      preloader._visible = true;
                      if (loaded != filesize) {

                      preloader.preload_bar._xscale = 100*loaded/filesize;

                      } else {

                      preloader._visible = false;

                      delete this.onEnterFrame;

                      picture.setMask(yourmask_mc);  // use correct mask name

                      }

                      };


                      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();
                      slideshow();

                      }

                      }

                      }


                      function prevImage() {

                      if (p>0) {

                      p--;
                      picture._alpha = 0;
                      picture.loadMovie(image[p], 1);
                      desc_txt.text = description[p];
                      picture_num();

                      slideshow();

                      }

                      }


                      function firstImage() {

                      if (loaded == filesize) {

                      picture._alpha = 0;
                      picture.loadMovie(image[0], 1);
                      desc_txt.text = description[0];
                      picture_num();
                      slideshow();

                      }

                      }


                      function picture_num() {

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

                      }

                       

                      // this is wrong.  never nest named functions
                      function slideshow() {

                      tl.onEnterFrame=preloadF;

                      clearInterval(myInterval);

                      myInterval = setInterval(pause_slideshow, delay);

                      }


                      function pause_slideshow() {

                      clearInterval(myInterval);
                      if (p == (total-1)) {

                      p = 0;
                      firstImage();

                      } else {

                      nextImage();

                      }

                      }

                       


                      • 8. Re: Scripting Transition
                        BlackOpsRanger Level 1

                        I built an MC and set it as a mask, even gave it an instance name.

                        When I tested the movie, it only showed the mask, nothing else.


                        • 9. Re: Scripting Transition
                          kglad Adobe Community Professional & MVP

                          you're not using the correct instance name in your setMask argument.   use the trace() function to confirm.

                          1 person found this helpful
                          • 10. Re: Scripting Transition
                            BlackOpsRanger Level 1

                            I set the instance name as the same name of the MC. I'm not sure how to run the trace() command

                            • 11. Re: Scripting Transition
                              kglad Adobe Community Professional & MVP

                              copy and paste the code you're using.

                              • 12. Re: Scripting Transition
                                BlackOpsRanger Level 1

                                stop();
                                delay = 6000;
                                //-----------------------
                                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();

                                 

                                }

                                 

                                };
                                p = 0;

                                var tl:MovieClip=this;

                                 

                                function preloadF() {

                                filesize = picture.getBytesTotal();
                                loaded = picture.getBytesLoaded();
                                preloader._visible = true;
                                if (loaded != filesize) {

                                preloader.preload_bar._xscale = 100*loaded/filesize;

                                } else {

                                preloader._visible = false;

                                delete this.onEnterFrame;

                                picture.setMask(main_mask);  // use correct mask name

                                }

                                };


                                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();
                                slideshow();

                                }

                                }

                                }


                                function prevImage() {

                                if (p>0) {

                                p--;
                                picture._alpha = 0;
                                picture.loadMovie(image[p], 1);
                                desc_txt.text = description[p];
                                picture_num();

                                slideshow();

                                }

                                }


                                function firstImage() {

                                if (loaded == filesize) {

                                picture._alpha = 0;
                                picture.loadMovie(image[0], 1);
                                desc_txt.text = description[0];
                                picture_num();
                                slideshow();

                                }

                                }


                                function picture_num() {

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

                                }

                                 

                                // this is wrong.  never nest named functions
                                function slideshow() {

                                tl.onEnterFrame=preloadF;

                                clearInterval(myInterval);

                                myInterval = setInterval(pause_slideshow, delay);

                                }


                                function pause_slideshow() {

                                clearInterval(myInterval);
                                if (p == (total-1)) {

                                p = 0;
                                firstImage();

                                } else {

                                nextImage();

                                }

                                }

                                • 13. Re: Scripting Transition
                                  kglad Adobe Community Professional & MVP

                                  what's the following trace() shows

                                   


                                  stop();
                                  delay = 6000;
                                  //-----------------------
                                  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();

                                   

                                  }

                                   

                                  };
                                  p = 0;

                                  var tl:MovieClip=this;

                                   

                                  function preloadF() {

                                  filesize = picture.getBytesTotal();
                                  loaded = picture.getBytesLoaded();
                                  preloader._visible = true;
                                  if (loaded != filesize) {

                                  preloader.preload_bar._xscale = 100*loaded/filesize;

                                  } else {

                                  preloader._visible = false;

                                  delete this.onEnterFrame;

                                  trace(main_mask);

                                  picture.setMask(main_mask);  // use correct mask name

                                  }

                                  };


                                  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();
                                  slideshow();

                                  }

                                  }

                                  }


                                  function prevImage() {

                                  if (p>0) {

                                  p--;
                                  picture._alpha = 0;
                                  picture.loadMovie(image[p], 1);
                                  desc_txt.text = description[p];
                                  picture_num();

                                  slideshow();

                                  }

                                  }


                                  function firstImage() {

                                  if (loaded == filesize) {

                                  picture._alpha = 0;
                                  picture.loadMovie(image[0], 1);
                                  desc_txt.text = description[0];
                                  picture_num();
                                  slideshow();

                                  }

                                  }


                                  function picture_num() {

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

                                  }

                                   

                                  // this is wrong.  never nest named functions
                                  function slideshow() {

                                  tl.onEnterFrame=preloadF;

                                  clearInterval(myInterval);

                                  myInterval = setInterval(pause_slideshow, delay);

                                  }


                                  function pause_slideshow() {

                                  clearInterval(myInterval);
                                  if (p == (total-1)) {

                                  p = 0;
                                  firstImage();

                                  } else {

                                  nextImage();

                                  }

                                  }

                                  :