5 Replies Latest reply on Jun 15, 2009 8:13 AM by eapre

    When user enters and exits one movieclip, button changes color

    eapre

      Hello,

      I currently have a slideshow-style navigation site.  There are five buttons on the bottom and when the user clicks each button, it triggers a nested movieclip to play.  I would like the button to be highlighted when the corresponding movieclip is playing, but when they click another button and another movieclip plays, I want the button to go back to its original color.

       

      The problem is that the movieclips that are playing are nested two levels down and the buttons have to be on the main timeline.  I think I might need an event listener to see if a certain nested movieclip is playing, to know to change the button color.  It seems to easy but I can't figure it out, thanks for any help!

        • 1. Re: When user enters and exits one movieclip, button changes color
          clbeech Level 3

          there are a few different approaches to this type of issue, one would be to 'store' a index value in a property that is a reference to the currently playing clip, you could then use this index to highlight the corresponding button.  another approach is to store your instances within an array and depending on the currently playing index, which you can 'find' within the array by performing a loop and condition, use that index value to again set the correct button highlight.

           

          in both situations storing your button instances within an array is beneficial, since what you can do is iterate through the array to set any other 'non-in-use' button back to the default and then highlight the new active button - all this without a huge (what could be anyway) block of conditions to determine which state each button should be in.

          • 2. Re: When user enters and exits one movieclip, button changes color
            eapre Level 1

            Hi again,

            Thanks for the help.  I restructured my FLA so that I don't have nested movieclips, and I now have three movieclips with animation and audio on the main timeline. I assigned an index array for my buttons, and it does highlight the one that's clicked (the buttons are movieclips actually).  But now it won't play the movieclips when clicked (I set up three keyframes with the movieclips on the main timeline: content1, content2, and content3).  Here is my code:

             

            //nav buttons
            b1.onRelease = function() {
                gotoAndStop(1);
                stopAllSounds()
                activeBtn(this);
            };
            b2.onRelease = function() {
                gotoAndStop(2);
                stopAllSounds();
                activeBtn(this);
            };

             

            b3.onRelease = function() {
                gotoAndStop(3);
                stopAllSounds();
                activeBtn(this);
            };
            //array for highlighted button state
            var btns:Array = [b1, b2, b3];

             

            function activeBtn(mc:MovieClip):Void{
               for(var i:Number=0; i<btns.length; i++){
                  if(btns[i]!=mc){
                     btns[i].gotoAndStop("inactive");
                  }else{
                     btns[i].gotoAndStop("active");
                  }
               }  
            }

             

            Thanks for the help!

            • 3. Re: When user enters and exits one movieclip, button changes color
              eapre Level 1

              Durr, nevermind, I figured out a way to do it without an array now that I don't have nested movieclips, but thanks!

              • 4. Re: When user enters and exits one movieclip, button changes color
                Ned Murphy Adobe Community Professional & MVP

                When you pass 'this' to the function, your are passing a reference to the current timeline.  If the intent is to pass a reference to the button, then you should try just passing the button instance name.

                • 5. Re: When user enters and exits one movieclip, button changes color
                  eapre Level 1

                  Hi again!  Sorry, I keep changing my mind on whether I've figured this out or not.  Now I need the buttons to become disabled when they are highlighted and active.  I tried putting a:  btns[i].enabled = false;  in the else part of the for-else statement and it didn't work.  Where would I put that kind of code?  Thanks!

                   

                   

                  stop();
                  //attach sounds
                  Sound1 = new Sound();
                  Sound1.attachSound("Sound1");
                  Sound2 = new Sound();
                  Sound2.attachSound("Sound2");
                  Sound3 = new Sound();
                  Sound3.attachSound("Sound3");
                  //buttons
                  //nav buttons
                  b1.onRelease = function() {
                      gotoAndStop(1);
                      stopAllSounds()
                      activeBtn(b1);
                  };
                  b2.onRelease = function() {
                      gotoAndStop(2);
                      stopAllSounds();
                      activeBtn(b2);
                  };

                   

                  b3.onRelease = function() {
                      gotoAndStop(3);
                      stopAllSounds();
                      activeBtn(b3);
                  };
                  //array for highlighted button state
                  var btns:Array = [b1, b2, b3];

                   

                   

                   

                  function activeBtn(mc:MovieClip):Void{
                     for(var i:Number=0; i<btns.length; i++){
                        if(btns[i]!=mc){
                           btns[i].gotoAndStop("inactive");
                        }else{
                           btns[i].gotoAndStop("active");
                        }
                     } 
                  }