21 Replies Latest reply on May 15, 2009 7:44 AM by kglad

    setInterval or do I need a hit test?

    Techmaniac

      I've a flash piece that uses 6 "houses" (buttons) to display information about mortgage products.  The houses are displayed together in a movie clip that, when rolling over, the user gets a brief description of the product.  I've placed a setInterval to keep the text up for 3000 miliseconds after the cursor leaves a "house".  The problem is after they initially mouseover a house, the onRollover event seems to not hold the text visable.

       

      Code:

      on(rollOver){
          clearInterval(timer);
          clearInterval(timer2);
          _root.DisplayText("adjustable");
          _root.DisplayTextBg(1);
      }
      on(rollOut){
          clearInterval(timer);
          clearInterval(timer2);
          timer = setInterval(_root.DisplayText,3000);
          timer2 = setInterval(_root.DisplayTextBg,3000);
      }

       

      timer and timer2 are declared on the first frame, and this code is in each button.  The functions for displaying text and the background image are on the first frame:

       

      function DisplayTextBg(fade){
          if (fade==1){
              for (i=0;i<100;i++){
                  textBg1._alpha += 1;
              }
          }else{
              textBg1._alpha = 0;
          }
      }
      function DisplayText(product){
          //trace(product);
          switch(product){
              case "fixed":
                  varLoader.load("fixed.txt");
                  break;
              case "adjustable":
                  varLoader.load("adjustable.txt");
                  break;
              case "possible":
                  varLoader.load("homepossible.txt");
                  break;
              case "reverse":
                  varLoader.load("reverse.txt");
                  break;
              case "equity":
                  varLoader.load("equity.txt");           
                  break;
              case "heloc":
                  varLoader.load("heloc.txt");
                  break;
              default:
                  prodIntro_text.htmlText = "";
                  prodTitle_text.htmlText = "";
                  //trace("default case");
          }

       

      What should I do to get the rollover to persist after the initial rollout?  Is there a requirement for hit test to make this work?  I clear the interval at all stages, so I'm not sure why this doesn't work.

        • 1. Re: setInterval or do I need a hit test?
          kglad Adobe Community Professional & MVP

          clear your intervals after the function calls.  or better yet, use setTimeout()

          • 2. Re: setInterval or do I need a hit test?
            Techmaniac Level 1

            You mean at the end of the DisplayText and DisplayTextBg functions.  That didn't change the behavior.  What's weird is that the setInterval is only called in the onRollout, yet the text seems to function the same interval display on the Rollover as well.

            • 3. Re: setInterval or do I need a hit test?
              kglad Adobe Community Professional & MVP

              show your updated code.

              • 4. Re: setInterval or do I need a hit test?
                Techmaniac Level 1

                function DisplayTextBg(fade){
                    if (fade==1){
                        for (i=0;i<100;i++){
                            textBg1._alpha += 1;
                        }
                    }else{
                        textBg1._alpha = 0;
                    }

                     clearInterval(timer2);
                }
                function DisplayText(product){
                    //trace(product);
                    switch(product){
                        case "fixed":
                            varLoader.load("fixed.txt");
                            break;
                        case "adjustable":
                            varLoader.load("adjustable.txt");
                            break;
                        case "possible":
                            varLoader.load("homepossible.txt");
                            break;
                        case "reverse":
                            varLoader.load("reverse.txt");
                            break;
                        case "equity":
                            varLoader.load("equity.txt");           
                            break;
                        case "heloc":
                            varLoader.load("heloc.txt");
                            break;
                        default:
                            prodIntro_text.htmlText = "";
                            prodTitle_text.htmlText = "";
                            //trace("default case");

                    }

                     varLoader.onLoad = function(){
                        prodTitle_text.htmlText = varLoader.introHTML;
                        prodIntro_text.htmlText = varLoader.prodHTML;
                    }

                     clearInterval(timer);

                }

                 

                It's wacky now with text and background disjointed in their display.  Even when I try both clearIntervals in the same function it still doesn't persist onRollover.

                • 5. Re: setInterval or do I need a hit test?
                  kglad Adobe Community Professional & MVP

                  if those are movieclip buttons, you have a path problem to your interval name.

                   

                  the easiest remedy would be to use

                   

                  _root.timer=setInterval(...);

                   

                  and

                   

                  _root.timer2=setInterval(.....);

                   

                  in your movieclip buttons.

                  • 6. Re: setInterval or do I need a hit test?
                    Techmaniac Level 1

                    Now the text and background doesn't even stay on during the Rollover event.

                    • 7. Re: setInterval or do I need a hit test?
                      kglad Adobe Community Professional & MVP

                      show your code.

                      • 8. Re: setInterval or do I need a hit test?
                        Techmaniac Level 1

                        //first frame

                        import flash.filters.mx.transitions;
                        import mx.transitions.Tween;
                        import mx.transitions.easing.Strong;
                        import flash.display.BitmapData;

                         

                        var timer;
                        var timer2;
                        var houseNumber:Number;
                        var mcName:MovieClip;
                        var linkageId:String;

                         

                        //Fade Function for movieclips
                        MovieClip.prototype.fadeOut = function(time) {
                        new Tween(this, '_alpha', Strong.easeOut, 100, 0, time, true);
                        }

                         

                        varLoader = new LoadVars();
                        stop();
                        function DisplayTextBg(fade){
                            if (fade==1){
                                for (i=0;i<100;i++){
                                    textBg1._alpha += 1;
                                }
                            }else{
                                textBg1._alpha = 0;
                            }
                        }
                        function DisplayText(product){
                            //trace(product);
                            switch(product){
                                case "fixed":
                                    varLoader.load("fixed.txt");
                                    break;
                                case "adjustable":
                                    varLoader.load("adjustable.txt");
                                    break;
                                case "possible":
                                    varLoader.load("homepossible.txt");
                                    break;
                                case "reverse":
                                    varLoader.load("reverse.txt");
                                    break;
                                case "equity":
                                    varLoader.load("equity.txt");           
                                    break;
                                case "heloc":
                                    varLoader.load("heloc.txt");
                                    break;
                                default:
                                    prodIntro_text.htmlText = "";
                                    prodTitle_text.htmlText = "";
                                    //trace("default case");
                            }
                            varLoader.onLoad = function(){
                                prodTitle_text.htmlText = varLoader.introHTML;
                                prodIntro_text.htmlText = varLoader.prodHTML;
                            }
                            clearInterval(_root.timer);
                            clearInterval(_root.timer2);
                        }

                         

                        //code in each button

                        //this is the adjustable rate product

                         

                        on(rollOver){
                            _root.DisplayText("adjustable");
                            _root.DisplayTextBg(1);
                        }
                        on(rollOut){
                            _root.timer = setInterval(_root.DisplayText,3000);
                            _root.timer2 = setInterval(_root.DisplayTextBg(0),3000);
                        }

                        • 9. Re: setInterval or do I need a hit test?
                          kglad Adobe Community Professional & MVP
                          //first frame
                          
                          import flash.filters.mx.transitions;
                          import mx.transitions.Tween;
                          import mx.transitions.easing.Strong;
                          import flash.display.BitmapData;
                          
                           
                          
                          var timer;
                          var timer2;
                          var houseNumber:Number;
                          var mcName:MovieClip;
                          var linkageId:String;
                          
                           
                          
                          //Fade Function for movieclips
                          MovieClip.prototype.fadeOut = function(time) {
                          new Tween(this, '_alpha', Strong.easeOut, 100, 0, time, true);
                          }
                          
                           
                          
                          varLoader = new LoadVars();
                          stop();
                          function DisplayTextBg(fade){
                               clearInterval(_root.timer2);
                              if (fade==1){
                                  for (i=0;i<100;i++){
                                      textBg1._alpha += 1;
                                  }
                              }else{
                                  textBg1._alpha = 0;
                              }
                          }
                          function DisplayText(product){
                              //trace(product);
                              switch(product){
                                  case "fixed":
                                      varLoader.load("fixed.txt");
                                      break;
                                  case "adjustable":
                                      varLoader.load("adjustable.txt");
                                      break;
                                  case "possible":
                                      varLoader.load("homepossible.txt");
                                      break;
                                  case "reverse":
                                      varLoader.load("reverse.txt");
                                      break;
                                  case "equity":
                                      varLoader.load("equity.txt");           
                                      break;
                                  case "heloc":
                                      varLoader.load("heloc.txt");
                                      break;
                                  default:
                                      prodIntro_text.htmlText = "";
                                      prodTitle_text.htmlText = "";
                                      //trace("default case");
                              }
                              varLoader.onLoad = function(){
                                  prodTitle_text.htmlText = varLoader.introHTML;
                                  prodIntro_text.htmlText = varLoader.prodHTML;
                              }
                              clearInterval(_root.timer);
                          
                          }
                          
                           
                          
                          //code in each button
                          
                          //this is the adjustable rate product
                          
                           
                          
                          on(rollOver){
                              _root.DisplayText("adjustable");
                              _root.DisplayTextBg(1);
                          }
                          on(rollOut){
                               clearInterval(_root.timer2);
                               clearInterval(_root.timer);
                              _root.timer = setInterval(_root.DisplayText,3000);
                              _root.timer2 = setInterval(_root.DisplayTextBg(0),3000);
                          }
                          
                          • 10. Re: setInterval or do I need a hit test?
                            Techmaniac Level 1

                            It still kills the onRollover display function after the initial rollover.  So the first time you rollover the image/button, the text and background display fine until you mouse off.  The text and background then disapear after three seconds, as intended.  When you subsequently rollover the button, the text and background no longer persist.  This issue has not been rectified by moving the clearInterval call to various locations in the code (inside the button, first frame code as suggested).

                             

                            What could explain the inconsistency?

                            • 11. Re: setInterval or do I need a hit test?
                              kglad Adobe Community Professional & MVP

                              you're setting an interval elsewhere in your code.

                              • 12. Re: setInterval or do I need a hit test?
                                Techmaniac Level 1

                                Are you referring to setting an interval in general, or using the timer and timer2 varaibles?  I'm not setting any other intervals in the first frame, where all actions reside.  I am only setting an interval on each movieclip button with the onrollout event.  I've seen no code to explain the fact that the text doesn't persist onRollover.

                                • 13. Re: setInterval or do I need a hit test?
                                  kglad Adobe Community Professional & MVP

                                  in general.

                                   

                                  there's nothing in the code i posted that calls either function with an undefined parameter except the setInterval() functions and they both are cleared after one call.  and there's nothing in that code that clears textfield text except undefined parameter calls.  so, something else is going on.

                                  • 14. Re: setInterval or do I need a hit test?
                                    Techmaniac Level 1

                                    The persistence of the text on the first rollover is not a problem.  The issue seems to be that after then first interval is set by one movie clip, and cleared from that movie clip, the next one of the six houses can't get a clean rollover call to DisplayText.

                                     

                                    Example:

                                     

                                    I rollover "adjustable" house and hover, the text remains as long as the cursor is over. If I roll-off that clip and come back it continues to behave properly.  As soon as I choose another house, the setInterval call seems to kick in regardless of the cursors position.  So I can't get the onRollover to behave like it's intended, with persistence.  That is why the thought was that I might need to add a hittest to the onrollover function.

                                     

                                    Looking back through the code, there is no other instances of setInterval, except for frame 2 which is after a movie clip button has been clicked.

                                    • 15. Re: setInterval or do I need a hit test?
                                      kglad Adobe Community Professional & MVP

                                      you're using _root.timer and _root.timer2 for the interval references in all you rollouts, correct?

                                      • 16. Re: setInterval or do I need a hit test?
                                        Techmaniac Level 1

                                        Yes, and I've even taken all clearIntervals out to see if that made a difference, but it didn't.

                                         

                                        on(rollOver){
                                            _root.DisplayText("adjustable");
                                            _root.DisplayTextBg(1);
                                        }
                                        on(rollOut){
                                            _root.timer = setInterval(_root.DisplayText,3000);
                                            _root.timer2 = setInterval(_root.DisplayTextBg(0),3000);
                                        }

                                         

                                         

                                        And tried moving the clearInterval to the top of the DisplayText function as well:

                                         

                                        import flash.filters.mx.transitions;
                                        import mx.transitions.Tween;
                                        import mx.transitions.easing.Strong;
                                        import flash.display.BitmapData;

                                         

                                        var timer;
                                        var timer2;
                                        var houseNumber:Number;
                                        var mcName:MovieClip;
                                        var linkageId:String;

                                         

                                        //Fade Function for movieclips
                                        MovieClip.prototype.fadeOut = function(time) {
                                        new Tween(this, '_alpha', Strong.easeOut, 100, 0, time, true);
                                        }

                                         

                                        varLoader = new LoadVars();
                                        stop();
                                        function DisplayTextBg(fade){
                                            clearInterval(_root.timer2);
                                            if (fade==1){
                                                for (i=0;i<100;i++){
                                                    textBg1._alpha += 1;
                                                }
                                            }else{
                                                textBg1._alpha = 0;
                                            }
                                        }
                                        function DisplayText(product){
                                            clearInterval(_root.timer);
                                            switch(product){
                                                case "fixed":
                                                    varLoader.load("fixed.txt");
                                                    break;
                                                case "adjustable":
                                                    varLoader.load("adjustable.txt");
                                                    break;
                                                case "possible":
                                                    varLoader.load("homepossible.txt");
                                                    break;
                                                case "reverse":
                                                    varLoader.load("reverse.txt");
                                                    break;
                                                case "equity":
                                                    varLoader.load("equity.txt");           
                                                    break;
                                                case "heloc":
                                                    varLoader.load("heloc.txt");
                                                    break;
                                                default:
                                                    prodIntro_text.htmlText = "";
                                                    prodTitle_text.htmlText = "";
                                            }
                                            varLoader.onLoad = function(){
                                                prodTitle_text.htmlText = varLoader.introHTML;
                                                prodIntro_text.htmlText = varLoader.prodHTML;
                                            }
                                           
                                        }

                                        • 17. Re: setInterval or do I need a hit test
                                          kglad Adobe Community Professional & MVP

                                          copy and paste the code from two different button rollouts.

                                          • 18. Re: setInterval or do I need a hit test
                                            Techmaniac Level 1

                                            I'll include the release code for each button as well:

                                             

                                            //equity house button code

                                             

                                            on(rollOver){
                                                _root.DisplayText("equity");
                                                _root.DisplayTextBg(1);
                                            }
                                            on(rollOut){
                                                _root.timer=setInterval(_root.DisplayText,3000);
                                                _root.timer2=setInterval(_root.DisplayTextBg,3000);
                                            }
                                            on(release){
                                                // determine location to add movieclip
                                                var middleX = this._x + 100;
                                                var middleY = this._y + 359; //existing mc Y
                                                // reposition the clip    
                                                _root.attachMovie("equityHouse_mc","equity1",second.getNextHighestDepth(),{_x:middleX,_y: middleY});
                                                _root.equity1._xscale = 1800;
                                                _root.equity1._yscale = _root.equity1._xscale;
                                                mx.transitions.TransitionManager.start(_root.equity1, {type:mx.transitions.Zoom, direction:mx.transitions.Transition.IN, duration:7, easing:mx.transitions.easing.Strong.easeOut});
                                                _root.houseNumber = 3;
                                                _root.mcName = "equity1";
                                                _root.linkageId = "fd6";
                                                _root.equity1.fadeOut(5);
                                                _root.gotoAndStop(2);
                                            }

                                             

                                            //heloc house button code

                                            on(rollOver){
                                                _root.DisplayText("heloc");
                                                _root.DisplayTextBg(1);

                                             

                                            }
                                            on(rollOut){
                                                timer=setInterval(_root.DisplayText,3000);
                                                timer2=setInterval(_root.DisplayTextBg,3000);
                                            }
                                            on(release){
                                                // determine location to add movieclip
                                                var middleX = this._x-200;
                                                var middleY = 339; //existing mc Y
                                                // reposition the clip    
                                                _root.attachMovie("helocHouse_mc","heloc1",second.getNextHighestDepth(),{_x:middleX,_y:mi ddleY});
                                                _root.heloc1._xscale = 1800;
                                                _root.heloc1._yscale = _root.heloc1._xscale;
                                                mx.transitions.TransitionManager.start(_root.heloc1, {type:mx.transitions.Zoom, direction:mx.transitions.Transition.IN, duration:4, easing:mx.transitions.easing.Strong.easeOut});
                                                _root.houseNumber = 3;
                                                _root.mcName = "heloc1";
                                                _root.linkageId = "fd5";
                                                _root.heloc1.fadeOut(5);
                                                _root.gotoAndStop(2);
                                            }

                                             

                                            The other 4 buttons mirror this code with the variation being the attachmovie names changed to protect the innocent.

                                            The second frame removes the movie clip with all houses and scales the attached movie clip with a fade at the end
                                            The second frame code is:

                                             

                                            function fadeFrame(mc:MovieClip) {
                                                mc._alpha -= 5;
                                                if (mc._alpha<=0) {

                                                    mc.alpha = 0;

                                                    gotoAndStop(3);
                                                }
                                            }
                                            var faded = setInterval(this, "trans", 1500);
                                            function trans() {
                                                clearInterval(faded);
                                                gotoAndStop(3);
                                            }

                                            Finally, after the movie clip had faded, the third frame is:

                                             

                                            import flash.display.BitmapData;

                                             

                                            var websort:Number;
                                            var rateFile:String;
                                            var dataLoader:LoadVars = new LoadVars();
                                            removeMovieClip(mcName);
                                            var pName:String = mcName.substr(0,mcName.length - 1);
                                            trace(pName);
                                                switch(pName){
                                                        case "fixed":
                                                            websort = 1;
                                                            break;
                                                        case "adjustable":
                                                            websort = 11;
                                                            break;
                                                        case "possible":
                                                            websort = 2;
                                                            break;
                                                        case "reverse":
                                                            websort = 3;
                                                            break;
                                                        case "equity":
                                                            websort = 5;
                                                            rateFile = "http://192.168.219.82/equity.asp";
                                                            break;
                                                        case "heloc":
                                                            websort = 6;
                                                            break;
                                                }
                                            dataLoader.ref = this;
                                            dataLoader.load(rateFile);

                                             

                                            var myBitmapData:BitmapData = BitmapData.loadBitmap(linkageId);
                                            //trace(myBitmapData instanceof BitmapData); // true

                                             

                                            var mc:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
                                            mc.attachBitmap(this.myBitmapData, mc.getNextHighestDepth());

                                             


                                            dataLoader.onLoad = function(success){
                                                if (success){
                                                    for(var i=0; i<websort; i++){
                                                        //trace(this.ref["cntr"]);
                                                                this.ref["Terms"].text = this["Terms"+i]
                                                                this.ref["Points"].text = this["Points"+i]
                                                                this.ref["Rate"].text = (this["Rate"+i]);
                                                                this.ref["Apr"].text = (this["Apr"+i]);
                                                                this.ref["Conditions"].text = (this["Conditions"+i]);
                                                    }
                                                } else {
                                                    trace("Error loading data");
                                                }
                                            }

                                            Which removed the scaled/faded house clip and loads a static image and data related to the product from the database.

                                            • 19. Re: setInterval or do I need a hit test
                                              kglad Adobe Community Professional & MVP

                                              you're not using the same interval names.

                                               

                                              _root.timer

                                               

                                              is not the same as

                                               

                                              timer

                                              • 20. Re: setInterval or do I need a hit test
                                                Techmaniac Level 1

                                                BINGO!  I had failed to add the _root to all the movieClip buttons, and that was causing the persistence issue.  Thanks for sticking with me KGlad.

                                                • 21. Re: setInterval or do I need a hit test
                                                  kglad Adobe Community Professional & MVP

                                                  you're welcome.