10 Replies Latest reply on Apr 22, 2010 3:01 PM by Ned Murphy

    XML Driven rotating banner ad question

    FlashNewGuy

      Hi everyone i a very ametur flash designer,

      At the moment i am trying to make a flash banner that rotates banners out randomly and also when the guest sees the a banner they are intrested in they can click on it and it will take them to the respective link. I followed some tutorials out there on how to use xml and flash together and came up with this for my flash code:

      // set random # variables - each must be 0 for first 'while' loop below
      var randomNum = 0;
      var randomNumLast = 0;

       

      // parent container
      var container_mc = this.createEmptyMovieClip("container",0);
      // movie clip containers
      container_mc.createEmptyMovieClip("loader1_mc",2);
      container_mc.createEmptyMovieClip("loader2_mc",1);

       

      // preload watcher
      this.createEmptyMovieClip("watcher_mc",100);

       

      // load xml
      images_xml = new XML();
      images_xml.ignoreWhite=true;
      images_xml.onLoad = parse;
      images_xml.load("images.xml");

       

      function parse(success) {
          if (success) {
              imageArray = new Array();
              var root = this.firstChild;
              _global.numPause = Number(this.firstChild.attributes.timer * 1000);
              _global.order = this.firstChild.attributes.order;
              _global.looping = this.firstChild.attributes.looping;
              _global.fadetime = Number(this.firstChild.attributes.fadetime);
              _global.xpos = Number(this.firstChild.attributes.xpos);
              _global.ypos = Number(this.firstChild.attributes.ypos);
              var imageNode = root.lastChild;
              var s=0;
              while (imageNode.nodeName != null) {
                  imageData = new Object;
                  imageData.path = imageNode.attributes.path;
                  imageArray[s]=imageData;
                  imageNode = imageNode.previousSibling;
                  s++;
              }
              // place parent container
              container_mc._x = _global.xpos;
              container_mc._y = _global.ypos;
              // parse array
              imageArray.reverse();
              imageGen(imageArray);
          } else {
              trace('problem');
          }
      }

       

      // depth swapping
      function swapPlace(clip,num) {
          eval(clip).swapDepths(eval("container_mc.loader"+num+"_mc"));
      }

       

      function loadImages(data,num) {
          if (i==undefined || i == 2) {
              i=2;
              createLoader(i,data,num);
              i=1;
          } else if (i==1) {
              createLoader(i,data,num);
              i=2;
          }
      }
      function createLoader(i,data,num) {
          thisLoader=eval("container_mc.loader"+i+"_mc");
          thisLoader._alpha=0;
          thisLoader.loadMovie(data[num].path);
          watcher_mc.onEnterFrame=function () {
              var picLoaded = thisLoader.getBytesLoaded();
              var picBytes = thisLoader.getBytesTotal();
              if (isNaN(picBytes) || picBytes < 4) {
                  return;
              }
              if (picLoaded / picBytes >= 1) {
                  swapPlace("container_mc.loader2_mc",1);
                  alphaTween = new mx.transitions.Tween(thisLoader, "_alpha", mx.transitions.easing.Regular.easeOut,0,100,_global.fadetime,true);
                  timerInterval = setInterval(imageGen,_global.numPause,data);
                  delete this.onEnterFrame;
              }
          }
      }
      function imageGen(data) {
          // random, or sequential?
          if (_global.order=="random") {
              // choose random # between 0 and total number of images
              while (randomNum == randomNumLast) {
                  randomNum = Math.floor(Math.random() * data.length);
                  trace(randomNum);
              }
              loadImages(data,randomNum);
              randomNumLast = randomNum;
          } else if (_global.order=="sequential") {
              // start at 0, increment to total number of images, then drop back to zero when done
              if (p==undefined || p==data.length && _global.looping=="yes") { p=0; } else { break; }
              loadImages(data,p);
              p++;
          } else {
              trace ("order attribute in xml isn't correct - must specify either 'random' or 'sequential'");
          }
          clearInterval(timerInterval);
      }
      stop();

       

      XML:

      <gallery timer="5" order="random" fadetime="2" looping="yes" xpos="0" ypos="0">
      <image path="images/12_02.png" />
      <image path="images/600x300callawway_kodak.jpg" />
      <image path="images/BurnerBucksTemplate_600x300.jpg" />
      <image path="images/DEI-594-X-250-copy.png" />
      <image path="images/Wilson_DFY_600X300.jpg" />
      <image path="images/sky_golf.jpg" />
      </gallery>

       

       

      Now everything works right so far, my question is how would i make the banners/images into links so when the banner is clicked i can add a link to it so they are taken to that product.

        • 1. Re: XML Driven rotating banner ad question
          Ned Murphy Adobe Community Professional & MVP

          One way to approach it is to make an invisible button that is the size of the banner and assign it getURL coding that uses a variable to define the URL.

           

          btn.onRelease = function(){

               getURL(urlVariable);

          }

           

          When you are cycling the images you will also cycle the value of that variable so that it matches the image/banner.  So your xml should include a link value for each image that you parse into an array as you do for the images (imageArray).  And each time an image is changed, the same index value is used to assign the url to the URL variable.

          • 2. Re: XML Driven rotating banner ad question
            FlashNewGuy Level 1

            Thank You for responding, that is a great idea so i made a button the same size as my banners and on that button i added :

            btn.onRelease = function(){

                 getURL(urlVariable);

            }

            Which i do understand, but i am sorry if i not sure how to set this up , how would i structure my xml  that i have:

             

             

            How do i assign each image a urlVariable?

            • 3. Re: XML Driven rotating banner ad question
              Ned Murphy Adobe Community Professional & MVP

              That code does not go on the button like you would do with on(release) code.  That code will go with the rest of the code you showed.  You will assign an instance name to that button... if you use the code I showed, that instance name will be "btn"--you assign it by selecting the button on the stage and entering it into the Properties panel where it says <Instance Name>.  You will also declare the urlVAriable where that code is...

               

              var urlVariable:String;

               

              As for the xml end of things, I will leave you to solve with a little help.  Look at the parse function and try to see how the current xml information is captured and later utilized.   You will essentially create another parameter in each xml node to go with the current "path" parameter.  You can call it "link" or something like that, and it will contain the url that clicking the button will lead to.

               

              <gallery timer="5" order="random" fadetime="2" looping="yes" xpos="0" ypos="0">
              <image path="images/12_02.png" link="http://www.somesite.com" />
              <image path="....

              </gallery>

               

              When you parse the xml you will add the link value as another property of the imageData object that you create.

               

                      while (imageNode.nodeName != null) {
                          imageData = new Object;
                          imageData.path = imageNode.attributes.path;

                          imageData.link = imageNode.attributes.link;

                          imageArray[s]=imageData;
                          imageNode = imageNode.previousSibling;
                          s++;
                      }

              The rest I will leave for you to sink your teeth into... you need to dig into the code that is used to present the banners and see where assigning the value of the link to the urlVariable needs to happen.

              • 4. Re: XML Driven rotating banner ad question
                FlashNewGuy Level 1

                Thank you very much that helps a lot

                • 6. Re: XML Driven rotating banner ad question
                  FlashNewGuy Level 1

                  I think i am on the right track but i am slightly confused by your last few lines"see where assigning the value of the link to the urlVariable needs to  happen." When you sugested the code for the button i took it off the button and then at the top of my AS I put:

                  // button for links
                  var urlVariable:String;
                  btn.onRelease = function(){
                       getURL(urlVariable);
                  }

                  So what your suggesting is i need to find where in the code i would var urlVaraible would go , that way it refers back to the xml,-----hope that makes sense, i am very new with all this and i am thinking i bit off a little more then i can handle.Another thing is i went this route bc i original had a flash banner rotater that randomly grabed panners that were aligned in a strip and it would just jump to a random postion that i set up in a array. But this did work but it gave me a huge swf file so i tought if i did it this way with the xml it would cause it to load faster, do you think i am doing the right thing using xml .

                  • 7. Re: XML Driven rotating banner ad question
                    Ned Murphy Adobe Community Professional & MVP

                    You are doing the right thing using xml... it's the smarter way to go and when you take the time to learn what you're creating here you'll be a happier camper for the experience.

                     

                    The way you showed that code just now is what I mean you to do.  It could/should sit at the top of all of the code you showed in your first posting.  That one line for the urlVariable is simply establishing the variable so that you can make use of it later in your other code.  Buried somewhere in the code you first showed you need to figure out where to assign a value to the urlVariable.... as in

                     

                    urlVariable = data[num].link;

                     

                    but that is just a blindly offered hint as to a possible place to put the code and what to use.  I honestly haven't taken time to go thru all the code you showed, so that was just a wild pitch that may or may not make it over the plate.  On another blind note... your code uses the loadMovie function to load the  swf's... and it uses a preloader of sorts to wait to display it...  when that preloader finishes (picLoaded / picBytes >= 1)  is when you want to assign that value

                    • 8. Re: XML Driven rotating banner ad question
                      FlashNewGuy Level 1

                      Thanks again going to try to get a better hang on this tomorrow when i get back to work, i really appreciate the help. Hopefully i can get this thing working tomorrow.

                      • 9. Re: XML Driven rotating banner ad question
                        FlashNewGuy Level 1

                        Well I finally got it to work on my local machine, but now my problem is that, when i upload to our server it dosent seem to work. I see when i right click in the area where the banner would show up it has the abiltiy to change flash settings. So that leads me to believe that it is up but no communicating with my XML. Do i need to reference my xml file path in my action script?I didn't think i need to if it was in the same folder as my flash movie and my images folder.Any suggestions?

                        • 10. Re: XML Driven rotating banner ad question
                          Ned Murphy Adobe Community Professional & MVP

                          When it comes to Flash in html pages, everything that Flash targets needs to be relative to the html page.  If your Flash is not in the same folder as the html page, then you need to adjust the targeting of external files in it as if it is in th html file's folder.