15 Replies Latest reply: Dec 22, 2012 5:22 AM by kglad RSS

    How to terminate the xml loaded scroller from consecutive pages?

    nikolaig Community Member

      I have an image thumb scroller on one of the pages, which is build by loading jpg files via xml set up.

      One I navigate to a different page how do I make sure it dissapears on the screen?

      Here id the code I used for building up this scroller:

       

      /////Parse XML
      //build scroller from xml
      function buildScroller(imageList:XMLList):void{
                trace("build Scroller");
      
                for (var item:uint = 0; item<imageList.length();item++) {
                          var thisOne:MovieClip = new MovieClip();
      
                          //outline
                           var blackBox:Sprite = new Sprite();
                          blackBox.graphics.beginFill(0xFFFFFF);
                          blackBox.graphics.drawRect(-1, -1, 62, 92);//-1,-1 places rectangle 1px left and up.62, 92 draws rectangle 1px wider on all sides of placed image dimenstions of 60x90
                          blackBox.alpha = thumbFadeOut;//setting Border Tweens
                          thisOne.addChild(blackBox);
                          thisOne.blackBox = blackBox;//setting Border Tweens
      
                            thisOne.x = thisOne.myx = (60 + padding) *item;//replaces the line above for scale tweenw roll over calculation. "myx" is a made up term which defines the position. 61 is the width of the thumb
                          thisOne.itemNum = item;
                          thisOne.title = imageList[item].attribute("title");
                          thisOne.link = imageList[item].attribute("url");
                          thisOne.src = imageList[item].attribute("src");
                          thisOne.alpha = 0;//makes all thumb images at alpha=0 before they are fully loaded
      
                          //Loading and Adding the Images
                          //image container
                          var thisThumb:MovieClip = new MovieClip();
                          //add image
                          var ldr:Loader = new Loader();
                          //var url:String = imageList[item].attribute("src");
                          var urlReq:URLRequest = new URLRequest(thisOne.src);
                          trace("loading thumbnail "+item+" into Scroller: " + thisOne.src);//url
                          ldr.load(urlReq);
                          //assign event listeners for Loader
                          ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler_AppPopUps);//tells us when the loading is complete
                          ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler_AppPopUps);//tells us if there are any typo errors when the loading is complete
                          thisThumb.addChild(ldr);
                          thisOne.addChild(thisThumb);
      
                          //create listeners for this thumb
                          thisOne.buttonMode = true;//makes boxes act as buttons
                          thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem_AppPopUps);//makes boxes act as buttons
                          thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem_AppPopUps);//traces the title when the mouse is over the bounding box in the Output Panel
                          thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem_AppPopUps);//traces the title when the mouse is out the bounding box in the Output Panel
      
      
      
                          //add item
                          scroller.addChild(thisOne);
                }
                scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);//adding movement on mouse position
                trace("termination of build scroller");
      
      }
      
      
        • 1. Re: How to terminate the xml loaded scroller from consecutive pages?
          kglad CommunityMVP

          apply removeChild to each displayobject added to the display list or, to the parent object(s).

          • 2. Re: How to terminate the xml loaded scroller from consecutive pages?
            nikolaig Community Member

            this went over my head, I am lost at your suggestion. I followed a tutorial on how to build this scroller, so perhaps from the code provided my expertise seems much higher than it is. Can you provide a code sample?

             

            What still stays on the screen are all the loaded jpg's via xml file. When I navigate to a different page then all other elements dissapear and only loaded jpg stay.

             

            Perhaps I need to something from the xml loading code below?

             

             

            //load xml
            var xmlLoader:URLLoader = new URLLoader();
            /////Parse XML
            var xmlData:XML = new XML();
            var xmlPath:String = "loadingAssets/appThumbnails/slideshow_image_scroller_ActiveTuts_mine/app_thmbs_imgs60x90.xml";
            xmlLoader.load(new URLRequest(xmlPath));
            trace("loading xml from: " + xmlPath);
            xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
            
            function LoadXML(e:Event):void {
                xmlData = new XML(e.target.data);
                buildScroller(xmlData.image); //rather than trace the xmlList, we send it to our buildScroller function
            }
            
            • 3. Re: How to terminate the xml loaded scroller from consecutive pages?
              kglad CommunityMVP

              when you navigate to another frame (or otherwise want to remove your scroller) call this function:

               

              function removeScrollerF():void{

              scroller.removeEventListener(Event.ENTER_FRAME, moveScrollerThumbs);

              removeChild(scroller);

              scroller=null;  // if, when you want to re-create your scroller, it fails to be re-created, remove this line of code.

              }

               

              p.s. please mark helpful/correct responses.

              • 4. Re: How to terminate the xml loaded scroller from consecutive pages?
                nikolaig Community Member

                I always mark your answers correct and helpful, it just this issue was not resolved yet.

                 

                I implemented your code but it did not work out. Did not through any errors, just nothing happened. I tried to search on google,  and they say that it is some difficulties in removing loaded xml images?

                I assumed that your code I have to implement on every other frame as soon as I navigate out of the page with the scroller?

                There is nothing I implemented on the page with the scroller itself.

                 

                I also tried to change

                scroller.removeEventListener(Event.ENTER_FRAME, moveScrollerThumbs);

                 

                to

                 

                scroller.removeEventListener(Event.ENTER_FRAME, buildScroller);

                 

                but it did not work out. Would you recommend which direction to experiment with?

                • 5. Re: How to terminate the xml loaded scroller from consecutive pages?
                  kglad CommunityMVP

                  don't change the code i suggested.  this is correct:

                   

                  function removeScrollerF():void{

                  scroller.removeEventListener(Event.ENTER_FRAME, moveScrollerThumbs);

                  removeChild(scroller);

                  scroller=null;  // if, when you want to re-create your scroller, it fails to be re-created, remove this line of code.

                  }

                   

                  //////////////////

                  now, show the code you used to call that function in one of the other frames.

                  • 6. Re: How to terminate the xml loaded scroller from consecutive pages?
                    nikolaig Community Member

                    I placed this code at the very end of all the code on the page with the xml loaded jpgs:

                     

                    /////////////////////////////

                     

                    function removeScrollerF():void{

                     

                    scroller.removeEventListener(Event.ENTER_FRAME, moveScrollerThumbs);

                     

                    removeChild(scroller);

                     

                    scroller=null;  // if, when you want to re-create your scroller, it fails to be re-created, remove this line of code.

                     

                    }

                    /////////////////////////////

                     

                    I have no errors, just nothing happens... the thumbs are still there when I navigate out of the page where the scroller is.

                    • 7. Re: How to terminate the xml loaded scroller from consecutive pages?
                      kglad CommunityMVP

                      again, you must call that function when you want to remove your scroller.

                       

                      and again, show the code you are using to call that function when navigating to another frame.

                      • 8. Re: How to terminate the xml loaded scroller from consecutive pages?
                        nikolaig Community Member

                        All right, thanks for making it a bit of educationla experience.

                         

                        I think I understood (to an extent) what you are requesting to be done.

                         

                        I made a test button "testDelete_mc" which removes the scroller with the following set up:

                         

                        testDelete_mc.addEventListener(MouseEvent.CLICK, removeScrollerF);

                         

                        function removeScrollerF(e:MouseEvent):void{

                         

                        scroller.removeEventListener(Event.ENTER_FRAME, moveScrollerThumbs);

                         

                        removeChild(scroller);

                         

                        scroller=null;  // if, when you want to re-create your scroller, it fails to be re-created, remove this line of code.

                        trace("you tried to delete the scroller");

                         

                        }

                         

                        I understood that I can assign this function to an object, i.e. button in my case.

                        My problem is what do I assign this function to if I want the scroller to be removed when a user navigates out of the current frame? Which means there are too many buttons which could be clicked. The best way would be if the function starts to work on something as exit frame?

                        I tried Event.EXIT_FRAME but it did not work for me or I could not use it properly. I also not sure what would call this action, or what would it be assigned to, if there is no button, to the scroller itself?

                        • 9. Re: How to terminate the xml loaded scroller from consecutive pages?
                          kglad CommunityMVP

                          if you navigate to a different page using a navigation button with code like:

                           

                          btn.addEventListener(MouseEvent.CLICK,navF);

                           

                          function navF(e:MouseEvent):void{

                          gotoAndStop(4);

                          }

                           

                          //change that to:

                           

                          btn.addEventListener(MouseEvent.CLICK,navF);

                           

                          function navF(e:MouseEvent):void{

                          removeScrollerF();  // and use the code i suggested for removeScrollerF, not the code you used.

                          gotoAndStop(4);

                          }

                          • 10. Re: How to terminate the xml loaded scroller from consecutive pages?
                            nikolaig Community Member

                            Unfortunately on my level of limited expertise you aswers seemed not 100% to the point. So I figured the solution was too obvious for you to point out and you intended for me to come up with it. This is why I started to try something on my own.

                            Here is the final code, as I understand done per your suggestions:

                             

                            //removing the scroller///////////////////////////////////////////////////////

                            //first.setting up the function which will remove the scroller//

                             

                            function removeScrollerF():void{

                             

                            scroller.removeEventListener(Event.ENTER_FRAME, moveScrollerThumbs);

                             

                            removeChild(scroller);

                             

                            scroller=null;  // if, when you want to re-create your scroller, it fails to be re-created, remove this line of code.

                             

                            }

                             

                            ///second. creating a button which will remove the scroller//

                            testDelete_mc.addEventListener(MouseEvent.CLICK, navF);

                             

                            //third.assigning the function to the button which calls the function to remove the scroller//

                            function navF(e:MouseEvent):void{

                             

                            removeScrollerF();//this is the function which is called to remove the scroller

                            gotoAndPlay("howto");

                            }

                            /////////////////////////////////////////////////////////////////////////////////////

                             

                            please confirm if the code is correct.

                            • 11. Re: How to terminate the xml loaded scroller from consecutive pages?
                              kglad CommunityMVP

                              the code is correct.  the comments aren't exactly correct but that won't stop the code from working.

                              • 12. Re: How to terminate the xml loaded scroller from consecutive pages?
                                nikolaig Community Member

                                : )

                                any chance you can correct my comments, at least I will have an understanding of the working code?

                                • 13. Re: How to terminate the xml loaded scroller from consecutive pages?
                                  kglad CommunityMVP

                                  i added comments and another line of code to prevent a problem if you were to use the same navigation code after the scroller is removed:

                                   

                                   

                                   

                                  //removing the scroller///////////////////////////////////////////////////////

                                  //first.setting up the function which will remove the scroller and stop it from consuming resources//

                                  function removeScrollerF():void{

                                  if(scroller){

                                  scroller.removeEventListener(Event.ENTER_FRAME, moveScrollerThumbs);

                                  removeChild(scroller);

                                  scroller=null;

                                  }

                                  }

                                   

                                  ///second. add listeners for naviagation objects

                                  testDelete_mc.addEventListener(MouseEvent.CLICK, navF);

                                   

                                  //third.  create the listener functions for navigation objects

                                  function navF(e:MouseEvent):void{

                                  // in each listener function call the function that removes the scroller

                                  removeScrollerF();

                                  // add the navigation code

                                  gotoAndPlay("howto");

                                  }

                                  ////////////////////////////////////////////////////////////////////// ///////////////

                                  • 14. Re: How to terminate the xml loaded scroller from consecutive pages?
                                    nikolaig Community Member

                                    Great , this works perfectly!. Extra thanks for an explanation and if(scroller){} bonus!