5 Replies Latest reply on Aug 18, 2006 4:55 PM by crazyjoemilan

    Toggle buttons

    Matt-R Level 1
      I have a map with about 5 layers that I want the user to be able to turn on and off. I have figured out how to do this with simple buttons I created. Each button includes a black circle with text to the right of the circle.

      I would like the buttons to act like toggle buttons so that the circle turn red when clicked and stays red until the user clicks it again to turn it off (kind of like a radio button).

      I have looked at the "simple button" component and "radio button" component but can't figure out how to make them work.

      Below is the action script I am currently using for a sample button:

      on (release) {
      c.trees._visible = !c.trees._visible;
      }

      Does anyone have any ideas how to do this with action script, or know how to use the button components?
        • 1. Re: Toggle buttons
          crazyjoemilan Level 2
          An easy solution would be to make an invisible button on top that toggles an action, and the image of the button be a movieclip below. (this is also a way to get smoother animations for your buttons).

          have the button on top turn on a variable when pressed, have the movieclip below (the image of the button) go to a different frame if the variable is >1 or something...

          on(release) {
          testVarA++
          }
          //below is the action for your mc, above for the button.
          if(this._parent.testVarA > 0) {
          this.gotoAndStop(4);
          }
          • 2. Re: Toggle buttons
            Matt-R Level 1
            Thanks for the reply.
            I kind of understand what you are suggesting. Please forgive me but I am relatively new to action script so I have a few more questions.

            The layers I want to show and hide are movie clips already on the stage so I don't need to go to a different frame after the user clicks. I just need to make the movie clip visible or invisible. I am not sure if this makes a difference in your idea. Would the code for the mc be: (trees is the mc name)

            if(this._parent.testVarA > 0) {
            c.trees._visible = !c.trees._visible;
            }

            I am also a little confused as to what code I use for the invisible button.
            What is:
            testVarA++

            Is that just a name you made up or does it actually do something?
            How do I get the button to toggle an action assuming I want the action to be changing the color of the circle?

            Thanks again!
            • 3. Re: Toggle buttons
              crazyjoemilan Level 2
              I ignored your invisible layers because you said they were working properly. We'll have to add that code to the "invsibile button" along with our "testVarA" code.

              I also read over your post too fast, so I explained poorly. I'll try again!!

              Make a square. Turn it into a button. Double click the button, and create a keyframe under the "hit" area. Delete the "up" keyframe. So your button only has a hit area. (does this make sense)?

              Go back one timeline, and you'll see your box is now 50% transparent, and an aqua color. It works just like a button, but its invisible to the viewer. So now you'll create what your button will look like by making a movie clip that will sit right below the previously created button. Give it two frames, one with each state of the button. (make sure you add "stop();" to the first frame).

              Now you just need to code your button to both control the visibility of the trees, and the state of the movie clip.

              "testVarA++" takes the variable "testVarA" and adds 1. I was essentially giving you a "visited" button, but I didn't realize you wanted to turn it off as well. The good news is, you won't need this with what you're trying to do :)
              • 4. Re: Toggle buttons
                Matt-R Level 1
                I think I am getting closer!
                I have created the invisible button and it controls the visibility of the "trees" mc.

                However I am still a little confused with making the invisible button control the state of the movie clip under it.
                I have a mc under the invisible button consisting of 2 frames with "stop();" in the first frame. I named the mc "toggleMC".

                The code for the invisible button so far is:
                on(release) {
                c.trees._visible = !c.trees._visible;
                }

                Do I need to add more code to link it to the mc under it?
                Do I need to add code to the mc?

                Thanks so much for your help.
                • 5. Toggle buttons
                  crazyjoemilan Level 2
                  awww, I typed all this out and waited too long to hit the reply button. I'll give you half the code...

                  on(release) {
                  c.trees._visible = !c.trees._visible;
                  //here you'll need the code to swap between frames: here is some slightly more complicated, but more undestandable code...
                  if (treeVar == "off") {
                  this.toggleMC.gotoAndStop(1);
                  treeVar = "on"
                  }
                  else if(treeVar == "on") {
                  this.toggleMC.gotoAndStop(2);
                  treeVar = "off"
                  }

                  Anyway, there is probably a million ways to do this, some easier than this, but if I was coding quickstyle, this is what I'd probably do.

                  Helpy.